/* WG Restaurant Ksamil, concept by KERA Tech Solutions.
   Rebuilt on the structure of restaurant-amici.com: rem scales with the viewport
   (1rem = 10px at 1440 desktop, 428/768/1024 reference widths below). */

:root{
  --cream:#F7EDDF; --white:#FFFAF4; --accent:#1D5470; --deep:#173E55; --ink:#10222E;
  --coral:#F2A48D; --lemon:#F1D46A; --sea:#A9D8CE;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --stagger:.02s;
  --size:428; --pc:2.5rem; --fh:0px;
  --fr:"Fraunces", Georgia, serif;
  --mo:"Montserrat", "Helvetica Neue", Arial, sans-serif;
}
@media (min-width:768px){:root{--size:768;--pc:2rem}}
@media (min-width:1024px){:root{--size:1024}}
@media (min-width:1200px) and (hover:hover){:root{--size:1440}}

*,*::before,*::after{box-sizing:border-box}
html{font-size:calc(100vw / var(--size) * 10);-webkit-text-size-adjust:100%;line-height:1.3;scroll-behavior:auto}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--mo);font-size:max(1.2rem,11.5px);line-height:1.35;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.story :focus-visible{outline-color:var(--cream)}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:1rem;top:-10rem;z-index:40;background:var(--accent);color:var(--white);padding:1rem 1.6rem;font-weight:600;text-decoration:none}
.skip:focus{top:1rem}
[lang="sq"] .t-en,[lang="en"] .t-sq{display:none}

.grid-w{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));padding-left:var(--pc);padding-right:var(--pc)}

/* ---------- type ---------- */
.heading-xxl{font-family:var(--fr);font-size:3.8rem;line-height:4.8rem;font-weight:200;font-variation-settings:"wght" 200,"SOFT" 100,"WONK" 1;text-transform:uppercase}
.heading-xl{font-family:var(--fr);font-size:4.5rem;line-height:5.5rem;font-weight:200;font-variation-settings:"wght" 200,"SOFT" 100,"WONK" 1;text-transform:uppercase}
@media (min-width:768px){
  .heading-xxl{font-size:6.4rem;line-height:7rem}
  .heading-xl{font-size:7rem;line-height:7rem}
}
@media (min-width:1024px){.heading-xl{font-size:8rem;line-height:9rem}}
@media (min-width:1200px) and (hover:hover){.heading-xxl{font-size:10rem;line-height:10rem}}
.body-b{font:700 max(1rem,10px)/1.3 var(--mo);text-transform:uppercase;letter-spacing:.01em}

/* ---------- checker band (reference "pattern") ---------- */
.pattern{--pbg:var(--cream);height:1.87rem;width:100%;
  background:
    linear-gradient(90deg,var(--accent) 50%,transparent 50%) 0 0/3.74rem 50% repeat-x,
    linear-gradient(90deg,transparent 50%,var(--accent) 50%) 0 100%/3.74rem 50% repeat-x,
    var(--pbg)}
.pattern--white{--pbg:var(--white)}
.pattern--abs{position:absolute;top:0;left:0}

/* ---------- double-rule card ---------- */
.dbl-outer{border:2px solid var(--accent);padding:.3rem}
.dbl-inner{border:1px solid var(--accent)}
.card-white{background:var(--white)}

/* ---------- split chars ---------- */
.line{display:block;position:relative}
.line.odd{z-index:2}
.word{display:inline-block;position:relative;white-space:nowrap}
.content-title .word,.cover-title .word{perspective:2000px}
.char{display:inline-block}
.split-flip .word{perspective:1000px}
.split-flip .char{position:relative}

/* ---------- header ---------- */
.hdr{position:sticky;top:2rem;z-index:10;margin-bottom:-3.9rem;pointer-events:none}
@media (min-width:768px){.hdr{margin-top:5rem;margin-bottom:-8.9rem}}
.hdr-overlay{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .3s}
.hdr.is-open .hdr-overlay{pointer-events:auto}
.hdr-bar{align-items:center;pointer-events:none}
.hdr-bar>*{pointer-events:auto}
.hdr-left{grid-column:1/8;display:flex;justify-content:flex-start;align-items:center;gap:.9rem}
.logo{grid-column:8/18;justify-self:center;color:var(--accent);text-decoration:none;font:700 1.5rem/1 var(--mo);letter-spacing:.14em;display:flex;align-items:center;gap:.7rem;transition:opacity .3s ease-out;white-space:nowrap}
.logo-dot{width:.35rem;height:.35rem;border-radius:50%;background:currentColor;display:inline-block}
.logo-a{margin-right:-.14em}
.logo.is-hidden{opacity:0;pointer-events:none}
@media (max-width:767px){
  .logo{flex-direction:column;gap:.35rem;font-size:2.1rem;letter-spacing:.12em}
  .logo-dot{display:none}
  .logo-b{font-size:max(.95rem,8.5px);letter-spacing:.38em;margin-right:-.38em}
  .pill-cta{padding:1rem 1.5rem}
  .hdr-right{gap:.7rem}
  .toast-in{padding:1.4rem 1.6rem;gap:1rem}
}
.hdr-right{grid-column:18/25;justify-self:end;display:flex;align-items:center;gap:1.2rem}
@media (min-width:768px){
  .hdr-left{grid-column:1/5}
  .logo{grid-column:11/15;font-size:2.3rem}
  .hdr-right{grid-column:17/25;gap:2.2rem}
}
.toggler{margin-left:.3rem;background:var(--cream);border:1px solid var(--accent);border-radius:50%;color:var(--accent);
  font-family:var(--fr);font-style:italic;font-size:1.1rem;line-height:1.3rem;font-variation-settings:"wght" 900,"SOFT" 0,"WONK" 1;text-transform:uppercase;
  padding:1.2rem 2.5rem;transform:rotate(-10deg);transition:transform .4s var(--ease-out)}
