/* Osteria dei Mosaici — cucina pugliese, Via Paravia · Bespoke Studio (concept)
   Palette Puglia: calce/crema + terracotta + Adriatico teal + ocra + carbone-oliva.
   Font: Zilla Slab (display) + DM Sans (testo). */

:root{
  --calce:#F6F1E7; --calce-2:#EEE5D3; --paper:#FCF8F0;
  --terra:#C4562E; --terra-deep:#A5401F; --terra-soft:#d97a52;
  --teal:#2E7D74; --teal-deep:#1F5A53;
  --ochre:#D99A2B; --olive:#2C2A22; --muted:#6E6455;
  --line:rgba(44,42,34,.14);
  --serif:'Zilla Slab',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --wrap:1180px; --r:14px;
  --shadow:0 18px 44px -22px rgba(44,42,34,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans); color:var(--olive); background:var(--calce); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.08; letter-spacing:.005em}
em{font-style:italic}

.wrap{width:min(100% - 2.4rem,var(--wrap)); margin-inline:auto}
.wrap--narrow{width:min(100% - 2.4rem,760px)}
.eyebrow{font-family:var(--sans); font-weight:700; letter-spacing:.2em; text-transform:uppercase; font-size:.72rem; color:var(--terra); margin-bottom:.7rem}
.section-head{margin-bottom:2.6rem; max-width:640px}
.section-head--center{margin-inline:auto; text-align:center}
.section-title{font-size:clamp(1.9rem,4.4vw,3rem); color:var(--olive)}

/* reveal (flash-safe) */
.js .reveal, .js .reveal-hero{opacity:0}
.js.reduced-motion .reveal, .js.reduced-motion .reveal-hero,
html:not(.js) .reveal, html:not(.js) .reveal-hero{opacity:1}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none !important; transition:none !important} }

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans); font-weight:600; font-size:.95rem; padding:.85rem 1.5rem; border-radius:999px; border:1.5px solid transparent; cursor:pointer; text-decoration:none; transition:transform .2s,background .2s,color .2s,border-color .2s}
.btn--primary{background:var(--terra); color:#fff}
.btn--primary:hover{background:var(--terra-deep); transform:translateY(-2px)}
.btn--ghost{background:transparent; color:var(--olive); border-color:var(--olive)}
.btn--ghost:hover{background:var(--olive); color:var(--calce); transform:translateY(-2px)}
.btn--sm{padding:.55rem 1.1rem; font-size:.85rem}

.skip-link{position:absolute; left:-999px; top:0; background:var(--terra); color:#fff; padding:.6rem 1rem; z-index:200; border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* brand mark (mosaic tessere mask) */
.brand{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none}
.brand__mark{width:26px; height:26px; background:var(--terra); -webkit-mask:url("../img/mark.svg") center/contain no-repeat; mask:url("../img/mark.svg") center/contain no-repeat}
.brand__mark--light{background:var(--ochre)}
.brand__name{font-family:var(--serif); font-weight:700; font-size:1.42rem; letter-spacing:.01em; color:var(--olive)}

/* header */
.site-header{position:sticky; top:0; z-index:90; background:var(--calce); border-bottom:1px solid var(--line)}
.site-header__inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; height:66px}
.main-nav{display:flex; gap:1.6rem}
.main-nav a{font-family:var(--sans); font-weight:600; font-size:.9rem; text-decoration:none; color:var(--olive); opacity:.85; transition:opacity .2s,color .2s}
.main-nav a:hover{opacity:1; color:var(--terra)}
.site-header__actions{display:flex; align-items:center; gap:.7rem}
.lang-toggle{font-family:var(--sans); font-weight:700; font-size:.8rem; letter-spacing:.08em; background:none; border:1.5px solid var(--line); border-radius:999px; padding:.35rem .7rem; cursor:pointer; color:var(--olive)}
.lang-toggle:hover{border-color:var(--terra); color:var(--terra)}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:.3rem}
.burger span{width:24px; height:2px; background:var(--olive); border-radius:2px}

