/* ============================================================
   RISTORANTE FIORENTINA — Shared stylesheet
   Premium editorial system. Warm Tuscan palette + Rhine.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Hanken+Grotesk:wght@300;400;500;600&display=swap');

:root{
  /* palette (oklch, warm Mediterranean) */
  --cream:        oklch(0.966 0.013 88);
  --cream-deep:   oklch(0.935 0.016 86);
  --paper:        oklch(0.985 0.008 90);
  --ink:          oklch(0.255 0.012 70);
  --ink-soft:     oklch(0.42 0.012 75);
  --forest:       oklch(0.285 0.030 152);
  --forest-deep:  oklch(0.235 0.028 152);
  --olive:        oklch(0.52 0.045 128);
  --brass:        oklch(0.665 0.085 72);
  --brass-deep:   oklch(0.56 0.082 66);
  --terracotta:   oklch(0.585 0.115 46);
  --line:         oklch(0.255 0.012 70 / 0.16);
  --line-light:   oklch(0.985 0.008 90 / 0.22);

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  --ff-display: 'Cormorant', Georgia, serif;
  --ff-body: 'Hanken Grotesk', system-ui, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--ff-body);
  background:var(--cream);
  color:var(--ink);
  font-weight:400;
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
.no-scroll{ overflow:hidden; }

/* ---------- typography ---------- */
h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:500; line-height:1.04; margin:0; letter-spacing:-0.01em; }
.display{ font-size:clamp(3rem, 8vw, 6.6rem); font-weight:400; }
.h-xl{ font-size:clamp(2.4rem, 5vw, 4.2rem); }
.h-lg{ font-size:clamp(2rem, 3.6vw, 3rem); }
.h-md{ font-size:clamp(1.5rem, 2.4vw, 2.1rem); }
.serif-em{ font-style:italic; }

.overline{
  font-family:var(--ff-body);
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.34em;
  text-transform:uppercase;
  color:var(--brass-deep);
  display:inline-block;
}
.lede{ font-size:clamp(1.06rem,1.4vw,1.28rem); line-height:1.7; color:var(--ink-soft); font-weight:300; }
.muted{ color:var(--ink-soft); }

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(72px, 11vw, 150px); }
.section-sm{ padding-block:clamp(48px, 7vw, 90px); }
.center{ text-align:center; }
.stack-sm > * + *{ margin-top:1rem; }

.rule{ height:1px; background:var(--line); border:0; margin:0; }
.dot{ color:var(--brass); padding-inline:0.5em; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.6em;
  font-family:var(--ff-body); font-size:0.82rem; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase;
  padding:1.05em 2em; border-radius:2px;
  border:1px solid transparent; transition:all .35s var(--ease);
  line-height:1;
}
.btn-solid{ background:var(--forest); color:var(--cream); }
.btn-solid:hover{ background:var(--forest-deep); transform:translateY(-2px); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--ink); }
.btn-light{ background:var(--cream); color:var(--forest-deep); }
.btn-light:hover{ background:#fff; transform:translateY(-2px); }
.btn-ghost-light{ background:transparent; color:var(--cream); border-color:var(--line-light); }
.btn-ghost-light:hover{ border-color:var(--cream); }
.btn .ar{ font-size:1.1em; transition:transform .35s var(--ease); }
.btn:hover .ar{ transform:translateX(4px); }

.link-underline{
  display:inline-flex; align-items:center; gap:0.55em;
  font-size:0.78rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink); padding-bottom:4px;
  background-image:linear-gradient(var(--brass),var(--brass));
  background-size:100% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:color .3s var(--ease);
}
.link-underline:hover{ color:var(--brass-deep); }
.link-underline .ar{ transition:transform .35s var(--ease); }
.link-underline:hover .ar{ transform:translateX(4px); }

/* ---------- header / nav ---------- */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gutter);
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-head.solid{
  background:color-mix(in oklab, var(--cream) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  padding-block:14px;
  box-shadow:0 1px 0 var(--line);
}
.brand{ display:flex; flex-direction:column; line-height:1; gap:5px; }
.brand .mark{ font-family:var(--ff-display); font-size:1.55rem; letter-spacing:0.12em; font-weight:500; }
.brand .sub{ font-size:0.56rem; letter-spacing:0.42em; text-transform:uppercase; opacity:0.75; }
.site-head.on-dark{ color:var(--cream); }
.site-head.on-dark.solid{ color:var(--ink); }

.nav{ display:flex; align-items:center; gap:clamp(18px,2.2vw,38px); }
.nav-links{ display:flex; align-items:center; gap:clamp(16px,2vw,32px); list-style:none; margin:0; padding:0; }
.nav-links a{
  font-size:0.74rem; letter-spacing:0.13em; text-transform:uppercase; font-weight:500;
  position:relative; padding-bottom:3px; white-space:nowrap;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--brass); transition:width .3s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }

.nav-tools{ display:flex; align-items:center; gap:18px; }
.lang{ display:flex; align-items:center; gap:2px; font-size:0.72rem; letter-spacing:0.1em; }
.lang button{
  background:none; border:0; color:inherit; opacity:0.5; padding:4px 5px;
  font-weight:500; letter-spacing:0.08em; transition:opacity .25s; text-transform:uppercase;
}
.lang button.active{ opacity:1; }
.lang .sep{ opacity:0.3; }

.burger{ display:none; background:none; border:0; color:inherit; flex-direction:column; gap:5px; padding:6px; }
.burger span{ width:24px; height:1.5px; background:currentColor; transition:.3s var(--ease); }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:70; background:var(--forest);
  color:var(--cream); display:flex; flex-direction:column;
  padding:28px var(--gutter); transform:translateY(-100%);
  transition:transform .5s var(--ease); visibility:hidden;
}
.drawer.open{ transform:translateY(0); visibility:visible; }
.drawer-top{ display:flex; justify-content:space-between; align-items:center; }
.drawer-close{ background:none; border:0; color:var(--cream); font-size:1.8rem; line-height:1; }
.drawer nav{ margin-top:auto; margin-bottom:auto; display:flex; flex-direction:column; gap:6px; }
.drawer nav a{ font-family:var(--ff-display); font-size:2.4rem; font-weight:400; }
.drawer nav a .num{ font-family:var(--ff-body); font-size:0.7rem; letter-spacing:0.2em; color:var(--brass); margin-right:14px; vertical-align:middle; }
.drawer-foot{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line-light); padding-top:20px; font-size:0.8rem; }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; color:var(--cream); overflow:hidden; }
.hero .bg{ position:absolute; inset:0; }
.hero .ph.bg{ align-items:flex-start; }
.hero .ph.bg .tag{ margin-top:96px; }
.hero .scrim{ position:absolute; inset:0; background:linear-gradient(to top, oklch(0.2 0.02 150 / 0.78) 0%, oklch(0.2 0.02 150 / 0.15) 45%, oklch(0.2 0.02 150 / 0.30) 100%); }
.hero-inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(48px,7vw,96px); }
.hero h1{ max-width:14ch; margin-top:0.2em; }
.hero .lede{ color:oklch(0.97 0.01 88 / 0.85); max-width:48ch; }

.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3;
  font-size:0.62rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--cream);
  display:flex; flex-direction:column; align-items:center; gap:10px; opacity:0.8;
}
.scroll-cue .bar{ width:1px; height:46px; background:linear-gradient(var(--cream),transparent); animation:cue 2.4s var(--ease) infinite; transform-origin:top; }
@keyframes cue{ 0%{transform:scaleY(0);opacity:0;} 40%{opacity:1;} 100%{transform:scaleY(1);opacity:0;} }

/* ---------- image placeholders ---------- */
.photo{ background-size:cover; background-position:center; background-repeat:no-repeat; }
.ph{
  position:relative; overflow:hidden; background:var(--cream-deep);
  background-image:repeating-linear-gradient(135deg,
     oklch(0.92 0.02 86) 0 12px, oklch(0.895 0.022 84) 12px 24px);
  display:flex; align-items:center; justify-content:center;
}
.ph.dark{
  background:var(--forest-deep);
  background-image:repeating-linear-gradient(135deg,
     oklch(0.27 0.03 152) 0 12px, oklch(0.245 0.028 152) 12px 24px);
}
.ph .tag{
  font-family:'Hanken Grotesk',monospace; font-size:0.62rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--ink-soft);
  background:color-mix(in oklab, var(--paper) 82%, transparent);
  border:1px solid var(--line); padding:7px 12px; border-radius:2px;
  display:inline-flex; align-items:center; gap:7px; max-width:80%; text-align:center;
}
.ph.dark .tag{ color:oklch(0.9 0.01 88); background:oklch(0.2 0.02 150 / 0.5); border-color:var(--line-light); }
.ph .tag::before{ content:'◇'; color:var(--brass); }
.ph.fill{ position:absolute; inset:0; }