@media (min-width:768px){.toggler{font-size:1.4rem;line-height:1.8rem}}
.toggler-in{position:relative;display:grid;place-items:center}
.toggler-in>.split-flip{grid-area:1/1;white-space:nowrap}
.toggler-dots{position:absolute;left:50%;top:50%;width:130%;transform:translate(-50%,-50%);display:flex;justify-content:space-between;z-index:2}
.toggler-dots i{width:.3rem;height:.3rem;border-radius:50%;background:var(--accent);transition:transform .4s var(--ease-out)}
.toggler-dots i:first-child{transform:translateX(-100%)}
.toggler-dots i:last-child{transform:translateX(100%)}
.toggler-open .char{transition:opacity .5s var(--ease-out) calc(.1s + var(--stagger)*var(--ci)),transform .5s var(--ease-out) calc(.1s + var(--stagger)*var(--ci))}
.toggler-close .char{opacity:0;transform:translateY(50%) rotateX(-90deg);transition:opacity .5s var(--ease-out) calc(var(--stagger)*var(--ci)),transform .5s var(--ease-out) calc(var(--stagger)*var(--ci))}
.no-js .toggler-close,.toggler:not(.a) .toggler-close:not(:has(.char)){visibility:hidden}
.toggler.a .toggler-open .char{opacity:0;transform:translateY(-50%) rotateX(90deg);transition:opacity .5s var(--ease-out) calc(var(--stagger)*var(--ci)),transform .5s var(--ease-out) calc(var(--stagger)*var(--ci))}
.toggler.a .toggler-close .char{opacity:1;transform:none;transition:opacity .5s var(--ease-out) calc(.1s + var(--stagger)*var(--ci)),transform .5s var(--ease-out) calc(.1s + var(--stagger)*var(--ci))}
.pill-cta{display:inline-block;background:var(--accent);color:var(--white);border:1px solid var(--accent);border-radius:50%;text-decoration:none;
  font-family:var(--fr);font-style:italic;font-size:1.1rem;line-height:1.3rem;font-variation-settings:"wght" 900,"SOFT" 0,"WONK" 1;text-transform:uppercase;
  padding:1.2rem 2.2rem;transform:rotate(8deg);transition:transform .4s var(--ease-out),background-color .3s}
@media (min-width:768px){.pill-cta{font-size:1.4rem;line-height:1.8rem;padding:1.2rem 2.6rem}}
@media (hover:hover){
  .toggler:hover{transform:scale(1.1) rotate(-14deg)}
  .toggler:hover .toggler-dots i:first-child{transform:translateX(calc(-100% + .4rem))}
  .toggler:hover .toggler-dots i:last-child{transform:translateX(calc(100% - .4rem))}
  .pill-cta:hover{transform:scale(1.1) rotate(12deg)}
}
.lang{display:inline-flex;align-items:center;gap:.4rem;color:var(--accent);font:600 max(1.1rem,10px)/1 var(--mo);text-transform:uppercase}
.lang--bar{background:var(--cream);border:1px solid var(--accent);border-radius:50%;padding:.9rem 1.6rem;transform:rotate(-4deg)}
.lang-btn{opacity:.45;padding:.4rem .2rem;letter-spacing:.06em;transition:opacity .3s}
.lang-btn[aria-pressed="true"]{opacity:1;text-decoration:underline;text-underline-offset:.35em}
.lang-btn:hover{opacity:1}
.lang--bar{display:none}
.lang-swap{color:var(--accent);background:var(--cream);border:1px solid var(--accent);border-radius:50%;font:700 max(1.1rem,10.5px)/1 var(--mo);letter-spacing:.06em;padding:1.1rem 1.3rem;transform:rotate(-6deg)}
@media (min-width:768px){.lang--bar{display:inline-flex}.lang-swap{display:none}}

