/* ============================================================
   DUA — shared site stylesheet (Ballena "Paisana" DNA)
   ============================================================ */
:root{
  --sand:#F8F2E5; --bone:#EFE8D8; --ink:#0B0E0C; --ink-soft:#3A3A34;
  --clay:#C15F3C; --clay-deep:#A84E2E; --olive:#8B9B7A;
  --line:rgba(11,14,12,.16);
  --disp:'Jost',sans-serif; --body:'Hanken Grotesk',sans-serif; --serif:'Fraunces',serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--sand);color:var(--ink);font-family:var(--body);font-weight:400;line-height:1.55;overflow-x:hidden}
body.is-loading{overflow:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--clay);color:var(--sand)}

/* ---- type ---- */
.eyebrow{font-family:var(--disp);font-weight:500;text-transform:uppercase;letter-spacing:.32em;font-size:.72rem}
.display{font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:.98;letter-spacing:.02em}
.h-mono{font-size:clamp(2.6rem,7vw,6rem)}
.h-big{font-size:clamp(2.1rem,5.4vw,4.6rem)}
.lede{font-size:clamp(1rem,1.3vw,1.18rem);max-width:46ch;color:var(--ink-soft);font-weight:300}

/* ---- word-split reveal (Paisana) ---- */
.word{display:inline-block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em;vertical-align:top}
.word-inner,.hero__word-inner{display:inline-block;will-change:transform}
.js-split{will-change:transform}

/* soft reveal fallback for non-JS / reduced motion handled by motion.js */
.reveal{will-change:transform,opacity}

/* ---- skiper link (Skiper UI free; attribution in footer) ---- */
.s-link{position:relative;display:inline-block}
.s-link::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:center;transition:transform .5s var(--ease)}
.s-link:hover::after{transform:scaleX(1)}

/* ---- circle-arrow CTA ---- */
.cta-row{display:inline-flex;align-items:center;gap:.85rem;font-family:var(--disp);text-transform:uppercase;letter-spacing:.2em;font-size:.74rem;font-weight:500;cursor:pointer}
.cta-row .dot{width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--sand);display:grid;place-items:center;transition:transform .5s var(--ease),background .4s}
.cta-row:hover .dot{transform:rotate(45deg) scale(1.06);background:var(--clay)}
.cta-row .dot svg{width:15px;height:15px}

/* ---- outline pill book button (only pill in the system) ---- */
.btn-book{display:inline-block;font-family:var(--disp);text-transform:uppercase;letter-spacing:.22em;font-size:.68rem;font-weight:500;
  padding:.7rem 1.2rem;border:1px solid currentColor;border-radius:2px;transition:.45s var(--ease);position:relative;overflow:hidden;z-index:0}
.btn-book::before{content:"";position:absolute;inset:0;background:var(--clay);transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1}
.btn-book:hover{color:var(--sand);border-color:var(--clay)}
.btn-book:hover::before{transform:translateY(0)}

/* ============================================================
   PRELOADER (intro)
   ============================================================ */
#preloader{position:fixed;inset:0;z-index:200;background:var(--sand);display:grid;place-items:center;will-change:clip-path}
.pre__row{display:flex;align-items:center;gap:1.1rem;color:var(--ink)}
.pre__phrase{overflow:hidden}
.pre__phrase-inner{display:block;font-family:var(--disp);text-transform:uppercase;letter-spacing:.34em;font-size:clamp(.6rem,1.4vw,.82rem);font-weight:500}
.pre__logo{overflow:hidden;width:4px}
.pre__logo-inner{display:block;height:clamp(34px,5vw,58px)}
.pre__logo-inner img{height:100%;width:auto}

/* ============================================================
   ADAPTIVE FRAMED NAV
   ============================================================ */
