/* ============================================================
   LA ROTONDA DI CANTAVENERA — Design System "Trattoria Editoriale 1928"
   Mobile-first · vanilla CSS · nessuna dipendenza
   ============================================================ */

:root{
  /* Palette — derivata dal logo (timbro mattone) e dalla crosta di pane */
  --cream:      #FAF5EC;
  --cream-2:    #F2EADB;
  --paper:      #FFFDF8;
  --ink:        #241610;
  --ink-soft:   #6B5748;
  --brick:      #9E3B32;
  --brick-deep: #7C2D26;
  --amber:      #C4883B;
  --amber-soft: #E3B871;
  --night:      #1B110B;
  --night-2:    #2B1B11;
  --night-soft: #C9B49B;
  --line:       #E6DAC4;
  --line-dark:  #3D2A1C;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "DM Sans", -apple-system, sans-serif;

  --nav-h: 4.25rem;
  --dock-h: 4.15rem;
  --radius: 1.1rem;
  --pad: clamp(1.25rem, 5vw, 3rem);
  --ease-out: cubic-bezier(.22,.61,.2,1);
  --shadow-card: 0 18px 45px -18px rgba(36,22,16,.28);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  font-size:1rem;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
ul{ list-style:none }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit }
::selection{ background:var(--brick); color:var(--cream) }

body.dock-space{ padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom)) }
@media(min-width:900px){ body.dock-space{ padding-bottom:0 } }

/* ---------- Texture carta (grana leggerissima, solo CSS) ---------- */
.grain::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:4;
  opacity:.035; mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(36,22,16,.9) .5px, transparent .6px);
  background-size:9px 9px;
}

/* ============ TIPOGRAFIA ============ */
.eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brick); display:inline-flex; align-items:center; gap:.65rem;
}
.eyebrow::before{ content:""; width:2rem; height:1px; background:currentColor; opacity:.6 }
.on-dark .eyebrow{ color:var(--amber-soft) }

.h-display{
  font-family:var(--font-display); font-weight:600; line-height:1.02;
  letter-spacing:-.015em; text-wrap:balance;
}
h1.h-display{ font-size:clamp(2.7rem, 11.5vw, 6.2rem) }
h2.h-display{ font-size:clamp(2.1rem, 8vw, 4rem) }
h3.h-display{ font-size:clamp(1.45rem, 5vw, 2.1rem) }
.h-display em{ font-style:italic; font-weight:500; color:var(--brick) }
.on-dark .h-display em{ color:var(--amber-soft) }

.lead{ font-size:clamp(1.05rem, 2.4vw, 1.25rem); color:var(--ink-soft); max-width:38ch }
.on-dark{ color:var(--cream) }
.on-dark .lead{ color:var(--night-soft) }

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  transition:background .35s var(--ease-out), box-shadow .35s, transform .4s;
}
.nav.solid{ background:rgba(250,245,236,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line) }
.nav.hide{ transform:translateY(-100%) }

.brand{ display:flex; align-items:center; gap:.55rem; z-index:60 }
.brand-flame{
  width:1.9rem; height:2.75rem; flex:none; background:var(--cream);
  -webkit-mask:url("img/flame.png") center/contain no-repeat;
  mask:url("img/flame.png") center/contain no-repeat;
  transform-origin:50% 88%;
  transition:transform .3s var(--ease-out);
}
@keyframes flame-dance{
  0%,100%{ transform:rotate(0) scale(1) }
  20%{ transform:rotate(-3deg) scale(1.06,1.1) }
  45%{ transform:rotate(2.5deg) scale(.97,1.04) }
  70%{ transform:rotate(-1.5deg) scale(1.04,1.08) }
}
.brand:hover .brand-flame,.brand:focus-visible .brand-flame{ animation:flame-dance .8s ease-in-out infinite }
.brand>span:last-child{ transition:transform .35s var(--ease-out) }
.brand:hover>span:last-child{ transform:translateX(3px) }
@media(prefers-reduced-motion:reduce){ .brand:hover .brand-flame{ animation:none } }
.nav.solid .brand-flame{ background:var(--brick) }
body.menu-open .nav .brand-flame{ background:var(--cream) }
.brand-name{ font-family:var(--font-body); font-weight:800; font-size:1.14rem; letter-spacing:.2em; text-transform:uppercase; line-height:1; white-space:nowrap }
.brand-sub{ font-size:.58rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--brick); margin-top:.18rem }
.nav-dark .brand-name{ color:var(--cream) }
.nav-dark .brand-sub{ color:var(--amber-soft) }
.nav.solid .brand-name{ color:var(--ink) }
.nav.solid .brand-sub{ color:var(--brick) }