/* nav panel (the reference's menu card that swings in from the top-left) */
.hdr-menu-wrap{position:absolute;top:15rem;left:0;width:100%;padding:0 var(--pc);pointer-events:none;perspective:500px;display:grid;grid-template-columns:repeat(24,minmax(0,1fr))}
@media (min-width:768px){.hdr-menu-wrap{top:.8rem}}
.hdr-menu{grid-column:1/-1;background:var(--white);padding:1rem;visibility:hidden;pointer-events:none;transform:translate(-120%,-80%)}
.hdr.is-open .hdr-menu{visibility:visible;pointer-events:auto}
.no-anim .hdr.is-open .hdr-menu{transform:none}
@media (min-width:768px){.hdr-menu{grid-column:1/17;padding:2rem}}
@media (min-width:1024px){.hdr-menu{grid-column:1/13}}
@media (min-width:1200px) and (hover:hover){.hdr-menu{grid-column:1/12}}
.hdr-menu .dbl-outer{padding:.3rem}
.hdr-menu-in{padding:3rem 1rem 2rem}
@media (min-width:768px){.hdr-menu-in{padding:3.5rem 3.5rem 2.5rem}}
.hdr-menu-top{display:flex;justify-content:space-between;align-items:center;color:var(--accent);margin:0 0 2rem;gap:1rem;padding-left:7.5rem}
@media (min-width:768px){.hdr-menu-top{padding-left:9rem}}
.rows--nav{margin-bottom:6rem}
.rows--nav .row-name{font-size:2.4rem;line-height:3rem;font-variation-settings:"wght" 300,"SOFT" 100,"WONK" 1;padding:1.1rem 1rem}
@media (min-width:768px){.rows--nav .row-name{padding:1.1rem 1.3rem}}
.rows--nav .row-arrow{width:5.3rem}
@media (min-width:768px){.rows--nav .row-arrow{width:4.5rem}}
@media (min-width:1024px){.rows--nav .row-arrow{width:5.8rem}}
.hdr-menu-links,.visit-links{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:.5rem 1rem}
@media (min-width:1200px){.hdr-menu-links{gap:.5rem 1.5rem}}
.small-link{font:500 max(1rem,10px)/1.3 var(--mo);text-transform:uppercase;color:var(--accent);text-decoration:none;transition:opacity .3s ease-out}
@media (min-width:768px){.small-link{font-size:max(1.2rem,11px)}}
.small-link:hover{opacity:.7}
.sep{display:block;width:.3rem;height:.3rem;border-radius:50%;background:var(--accent);margin-top:-.15rem}

/* ---------- list rows (reference list-restaurants-item) ---------- */
.rows{display:flex;flex-direction:column}
.row{position:relative;display:flex;width:100%;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent)}
.rows li:first-child .row{border-top:1px solid var(--accent)}
.row-name{flex:1;padding:2.2rem 1rem;font-family:var(--fr);font-style:italic;font-size:2.4rem;line-height:3rem;font-weight:200;font-variation-settings:"wght" 200,"SOFT" 100,"WONK" 1}
@media (min-width:768px){.row-name{padding:2.2rem 1.5rem}}
.row-arrow{position:relative;width:5.3rem;flex:none;display:flex;justify-content:center;align-items:center;border-left:1px solid var(--accent)}
@media (min-width:768px){.row-arrow{width:6.5rem}}
@media (min-width:1024px){.row-arrow{width:9rem}}
.arrs{position:relative;display:block;width:1.5rem;overflow:hidden}
@media (min-width:768px){.arrs{width:2rem}}
@media (min-width:1200px) and (hover:hover){.arrs{width:2.7rem}}
.arr{display:block;width:100%}
.arr svg{width:100%;height:auto;aspect-ratio:28/12}
.arr--in{position:absolute;top:0;left:0;transform:translateX(-100%)}
@media (min-width:1200px) and (hover:hover){
  .row:hover{background:var(--accent);color:var(--cream)}
  .row:hover .arr{transform:translateX(100%);transition:transform .5s var(--ease-out)}
  .row:hover .arr--in{transform:translateX(0);transition:transform .5s var(--ease-out) .2s}
}
/* stickers that pop on hover */
.sticker{position:absolute;width:11.7rem;pointer-events:none;opacity:0;z-index:1;top:62%;right:40%;transform:translateY(-50%) rotate(11deg) scale(1.3)}
@media (hover:hover){
  .sticker-hover:hover .sticker{opacity:1;transform:translateY(-50%) rotate(0) scale(1);transition:transform .45s var(--ease-out),opacity .45s var(--ease-out)}
}
@media (hover:none){.sticker{display:none}}
.stk-b{top:50%;right:20%}
.stk-c{top:35%;right:28%;width:13rem}
.stk-d{top:55%;right:12%}
.stk-e{top:45%;right:34%}
.stk-t{font-family:var(--fr);font-style:italic;font-size:12px;font-variation-settings:"wght" 900,"SOFT" 100;fill:var(--accent);letter-spacing:.02em;text-transform:uppercase}
.stk-big{font-family:var(--fr);font-style:italic;font-size:21px;font-variation-settings:"wght" 900,"SOFT" 100;fill:var(--accent)}
.stk-s{font:700 8.5px var(--mo);letter-spacing:.06em;fill:var(--accent);text-transform:uppercase}
.card-head{display:flex;justify-content:space-between;align-items:baseline;color:var(--accent)}
.card-head-t{font:700 max(1rem,10px)/1.3 var(--mo);text-transform:uppercase;letter-spacing:.01em}
.card-head-n{font-family:var(--fr);font-style:italic;font-size:max(1rem,10px);font-variation-settings:"wght" 900,"SOFT" 100;margin-left:2rem}
@media (min-width:768px){.card-head-t{font-size:1.5rem;line-height:1.8rem}.card-head-n{font-size:1.4rem}}