/* ---------- reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } .scroll-cue .bar{ animation:none; } }

/* ---------- footer ---------- */
.site-foot{ background:var(--forest); color:var(--cream); padding-block:clamp(64px,8vw,104px) 32px; }
.site-foot a:hover{ color:var(--brass); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; }
.foot-brand .mark{ font-family:var(--ff-display); font-size:2.2rem; letter-spacing:0.1em; }
.foot-brand .sub{ font-size:0.6rem; letter-spacing:0.4em; text-transform:uppercase; opacity:0.7; margin-top:6px; }
.foot-col h4{ font-family:var(--ff-body); font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--brass); margin-bottom:18px; font-weight:600; }
.foot-col p, .foot-col a{ display:block; font-size:0.92rem; color:oklch(0.95 0.01 88 / 0.82); margin-bottom:8px; font-weight:300; }
.foot-social{ display:flex; gap:14px; margin-top:6px; }
.foot-social a{ width:38px; height:38px; border:1px solid var(--line-light); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.7rem; letter-spacing:0.08em; transition:.3s var(--ease); }
.foot-social a:hover{ background:var(--cream); color:var(--forest); border-color:var(--cream); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; margin-top:clamp(48px,6vw,72px); padding-top:26px; border-top:1px solid var(--line-light); font-size:0.76rem; opacity:0.7; letter-spacing:0.04em; }

/* ---------- generic page hero (interior pages) ---------- */
.page-hero{ position:relative; padding-top:clamp(140px,18vh,200px); padding-bottom:clamp(48px,7vw,84px); }
.page-hero .overline{ margin-bottom:18px; }
.page-hero h1{ max-width:18ch; }
.breadcrumb{ font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:22px; }
.breadcrumb a:hover{ color:var(--brass-deep); }

/* ---------- utilities ---------- */
.grid{ display:grid; gap:clamp(20px,3vw,44px); }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.items-center{ align-items:center; }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,90px); align-items:center; }
.eyebrow-row{ display:flex; align-items:center; gap:16px; }
.eyebrow-row .rule{ flex:1; }

/* ---------- menu ---------- */
.menu-tabs{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block:14px; position:sticky; top:60px; background:color-mix(in oklab, var(--cream) 92%, transparent); backdrop-filter:blur(8px); z-index:30; }
.menu-tabs button{
  background:none; border:0; padding:10px 18px; border-radius:2px;
  font-family:var(--ff-display); font-size:1.3rem; color:var(--ink-soft);
  transition:color .25s var(--ease); position:relative;
}
.menu-tabs button.active{ color:var(--forest); }
.menu-tabs button.active::after{ content:'◇'; position:absolute; left:50%; bottom:-2px; transform:translateX(-50%); font-size:0.5rem; color:var(--brass); }
.menu-panel{ display:none; }
.menu-panel.show{ display:block; animation:fade .5s var(--ease); }
@keyframes fade{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }

.menu-list{ display:grid; gap:30px; max-width:760px; margin:0 auto; }
.menu-item{ display:grid; grid-template-columns:1fr auto; gap:4px 18px; align-items:baseline; }
.menu-item .mi-name{ font-family:var(--ff-display); font-size:1.5rem; font-weight:500; }
.menu-item .mi-price{ font-family:var(--ff-display); font-size:1.3rem; color:var(--brass-deep); white-space:nowrap; }
.menu-item .mi-dots{ flex:1; border-bottom:1px dotted var(--line); align-self:flex-end; margin-bottom:6px; }
.menu-item .mi-desc{ grid-column:1 / -1; font-size:0.95rem; color:var(--ink-soft); font-weight:300; line-height:1.55; max-width:60ch; }
.menu-item .mi-tags{ grid-column:1 / -1; display:flex; gap:8px; margin-top:4px; }
.mi-tag{ font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--olive); border:1px solid var(--line); padding:2px 8px; border-radius:99px; }
.menu-cat{ text-align:center; margin-bottom:42px; }
.menu-cat .overline{ margin-bottom:12px; }
.menu-subcat{ font-family:var(--ff-display); font-size:1.1rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--brass-deep); text-align:center; margin:48px 0 24px; }
.wine-cols{ columns:2; column-gap:64px; max-width:900px; margin:0 auto; }
.wine-cols .menu-item{ break-inside:avoid; margin-bottom:22px; }
.menu-photo{ max-width:900px; margin:0 auto 44px; height:clamp(240px,32vw,400px); border-radius:3px; }
.menu-photo.sub{ height:clamp(220px,26vw,330px); margin-bottom:30px; }
.menu-photo .cap{ position:absolute; left:0; bottom:0; right:0; padding:14px 18px; font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--cream); background:linear-gradient(transparent, oklch(0.2 0.02 150 / 0.55)); }
.menu-photo{ position:relative; overflow:hidden; }

