/* Pasticeri Likaj: concept rebuild of Pasticceria Adami (pasticceriaverona.it).
   Grid, spacers, type scale and easing are the reference's own values; colours shift to Likaj's cocoa, butter and pistachio. */
:root{
  --light:#f1ede6;          /* reference warm grey #efeee9, a touch warmer */
  --dark:#2b2421;           /* reference #2c2c2c, warmed */
  --grey:#7d726b;           /* hairlines (reference #707070) */
  --white:#fff;
  --black:#1c1512;
  --accent:#5a2e21;         /* Likaj cocoa: replaces Adami cobalt #2c49c4 (aside, menu, loader) */
  --yellow:#f3b229;         /* cursor: butter/honey (reference #ffb510) */
  --green:#4f7a28;          /* scroll disc: pistachio (reference #007216) */
  --ease:cubic-bezier(.79,.14,.15,.86);
  --spacer-s:10px;--spacer-m:25px;--spacer-l:35px;--spacer-xl:60px;
  --radius-default:36px;--radius-hover:14px;--radius-thumb:100px;
  --aside:0px;--header:68px;
  --serif:"Instrument Serif","Times New Roman",serif;
  --sans:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --logo:"Italiana","Didot",serif;
}
@media (min-width:960px){
  :root{--spacer-s:min(10px,.9259vh);--spacer-m:min(25px,2.3148vh);--spacer-l:min(50px,4.62vh);--spacer-xl:min(100px,9.24vh);--aside:50px;--header:0px}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--light);color:var(--dark);font-family:var(--sans);font-size:14px;line-height:18px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,figure{margin:0;padding:0;font:inherit}
ul{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:60px;top:10px;z-index:4000;background:var(--dark);color:var(--light);padding:10px 16px;border-radius:30px;transform:translateY(-150%);transition:transform .3s var(--ease)}
.skip:focus{transform:none}

/* ---------- type scale (reference values) ---------- */
.typo-s{font-family:var(--sans);font-size:14px;line-height:18px}
.typo-m{font-family:var(--serif);font-size:25px;line-height:28px}
.typo-l{font-family:var(--serif);font-size:30px;line-height:30px;text-transform:uppercase}
.typo-xl{font-family:var(--serif);font-size:62px;line-height:62px}
.typo-xxl{font-family:var(--sans);font-size:164px;line-height:150px;letter-spacing:-.02em;font-weight:400}
@media (min-width:960px){
  .typo-m{font-size:min(35px,3.2407vh);line-height:min(38px,3.5185vh)}
  .typo-l{font-size:min(50px,4.6296vh);line-height:min(50px,4.6296vh)}
  .typo-xl{font-size:min(75px,6.9444vh);line-height:min(75px,6.9444vh)}
  .typo-xxl{font-size:min(300px,27vh);line-height:min(270px,25vh)}
}
.upper{text-transform:uppercase}

/* ---------- link rolls (link--hover / link--title) ---------- */
/* padded so Albanian accents (Ë, Ç) are not clipped and the hover copy never peeks in */
.roll{position:relative;display:inline-block;overflow:hidden;vertical-align:top;padding:.22em 0 .26em;margin:-.22em 0 -.26em}
.roll .t{display:block;transition:transform .6s var(--ease)}
.roll .t.h{position:absolute;left:0;top:.22em;width:100%;transform:translateY(calc(100% + .52em))}
@media (hover:hover){
  a:hover>.roll .t:not(.h),button:hover>.roll .t:not(.h),a:hover .roll .t:not(.h){transform:translateY(calc(-100% - .52em))}
  a:hover>.roll .t.h,button:hover>.roll .t.h,a:hover .roll .t.h{transform:translateY(0);transition-delay:.1s}
}
html.menu-open .toast{opacity:0;visibility:hidden}
.u-link{position:relative;display:inline-block}
.u-link::before{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;opacity:.6;transform:scaleX(0);transform-origin:100% 100%;transition:transform .6s var(--ease)}
@media (hover:hover){.u-link:hover::before{transform:scaleX(1);transform-origin:0 0}}
.u-link.is-under::before{transform:scaleX(1)}

