/* ============ Osteria Le Cesarine — stile ============ */

:root{
  --ink: #221d18;
  --cream: #f6f1e7;
  --cream-2: #efe7d8;
  --charcoal: #17130f;
  --charcoal-2: #241f19;
  --terracotta: #bf5b31;
  --terracotta-light: #d97b3f;
  --green: #4a5a3a;
  --gold: #c9a15a;
  --line: rgba(34,29,24,0.12);
  --line-light: rgba(255,255,255,0.18);
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{ box-sizing: border-box; margin:0; padding:0; }

html{ scroll-behavior: smooth; }

body{
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }

a{ color: inherit; text-decoration: none; }

.grain{
  position: fixed; inset:0; z-index: 999; pointer-events:none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eyebrow{
  font-family: var(--sans);
  letter-spacing: 5px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 500;
  color: var(--terracotta);
  margin-bottom: 14px;
}

h1,h2{ font-family: var(--serif); font-weight: 600; line-height: 1.08; }

.lead{
  font-size: 17px;
  line-height: 1.75;
  color: rgba(34,29,24,0.75);
  font-weight: 300;
  max-width: 46ch;
}

.section{ padding: 110px 6vw; }

.section-head{ text-align:center; max-width: 640px; margin: 0 auto 56px; }
.section-head h2{ font-size: clamp(30px,4vw,44px); }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items:center; justify-content:center;
  padding: 16px 32px;
  font-family: var(--sans);
  font-size: 14px; letter-spacing: 1px; text-transform: uppercase; font-weight: 500;
  border-radius: 2px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background .3s, color .3s, border-color .3s;
  white-space: nowrap;
}
.btn-primary{ background: var(--terracotta); color: #fff; }
.btn-primary:hover{ background: var(--terracotta-light); transform: translateY(-2px); }
.btn-ghost{ border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover{ border-color: var(--ink); transform: translateY(-2px); }
.btn-ghost-light{ border: 1px solid var(--line-light); color: #fff; }
.btn-ghost-light:hover{ border-color: #fff; transform: translateY(-2px); }
.btn-outline{ border: 1px solid var(--terracotta); color: var(--terracotta); }
.btn-outline:hover{ background: var(--terracotta); color:#fff; transform: translateY(-2px); }

/* ---------- Navbar ---------- */
#navbar{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  padding: 22px 6vw;
  transition: background .4s ease, padding .4s ease, box-shadow .4s ease;
}
#navbar.scrolled{
  background: rgba(246,241,231,0.92);
  backdrop-filter: blur(10px);
  padding: 14px 6vw;
  box-shadow: 0 1px 0 var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; max-width: 1280px; margin:0 auto; }
.nav-logo{
  font-family: var(--serif); font-size: 21px; font-weight:600; letter-spacing: 0.5px;
  color: #fff; transition: color .4s;
}
#navbar.scrolled .nav-logo{ color: var(--ink); }
.nav-links{ display:flex; gap: 36px; }
.nav-links a{
  font-size: 13px; letter-spacing: 1px; text-transform: uppercase; font-weight: 500;
  color: rgba(255,255,255,0.85); transition: color .4s, opacity .3s;
}
#navbar.scrolled .nav-links a{ color: var(--ink); }
.nav-links a:hover{ opacity: 0.6; }
.nav-cta{
  padding: 10px 22px; border: 1px solid rgba(255,255,255,0.5); border-radius: 2px;
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color:#fff;
  transition: all .4s;
}
#navbar.scrolled .nav-cta{ border-color: var(--terracotta); color: var(--terracotta); }
.nav-cta:hover{ background:#fff; color: var(--ink); }
#navbar.scrolled .nav-cta:hover{ background: var(--terracotta); color:#fff; }

@media (max-width: 860px){
  .nav-links{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position: relative; height: 100svh; min-height: 560px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; }
.hero-img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.12);
  will-change: transform;
}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(23,19,15,0.55) 0%, rgba(23,19,15,0.35) 40%, rgba(23,19,15,0.75) 100%);
}
.hero-content{
  position:relative; z-index:2; text-align:center; color:#fff;
  display:flex; flex-direction:column; align-items:center;
  padding: 0 20px;
}
.hero-logo{
  width: 96px; height: 96px; border-radius: 50%;
  margin-bottom: 22px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25);
}
.hero-eyebrow{
  letter-spacing: 6px; text-transform: uppercase; font-size: 12px; font-weight: 500;
  color: var(--gold); margin-bottom: 18px;
}
.hero-title{
  font-size: clamp(52px, 10vw, 100px);
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.hero-sub{
  font-size: clamp(15px,2vw,18px); font-weight: 300; line-height: 1.6;
  color: rgba(255,255,255,0.88); margin-bottom: 36px;
}
.hero-actions{ display:flex; gap: 16px; flex-wrap: wrap; justify-content:center; }
.hero-scroll{
  position:absolute; bottom: 34px; left:50%; transform: translateX(-50%);
  z-index:2; color: rgba(255,255,255,0.75);
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.hero-scroll span{
  width:1px; height: 34px; background: rgba(255,255,255,0.5);
  position: relative; overflow:hidden;
}
.hero-scroll span::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background: #fff; animation: scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; }
}

/* ---------- Marquee strip ---------- */
.strip{
  background: var(--charcoal); color: var(--gold);
  padding: 20px 0; overflow:hidden; white-space: nowrap;
}
.strip-track{
  display:inline-flex; gap: 28px;
  font-family: var(--serif); font-style: italic; font-size: 19px;
  animation: marquee 32s linear infinite;
}
.strip-track span{ opacity: 0.9; }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ---------- Storia ---------- */
.storia-grid{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 6vw;
  align-items:center; max-width: 1280px; margin:0 auto;
}
.storia-text h2{ font-size: clamp(28px,3.6vw,42px); margin-bottom: 26px; }
.storia-text .lead + .lead{ margin-top: 16px; }
.storia-photo{ border-radius: 4px; overflow:hidden; aspect-ratio: 3/4; }
.storia-photo img{ width:100%; height:100%; object-fit:cover; transition: transform .8s ease; }
.storia-photo:hover img{ transform: scale(1.05); }

@media (max-width: 860px){
  .storia-grid{ grid-template-columns: 1fr; gap: 40px; }
  .storia-photo{ order:-1; max-width: 380px; margin: 0 auto; }
}

/* ---------- Menu gallery ---------- */
.menu-section{ background: var(--cream-2); }
.gallery{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 14px;
  max-width: 1280px; margin: 0 auto;
}
.g-item{
  position: relative; overflow:hidden; border-radius: 4px; grid-row: span 1;
}
.g-item.g-tall{ grid-row: span 2; }
.g-item img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 1s cubic-bezier(.2,.8,.2,1);
}
.g-item:hover img{ transform: scale(1.08); }
.g-item figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding: 18px 16px 14px;
  background: linear-gradient(0deg, rgba(23,19,15,0.85) 0%, rgba(23,19,15,0) 100%);
  color:#fff; font-size: 13px; letter-spacing: 0.4px; font-weight: 400;
  transform: translateY(8px); opacity: 0.92;
  transition: transform .4s ease;
}
.g-item:hover figcaption{ transform: translateY(0); }

