/* ============== HEADER ============== */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:18px var(--gut);
  transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease);
}
.site-header.is-solid{background:var(--cream);box-shadow:0 1px 0 rgba(10,13,13,.1);padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:14px;z-index:2}
.brand .logo-img{height:56px;width:auto;transition:height .4s var(--ease)}
.is-solid .brand .logo-img{height:48px}
.nav{display:flex;align-items:center;gap:34px}
.nav a.navlink{
  font-family:var(--f-sub);text-transform:uppercase;letter-spacing:.08em;font-size:1rem;
  color:var(--cream);position:relative;padding:4px 0;transition:color .3s;
}
.nav a.navlink::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:currentColor;transition:width .3s var(--ease)}
.nav a.navlink:hover::after,.nav a.navlink:focus-visible::after{width:100%}
.is-solid .nav a.navlink{color:var(--ink)}
.is-solid .nav .btn-res{background:var(--red);color:var(--cream)}
.nav .btn-res{background:var(--cream);color:var(--ink);padding:.7em 1.45em;border-radius:999px;font-size:1rem;transition:transform .25s var(--ease),background .3s,color .3s}
.nav .btn-res:hover{transform:translateY(-2px)}
.hdr-reserve-mobile{display:none;font-family:var(--f-sub);text-transform:uppercase;letter-spacing:.06em;
  font-size:.82rem;padding:.48em 1.1em;border-radius:999px;background:var(--cream);color:var(--ink);
  white-space:nowrap;transition:transform .25s var(--ease),background .3s,color .3s;align-items:center;z-index:2}
.hdr-reserve-mobile:hover{transform:translateY(-2px)}
.site-header.is-solid .hdr-reserve-mobile{background:var(--red);color:var(--cream)}
.burger{display:none;width:42px;height:42px;flex-direction:column;justify-content:center;gap:6px;z-index:2}
.burger span{display:block;height:2px;width:26px;background:var(--cream);transition:.3s var(--ease)}
.is-solid .burger span{background:var(--ink)}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:55;background:var(--ink);color:var(--cream);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--gut);
  transform:translateX(100%);transition:transform .45s var(--ease);visibility:hidden;
}
.drawer.open{transform:none;visibility:visible}
.drawer a{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(2.5rem,11vw,4rem);line-height:1.04;color:var(--cream);transition:color .25s}
.drawer a:hover{color:var(--red)}
.drawer .draw-foot{margin-top:34px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(252,252,252,.55);line-height:2}

/* ============== HERO ============== */
.hero{min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--ink)}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg .asset,.hero .bg img{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s var(--ease)}
.hero .bg img.show{opacity:1}
.hero .bg::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,13,13,.5) 0%,rgba(10,13,13,.12) 30%,rgba(10,13,13,.74) 100%),linear-gradient(75deg,rgba(10,13,13,.6) 0%,rgba(10,13,13,.15) 50%,transparent 70%)}
.hero .inner{position:relative;z-index:5;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.hero .eyebrow{color:var(--cream);opacity:.92;margin-bottom:22px}
.hero h1{
  font-family:var(--f-display);color:var(--cream);text-transform:uppercase;
  font-size:clamp(2.6rem,7.1vw,7.4rem);line-height:.84;letter-spacing:.004em;
  text-wrap:balance;max-width:15ch;
}
.hero h1 .amp{color:var(--red);-webkit-text-stroke:0.5px var(--cream)}
.hero .lede{color:var(--cream);max-width:48ch;margin:26px 0 30px;opacity:.94}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* drifting glasses in hero */
.hero .drift{z-index:4}
.g-ancha{width:clamp(150px,17vw,290px);aspect-ratio:305.6/512}
.g-larga{width:clamp(110px,12vw,210px);aspect-ratio:227.8/512}
.hero .d-ancha{right:6%;bottom:-3%;transform:rotate(-13deg) translateX(-26px);transition:transform 1.2s var(--ease)}
.hero .d-larga{right:17%;bottom:14%;transform:rotate(12deg) translateX(24px);transition:transform 1.2s var(--ease);opacity:.62}
.hero.parted .d-ancha{transform:rotate(0deg) translateX(22px)}
.hero.parted .d-larga{transform:rotate(0deg) translateX(-22px)}
.scrollcue{position:absolute;left:var(--gut);bottom:30px;z-index:5;font-family:var(--f-mono);
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cream);opacity:.7;
  display:flex;align-items:center;gap:10px}