.nav-links{ display:none; align-items:center; gap:2.2rem }
.nav-links a{
  font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:.4rem 0; position:relative; color:var(--ink);
}
.nav-dark:not(.solid) .nav-links a{ color:var(--cream) }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--brick); transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease-out);
}
.nav-links a:hover::after,.nav-links a[aria-current]::after{ transform:scaleX(1); transform-origin:left }
@media(min-width:900px){ .nav-links{ display:flex } }

.nav .nav-cta{ display:none }
@media(min-width:900px){
  .nav .nav-cta{ display:inline-flex }
}

/* Hamburger */
.burger{ z-index:60; width:2.6rem; height:2.6rem; display:grid; place-items:center; border-radius:50% }
.burger span{ position:relative; width:1.45rem; height:2px; background:var(--ink); transition:background .2s; border-radius:2px }
.nav-dark:not(.solid) .burger span{ background:var(--cream) }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:100%; height:2px; background:inherit; border-radius:2px;
  transition:transform .3s var(--ease-out), top .3s;
}
.burger span::before{ top:-7px } .burger span::after{ top:7px }
body.menu-open .burger span{ background:transparent !important; height:0 !important }
body.menu-open .burger span::before{ top:0; transform:rotate(45deg); background:var(--cream) }
body.menu-open .burger span::after{ top:0; transform:rotate(-45deg); background:var(--cream) }
@media(min-width:900px){ .burger{ display:none } }

/* Overlay menu mobile */
.overlay{
  position:fixed; inset:0; z-index:55; background:var(--night);
  display:flex; flex-direction:column; justify-content:center; gap:.4rem;
  padding:calc(var(--nav-h) + 1rem) var(--pad) 2rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .55s var(--ease-out);
}
body.menu-open .overlay{ clip-path:inset(0 0 0 0) }
.overlay a.big{
  font-family:var(--font-display); font-size:clamp(2.2rem,9vw,3.4rem); font-weight:600;
  color:var(--cream); line-height:1.25; display:flex; align-items:baseline; gap:.9rem;
  opacity:0; transform:translateY(18px); transition:opacity .4s, transform .5s var(--ease-out);
}
.overlay a.big i{ font-style:normal; font-family:var(--font-body); font-size:.7rem; font-weight:700; letter-spacing:.2em; color:var(--amber-soft) }
body.menu-open .overlay a.big{ opacity:1; transform:none }
body.menu-open .overlay a.big:nth-child(2){ transition-delay:.08s }
body.menu-open .overlay a.big:nth-child(3){ transition-delay:.14s }
body.menu-open .overlay a.big:nth-child(4){ transition-delay:.2s }
body.menu-open .overlay a.big:nth-child(5){ transition-delay:.26s }
body.menu-open .overlay a.big:nth-child(6){ transition-delay:.32s }
.overlay-foot{ margin-top:2.4rem; display:grid; gap:.4rem; color:var(--night-soft); font-size:.9rem; opacity:0; transition:opacity .5s .35s }
body.menu-open .overlay-foot{ opacity:1 }
.overlay-foot a{ color:var(--amber-soft); font-weight:600 }
body.menu-open{ overflow:hidden }
body.menu-open .nav{ z-index:60; background:transparent; box-shadow:none; transform:none; backdrop-filter:none; -webkit-backdrop-filter:none }
body.menu-open .nav .brand-name{ color:var(--cream) }
body.menu-open .nav .brand-sub{ color:var(--amber-soft) }