/* ---------- cover / hero ---------- */
.cover{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100vh;height:100svh;min-height:56rem;padding:9rem var(--pc) 5rem;background:var(--cream);overflow:hidden;color:var(--accent)}
@media (min-width:768px){.cover{padding-top:13rem}}
@media (min-width:1024px){.cover{padding-top:20rem}}
@media (min-width:1200px) and (hover:hover){.cover{justify-content:center;padding:0 var(--pc);min-height:600px;height:100vh}}
.cover .pattern--top{position:absolute;top:0;left:0;z-index:3}
.cover-title-w{position:relative;width:100%}
@media (min-width:768px){.cover-title-w{width:83%}}
@media (min-width:1024px){.cover-title-w{width:67%}}
@media (min-width:1200px) and (hover:hover){.cover-title-w{width:calc((100vw - 2 * var(--pc)) * 16 / 24)}}
.cover-title{text-align:center;padding:0;color:var(--accent);position:relative}
@media (min-width:768px){.cover-title{padding:0 2rem}}
@media (min-width:1200px) and (hover:hover){.cover-title{padding:0 3rem}}
.dots{position:absolute;left:50%;top:50%;width:100%;transform:translate(-50%,-50%);display:flex;justify-content:space-between;z-index:2;pointer-events:none}
.dot{display:block;width:.6rem;height:.6rem;border-radius:50%;background:currentColor}
.dot:first-child{transform:translateX(-100%)}
.dot:last-child{transform:translateX(100%)}
.cover-trail-w{display:none}
.anim .cover-trail-w{display:flex;align-items:center;flex:1;width:100%;max-width:70%;margin-top:3rem;pointer-events:none;z-index:1}
@media (min-width:768px){.anim .cover-trail-w{max-width:50%;margin-top:5rem}}
.cover-trail{position:relative;width:100%;padding-top:122%}
.trail-img{position:absolute;inset:0;overflow:hidden;opacity:0}
.trail-img img{width:100%;height:100%;object-fit:cover}
.desk .cover-trail-w{position:absolute;top:0;left:0;width:40rem;max-width:none;margin:0;flex:none;display:block}
.desk .cover-trail{padding-top:122%}
.cover-bottom{position:absolute;bottom:0;left:0;width:100%;z-index:3}
.cover-bottom .marquee{margin-bottom:.5rem}

/* ---------- marquee ---------- */
.marquee{display:flex;width:100%;overflow:hidden}
.marquee-w{display:flex;flex-shrink:0;flex-wrap:nowrap;font:500 max(1.2rem,10px)/1.5rem var(--mo);text-transform:uppercase;color:var(--accent);animation:marquee var(--md,40s) linear infinite paused}
.marquee-w.running{animation-play-state:running}
.rm .marquee-w{animation:none}
.marquee-el{display:flex;align-items:center;gap:2rem;margin-right:2rem;white-space:nowrap}
@keyframes marquee{from{transform:translateZ(0)}to{transform:translate3d(var(--mdist,-50%),0,0)}}

/* ---------- favourites (reference list-restaurants) ---------- */
.fav{position:relative;padding-top:12rem;padding-bottom:12rem;align-content:end;overflow:hidden}
@media (min-width:768px){.fav{padding-top:var(--pc);padding-bottom:var(--pc);overflow:visible}}
@media (min-width:1200px) and (hover:hover){.fav{min-height:100vh}}
.fav-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
@media (min-width:768px){.fav-bg{inset:2rem;border-radius:1rem}}
.fav-images{position:absolute;inset:0}
.fav-shade{position:absolute;inset:0;background:rgba(0,0,0,.3);z-index:4}
.fav-images img{position:absolute;left:0;top:-15%;width:100%;height:130%;object-fit:cover;object-position:50% 60%}
.fav-wrapper{grid-column:1/-1;position:relative;z-index:1}
@media (min-width:768px){.fav-wrapper{grid-column:2/19;padding-top:9rem;transform:translateY(-.5rem)}}
@media (min-width:1024px){.fav-wrapper{grid-column:2/15}}
@media (min-width:1200px) and (hover:hover){.fav-wrapper{grid-column:2/14;transform:translateY(-2rem)}}
.fav-pops{display:none}
@media (min-width:1200px) and (hover:hover){
  .fav-pops{display:block;position:absolute;top:50%;right:10%;width:33.5rem;transform:translateY(-50%);z-index:0}
  .fav-pops::before{content:"";display:block;padding-top:130%}
}
.fav-pop{position:absolute;inset:0;border:5px solid var(--cream);overflow:hidden;opacity:0;transform:translateY(15%) rotate(-12deg)}
.fav-pop-in{position:absolute;inset:0;transform:scale(1.1)}
.fav-pop-in img{width:100%;height:100%;object-fit:cover}
.fav-card{position:relative;z-index:1;padding:1rem;transform:rotate(-2deg)}
@media (min-width:768px){.fav-card{padding:2rem;transform:rotate(-4deg)}}
.fav-card .dbl-outer{padding:.5rem}
.fav-card-in{min-height:56rem;padding:2rem}
@media (min-width:768px){.fav-card-in{padding:3.5rem}}
@media (min-width:1200px) and (hover:hover){.fav-card-in{min-height:75rem}.rows--fav .row-name{font-size:4rem;line-height:5rem}}
.rows--fav{margin-top:2rem}
@media (min-width:768px){.rows--fav{margin-top:4rem}}
.fav-mstk{position:absolute;bottom:0;right:18%;width:9.5rem;transform:translateY(50%) rotate(-8deg);z-index:2}
@media (min-width:1200px) and (hover:hover){.fav-mstk{display:none}}