.nav{position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(1180px,94vw);z-index:100;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:.85rem 1.1rem;border:1px solid var(--nav-line,rgba(248,242,229,.28));border-top:none;
  background:var(--nav-bg,rgba(11,14,12,.18));backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  color:var(--nav-fg,#F8F2E5);transition:background .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease)}
.nav-left{justify-self:start}
.nav-logo{justify-self:center;height:30px}
.nav-logo img{height:100%;width:auto;filter:var(--logo-filter,invert(1) brightness(1.7))}
.nav-right{justify-self:end;display:flex;align-items:center;gap:1.3rem}
.nav-menu-link{font-family:var(--disp);text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;font-weight:500}
@media(max-width:520px){.nav-right{gap:.85rem}.nav-menu-link{font-size:.62rem;letter-spacing:.12em}}
.burger{width:34px;height:34px;display:grid;place-content:center;gap:6px;cursor:pointer;background:none;border:none;color:inherit}
.burger span{display:block;width:26px;height:1.5px;background:currentColor;transition:.4s var(--ease)}
.nav.open .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.menu-panel{position:fixed;inset:0;z-index:99;background:var(--ink);color:var(--sand);display:flex;flex-direction:column;justify-content:center;padding:0 8vw;clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease);pointer-events:none}
.menu-panel.show{clip-path:inset(0 0 0 0);pointer-events:auto}
.menu-panel nav a{font-family:var(--disp);text-transform:uppercase;font-weight:300;letter-spacing:.02em;font-size:clamp(2rem,7vw,4.5rem);line-height:1.18;display:block;color:var(--sand);opacity:.85;transition:.4s}
.menu-panel nav a:hover{opacity:1;color:var(--clay);padding-left:.4rem}
.menu-meta{margin-top:3rem;display:flex;gap:2.5rem;flex-wrap:wrap;font-size:.85rem;color:rgba(248,242,229,.6)}

/* ============================================================
   HERO (block-hero)
   ============================================================ */
.block-hero{position:relative;height:100svh;min-height:600px;overflow:hidden;display:grid;place-items:center;background:var(--ink)}
.hero__bg{position:absolute;inset:0}
.hero__bg video,.hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.block-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,12,.45) 0%,rgba(11,14,12,.12) 35%,rgba(11,14,12,.5) 100%)}
.hero__inner{position:relative;z-index:2;text-align:center;color:var(--sand);padding:0 1.5rem;max-width:min(90%,720px);margin:0 auto}
.hero__title{font-size:clamp(2.2rem,6vw,5.2rem);will-change:transform}
.hero__sub{margin-top:1.6rem;font-family:var(--disp);text-transform:uppercase;letter-spacing:.34em;font-size:.74rem;opacity:0;transition:opacity 1s var(--ease)}
.block-hero.is-animated .hero__sub{opacity:.85}
/* cursor light-mask differentiator (desktop) */
.block-hero.cursor-live::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(248,242,229,.16),transparent 60%);mix-blend-mode:screen;opacity:1;transition:opacity .5s}
.scroll-cue{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:3;color:var(--sand);font-family:var(--disp);text-transform:uppercase;letter-spacing:.3em;font-size:.6rem;opacity:0;display:flex;flex-direction:column;align-items:center;gap:.6rem;transition:opacity 1s}
.block-hero.is-animated .scroll-cue{opacity:.85}
.scroll-cue .bar{width:1px;height:34px;background:var(--sand);transform-origin:top;animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0)}40%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---- hero-simple (inner pages) ---- */
.hero-simple{position:relative;min-height:64vh;display:grid;place-items:center;overflow:hidden;background:var(--ink);text-align:center;color:var(--sand)}
.hero-simple .block-hero-simple__background,.hero-simple img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.hero-simple::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,12,.5),rgba(11,14,12,.55))}
.hero-simple .inner{position:relative;z-index:2;padding:9rem 1.5rem 4rem;max-width:min(92%,820px);margin:0 auto}
.hero-simple h1{font-size:clamp(2rem,5.2vw,4.4rem)}
.hero-simple .crumb{font-family:var(--disp);text-transform:uppercase;letter-spacing:.3em;font-size:.66rem;opacity:.7;margin-bottom:1.2rem}

/* ============================================================
   STATEMENT / media-intro
   ============================================================ */
.statement{position:relative;min-height:108vh;display:grid;align-items:center;overflow:hidden}
.statement .block-full-image__image,.statement>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.statement::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,12,.5),rgba(11,14,12,.15) 40%,rgba(11,14,12,.6))}
.statement .wrap{position:relative;z-index:2;width:min(1180px,92vw);margin:0 auto;color:var(--sand)}
.statement h2{max-width:14ch}
.statement .foot{position:absolute;right:0;bottom:6vh;max-width:340px;text-align:left}
.statement .foot p{font-size:.92rem;color:rgba(248,242,229,.82);margin-bottom:1.1rem;font-weight:300}