/* pill button (link--btn) */
.btn{display:inline-block;position:relative;overflow:hidden;background:var(--black);color:var(--white);border-radius:var(--radius-default);padding:15px 20px;transition:border-radius .4s var(--ease);max-width:max-content}
@media (min-width:960px){.btn{padding:20px 50px}}
.btn .roll{display:block}
@media (hover:hover){.btn:hover{border-radius:var(--radius-hover)}}

/* ---------- aside (blue column -> cocoa) ---------- */
.aside{position:fixed;top:0;left:0;width:50px;height:100%;z-index:100;background:var(--accent);color:var(--white);text-align:center;padding-top:var(--spacer-m);transition:width .3s var(--ease);display:none}
.aside:hover{width:60px}
.aside .mark{display:block;width:100%;font-family:var(--sans);font-size:14px;line-height:18px}
@media (min-width:960px){.aside{display:block}}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;left:0;width:100%;z-index:150;background:var(--accent);color:var(--white);display:flex;align-items:center;justify-content:space-between;padding:var(--spacer-m);pointer-events:none}
.site-header a,.site-header button{pointer-events:auto}
@media (min-width:960px){
  .site-header{position:fixed;left:50px;width:calc(100vw - 50px);mix-blend-mode:difference;background:none}
  .site-header.menu-opened{mix-blend-mode:normal}
}
.menu-toggle{display:inline-flex;align-items:center;gap:4px}
.burghy{position:relative;width:18px;height:18px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.burghy span{display:block;height:1px;width:8px;background:currentColor;margin:2px auto;transition:transform .6s var(--ease)}
.menu-opened .burghy span:first-child{transform:translateY(3px)}
.menu-opened .burghy span:last-child{transform:translateY(-2px)}
.h-right{display:flex;align-items:center;gap:22px}
.lang{display:flex;align-items:center;gap:6px}
.lang button{opacity:.55;transition:opacity .3s var(--ease)}
.lang button[aria-pressed="true"]{opacity:1}
.lang button:hover{opacity:1}
.lang .sep{opacity:.55}

/* ---------- overlay menu ---------- */
.menu{position:fixed;top:0;left:0;width:100%;height:100%;z-index:140;background:var(--accent);color:var(--white);padding-top:var(--header);overflow:auto;transform:translateY(-100%);transition:transform .6s var(--ease),visibility 0s .6s;visibility:hidden}
.menu.is-open{transform:none;visibility:visible;transition:transform .6s var(--ease)}
@media (min-width:960px){
  .menu{left:50px;width:calc(100vw - 50px);height:100vh;padding-top:0;overflow:hidden;transform:translateX(-100%)}
}
.menu-wrapper{min-height:100%;display:grid;grid-template-rows:1fr auto;gap:var(--spacer-l);padding:var(--spacer-l) var(--spacer-m)}
@media (min-width:960px){.menu-wrapper{height:100%;padding:calc(var(--spacer-xl) - 14px) var(--spacer-xl) var(--spacer-l)}}
.menu-grid{display:grid;gap:var(--spacer-l)}
@media (min-width:960px){.menu-grid{grid-template-columns:minmax(220px,auto) 1.75fr 1fr}}
.menu .nav{align-self:start}
.menu .label{display:block;margin-bottom:var(--spacer-m);opacity:.9}
.nav-primary .label{visibility:hidden}
@media (max-width:959px){.nav-primary .label{display:none}}
.menu-primary{display:block;max-width:max-content}
.menu-shop{position:relative;display:block;max-width:max-content}
.menu-shop+.menu-shop,.menu-primary+.menu-primary{margin-top:min(6px,.6vh)}
.menu-shop .typo-xl{text-transform:uppercase}
.menu-shop .collection-img{position:absolute;left:100%;top:50%;width:140px;height:140px;object-fit:cover;border-radius:var(--radius-default);transform:translate3d(-50%,-50%,0) scale(0);opacity:0;pointer-events:none;transition:all .6s var(--ease);z-index:-1}
@media (hover:hover){.menu-shop:hover{z-index:2}.menu-shop:hover .collection-img{transition-delay:.1s;opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}}
.menu-info{display:grid;gap:var(--spacer-xl)}
@media (min-width:960px){.menu-info{gap:min(130px,12vh)}}
.menu-info .typo-m{text-transform:uppercase}
.menu-info a{display:block;max-width:max-content}
.menu-foot .menu-grid{align-items:end}
.menu-foot .extra{display:flex;flex-wrap:wrap;gap:6px 18px}
@media (max-width:959px){.menu-shop .typo-xl{font-size:44px;line-height:46px}}

/* ---------- layout: horizontal track (desktop) / stacked (mobile) ---------- */
.track-wrap{position:relative}
.track{position:relative}
.track>.spacer-aside{display:none}
@media (min-width:960px){
  .track-wrap{height:100vh;overflow-x:auto;overflow-y:hidden}
  html.h-mode .track-wrap{overflow:hidden}
  .track{display:flex;height:100vh;width:max-content;white-space:nowrap}
  .track>*{flex:0 0 auto;height:100vh;white-space:normal}
  .track>.spacer-aside{display:block;width:50px}
}

/* ---------- hero ---------- */
.hero{position:relative;display:grid;color:var(--white);min-height:calc(100svh - var(--header));overflow:hidden}
@media (min-width:960px){.hero{width:calc(100vw - 50px);height:100%;min-height:0}}
.hero .first-load{position:absolute;inset:0;background:var(--accent)}
.hero .cover,.hero .content{grid-area:1/1}
.hero .cover{position:relative;overflow:hidden;will-change:transform}
.hero .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,13,8,.62) 0%,rgba(24,13,8,.34) 45%,rgba(24,13,8,.4) 62%,rgba(24,13,8,.72) 100%)}
.hero .content{position:relative;z-index:2;display:grid;align-content:space-between;padding:var(--spacer-l) var(--spacer-m) 130px}
@media (min-width:960px){.hero .content{padding:calc(var(--spacer-xl) + var(--spacer-l)) var(--spacer-l) var(--spacer-xl)}}
.hero .logo{display:block;width:100%;line-height:0}
.hero .logo svg{width:100%;height:auto;overflow:visible;display:block}
.hero .logo text{font-family:var(--logo);fill:currentColor}
.payoff{display:flex;justify-content:space-between;margin-top:var(--spacer-l)}
.hero .extract{max-width:440px;display:grid;gap:var(--spacer-l)}
@media (min-width:960px){.hero .extract{width:max(440px,23vw);gap:var(--spacer-l)}}
.scroll{position:absolute;z-index:3;right:var(--spacer-s);bottom:var(--spacer-s);width:100px;height:100px;display:flex;align-items:center;justify-content:center;color:var(--white);text-align:center}
@media (min-width:960px){.scroll{width:min(174px,16.11vh);height:min(174px,16.11vh);right:var(--spacer-l)}}
.scroll-bg{position:absolute;inset:0;border-radius:50%;background:var(--green);transition:transform .4s var(--ease)}
.scroll-text{position:relative}
@media (hover:hover){.scroll:hover .scroll-bg{transform:scale(.9)}}