.scrollcue .ln{width:42px;height:1px;background:currentColor;transform-origin:left;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%,100%{transform:scaleX(.4);opacity:.4}50%{transform:scaleX(1);opacity:1}}

/* ============== ETHOS ============== */
.ethos{overflow:hidden}
.ethos .inner{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:center}
.ethos h2{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(2.4rem,5.6vw,5rem);line-height:.9;text-wrap:balance}
.ethos .body p{font-size:clamp(1.15rem,1.6vw,1.42rem);line-height:1.5}
.ethos .body p + p{margin-top:1em}
.ethos .mano{width:clamp(80px,9vw,150px);margin-bottom:18px}
.ethos .mano img{filter:brightness(0) invert(1);transform-origin:58% 92%;animation:chinchin 4.2s ease-in-out infinite}
@keyframes chinchin{0%,58%,100%{transform:rotate(0deg)}8%{transform:rotate(-11deg)}16%{transform:rotate(-3deg)}24%{transform:rotate(-12deg)}32%{transform:rotate(-4deg)}40%{transform:rotate(-9deg)}}
@media (prefers-reduced-motion:reduce){.ethos .mano img{animation:none}}

/* ============== MENU TEASER ============== */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(34px,5vw,64px)}
.section-head .cat-heading{font-size:clamp(2.6rem,7vw,6rem)}
.section-head .eyebrow{color:var(--red)}
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px)}
.tcard{position:relative;display:flex;flex-direction:column;aspect-ratio:1/1;border-radius:4px;overflow:hidden;
  padding:clamp(20px,2.2vw,32px);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.tcard:hover{transform:translateY(-6px);box-shadow:0 22px 48px -22px rgba(10,13,13,.4)}
.tcard .kind{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;opacity:.85}
.tcard h3{font-size:clamp(2rem,2.6vw,2.9rem);line-height:.86;margin:16px 0 12px;--stroke-w:1px;--offx:2.5px;--offy:2.5px}
.tcard .desc{font-size:1.05rem;line-height:1.45;max-width:26ch;opacity:.92}
.tcard .trow{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.tcard .price{font-family:var(--f-mono);font-size:1.15rem}
.tcard .gl{width:30px;height:auto;opacity:.9}
.tcard.t-red{background:var(--red);color:var(--cream)}
.tcard.t-green{background:var(--green);color:var(--ink)}
.tcard.t-ink{background:var(--ink);color:var(--cream)}
.tcard.t-cream{background:var(--white);color:var(--ink);border:1.5px solid rgba(10,13,13,.12)}
.tcard .art{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;margin:10px 0}
.tcard .art img{height:100%;max-height:175px;width:auto;filter:drop-shadow(0 14px 22px rgba(0,0,0,.28))}
.menu-cta{margin-top:clamp(34px,4vw,52px);display:flex;justify-content:center}

/* ============== GALLERY ============== */
.gallery{background:var(--cream-2)}
.gal-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:11vw;gap:clamp(10px,1.4vw,18px)}
.gal-grid .asset{border-radius:3px;cursor:pointer;transition:transform .4s var(--ease)}
.gal-grid .asset:hover{transform:scale(.985)}
.gal-grid .asset img{width:100%;height:100%;object-fit:cover}
.g1{grid-column:1/6;grid-row:1/3}
.g2{grid-column:6/9;grid-row:1/2}
.g3{grid-column:9/13;grid-row:1/3}
.g4{grid-column:6/9;grid-row:2/4}
.g5{grid-column:1/4;grid-row:3/5}
.g6{grid-column:4/6;grid-row:3/4}
.g7{grid-column:9/13;grid-row:3/5}
.g8{grid-column:4/9;grid-row:4/5}

/* ============== EVENTS TEASER ============== */
.events{overflow:hidden}
.events .inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.events .copy h2{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(2.4rem,5.6vw,5.2rem);line-height:.88;text-wrap:balance}
.events .copy p{margin:22px 0 28px;max-width:42ch;font-size:1.2rem}
.events .pic{aspect-ratio:5/4;position:relative}
.events .pic .drift{z-index:3}

/* ============== VISIT ============== */
.visit .inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:stretch}
.visit .info{display:flex;flex-direction:column;gap:30px}
.visit .info .cat-heading{font-size:clamp(2.4rem,5.5vw,4.6rem)}
.vrow{border-top:1.5px solid rgba(10,13,13,.16);padding-top:14px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline}
.vrow .k{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.vrow .v{font-size:1.15rem;line-height:1.5}
.vrow .v a:hover{color:var(--red)}
.visit .mapwrap{position:relative;min-height:340px;border-radius:5px;overflow:hidden;border:1.5px solid rgba(10,13,13,.14)}
.visit .mapwrap iframe{position:absolute;inset:0;width:100%;height:100%}

/* ============== FOOTER ============== */
.site-footer{background:var(--ink);color:var(--cream);padding-block:clamp(56px,7vw,90px);position:relative;overflow:hidden}
.site-footer .wrap{position:relative;z-index:1}

/* brand decor */
.star{position:absolute;pointer-events:none;z-index:4;color:var(--cream);opacity:.92}
.star svg{width:100%;height:100%;display:block}
.star path{fill:currentColor}
.twinkle{animation:twinkle var(--dur,4.5s) ease-in-out infinite;animation-delay:var(--delay,0s)}
@keyframes twinkle{0%,100%{opacity:.4;transform:scale(.82) rotate(0deg)}50%{opacity:1;transform:scale(1.08) rotate(20deg)}}
.hero-hand{position:absolute;z-index:4;pointer-events:none}
.hero-hand img{filter:brightness(0) invert(1);opacity:.9}
.watermark{position:absolute;pointer-events:none;z-index:0}
.watermark img{width:100%;height:auto;display:block;opacity:.08}
@media (prefers-reduced-motion:reduce){.twinkle{animation:none}}
.foot-top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px;align-items:start}
.foot-mark .logo-img{height:64px;width:auto;filter:brightness(0) invert(1)}
.foot-mark p{margin-top:18px;max-width:30ch;opacity:.8;font-size:1rem}
.foot-col h4{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;opacity:.6;margin-bottom:16px}
.foot-col a,.foot-col p{display:block;font-size:1.1rem;line-height:1.9;opacity:.92}
.foot-col a:hover{color:var(--red);opacity:1}
.foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:54px;padding-top:22px;
  border-top:1px solid rgba(252,252,252,.16);font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;opacity:.65}