/* ============================================================
   SPLIT (menu) — diagonal
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:90vh}
.split .imgcol{position:relative;background:var(--ink);overflow:hidden}
.split .imgcol img{width:100%;height:100%;object-fit:cover;clip-path:polygon(0 0,100% 0,100% 78%,0 100%)}
.split .claycol{background:var(--clay);color:var(--sand);display:flex;flex-direction:column;justify-content:center;padding:7vh 6vw}
.split .claycol h2{margin:.5rem 0 1.6rem}
.split .claycol p{max-width:40ch;color:rgba(248,242,229,.9);margin-bottom:2rem;font-weight:300}

/* ============================================================
   SLIDER / cards
   ============================================================ */
.slider-sec{padding:8vh 0 9vh}
.slider-head{width:min(1180px,92vw);margin:0 auto 3vh;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.slider-head h2{max-width:16ch}
.rail{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 max(4vw,calc((100vw - 1180px)/2)) 1.5rem;-ms-overflow-style:none;scrollbar-width:none;cursor:grab}
.rail.dragging{cursor:grabbing;scroll-snap-type:none}
.rail::-webkit-scrollbar{display:none}
.card{flex:0 0 clamp(280px,34vw,420px);scroll-snap-align:start;position:relative;border-radius:2px;overflow:hidden;background:var(--ink);aspect-ratio:3/4.1}
.card img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover img{transform:scale(1.06)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,12,0) 40%,rgba(11,14,12,.85))}
.card .meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.6rem;color:var(--sand)}
.card .meta .k{font-family:var(--disp);text-transform:uppercase;letter-spacing:.06em;font-size:1.35rem}
.card .meta p{font-size:.86rem;color:rgba(248,242,229,.78);margin:.4rem 0 1rem;font-weight:300}
.slider-ctrl{width:min(1180px,92vw);margin:2.4rem auto 0;display:flex;align-items:center;gap:1.2rem}
.slider-ctrl button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer;display:grid;place-items:center;transition:.4s var(--ease)}
.slider-ctrl button:hover{background:var(--ink);color:var(--sand);border-color:var(--ink)}
.slider-ctrl button svg{width:16px;height:16px}
.track{flex:1;height:1px;background:var(--line);position:relative}
.track .fill{position:absolute;left:0;top:0;height:100%;background:var(--ink);width:25%;transition:width .3s,left .3s}

/* ============================================================
   ABOUT / editorial
   ============================================================ */
.about{width:min(1180px,92vw);margin:0 auto;padding:11vh 0;display:grid;grid-template-columns:.85fr 1fr;gap:5vw;align-items:center}
.about .ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink)}
.about .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.about h2{margin-bottom:1.6rem}

/* ============================================================
   CONTACT (olive panel)
   ============================================================ */
.contact{position:relative;min-height:88vh;display:grid;place-items:center;overflow:hidden}
.contact>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.contact img.contact__mark{position:absolute;inset:auto;top:17vh;left:50%;transform:translateX(-50%);z-index:3;
  height:clamp(40px,4.6vw,58px);width:auto;object-fit:contain;
  filter:invert(1) brightness(1.85);opacity:.95;pointer-events:none}
@media(max-width:860px){.contact img.contact__mark{top:10vh;height:clamp(34px,7vw,44px)}}
.contact .panel{position:relative;z-index:2;width:min(1100px,92vw);background:rgba(139,155,122,.92);backdrop-filter:blur(2px);color:var(--sand);padding:7vh 6vw;display:grid;grid-template-columns:1fr 1fr;gap:3vw;align-items:end}
.contact h2{max-width:12ch}
.contact .info div{margin-bottom:1.3rem}
.contact .info .lab{font-family:var(--disp);text-transform:uppercase;letter-spacing:.22em;font-size:.66rem;opacity:.75;margin-bottom:.25rem}
.contact .info .val{font-size:1.02rem;font-weight:300}