/* ============ BOTTONI ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.7rem; border-radius:100px;
  font-weight:700; font-size:.86rem; letter-spacing:.1em; text-transform:uppercase;
  transition:transform .25s var(--ease-out), box-shadow .25s, background .25s, color .25s;
  will-change:transform;
}
.btn:active{ transform:scale(.97) }
.btn-primary{ background:var(--brick); color:var(--cream); box-shadow:0 12px 28px -12px rgba(158,59,50,.55) }
.btn-primary:hover{ background:var(--brick-deep); transform:translateY(-2px) }
.btn-ghost{ border:1.5px solid currentColor; color:var(--ink) }
.btn-ghost:hover{ background:var(--ink); color:var(--cream); transform:translateY(-2px) }
.on-dark .btn-ghost,.btn-ghost.on-dark{
  color:var(--cream); border-color:rgba(247,241,230,.95);
  background:rgba(20,14,10,.42);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.on-dark .btn-ghost:hover,.btn-ghost.on-dark:hover{ background:var(--cream); color:var(--night); text-shadow:none }
.btn-amber{ background:var(--amber); color:var(--night); box-shadow:0 12px 28px -12px rgba(196,136,59,.6) }
.btn-amber:hover{ background:var(--amber-soft); transform:translateY(-2px) }

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--pad) clamp(5rem, 12vh, 7.5rem);
  color:var(--cream); isolation:isolate; overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:-2 }
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
  animation:kenburns 14s var(--ease-out) forwards;
}
@keyframes kenburns{ from{ transform:scale(1.14) } to{ transform:scale(1.02) } }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(27,17,11,.42) 0%, rgba(27,17,11,.12) 38%, rgba(27,17,11,.62) 72%, rgba(27,17,11,.9) 100%);
}
.hero-badge{
  position:absolute; top:calc(var(--nav-h) + 1.2rem); right:var(--pad);
  width:clamp(5.2rem,16vw,7rem); aspect-ratio:1; z-index:2;
  animation:spin 26s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.hero-kicker{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:.3rem .7rem;
  font-size:clamp(.62rem, 2.4vw, .74rem); font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--amber-soft);
  margin-bottom:1.1rem;
}
.hero-kicker::before{ content:""; width:2.2rem; height:1px; background:var(--amber-soft) }
.hero h1{ max-width:12ch; margin-bottom:1.4rem; text-shadow:0 2px 30px rgba(0,0,0,.35) }
.hero .h-display em{ color:var(--amber-soft) }
.hero p{ max-width:34ch; color:rgba(250,245,236,.85); font-size:clamp(1rem,2.5vw,1.2rem); margin-bottom:2rem }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem }
.hero-scroll{
  position:absolute; bottom:1.15rem; left:50%; transform:translateX(-50%);
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(250,245,236,.6);
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
}
.hero-scroll::after{
  content:""; width:1px; height:2.2rem; background:linear-gradient(var(--amber-soft), transparent);
  animation:drip 1.8s ease-in-out infinite;
}
@keyframes drip{ 0%{ transform:scaleY(0); transform-origin:top } 45%{ transform:scaleY(1); transform-origin:top } 55%{ transform:scaleY(1); transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom } }
@media(max-width:899px){ .hero-scroll{ display:none } }

/* entrance hero */
.hero [data-hero]{ opacity:0; transform:translateY(26px); animation:rise .9s var(--ease-out) forwards }
.hero [data-hero="2"]{ animation-delay:.15s }
.hero [data-hero="3"]{ animation-delay:.3s }
.hero [data-hero="4"]{ animation-delay:.45s }
@keyframes rise{ to{ opacity:1; transform:none } }

/* Hero compatta (pagine interne) */
.hero-inner{
  position:relative; padding:calc(var(--nav-h) + clamp(3.5rem,9vh,6rem)) var(--pad) clamp(2.6rem,6vh,4rem);
  background:var(--night); color:var(--cream); overflow:hidden; isolation:isolate;
}
.hero-inner .h-display{ max-width:14ch }
.hero-inner p{ color:var(--night-soft); max-width:52ch; margin-top:1rem; font-size:clamp(.98rem,2.3vw,1.15rem) }
.hero-inner .stamp-bg{
  position:absolute; right:-6%; bottom:-18%; width:clamp(14rem,42vw,26rem); opacity:.07; z-index:-1;
}

/* ============ MARQUEE ============ */
.marquee{
  overflow:hidden; white-space:nowrap; user-select:none;
  background:var(--brick); color:var(--cream);
  padding:.85rem 0; transform:rotate(-1.2deg) scale(1.02); margin:-1px 0;
}
.marquee.amber{ background:var(--amber); color:var(--night); transform:rotate(1.2deg) scale(1.02) }
.marquee-track{ display:inline-flex; gap:2.6rem; padding-right:2.6rem; animation:scrollx 26s linear infinite }
.marquee span{
  font-family:var(--font-display); font-style:italic; font-size:1.05rem; letter-spacing:.06em;
  display:inline-flex; align-items:center; gap:2.6rem;
}
.marquee span::after{ content:"✶"; font-size:.7rem; font-style:normal; opacity:.7 }
@keyframes scrollx{ to{ transform:translateX(-50%) } }