/* ---------- gallery ---------- */
.gal-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(10px,1.4vw,18px); grid-auto-flow:dense; }
.gal-item{ cursor:pointer; overflow:hidden; position:relative; }
.gal-item .ph, .gal-item .photo{ width:100%; height:100%; transition:transform .8s var(--ease); }
.gal-item:hover .ph, .gal-item:hover .photo{ transform:scale(1.04); }
.gal-item.tall{ grid-row:span 2; }
.span6{ grid-column:span 6; } .span4{ grid-column:span 4; } .span8{ grid-column:span 8; } .span12{ grid-column:span 12; }
.gal-item .ph, .gal-item .photo{ min-height:240px; }
.gal-item.tall .ph, .gal-item.tall .photo{ min-height:500px; }

.lightbox{ position:fixed; inset:0; z-index:90; background:oklch(0.2 0.02 150 / 0.92); display:none; align-items:center; justify-content:center; padding:5vw; }
.lightbox.open{ display:flex; }
.lb-inner{ width:min(900px,90vw); height:min(600px,80vh); }
.lb-inner .ph, .lb-inner .photo{ width:100%; height:100%; }
.lb-close{ position:absolute; top:24px; right:30px; background:none; border:0; color:var(--cream); font-size:2.6rem; line-height:1; }

/* ---------- info cards / contact ---------- */
.info-card{ border:1px solid var(--line); padding:clamp(24px,3vw,38px); border-radius:3px; background:var(--paper); }
.info-card h3{ margin-bottom:14px; }
.info-card .overline{ margin-bottom:14px; }
.contact-line{ display:flex; justify-content:space-between; gap:18px; padding:12px 0; border-bottom:1px solid var(--line); font-size:0.98rem; }
.contact-line:last-child{ border-bottom:0; }
.contact-line .lbl{ color:var(--ink-soft); }

/* big quote / reviews */
.review-card{ border:1px solid var(--line); padding:clamp(26px,3vw,40px); border-radius:3px; background:var(--paper); display:flex; flex-direction:column; gap:20px; height:100%; }
.stars{ color:var(--brass); letter-spacing:3px; font-size:0.9rem; }
.review-card blockquote{ margin:0; font-family:var(--ff-display); font-size:1.45rem; line-height:1.4; font-weight:400; }
.review-card .by{ font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); margin-top:auto; }

/* feature split image block */
.feature-img{ min-height:clamp(360px,46vw,560px); }
.feature-img.tall{ min-height:clamp(440px,54vw,680px); }

/* dark section */
.section-dark{ background:var(--forest); color:var(--cream); }
.section-dark .lede{ color:oklch(0.95 0.01 88 / 0.8); }
.section-dark .overline{ color:var(--brass); }
.section-dark .rule{ background:var(--line-light); }

/* note / disclaimer block */
.note-block{ border-left:2px solid var(--brass); padding:6px 0 6px 24px; font-size:0.92rem; color:var(--ink-soft); font-weight:300; max-width:64ch; }

/* pill stat */
.stat-pill{ display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:99px; padding:10px 22px; font-size:0.86rem; letter-spacing:0.04em; }
.stat-pill .stars{ font-size:0.8rem; }

/* contact actions */
.contact-actions{ display:flex; flex-wrap:wrap; gap:14px; }

@media (max-width:760px){
  .wine-cols{ columns:1; }
  .menu-tabs button{ font-size:1.05rem; padding:8px 12px; }
  .gal-grid{ grid-template-columns:repeat(2,1fr); }
  .span6,.span4,.span8,.span12{ grid-column:span 1; }
  .menu-tabs{ top:54px; }
}

@media (max-width:980px){
  .foot-grid{ grid-template-columns:1fr 1fr; gap:36px; }
  .g4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
  .split{ grid-template-columns:1fr; }
  .g2,.g3{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:30px; }
  .hero-foot-meta{ display:none; }
}