/* ---------- intro (section h-f reverse) ---------- */
.intro{padding:var(--spacer-xl) var(--spacer-m)}
.intro .extract{display:grid;align-content:end}
@media (min-width:960px){
  .intro{padding:0 var(--spacer-l)}
  .intro .extract{width:max(440px,23vw);height:100%;padding-bottom:calc(var(--spacer-xl) + var(--spacer-l))}
}

/* ---------- chapters (BlockCollection) ---------- */
.chapter{display:flex;flex-direction:column;gap:var(--spacer-l);padding:var(--spacer-m)}
.chapter .extract{order:1;display:grid;grid-template-rows:auto 1fr auto;text-align:center;border-left:1px solid var(--grey);border-right:1px solid var(--grey)}
.ch-head{padding:var(--spacer-l) 0;border-bottom:1px solid var(--grey)}
.ch-head .number{margin-top:2px}
.ch-desc{padding:var(--spacer-l);display:grid;align-content:center;justify-items:center}
.ch-title{padding:var(--spacer-l);border-top:1px solid var(--grey);display:grid;align-items:center;justify-items:center}
.ch-title h2{text-wrap:balance}
.image-wrapper{order:0;display:flex;gap:var(--spacer-l)}
@media (min-width:960px){
  .chapter{flex-direction:row;padding:0;gap:var(--spacer-l);height:100%}
  .chapter .extract{order:0;width:max(440px,23vw);height:100%}
  .ch-head{padding:var(--spacer-xl) var(--spacer-l)}
  .ch-title{padding:var(--spacer-l) var(--spacer-l) var(--spacer-xl)}
  .chapter.reverse .ch-head{order:2;border-top:1px solid var(--grey);border-bottom:0;padding-top:var(--spacer-l)}
  .chapter.reverse .ch-title{order:0;border-top:0;border-bottom:1px solid var(--grey);padding-top:var(--spacer-xl)}
  .chapter.reverse .ch-desc{order:1}
  .image-wrapper{height:100%;padding:var(--spacer-xl) var(--spacer-l) var(--spacer-xl) 0}
}
.chapter.no-img{padding-right:var(--spacer-m)}
@media (min-width:960px){.chapter.no-img{padding-right:var(--spacer-xl)}}