/* ============ SEZIONI ============ */
.section{ padding:clamp(4rem,10vw,7.5rem) var(--pad); position:relative }
.section-dark{ background:var(--night); color:var(--cream) }
.section-cream2{ background:var(--cream-2) }
.wrap{ max-width:72rem; margin:0 auto }
.sec-head{ display:grid; gap:1rem; margin-bottom:clamp(2.2rem,6vw,3.8rem); max-width:46rem }

/* Intro editoriale */
.editorial{ display:grid; gap:2.5rem }
.editorial .h-display{ max-width:16ch }
.ed-body{ display:grid; gap:1.2rem; color:var(--ink-soft); font-size:1.04rem; max-width:56ch }
.ed-body strong{ color:var(--ink) }
.drop::first-letter{
  font-family:var(--font-display); font-weight:700; font-size:3.4em; line-height:.82;
  float:left; padding-right:.12em; color:var(--brick);
}
@media(min-width:900px){
  .editorial{ grid-template-columns:1.1fr .9fr; gap:4rem; align-items:start }
}

/* Numeri heritage */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.6rem; padding-top:2rem; border-top:1px solid var(--line) }
.stat b{ font-family:var(--font-display); font-size:clamp(1.9rem,6vw,3rem); font-weight:700; color:var(--brick); display:block; line-height:1 }
.stat span{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft) }

/* ============ PILASTRI (cards foto) ============ */
.pillars{ display:grid; gap:1.1rem }
@media(min-width:760px){ .pillars{ grid-template-columns:repeat(3,1fr) } }
.pillar{
  position:relative; border-radius:var(--radius); overflow:hidden; isolation:isolate;
  aspect-ratio:4/5.1; display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.5rem; color:var(--cream); box-shadow:var(--shadow-card);
}
.pillar img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out) }
.pillar::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(27,17,11,0) 30%,rgba(27,17,11,.86) 100%); transition:opacity .4s }
.pillar:hover img{ transform:scale(1.06) }
.pillar .tag{
  position:absolute; top:1.1rem; left:1.1rem;
  font-size:.62rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  background:rgba(250,245,236,.14); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(250,245,236,.25); padding:.42rem .8rem; border-radius:100px;
}
.pillar h3{ font-family:var(--font-display); font-size:1.55rem; font-weight:600; margin-bottom:.4rem }
.pillar p{ font-size:.92rem; color:rgba(250,245,236,.82); max-width:30ch }

/* ============ SIGNATURE / FÀUZZA (sezione scura) ============ */
.split{ display:grid; gap:2.4rem; align-items:center }
@media(min-width:900px){ .split{ grid-template-columns:1fr 1fr; gap:4.5rem } }
.split-media{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-card) }
.split-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/4.6 }
.split-media .stamp{
  position:absolute; right:1rem; bottom:1rem; width:clamp(4.6rem,13vw,6rem);
  animation:spin 22s linear infinite reverse;
}
.split-body{ display:grid; gap:1.2rem; justify-items:start }
.split-body .price-note{
  font-family:var(--font-display); font-style:italic; font-size:1.05rem; color:var(--amber-soft);
}
.quote{
  border-left:3px solid var(--amber); padding-left:1.1rem;
  font-family:var(--font-display); font-style:italic; font-size:1.22rem; line-height:1.5; color:var(--cream);
}
.section-dark .split-body p{ color:var(--night-soft) }

/* ============ STRIP FOTO ============ */
.photostrip{ overflow:hidden; padding:0 0 clamp(4rem,9vw,6rem) }
.photostrip-track{ display:flex; gap:1rem; width:max-content; animation:scrollx 42s linear infinite }
.photostrip img{
  height:clamp(13rem,36vw,19rem); width:auto; border-radius:.9rem; object-fit:cover;
  box-shadow:var(--shadow-card);
}
.photostrip:hover .photostrip-track{ animation-play-state:paused }

/* ============ RECENSIONI ============ */
.reviews{ display:grid; gap:1rem }
@media(min-width:820px){ .reviews{ grid-template-columns:repeat(3,1fr) } }
.review{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.7rem 1.5rem; display:grid; gap:1rem; align-content:start;
  box-shadow:0 10px 30px -18px rgba(36,22,16,.18);
}
.review .stars{ color:var(--amber); letter-spacing:.18em; font-size:.85rem }
.review p{ font-family:var(--font-display); font-style:italic; font-size:1.02rem; line-height:1.55 }
.review footer{ font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft) }