/* ---------- content blocks (title + dots + tag + text) ---------- */
.content{grid-column:1/-1;position:relative;display:flex;flex-direction:column;text-align:center}
@media (min-width:768px){.content{grid-column:4/22}}
@media (min-width:1200px) and (hover:hover){.content{grid-column:7/19}}
.content-title-w{position:relative;width:100%}
.content-title{padding:0 2rem;position:relative}
@media (min-width:1200px) and (hover:hover){.content-title{padding:0 3rem}}
.tag{position:absolute;bottom:0;right:0;white-space:nowrap;border:1px solid currentColor;border-radius:50%;
  font-family:var(--fr);font-style:italic;font-size:1.4rem;line-height:1.8rem;font-variation-settings:"wght" 900,"SOFT" 100,"WONK" 1;text-transform:uppercase;letter-spacing:0;
  padding:1.2rem 1.7rem;transform:translate(40%,40%) rotate(-10deg);z-index:3}
@media (min-width:768px){.tag{padding:1.7rem 2.3rem}}
.content-text-g{display:grid;grid-template-columns:repeat(8,minmax(0,1fr))}
@media (min-width:768px){.content-text-g{grid-template-columns:repeat(12,minmax(0,1fr))}}
.content-text{grid-column:2/8;margin-top:5rem;font-size:max(1.4rem,12px);line-height:1.35}
@media (min-width:768px){.content-text{grid-column:3/11;font-size:max(1.2rem,12px)}}

/* ---------- story + gallery (green slider) ---------- */
.story{position:relative;background:var(--deep);color:var(--cream);padding-top:10rem;overflow:hidden}
@media (min-width:1024px){.story{padding-top:15rem}}
.story .tag{background:var(--deep);border-color:var(--cream);color:var(--cream)}
.story .dot{background:var(--cream)}
.slider{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:6rem;padding:10rem var(--pc);will-change:transform}
@media (min-width:1024px){.slider{padding-top:15rem;padding-bottom:15rem}}
.mobile-slider{overflow-x:scroll;scroll-snap-type:x mandatory;scroll-padding:0 2rem;scrollbar-width:none;-ms-overflow-style:none}
.mobile-slider::-webkit-scrollbar{display:none;width:0;height:0}
.mobile-slider-item{scroll-snap-align:center}
@media (min-width:1200px) and (hover:hover){.mobile-slider{overflow-x:visible}}
.sl-item{flex:0 0 23.4rem;position:relative}
@media (min-width:768px){.sl-item{flex-basis:28rem}}
@media (min-width:1024px){.sl-item{flex-basis:33rem}}
@media (min-width:1200px) and (hover:hover){.sl-item{flex-basis:40.2rem}}
.r-m3{transform:rotate(-3deg)}.r-p4{transform:rotate(4deg)}.r-m2{transform:rotate(-2deg)}.r-p3{transform:rotate(3deg)}
.sl-down{margin-top:5rem}
@media (min-width:1024px){.sl-down{margin-top:8rem}}
@media (min-width:1200px) and (hover:hover){.sl-down{margin-top:0}}
.sl-frame{position:relative;padding:.8rem;border:1px solid var(--cream)}
.sl-ratio{position:relative;padding-top:132%;overflow:hidden}
.sl-img{position:absolute;inset:0}
.sl-img img{width:100%;height:100%;object-fit:cover}
.sl-quote{position:absolute;inset:0;background:var(--cream);color:var(--accent);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2.4rem 2rem}
@media (min-width:768px){.sl-quote{padding:3.5rem 3rem}}
.q-label{font:700 max(1rem,9.5px)/1.3 var(--mo);text-transform:uppercase;letter-spacing:.08em}
.q-text{font-family:var(--fr);font-style:italic;font-size:1.9rem;line-height:1.28;font-variation-settings:"wght" 300,"SOFT" 100,"WONK" 1;margin:2rem 0}
@media (min-width:1024px){.q-text{font-size:2.3rem}}
@media (min-width:1200px) and (hover:hover){.q-text{font-size:2.7rem}}
.q-by{font:600 max(1.1rem,10px)/1.3 var(--mo);text-transform:uppercase;letter-spacing:.04em}
.sl-stk{position:absolute;width:8.5rem;z-index:2}
@media (min-width:768px){.sl-stk{width:10rem}}
.sl-stk--br{bottom:10%;right:0;transform:translateX(50%)}
.sl-stk--tl{top:10%;left:0;transform:translateX(-50%)}
.sl-stk.rating{width:11rem;bottom:-4%;transform:translateX(42%) rotate(-8deg)}
@media (min-width:768px){.sl-stk.rating{width:13rem}}