/* ============================================================
   GALLERY GRID (gallery page)
   ============================================================ */
.gallery-grid{width:min(1320px,94vw);margin:0 auto;padding:5vh 0 10vh;columns:3;column-gap:1.1rem}
.gallery-grid figure{break-inside:avoid;margin:0 0 1.1rem;overflow:hidden;background:var(--ink)}
.gallery-grid img{width:100%;height:auto;transition:transform 1s var(--ease)}
.gallery-grid figure:hover img{transform:scale(1.05)}

/* ============================================================
   MENU LIST (menu page)
   ============================================================ */
.menu-wrap{width:min(1000px,92vw);margin:0 auto;padding:6vh 0 10vh}
.menu-cat{margin-bottom:5vh}
.menu-cat h3{font-family:var(--disp);text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.6rem,3vw,2.4rem);color:var(--clay);margin-bottom:2rem;border-bottom:1px solid var(--line);padding-bottom:1rem}
.menu-item{display:flex;justify-content:space-between;gap:2rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.menu-item .nm{font-family:var(--disp);text-transform:uppercase;letter-spacing:.04em;font-size:1.05rem}
.menu-item .ds{font-size:.9rem;color:var(--ink-soft);font-weight:300;margin-top:.25rem;max-width:54ch}
.menu-item .pr{font-family:var(--serif);font-size:1.1rem;white-space:nowrap}
/* per-category photo (their site inserted a pic in each category) */
.menu-cat__photo{aspect-ratio:16/6;overflow:hidden;border-radius:2px;margin-bottom:2.2rem;background:var(--ink)}
.menu-cat__photo img{width:100%;height:100%;object-fit:cover}
/* sub-group label inside a category (Add Protein, Sides, Add-Ons) */
.menu-sub{font-family:var(--disp);text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;font-weight:500;color:var(--clay);margin:2rem 0 1rem}
/* inline flavor chips (hookah) */
.flavors{display:flex;flex-wrap:wrap;gap:.55rem;margin:.3rem 0 .4rem}
.flavors span{font-family:var(--disp);text-transform:uppercase;letter-spacing:.06em;font-size:.74rem;color:var(--ink-soft);border:1px solid var(--line);padding:.36rem .7rem;border-radius:2px}
/* house-rules note block */
.menu-note{background:var(--bone);border-left:2px solid var(--clay);padding:1.2rem 1.4rem;margin-top:1.8rem;font-size:.86rem;color:var(--ink-soft);line-height:1.7;font-weight:300}
.menu-note b{color:var(--ink);font-weight:500}
/* after-dark menu block (cocktails / hookah / wine) */
.menu-dark{background:var(--ink);color:var(--sand)}
.menu-dark .menu-item{border-color:rgba(248,242,229,.14)}
.menu-dark .menu-item .nm{color:var(--sand)}
.menu-dark .menu-item .ds{color:rgba(248,242,229,.58)}
.menu-dark .menu-item .pr{color:var(--sand)}
.menu-dark .menu-cat h3{border-color:rgba(248,242,229,.16)}
.menu-dark .flavors span{color:rgba(248,242,229,.82);border-color:rgba(248,242,229,.22)}
.menu-dark .menu-note{background:rgba(248,242,229,.05);color:rgba(248,242,229,.72)}
.menu-dark .menu-note b{color:var(--sand)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{padding:9vh 0 0}
.footer .ftop{width:min(1180px,92vw);margin:0 auto;display:grid;grid-template-columns:.7fr 1fr 1fr;gap:4vw;padding-bottom:7vh;border-bottom:1px solid var(--line)}
.footer .photo{aspect-ratio:3/4;overflow:hidden;background:var(--ink)}
.footer .photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2)}
.footer .about-col p{font-size:.95rem;color:var(--ink-soft);max-width:34ch;font-weight:300;margin-bottom:1.4rem}
.footer .cols{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.footer h4{font-family:var(--disp);text-transform:uppercase;letter-spacing:.24em;font-size:.66rem;color:var(--ink-soft);margin-bottom:1.6rem}
.footer .cols a,.footer .cols .li{display:block;font-family:var(--disp);text-transform:uppercase;letter-spacing:.05em;font-size:.92rem;margin-bottom:.9rem}
.nl input{width:100%;background:none;border:none;border-bottom:1px solid var(--line);padding:.6rem 0;font-family:var(--body);font-size:.95rem;margin-bottom:1.2rem;color:var(--ink)}
.nl input::placeholder{color:var(--ink-soft);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem}
.nl input:focus{outline:none;border-color:var(--clay)}
.wordmark{font-family:var(--serif);font-weight:300;text-transform:uppercase;font-size:clamp(5rem,26vw,21rem);line-height:.8;letter-spacing:-.01em;text-align:center;color:var(--ink);overflow:hidden;white-space:nowrap;padding-top:4vh}
.legal{width:min(1180px,92vw);margin:0 auto;padding:2.5rem 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.74rem;color:var(--ink-soft);letter-spacing:.04em}
.legal a{color:var(--clay);text-decoration:none}
.legal a:hover{color:var(--clay-deep)}

/* ============================================================
   STANDALONE full-bleed media section (inner-page closers/breaks)
   ============================================================ */
.block-full-image .block-full-image__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.block-full-image:not(.statement){position:relative;min-height:88vh;display:grid;place-items:center;overflow:hidden}
.block-full-image:not(.statement)::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,12,.5),rgba(11,14,12,.2) 45%,rgba(11,14,12,.6))}
.block-full-image:not(.statement) .inner{position:relative;z-index:2;text-align:center;color:var(--sand);padding:6rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.block-full-image:not(.statement) .inner h2{font-size:clamp(2.2rem,6vw,4.5rem)}

/* global eyebrow crumb (used outside hero-simple too) */
.crumb{font-family:var(--disp);text-transform:uppercase;letter-spacing:.3em;font-size:.66rem;font-weight:500}

/* ============================================================
   EVENTS area selector
   ============================================================ */
.area-tab{position:relative}
.area-tab.is-active{color:var(--ink)!important}
.area-panel{animation:fadeUp .5s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ============================================================
   LOCATION map
   ============================================================ */
.map-section{width:min(1320px,94vw);margin:0 auto;padding:2vh 0 9vh}
.map-shell{position:relative;height:60vh;min-height:360px;background:var(--bone);overflow:hidden;border:1px solid var(--line)}
.map-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;text-align:center;padding:2rem}
.map-meta p{font-size:1.05rem;color:var(--ink-soft);margin-top:.45rem;font-weight:300}
.map-shell iframe{display:block;width:100%;height:100%;border:0}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:860px){
  .areas-grid{grid-template-columns:1fr!important;gap:2.5rem!important}
}
@media(max-width:860px){
  .nav{width:94vw;padding:.7rem .85rem;grid-template-columns:auto 1fr auto}
  .nav-left .btn-book{padding:.55rem .8rem;font-size:.6rem}
  .nav-logo{height:24px}
  .split{grid-template-columns:1fr}
  .split .imgcol{min-height:48vh;order:-1}
  .split .imgcol img{clip-path:polygon(0 0,100% 0,100% 88%,0 100%)}
  .about{grid-template-columns:1fr;gap:2.5rem;padding:8vh 0}
  .about .ph{max-width:78%}
  .contact .panel{grid-template-columns:1fr;gap:2.5rem;padding:6vh 7vw}
  .statement .foot{position:relative;bottom:auto;right:auto;margin-top:2.5rem;max-width:none}
  .statement{min-height:96vh}
  .footer .ftop{grid-template-columns:1fr;gap:2.5rem}
  .footer .photo{max-width:62%}
  .slider-ctrl .track{display:none}
  .gallery-grid{columns:2}
}
@media(max-width:600px){
  .hero__title{font-size:clamp(1.9rem,7.4vw,2.8rem)}
  .hero__sub{letter-spacing:.2em;font-size:.62rem}
  .hero-simple h1{font-size:clamp(1.75rem,6.4vw,2.5rem)}
  .hero-simple .crumb{font-size:.6rem}
  .h-mono{font-size:clamp(2rem,8.4vw,3.1rem)}
  .h-big{font-size:clamp(1.8rem,7vw,2.7rem)}
}
@media(max-width:480px){
  .menu-meta{gap:1.2rem}
  .gallery-grid{columns:1}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important}}