/* ============== RESPONSIVE ============== */
@media (max-width:960px){
  .nav{display:none}
  .burger{display:flex}
  .hdr-reserve-mobile{display:inline-flex;margin-left:auto;margin-right:14px;font-size:.9rem;padding:.56em 1.3em}
  .burger{display:flex;width:46px;height:46px}
  .site-header{gap:0}
  .menu-grid{grid-template-columns:repeat(2,1fr)}
  .ethos .inner,.events .inner,.visit .inner{grid-template-columns:1fr;gap:34px}
  .foot-top{grid-template-columns:1fr 1fr;gap:34px}
  .foot-mark{grid-column:1/-1}
  .gal-grid{grid-auto-rows:24vw}
  .eyebrow{font-size:.68rem;letter-spacing:.22em}
  .events .copy p.eyebrow{font-size:.68rem}
}
@media (max-width:560px){
  .hero h1{font-size:4.2rem}
  .menu-grid{grid-template-columns:1fr}
  .tcard{aspect-ratio:5/3}
  .foot-top{grid-template-columns:1fr}
  .gal-grid{grid-template-columns:repeat(6,1fr);grid-auto-rows:30vw}
  .g1{grid-column:1/7;grid-row:1/2}.g2{grid-column:1/4;grid-row:2/3}.g3{grid-column:4/7;grid-row:2/3}
  .g4{grid-column:1/7;grid-row:3/4}.g5{grid-column:1/4;grid-row:4/5}.g6{grid-column:4/7;grid-row:4/5}
  .g7{grid-column:1/7;grid-row:5/6}.g8{grid-column:1/7;grid-row:6/7}
  .hero .d-ancha{right:-3%;bottom:-6%}
  .hero .d-larga{right:8%;bottom:8%;opacity:.5}
  .star.s1{right:44%;top:73%}
  .star.s2{right:48%;top:82%}
  .star.s-top{right:46%;top:77%}
}