/* ============ CTA FINALE ============ */
.cta-final{
  text-align:center; display:grid; justify-items:center; gap:1.4rem;
}
.cta-final .h-display{ max-width:16ch }
.cta-info{
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:center;
  color:var(--night-soft); font-size:.92rem;
}
.cta-info b{ color:var(--cream); font-weight:600 }

/* ============ MENU PAGE ============ */
.cat-nav{
  position:sticky; top:0; z-index:40;
  background:rgba(250,245,236,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  display:flex; gap:.5rem; overflow-x:auto; padding:.7rem var(--pad);
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.cat-nav::-webkit-scrollbar{ display:none }
.cat-nav a{
  flex:none; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.55rem 1.05rem; border-radius:100px; border:1.5px solid var(--line);
  color:var(--ink-soft); transition:all .25s;
}
.cat-nav a.active{ background:var(--brick); border-color:var(--brick); color:var(--cream) }

.menu-section{ padding:clamp(2.8rem,7vw,4.5rem) var(--pad) }
.menu-section:nth-of-type(even){ background:var(--cream-2) }
.menu-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.8rem }
.menu-head .h-display{ font-size:clamp(1.8rem,6.5vw,2.7rem) }
.menu-head .count{ font-family:var(--font-display); font-style:italic; color:var(--ink-soft); font-size:.95rem; flex:none }
.menu-note{ font-size:.92rem; color:var(--ink-soft); font-style:italic; margin:-1.2rem 0 1.6rem; max-width:52ch }

.dishes{ display:grid; gap:.6rem; max-width:46rem }
@media(min-width:1020px){ .dishes.two-col{ max-width:none; grid-template-columns:1fr 1fr; gap:.6rem 3rem } }
.dish{
  display:grid; grid-template-columns:1fr auto; gap:.15rem .9rem;
  padding:1rem 1.1rem; border-radius:.9rem; transition:background .25s;
}
.dish:hover{ background:var(--paper) }
.dish h4{
  font-family:var(--font-display); font-size:1.08rem; font-weight:700; letter-spacing:.02em;
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
}
.dish .sig{
  font-family:var(--font-body); font-size:.56rem; font-weight:800; letter-spacing:.16em;
  background:var(--amber); color:var(--night); padding:.22rem .55rem; border-radius:100px; text-transform:uppercase;
}
.dish .price{
  font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--brick);
  grid-row:span 2; align-self:start; padding-top:.1rem;
}
.dish p{ font-size:.9rem; color:var(--ink-soft); grid-column:1 }
.menu-section.dark{ background:var(--night); color:var(--cream) }
.menu-section.dark .dish:hover{ background:var(--night-2) }
.menu-section.dark .dish p{ color:var(--night-soft) }
.menu-section.dark .dish .price{ color:var(--amber-soft) }
.menu-section.dark .menu-note{ color:var(--night-soft) }
.menu-section.dark .menu-head .count{ color:var(--night-soft) }

/* ============ STORIA ============ */
.timeline{ position:relative; display:grid; gap:2.6rem; padding-left:1.6rem; max-width:44rem }
.timeline::before{ content:""; position:absolute; left:.35rem; top:.4rem; bottom:.4rem; width:2px; background:linear-gradient(var(--brick), var(--amber)) }
.t-item{ position:relative }
.t-item::before{
  content:""; position:absolute; left:-1.6rem; top:.42rem; width:.75rem; height:.75rem; border-radius:50%;
  background:var(--cream); border:2.5px solid var(--brick);
}
.t-item .year{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:var(--brick); line-height:1.1 }
.t-item h3{ font-family:var(--font-display); font-size:1.25rem; margin:.3rem 0 .45rem }
.t-item p{ color:var(--ink-soft); font-size:.98rem; max-width:52ch }

.team{ display:grid; gap:1rem }
@media(min-width:760px){ .team{ grid-template-columns:repeat(2,1fr) } }
.member{
  background:var(--night-2); border:1px solid var(--line-dark); border-radius:var(--radius);
  padding:1.6rem 1.5rem; display:grid; gap:.5rem;
}
.member .role{ font-size:.66rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--amber-soft) }
.member h3{ font-family:var(--font-display); font-size:1.35rem }
.member p{ color:var(--night-soft); font-size:.94rem }