/* ---------- menu (reference cards-columns) ---------- */
.menu{background:var(--cream);padding:10rem 0;color:var(--ink)}
@media (min-width:1024px){.menu{padding:15rem 0}}
.menu .content{color:var(--accent)}
.menu .content-text{color:var(--ink)}
.menu .tag{background:var(--cream);border-color:var(--accent);color:var(--accent)}
.menu .dot{background:var(--accent)}
.menu-cols{margin-top:8rem;row-gap:4rem;align-items:start}
.menu-col{grid-column:1/-1;display:flex;flex-direction:column;gap:4rem}
@media (min-width:768px){
  .menu-cols{margin-top:10rem;row-gap:5rem}
  .menu-col--1{grid-column:2/12}
  .menu-col--2{grid-column:14/24}
  .menu-col--3{grid-column:2/24;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc((100vw - 2 * var(--pc)) * 2 / 24);align-items:start}
}
@media (min-width:1200px) and (hover:hover){
  .menu-col--1{grid-column:2/8}
  .menu-col--2{grid-column:10/16;margin-top:10rem;gap:7rem}
  .menu-col--3{grid-column:18/24;display:flex;flex-direction:column;gap:5rem}
  .menu-card{transform:rotate(var(--r))}
}
.menu-card{background:var(--white);border:2px solid var(--accent);padding:.3rem}
.menu-card-b1{border:1px solid var(--accent);padding:2rem 1.6rem 1.6rem}
@media (min-width:768px){.menu-card-b1{padding:2.4rem 2.2rem 2rem}}
.menu-card .card-head-t{display:flex;flex-wrap:wrap;gap:0 .5em}
.menu-card .card-head-t span[lang]{order:2;opacity:.55}
html[lang="en"] .menu-card .card-head-t span[lang="en"],html[lang="sq"] .menu-card .card-head-t span[lang="sq"]{order:1;opacity:1}
html[lang="en"] .menu-card .card-head-t span[lang="sq"]::before,html[lang="sq"] .menu-card .card-head-t span[lang="en"]::before{content:"/ ";}
.mi-list{margin-top:1.8rem}
.mi{display:flex;align-items:baseline;justify-content:space-between;gap:1.4rem;padding:1.1rem 0;border-top:1px solid var(--accent)}
.mi:last-child{border-bottom:1px solid var(--accent)}
.mi-names{display:flex;flex-direction:column;min-width:0}
.mi-n{font-family:var(--fr);font-style:italic;font-size:2rem;line-height:2.4rem;font-variation-settings:"wght" 300,"SOFT" 100,"WONK" 1;color:var(--accent)}
html[lang="en"] .mi-n[lang="sq"],html[lang="sq"] .mi-n[lang="en"]{order:2;font:500 max(1rem,9.5px)/1.3 var(--mo);font-style:normal;font-variation-settings:normal;text-transform:uppercase;color:var(--ink);opacity:.7;margin-top:.3rem;letter-spacing:.02em}
.mi-p{flex:none;font:500 max(1.2rem,11px)/1 var(--mo);color:var(--accent);white-space:nowrap}
.menu-card--compact .mi{padding:.85rem 0}
.menu-card--compact .mi-n{font-size:1.8rem;line-height:2.2rem}
.menu-note{text-align:center;margin:6rem var(--pc) 0;font-family:var(--fr);font-style:italic;font-size:max(1.4rem,12px);font-variation-settings:"wght" 600,"SOFT" 0;color:var(--accent)}

/* ---------- visit (reference booking) ---------- */
.visit{position:relative;padding-top:10rem;padding-bottom:calc(10rem + var(--fh));overflow:hidden;isolation:isolate}
@media (min-width:1024px){.visit{padding-top:15rem;padding-bottom:calc(15rem + var(--fh))}}
.visit-image{position:absolute;inset:0;z-index:-1}
@media (min-width:1200px) and (hover:hover){.visit-image{transform:scale(1.1)}}
.visit-image img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.visit-card-w{grid-column:1/-1}
@media (min-width:768px){.visit-card-w{grid-column:5/21}}
@media (min-width:1024px){.visit-card-w{grid-column:7/19}}
@media (min-width:1200px) and (hover:hover){.visit-card-w{grid-column:9/17}}
.visit-card{position:relative;background:var(--white);padding:3rem;color:var(--accent);transform:rotate(-3deg)}
.arch{width:6.8rem;margin:1.6rem auto -.5rem;overflow:visible}
.arch-t{font:700 10px var(--mo);fill:var(--accent);letter-spacing:.5px}
.visit-title-w{text-align:center;margin-bottom:5rem}
@media (min-width:768px){.visit-title-w{margin-bottom:3.5rem}}
.visit-title{display:inline;position:relative;font-family:var(--fr);font-size:3.5rem;line-height:5rem;font-weight:400;font-variation-settings:"wght" 400,"SOFT" 0,"WONK" 1;text-transform:uppercase}
@media (min-width:768px){.visit-title{font-size:5rem;line-height:7rem}}
.tag--accent{background:var(--white);color:var(--accent);border-color:var(--accent);padding:1.2rem;transform:translate(20%,55%) rotate(-8deg)}
@media (min-width:768px){.tag--accent{padding:1.4rem;transform:translate(20%,40%) rotate(-14deg)}}
.visit-sub{text-align:center;margin:2rem 0;font-family:var(--fr);font-style:italic;font-size:max(1.3rem,12px);font-variation-settings:"wght" 700,"SOFT" 0,"WONK" 1}
.v-row{display:flex;border-bottom:1px solid var(--accent)}
.v-row:first-child{border-top:1px solid var(--accent)}
.v-row dt{flex:0 0 11rem;display:flex;align-items:center;padding:1.8rem 1.4rem 1.8rem 0;border-right:1px solid var(--accent);font:500 max(1rem,9.5px)/1.3 var(--mo);text-transform:uppercase}
@media (min-width:768px){.v-row dt{flex-basis:13rem;padding-right:2rem}}
.v-n{font-family:var(--fr);font-style:italic;margin-right:.5rem}
.v-row dd{flex:1;display:flex;align-items:center;padding:1rem 0 1rem 1.5rem;font-family:var(--fr);font-style:italic;font-size:max(1.3rem,12px);line-height:1.35;font-variation-settings:"wght" 400,"SOFT" 0,"WONK" 1}
@media (min-width:768px){.v-row dd{padding:1.1rem 2rem 1.1rem 1.8rem}}
.v-row dd a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s}
.v-row dd a:hover{border-color:currentColor}
.button{position:relative;display:block;margin-top:8rem;padding:.5rem;background:var(--accent);text-decoration:none}
@media (min-width:768px){.button{margin-top:10rem}}
.button-in{position:relative;display:block;border:1px solid var(--cream);padding:2rem;text-align:center;color:var(--white);
  font-family:var(--fr);font-style:italic;font-size:1.4rem;line-height:1.8rem;font-variation-settings:"wght" 900,"SOFT" 100,"WONK" 1;text-transform:uppercase}