@media (max-width: 900px){
  .gallery{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 210px; }
}
@media (max-width: 520px){
  .gallery{ grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .g-item.g-tall{ grid-row: span 1; }
}

.menu-cta{
  text-align:center; margin-top: 56px;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.menu-cta p{ font-weight:300; color: rgba(34,29,24,0.7); font-size: 15px; }

/* ---------- Ambiente ---------- */
.ambiente{
  display:grid; grid-template-columns: 1fr 1fr; align-items:stretch; gap: 0;
  padding: 0;
}
.ambiente-media{ overflow:hidden; min-height: 480px; }
.ambiente-media img{ width:100%; height:100%; object-fit:cover; }
.ambiente-text{
  display:flex; flex-direction:column; justify-content:center;
  padding: 60px 6vw;
}
.ambiente-text h2{ font-size: clamp(28px,3.6vw,40px); margin-bottom: 22px; }

@media (max-width: 860px){
  .ambiente{ grid-template-columns: 1fr; }
  .ambiente-media{ min-height: 360px; }
}

/* ---------- Orari ---------- */
.orari{ background: var(--charcoal); color: #fff; }
.orari .eyebrow{ color: var(--gold); }
.orari h2{ color:#fff; }
.orari-table{ max-width: 620px; margin: 0 auto; }
.orari-row{
  display:flex; justify-content:space-between; align-items:center;
  padding: 18px 4px; border-bottom: 1px solid rgba(255,255,255,0.12);
  font-size: 16px; font-weight: 300;
}
.orari-row span:first-child{ font-family: var(--serif); font-weight:600; font-size:18px; }
.orari-row.is-closed span:last-child{ color: rgba(255,255,255,0.4); }
.orari-row:last-child{ border-bottom:none; }

/* ---------- Dove siamo ---------- */
.dove-grid{
  display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 6vw; align-items:center;
  max-width: 1280px; margin:0 auto;
}
.dove-text h2{ font-size: clamp(28px,3.6vw,40px); margin-bottom: 22px; }
.dove-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top: 30px; }
.dove-map{ border-radius: 4px; overflow:hidden; aspect-ratio: 4/3; filter: saturate(0.75) contrast(1.02); }
.dove-map iframe{ width:100%; height:100%; border:0; }

@media (max-width: 860px){
  .dove-grid{ grid-template-columns:1fr; gap: 36px; }
}

/* ---------- Prenota (dark punch) ---------- */
.prenota{
  background: var(--charcoal-2);
  color:#fff; text-align:center;
  background-image: radial-gradient(circle at 50% 0%, rgba(191,91,49,0.18), transparent 60%);
}
.prenota .eyebrow{ color: var(--gold); }
.prenota h2{ color:#fff; font-size: clamp(32px,5vw,54px); margin: 8px 0 18px; }
.prenota .lead{ color: rgba(255,255,255,0.75); margin: 0 auto 34px; }
.prenota-inner{ display:flex; flex-direction:column; align-items:center; }
.prenota .hero-actions{ margin-top: 6px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--charcoal); color: rgba(255,255,255,0.6); padding: 30px 6vw; }
.footer-inner{
  max-width: 1280px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: 14px;
}
.footer-name{ font-size: 13px; font-weight: 300; }
.universe-badge{
  font-size: 12px; letter-spacing: 0.6px; color: rgba(255,255,255,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.25); padding-bottom: 2px;
  transition: color .3s, border-color .3s;
}
.universe-badge:hover{ color:#fff; border-color:#fff; }

/* ---------- Scroll reveal ---------- */
.reveal, .reveal-up{
  opacity: 0; transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
.reveal{ transform: translateY(0); }
.reveal-up{ transform: translateY(34px); }
.reveal.is-visible, .reveal-up.is-visible{ opacity: 1; transform: translateY(0); }

.hero-content .reveal{ transition-delay: calc(var(--d,0) * 1ms); }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-up{ opacity:1 !important; transform:none !important; }
  .strip-track{ animation:none; }
  .hero-scroll span::after{ animation:none; }
}