.values{ display:grid; gap:1rem; counter-reset:val }
@media(min-width:760px){ .values{ grid-template-columns:repeat(3,1fr) } }
.value{
  counter-increment:val; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.6rem 1.5rem;
}
.value::before{
  content:"0" counter(val); font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:1.9rem; color:var(--amber); display:block; margin-bottom:.7rem; line-height:1;
}
.value h3{ font-family:var(--font-display); font-size:1.2rem; margin-bottom:.4rem }
.value p{ font-size:.92rem; color:var(--ink-soft) }

.family-photo{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-card) }
.family-photo img{ width:100%; object-fit:cover; aspect-ratio:3/2 }
.family-photo figcaption{
  background:var(--paper); border:1px solid var(--line); border-top:0;
  padding:1rem 1.3rem; font-family:var(--font-display); font-style:italic; color:var(--ink-soft); font-size:.95rem;
  border-radius:0 0 var(--radius) var(--radius);
}

/* ============ GALLERIA ============ */
.masonry{ columns:2; column-gap:.8rem }
@media(min-width:760px){ .masonry{ columns:3; column-gap:1rem } }
.masonry figure{
  break-inside:avoid; margin-bottom:.8rem; position:relative; border-radius:.9rem; overflow:hidden;
  box-shadow:0 12px 30px -16px rgba(36,22,16,.3);
}
.masonry img{ width:100%; transition:transform .7s var(--ease-out) }
.masonry figure:hover img{ transform:scale(1.05) }
.masonry figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.6rem .9rem .7rem;
  background:linear-gradient(transparent, rgba(27,17,11,.82));
  color:var(--cream); font-size:.78rem; font-family:var(--font-display); font-style:italic;
  opacity:0; transform:translateY(6px); transition:all .35s;
}
.masonry figure:hover figcaption{ opacity:1; transform:none }
@media(hover:none){ .masonry figcaption{ opacity:1; transform:none } }

/* ============ CONTATTI ============ */
.contact-grid{ display:grid; gap:1rem }
@media(min-width:900px){ .contact-grid{ grid-template-columns:1.05fr .95fr; gap:1.4rem; align-items:start } }
.info-cards{ display:grid; gap:1rem }
@media(min-width:560px){ .info-cards{ grid-template-columns:1fr 1fr } }
.icard{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem 1.4rem; display:grid; gap:.45rem; align-content:start;
}
.icard .ic{ width:2.4rem; height:2.4rem; border-radius:.75rem; background:var(--cream-2); display:grid; place-items:center; color:var(--brick); margin-bottom:.4rem }
.icard h3{ font-family:var(--font-display); font-size:1.12rem }
.icard p{ font-size:.92rem; color:var(--ink-soft); white-space:pre-line }
.icard a.link{ font-weight:700; color:var(--brick); font-size:.92rem }
.icard .open-now{ display:inline-flex; align-items:center; gap:.45rem; font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase }
.icard .open-now::before{ content:""; width:.55rem; height:.55rem; border-radius:50%; background:#2E7D32; box-shadow:0 0 0 4px rgba(46,125,50,.15) }
.icard .open-now.closed::before{ background:var(--brick); box-shadow:0 0 0 4px rgba(158,59,50,.15) }

.map-embed{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-card); aspect-ratio:4/3 }
.map-embed iframe{ width:100%; height:100%; border:0; display:block }