@media (min-width:768px){.button-in{padding:2.5rem}}
.button-after{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap}
.button-after:not(:has(.char)){visibility:hidden}
.button-default .char{transition:opacity .5s var(--ease-out) calc(.1s + var(--stagger)*var(--ci)),transform .5s var(--ease-out) calc(.1s + var(--stagger)*var(--ci))}
.button-after .char{opacity:0;transform:translateY(50%) rotateX(-90deg);transition:opacity .5s var(--ease-out) calc(var(--stagger)*var(--ci)),transform .5s var(--ease-out) calc(var(--stagger)*var(--ci))}
@media (hover:hover){
  .button:hover .button-default .char{opacity:0;transform:translateY(-50%) rotateX(90deg);transition:opacity .5s var(--ease-out) calc(var(--stagger)*var(--ci)),transform .5s var(--ease-out) calc(var(--stagger)*var(--ci))}
  .button:hover .button-after .char{opacity:1;transform:none;transition:opacity .5s var(--ease-out) calc(.1s + var(--stagger)*var(--ci)),transform .5s var(--ease-out) calc(.1s + var(--stagger)*var(--ci))}
}
.stk-btn{top:-5rem;right:.2rem;width:8rem;transform:none}
@media (min-width:768px){.stk-btn{right:-5rem;width:11.7rem}}
@media (hover:none){.stk-btn{display:block;opacity:1}}
@media (hover:hover){.button .stk-btn{transform:rotate(11deg) scale(1.3)}.button:hover .stk-btn{transform:none}}
.visit-links{justify-content:center;margin-top:2.4rem}

/* ---------- footer ---------- */
.footer{position:relative;z-index:2}
.footer-card{grid-column:1/-1;background:var(--cream);padding:2rem 2rem 0}
@media (min-width:768px){.footer-card{grid-column:2/24}}
.footer-b2{border:2px solid var(--accent);border-bottom:0;padding:.5rem .5rem 0}
.footer-b1{position:relative;border:1px solid var(--accent);border-bottom:0}
.footer-stamps-w{position:relative;height:23rem;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}
@media (hover:hover) and (pointer:fine){.footer-stamps-w{cursor:none}}
.footer-cursor{position:absolute;top:0;left:0;width:7.5rem;height:7.5rem;border-radius:50%;background:var(--cream);color:var(--accent);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;z-index:2;box-shadow:0 0 0 1px var(--accent)}
.footer-cursor svg{width:3.6rem}
.footer-stamps{position:absolute;inset:0}
.stamp{--sw:11rem;position:absolute;width:var(--sw);color:var(--accent);overflow:visible;user-select:none;pointer-events:none}
@media (min-width:768px){.stamp{--sw:14rem}}
@media (min-width:1024px){.stamp{--sw:19rem}}
.stamp-t{font:700 36px var(--mo);letter-spacing:6px;fill:currentColor}
.stamp--1{top:25%;left:10%;opacity:.4;transform:translateY(-50%) rotate(10deg)}
.stamp--2{display:none;top:50%;left:50%;opacity:.6;transform:translate(-50%,-30%) rotate(-6deg)}
.stamp--3{bottom:0;right:5%;opacity:.3;transform:translateY(-100%) rotate(8deg)}
@media (min-width:768px){.stamp--1{top:50%}.stamp--3{bottom:auto;top:50%}}
@media (min-width:1200px) and (hover:hover){.stamp--2{display:block}}
.stamp.new{top:0;left:0;transform:none}
.footer-hint{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%) rotate(-6deg);font-family:var(--fr);font-style:italic;font-size:max(1.4rem,12px);font-variation-settings:"wght" 700,"SOFT" 100;color:var(--accent);opacity:.7;white-space:nowrap}
@media (min-width:1200px) and (hover:hover){.footer-hint{display:none}}
.footer-grid{display:grid;grid-template-columns:repeat(22,minmax(0,1fr));border-top:1px solid var(--accent);border-bottom:1px solid var(--accent)}
.f-main{position:relative;grid-column:1/-1;display:flex;justify-content:center;align-items:center;padding:2rem;text-align:center;text-decoration:none;color:var(--accent);
  font-family:var(--fr);font-style:italic;font-size:1.5rem;line-height:1.8rem;font-variation-settings:"wght" 600,"SOFT" 0,"WONK" 1;text-transform:uppercase}