/* intro overlay */
.intro{position:fixed; inset:0; z-index:300; background:var(--terra-deep); display:flex; align-items:center; justify-content:center; transition:opacity .6s,visibility .6s}
.intro.hide{opacity:0; visibility:hidden}
.intro__inner{text-align:center; color:var(--calce); padding:2rem}
.intro__tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:5px; width:52px; margin:0 auto 1.1rem}
.intro__tiles i{width:100%; aspect-ratio:1; border-radius:3px; animation:pop .7s both}
.intro__tiles i:nth-child(1){background:var(--ochre); animation-delay:.05s}
.intro__tiles i:nth-child(2){background:var(--calce); animation-delay:.15s}
.intro__tiles i:nth-child(3){background:var(--teal); animation-delay:.25s}
.intro__tiles i:nth-child(4){background:var(--terra-soft); animation-delay:.35s}
@keyframes pop{from{opacity:0; transform:scale(.2)} to{opacity:1; transform:none}}
.intro__word{display:block; font-family:var(--serif); font-weight:700; font-size:clamp(2rem,7vw,3.6rem); animation:fadeUp .8s .3s both}
.intro__eyebrow{display:block; font-family:var(--sans); letter-spacing:.26em; text-transform:uppercase; font-size:.7rem; color:var(--ochre); margin-top:.6rem; animation:fadeUp .8s .45s both}
@keyframes fadeUp{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}