/* form */
.book-card{
  background:var(--night); color:var(--cream); border-radius:calc(var(--radius) + .3rem);
  padding:clamp(1.6rem,5vw,2.6rem); display:grid; gap:1.3rem; box-shadow:var(--shadow-card);
  position:relative; overflow:hidden; isolation:isolate;
}
.book-card .stamp-bg{ position:absolute; right:-12%; top:-16%; width:15rem; opacity:.06; z-index:-1 }
.book-card h2{ font-size:clamp(1.7rem,6vw,2.3rem) }
.book-card .h-display em{ color:var(--amber-soft) }
.book-card > p{ color:var(--night-soft); font-size:.95rem; margin-top:-.6rem }
.f-grid{ display:grid; gap:.9rem }
@media(min-width:560px){ .f-grid{ grid-template-columns:1fr 1fr } .f-grid .full{ grid-column:1/-1 } }
.field{ display:grid; gap:.35rem }
.field label{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--amber-soft) }
.field input,.field select,.field textarea{
  font:inherit; color:var(--cream); background:var(--night-2);
  border:1px solid var(--line-dark); border-radius:.8rem; padding:.85rem 1rem;
  transition:border-color .25s, box-shadow .25s; width:100%; -webkit-appearance:none; appearance:none;
}
.field :is(input,select,textarea):focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(196,136,59,.22) }
.field ::placeholder{ color:#7d6a58 }
.form-note{ font-size:.78rem; color:var(--night-soft) }
.toast{
  position:fixed; left:50%; bottom:calc(var(--dock-h) + env(safe-area-inset-bottom) + 1rem);
  transform:translate(-50%, 140%); z-index:80;
  background:var(--ink); color:var(--cream); padding:1rem 1.4rem; border-radius:1rem;
  font-size:.9rem; max-width:min(92vw,26rem); text-align:center; box-shadow:0 20px 50px -12px rgba(0,0,0,.5);
  transition:transform .5s var(--ease-out), visibility .5s;
  visibility:hidden;
}
.toast.show{ transform:translate(-50%,0); visibility:visible }
@media(min-width:900px){ .toast{ bottom:1.4rem } }

/* ============ FOOTER ============ */
.footer{
  background:var(--night); color:var(--night-soft);
  padding:clamp(3.5rem,8vw,5.5rem) var(--pad) 2rem;
}
.footer-grid{ display:grid; gap:2.4rem; max-width:72rem; margin:0 auto }
@media(min-width:820px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1.2fr } }
.footer .brand-name{ color:var(--cream); font-size:1.3rem }
.footer .brand-sub{ color:var(--amber-soft) }
.footer p{ font-size:.9rem; max-width:30ch }
.footer h4{ font-size:.7rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--cream); margin-bottom:1rem }
.footer ul{ display:grid; gap:.55rem; font-size:.92rem }
.footer a:hover{ color:var(--amber-soft) }
.footer-bottom{
  max-width:72rem; margin:2.8rem auto 0; padding-top:1.4rem;
  border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:space-between;
  font-size:.76rem;
}
.footer-bottom a{ text-decoration:underline; text-underline-offset:3px }

/* ============ DOCK MOBILE (barra azioni) ============ */
.dock{
  position:fixed; left:.7rem; right:.7rem; bottom:calc(.7rem + env(safe-area-inset-bottom));
  z-index:45; display:grid; grid-template-columns:1fr 1fr 1fr; gap:.4rem;
  background:rgba(27,17,11,.9); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(250,245,236,.12); border-radius:1.3rem; padding:.45rem;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.55);
}
.dock a{
  display:flex; flex-direction:column; align-items:center; gap:.18rem;
  padding:.5rem .3rem; border-radius:.95rem; color:var(--cream);
  font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  transition:background .25s;
}
.dock a svg{ width:1.25rem; height:1.25rem; fill:none }
.dock a svg *{ fill:none }
.dock a:active{ background:rgba(250,245,236,.12) }
.dock a.main{ background:var(--brick); box-shadow:0 8px 20px -8px rgba(158,59,50,.7) }
@media(min-width:900px){ .dock{ display:none } }

/* ============ REVEAL ON SCROLL ============ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease-out), transform .8s var(--ease-out); transition-delay:var(--d,0s) }
.reveal.in{ opacity:1; transform:none }
.reveal-img{ clip-path:inset(8% 0 8% 0 round var(--radius)); opacity:.001; transition:clip-path .9s var(--ease-out), opacity .6s; transition-delay:var(--d,0s) }
.reveal-img.in{ clip-path:inset(0 0 0 0 round var(--radius)); opacity:1 }

/* ============ ACCESSIBILITÀ ============ */
:focus-visible{ outline:3px solid var(--amber); outline-offset:3px; border-radius:4px }
.skip{
  position:fixed; top:.6rem; left:.6rem; z-index:100; background:var(--ink); color:var(--cream);
  padding:.7rem 1.1rem; border-radius:.6rem; transform:translateY(-200%); transition:transform .3s;
}
.skip:focus{ transform:none }

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
  html{ scroll-behavior:auto }
  .reveal,.reveal-img{ opacity:1; transform:none; clip-path:none }
  .marquee-track,.photostrip-track{ animation:none }
  .hero [data-hero]{ opacity:1; transform:none }
}