@media (min-width:768px){.f-main{grid-column:span 4;padding:2.8rem 2rem;border-right:1px solid var(--accent)}}
@media (min-width:1024px){.f-main{font-size:1.8rem;line-height:2.2rem}}
.stk-foot{top:0;left:50%;right:auto;width:10rem;transform:translate(-50%,-15%) rotate(11deg) scale(1.3)}
@media (hover:hover){.f-main:hover .stk-foot{transform:translate(-50%,-15%)}}
.f-col{grid-column:1/-1;display:flex;border-top:1px solid var(--accent)}
@media (min-width:768px){.f-col{grid-column:span 6;flex-direction:column;border-top:0;border-right:1px solid var(--accent)}.f-col:last-child{border-right:0}}
.f-link{flex:1;display:flex;justify-content:center;align-items:center;text-align:center;padding:2rem 1rem;font:500 max(1.2rem,10.5px)/1.3 var(--mo);text-transform:uppercase;color:var(--accent);text-decoration:none}
.f-col .f-link:first-child{border-right:1px solid var(--accent)}
@media (min-width:768px){.f-link{padding:1.3rem 1rem}.f-col .f-link:first-child{border-right:0;border-bottom:1px solid var(--accent)}}
.f-credit,.f-copy{font-size:max(1rem,9.5px)}
@media (min-width:1200px) and (hover:hover){a.f-link:hover{background:var(--accent);color:var(--cream)}}
.footer-marquee{overflow:hidden;padding:1rem 0}

/* ---------- loader / transitions ---------- */
.loader{position:fixed;inset:0;z-index:14;background:var(--cream);display:none}
.is-loading .loader{display:block;animation:loaderSafety .4s ease 5s forwards}
@keyframes loaderSafety{to{opacity:0;visibility:hidden}}
.loader-pattern{position:absolute;top:0;left:0;width:100%;display:flex;overflow:hidden;height:1.87rem}
.lp-b{flex:0 0 1.87rem;height:100%;background:linear-gradient(var(--accent) 50%,transparent 50%);opacity:0}
.lp-b:nth-child(even){background:linear-gradient(transparent 50%,var(--accent) 50%)}
.no-anim .lp-b{opacity:1}
.fade{position:fixed;inset:0;z-index:15;background:var(--cream);opacity:0;visibility:hidden;pointer-events:none}
.transition{position:fixed;inset:0;z-index:15;pointer-events:none;perspective:500px;display:none;overflow:hidden}
@media (min-width:1200px) and (hover:hover){.transition{display:block}}
.tr-img{position:absolute;border:5px solid var(--cream);visibility:hidden}
.tr-ratio{position:relative;padding-top:130%;overflow:hidden;background:var(--deep)}
.tr-ratio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tr-1{left:calc(50% - 34.6rem);top:50%;width:69.2rem;z-index:5}
.tr-2{bottom:-10%;left:-20%;width:83.5rem;z-index:3}
.tr-3{right:-5%;top:30%;width:62.9rem;z-index:2}
.tr-4{right:-2%;top:-30%;width:56.6rem;z-index:4}
.tr-5{left:calc(50% - 31.4rem);top:-10%;width:62.9rem;z-index:3}
.tr-6{left:-5%;top:-50%;width:62.9rem;z-index:3}
.tr-stk{position:absolute;z-index:1}
.tr-stk-1{top:20%;right:0;width:11.3rem;transform:translateX(60%) rotate(20deg)}
.tr-stk-6{bottom:10%;right:0;width:13rem;transform:translateX(35%) rotate(15deg)}

/* ---------- concept toast ---------- */
.toast{position:fixed;left:1.6rem;bottom:1.6rem;z-index:20;width:min(38rem,calc(100vw - 3.2rem));background:var(--white);padding:.6rem;opacity:0;transform:translateY(1.5rem);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
@media (min-width:768px){.toast{left:2rem;bottom:2rem;width:34rem}}
.toast.is-on{opacity:1;transform:none}
.toast[hidden]{display:none}
.toast-in{display:flex;flex-direction:column;gap:1.4rem;padding:1.8rem 2rem;color:var(--ink);font-size:max(1.2rem,12px);line-height:1.4}
.toast-x{align-self:flex-start;font-family:var(--fr);font-style:italic;font-variation-settings:"wght" 900,"SOFT" 100;text-transform:uppercase;color:var(--accent);font-size:max(1.3rem,12px);text-decoration:underline;text-underline-offset:.3em;padding:.4rem 0}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .marquee-w{animation:none!important}
}

/* ---------- Lenis (vendor css) ---------- */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}