/* hero */
.hero{position:relative; min-height:90vh; display:flex; align-items:flex-end; color:#fff; overflow:hidden}
.hero__media{position:absolute; inset:0; z-index:0}
.hero__media img{width:100%; height:100%; object-fit:cover}
.hero__scrim{position:absolute; inset:0; background:linear-gradient(to top,rgba(40,18,10,.92) 3%,rgba(50,24,14,.5) 44%,rgba(50,24,14,.24) 100%)}
.hero__inner{position:relative; z-index:1; padding:3.5rem 0 clamp(3rem,7vh,5rem)}
.hero__eyebrow{font-family:var(--sans); font-weight:600; letter-spacing:.18em; text-transform:uppercase; font-size:.74rem; color:#f0c98f; margin-bottom:1rem}
.hero__title{font-size:clamp(2.9rem,9vw,6.2rem); text-shadow:0 2px 30px rgba(0,0,0,.3)}
.hero__title em{display:block; color:#f0b184}
.hero__lead{max-width:46ch; margin-top:1.2rem; font-size:1.15rem; color:rgba(255,255,255,.93)}
.hero__row{margin-top:1.4rem}
.rating-badge{display:inline-flex; align-items:center; gap:.6rem; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:.4rem .9rem}
.rating-badge__stars{color:#F4C752; letter-spacing:1px; font-size:.95rem}
.rating-badge__stars .half{opacity:.4}
.rating-badge__txt{font-size:.88rem; color:#fff}
.hero__cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.7rem}
.hero__cta .btn--ghost{color:#fff; border-color:rgba(255,255,255,.7)}
.hero__cta .btn--ghost:hover{background:#fff; color:var(--olive)}

/* gesto / mosaico */
.gesto{background:var(--paper); padding:clamp(3.5rem,8vw,6rem) 0; border-bottom:1px solid var(--line)}
.gesto__inner{display:grid; grid-template-columns:300px 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.mosaico{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:100%; max-width:300px; margin-inline:auto}
.tessera{aspect-ratio:1; border-radius:5px; transform-origin:center}
.t-terra{background:var(--terra)} .t-teal{background:var(--teal)} .t-ochre{background:var(--ochre)}
.t-cream{background:var(--calce-2); border:1px solid var(--line)} .t-olive{background:var(--olive)}
.gesto__title{font-size:clamp(2.1rem,5.5vw,3.4rem); margin:.3rem 0 .9rem}
.gesto__title em{color:var(--terra)}
.gesto__lead{color:var(--muted); font-size:1.1rem; max-width:54ch}

/* menù del giorno */
.menu{padding:clamp(3.5rem,8vw,6rem) 0; background:var(--teal-deep); color:var(--calce)}
.menu__inner{display:grid; grid-template-columns:0.85fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.menu__media{border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.menu__media img{width:100%; height:100%; object-fit:cover}
.menu .eyebrow{color:var(--ochre)}
.menu__text .section-title{color:#fff}
.menu__text p{color:rgba(246,241,231,.86); margin-top:1rem}
.menu__list{list-style:none; margin:1.4rem 0; border-top:1px solid rgba(255,255,255,.18)}
.menu__list li{padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.18); font-family:var(--serif); font-size:1.2rem; display:flex; align-items:center; gap:.7rem}
.menu__list li::before{content:""; width:12px; height:12px; border-radius:3px; background:var(--ochre); flex:0 0 auto}
.menu__list li:nth-child(2)::before{background:var(--terra-soft)}
.menu__list li:nth-child(3)::before{background:var(--calce)}
.menu__note{font-size:.95rem; color:rgba(246,241,231,.7) !important; font-style:italic}
.menu__text .btn{margin-top:1.4rem; background:var(--ochre); color:var(--olive)}
.menu__text .btn:hover{background:#e9ad3f}

/* piatti mosaico */
.piatti{padding:clamp(3.5rem,8vw,6rem) 0; background:var(--calce)}
.piatti__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.piatto{position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:1; box-shadow:var(--shadow)}
.piatto img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.piatto:hover img{transform:scale(1.06)}
.piatto figcaption{position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1rem .9rem; font-family:var(--serif); font-weight:600; font-size:1.2rem; color:#fff; background:linear-gradient(to top,rgba(30,14,8,.85),transparent)}
.piatti__note{margin-top:1.8rem; text-align:center; font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--terra)}

/* casa */
.casa{position:relative}
.casa__media{height:clamp(320px,52vh,560px)}
.casa__media img{width:100%; height:100%; object-fit:cover}
.casa__inner{position:relative; margin-top:-90px; padding-bottom:clamp(3rem,7vw,5rem)}
.casa__text{background:var(--paper); border:1px solid var(--line); border-top:4px solid var(--terra); border-radius:var(--r); box-shadow:var(--shadow); padding:clamp(2rem,4vw,3rem); max-width:640px}
.casa__text p{color:var(--muted); margin-top:1rem}
.casa__text .section-title{color:var(--olive)}

/* gallery */
.gallery{padding:clamp(3.5rem,8vw,6rem) 0; background:var(--paper)}
.gallery__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.gallery__item{border:0; padding:0; cursor:pointer; background:none; border-radius:12px; overflow:hidden; aspect-ratio:4/3}
.gallery__item img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.gallery__item:hover img{transform:scale(1.07)}

/* reviews */
.reviews{padding:clamp(3.5rem,8vw,6rem) 0; background:var(--calce); border-top:1px solid var(--line)}
.reviews__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem}
.review{background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--teal); border-radius:12px; padding:1.6rem 1.7rem}
.review p{font-family:var(--serif); font-style:italic; font-size:1.22rem; line-height:1.42; color:var(--olive)}
.review cite{display:block; margin-top:.9rem; font-family:var(--sans); font-style:normal; font-weight:600; font-size:.85rem; letter-spacing:.05em; color:var(--terra)}
.reviews__src{text-align:center; margin-top:1.6rem; font-size:.85rem; color:var(--muted)}

/* dove */
.dove{padding:clamp(3.5rem,8vw,5rem) 0 0; background:var(--paper)}
.dove__inner{display:grid; grid-template-columns:1fr 0.85fr; gap:clamp(2rem,5vw,4rem); align-items:center; padding-bottom:clamp(3rem,6vw,4.5rem)}
.dove__media{border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.dove__media img{width:100%; height:100%; object-fit:cover}
.dove__status{display:inline-block; font-family:var(--sans); font-weight:600; font-size:.9rem; color:var(--terra); background:var(--calce); border:1px solid var(--line); border-radius:999px; padding:.4rem .95rem; margin:.4rem 0 1.2rem}
.hours{list-style:none; border-top:1px solid var(--line); margin-bottom:1.5rem}
.hours li{display:flex; justify-content:space-between; padding:.55rem 0; border-bottom:1px solid var(--line); font-size:.96rem}
.hours li span:first-child{color:var(--muted)}
.hours li.is-today{font-weight:700; color:var(--terra)}
.hours li.is-today span:first-child{color:var(--terra)}
.dove__meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-bottom:1.6rem; font-size:.92rem}
.dove__meta strong{font-family:var(--sans); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--terra)}
.dove__meta a{color:var(--olive); text-decoration:underline; text-underline-offset:3px}
.dove__map{height:clamp(300px,42vh,440px)}
.dove__map iframe{width:100%; height:100%; border:0; display:block; filter:grayscale(.15) contrast(1.02)}

/* faq */
.faq{padding:clamp(3.5rem,8vw,6rem) 0; background:var(--calce)}
.faq__item{border:1px solid var(--line); border-radius:12px; background:var(--paper); margin-bottom:.8rem; padding:0 1.4rem}
.faq__item summary{cursor:pointer; list-style:none; padding:1.1rem 0; font-family:var(--serif); font-size:1.25rem; color:var(--olive); display:flex; justify-content:space-between; align-items:center; gap:1rem}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+"; font-family:var(--sans); color:var(--terra); font-size:1.4rem; transition:transform .25s}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item p{padding:0 0 1.2rem; color:var(--muted)}

/* footer */
.site-footer{background:var(--olive); color:var(--calce); padding:clamp(2.5rem,5vw,3.5rem) 0}
.site-footer__inner{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:1.5rem; align-items:start}
.site-footer__brand{display:flex; align-items:center; gap:.6rem}
.site-footer__brand .brand__name{color:#fff}
.site-footer__col p{font-size:.92rem; color:rgba(246,241,231,.82); margin-bottom:.4rem}
.site-footer__col strong{color:#fff}
.site-footer__col a{color:var(--ochre); text-decoration:none}
.site-footer__disclaimer{grid-column:1/-1; margin-top:1.4rem; padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.14); font-size:.78rem; color:rgba(246,241,231,.6); line-height:1.5}

/* lightbox */
.lightbox{position:fixed; inset:0; z-index:400; background:rgba(28,12,6,.94); display:flex !important; align-items:center; justify-content:center; padding:2rem}
.lightbox[hidden]{display:none !important}
.lightbox img{max-width:92vw; max-height:88vh; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox__close{position:absolute; top:1.2rem; right:1.6rem; background:none; border:0; color:#fff; font-size:2.6rem; line-height:1; cursor:pointer}

/* responsive */
@media (max-width:900px){
  .gesto__inner{grid-template-columns:1fr; text-align:center}
  .mosaico{max-width:220px}
  .gesto__lead{margin-inline:auto}
  .menu__inner{grid-template-columns:1fr}
  .menu__media{max-width:460px}
  .piatti__grid{grid-template-columns:repeat(2,1fr)}
  .gallery__grid{grid-template-columns:repeat(2,1fr)}
  .reviews__grid{grid-template-columns:1fr}
  .dove__inner{grid-template-columns:1fr}
  .dove__media{max-width:520px}
}
@media (max-width:720px){
  .main-nav{position:fixed; inset:66px 0 auto; background:var(--calce); flex-direction:column; padding:1.4rem 1.5rem; border-bottom:1px solid var(--line); transform:translateY(-140%); transition:transform .35s; gap:1.1rem; box-shadow:var(--shadow)}
  .main-nav.nav-open{transform:translateY(0)}
  .burger{display:flex}
  .site-footer__inner{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .piatti__grid{grid-template-columns:1fr 1fr}
  .gallery__grid{grid-template-columns:1fr 1fr}
  .site-footer__inner{grid-template-columns:1fr}
  .hero{min-height:84vh}
}