/* thumb figure (Figure mask="thumb" parallax) */
.thumb{position:relative;display:block;line-height:0;width:100%;aspect-ratio:var(--ar,.685)}
.thumb .mask{position:relative;width:100%;height:100%;overflow:hidden;border-radius:var(--radius-default);transform:translateZ(0);transition:border-radius .6s var(--ease)}
.thumb .img-wrapper{position:relative;width:100%;height:100%}
.thumb img{width:100%;height:100%;object-fit:cover;transform:scale(var(--s,1));transition:transform .6s var(--ease)}
@media (min-width:960px){
  .thumb{height:calc(100vh - 2 * var(--spacer-xl));width:calc((100vh - 2 * var(--spacer-xl)) * var(--ar,.685));aspect-ratio:auto;flex:0 0 auto}
  .thumb img{--s:1.22}
  @media (hover:hover){
    .thumb:hover .mask{border-radius:var(--radius-thumb)}
    .thumb:hover img{--s:1.27}
  }
}
.js .thumb[data-inview] img{--s:1.15}
@media (min-width:960px){.js .thumb[data-inview] img{--s:1.35}}
.js .thumb[data-inview].is-in img{--s:1}
@media (min-width:960px){.js .thumb[data-inview].is-in img{--s:1.22}}
@media (min-width:960px) and (hover:hover){.js .thumb[data-inview].is-in:hover img{--s:1.27}}

/* gallery chapter: several thumbs in the image wrapper */
@media (max-width:959px){
  .image-wrapper.gallery{overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--spacer-m) * -1);padding:0 var(--spacer-m);scrollbar-width:none}
  .image-wrapper.gallery::-webkit-scrollbar{display:none}
  .image-wrapper.gallery .thumb{flex:0 0 72%;scroll-snap-align:center}
  .image-wrapper.gallery .thumb.land{flex-basis:88%}
}

/* price lists (the printed menu inside the description cell) */
.prices{width:100%;max-width:340px;text-align:left}
.prices .cap{display:flex;justify-content:space-between;color:var(--grey);margin-bottom:8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.prices li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:3px 0}
.prices li .n{flex:1 1 auto}
.prices li .p{flex:0 0 auto;font-variant-numeric:tabular-nums}
.prices .sub{color:var(--grey);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin:12px 0 4px}
.prices .sub:first-child{margin-top:0}
.desc-prose{max-width:358px}
.desc-prose p+p{margin-top:14px}
.desc-prose .u-link{margin-top:16px}
.quotes{display:grid;gap:18px;max-width:358px}
.quotes blockquote{margin:0}
.quotes cite{display:block;margin-top:6px;font-style:normal;color:var(--grey)}
.badge{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--grey);border-radius:var(--radius-default);padding:7px 14px;margin-bottom:4px}
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;text-align:left;width:100%;max-width:358px}
.visit-grid .lbl{display:block;color:var(--grey);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
@media (max-width:520px){.visit-grid{grid-template-columns:1fr;text-align:center;justify-items:center}}
.visit-grid a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@media (min-width:960px) and (max-height:780px){
  .ch-desc .typo-s,.prices li,.visit-grid,.quotes{font-size:13px;line-height:16px}
  .prices li{padding:2px 0}
}

/* ---------- colophon column (end of the track) ---------- */
.colophon{padding:var(--spacer-xl) var(--spacer-m)}
.colophon .extract{display:grid;grid-template-rows:auto 1fr auto;gap:var(--spacer-xl);border-top:1px solid var(--grey);padding-top:var(--spacer-l)}
.colophon .label{display:block;margin-bottom:var(--spacer-m);color:var(--grey)}
.colophon .follow a{display:block;max-width:max-content}
.colophon .cta p{margin-bottom:var(--spacer-l)}
.colophon .legal{display:grid;gap:6px}
.colophon .legal a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (min-width:960px){
  .colophon{padding:0 var(--spacer-xl) 0 var(--spacer-l)}
  .colophon .extract{width:max(440px,23vw);height:100%;border-top:0;border-left:1px solid var(--grey);border-right:1px solid var(--grey);padding:var(--spacer-xl) var(--spacer-l)}
}

/* ---------- cursor (apollo) ---------- */
.apollo-wrapper{position:fixed;top:0;left:0;z-index:3000;pointer-events:none;mix-blend-mode:multiply;display:none}
.apollo{position:absolute;top:-60px;left:-60px;width:120px;height:120px;border-radius:50%;background:var(--yellow);transform:scale(.15);transition:transform .8s var(--ease)}
.apollo-wrapper.hover .apollo{transform:scale(.5)}
.apollo-wrapper.hover-dark{mix-blend-mode:screen}
@media (hover:hover) and (pointer:fine){html.js .apollo-wrapper{display:block}}

/* ---------- concept toast ---------- */
.toast{position:fixed;left:16px;bottom:16px;z-index:2000;max-width:min(540px,calc(100vw - 32px));background:var(--black);color:var(--light);border-radius:18px;padding:14px 44px 14px 16px;font-size:13px;line-height:17px;transform:translateY(calc(100% + 30px));opacity:0;transition:transform .6s var(--ease),opacity .6s var(--ease);visibility:hidden}
.toast.is-on{transform:none;opacity:1;visibility:visible}
.toast a{text-decoration:underline;text-underline-offset:2px}
.toast button{position:absolute;right:8px;top:8px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:16px;line-height:1}
.toast button:hover{background:rgba(255,255,255,.12)}
@media (min-width:960px){.toast{left:66px}}

/* ---------- reveal states (only with JS) ---------- */
.js [data-inview="text"],.js [data-inview="fade"]{opacity:0}
.js [data-inview="text"]{transform:translateY(15px)}
.js [data-inview="scale"]{transform:scale(0)}
.js [data-inview="text"],.js [data-inview="fade"],.js [data-inview="scale"]{transition:opacity .6s var(--ease) var(--d,.1s),transform .6s var(--ease) var(--d,.1s)}
.js [data-inview].is-in{opacity:1;transform:none}
.js .scroll-bg.is-in{transition:transform .4s var(--ease)}
.js [data-split].is-split{opacity:1;transform:none;transition:none}
.js.is-loading body{background:var(--accent)}
.js.is-loading .track,.js.is-loading .site-header,.js.is-loading .aside .mark{visibility:hidden}
.js.is-loading .hero,.js.is-loading .hero *{visibility:visible}
.js.is-loading .track>*:not(.hero){visibility:hidden}
.js.is-loading .hero .cover{transform:translateY(100%) scale(.6);border-radius:300px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;transition-delay:0s!important}
  .js [data-inview]{opacity:1!important;transform:none!important}
  .js .thumb[data-inview] img{--s:1!important}
  .js.is-loading .hero .cover{transform:none;border-radius:0}
  .apollo-wrapper{display:none!important}
}