/* ============================================================
   FEMMINA — Bistrot & Cocktail Bar — Pesaro
   Palette ricostruita sul logo reale: wordmark nero geometrico
   su cerchio giallo acceso (campionato da img/logo.jpg:
   giallo rgb(249,230,16) / nero puro). Mood feed Instagram:
   bistrot giovane, urbano, informale (staff con tatuaggi,
   packaging Zest, foto scattate al volo) — non elegante/classico.
   ============================================================ */

:root{
  --cream:        #faf8f2;
  --cream-soft:   #f1eee2;
  --paper:        #ffffff;
  --ink:          #111111;
  --ink-soft:     rgba(17,17,17,0.62);
  --ink-faint:    rgba(17,17,17,0.4);
  --black:        #0a0a0a;
  --black-soft:   #1c1c1c;
  --yellow:       #f9e610;
  --yellow-deep:  #e2ce00;
  --yellow-glow:  rgba(249,230,16,.18);
  --line:         rgba(17,17,17,0.14);
  --line-soft:    rgba(17,17,17,0.08);
  --shadow:       0 30px 70px -30px rgba(10,10,10,0.35);
  --radius-lg:    28px;
  --radius-md:    18px;
  --serif:        'Archivo Black', 'Arial Black', sans-serif;
  --sans:         'Inter', 'Helvetica Neue', Arial, sans-serif;
  --ease:         cubic-bezier(.16,.84,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--serif); margin:0; font-weight:400; letter-spacing:-.5px; }
p{ margin:0; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
::selection{ background:var(--yellow); color:var(--ink); }

.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }

/* ---------------- grain texture overlay ---------------- */
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------------- curtain intro ---------------- */
.curtain{
  position:fixed; inset:0; z-index:200; display:flex;
  pointer-events:none;
}
.curtain span{
  flex:1; background:var(--black); transform:translateY(0);
  transition:transform 1.05s var(--ease);
}
.curtain span:nth-child(2){ background:var(--yellow); transition-delay:.06s; }
.curtain span:nth-child(3){ background:var(--black-soft); transition-delay:.12s; }
body.curtain-open .curtain span{ transform:translateY(-101%); }
body.curtain-open .curtain{ transition:visibility 0s 1.2s; }
body.curtain-done .curtain{ visibility:hidden; }

/* ---------------- nav ---------------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 32px;
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-nav.is-scrolled{
  background:rgba(250,248,242,0.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:14px 32px;
  box-shadow:0 1px 0 var(--line);
}
.brand{
  font-family:var(--serif); font-weight:400; font-size:22px;
  letter-spacing:1px; color:var(--ink);
  display:flex; align-items:center; gap:10px;
}
.brand-logo{
  width:40px; height:40px; border-radius:50%; object-fit:cover;
  display:block; box-shadow:0 1px 4px rgba(0,0,0,.15);
}
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  font-size:13px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--ink); position:relative; padding:4px 0;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--yellow); transition:width .35s var(--ease);
}
.nav-links a:hover::after{ width:100%; }
.nav-cta{
  background:var(--yellow); color:var(--ink) !important; padding:10px 20px !important;
  border-radius:999px; letter-spacing:1px; font-weight:700;
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ background:var(--black); color:var(--yellow) !important; }
.nav-toggle{
  display:none; width:44px; height:44px; border:none; background:none;
  cursor:pointer; position:relative; z-index:110;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:''; display:block; width:24px; height:2px; background:var(--ink);
  position:absolute; left:10px; top:21px; transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }
body.nav-open .nav-toggle span{ background:transparent; }
body.nav-open .nav-toggle span::before{ transform:translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span::after{ transform:translateY(-7px) rotate(-45deg); }

/* ---------------- hero ---------------- */
.hero{
  position:relative; min-height:100dvh; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
  padding:120px 24px 80px; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--yellow-glow) 0%, transparent 55%),
    linear-gradient(180deg, rgba(250,248,242,.94) 0%, rgba(241,238,226,.88) 100%),
    url('img/gallery-colazione.jpg') center 35%/cover no-repeat;
}
.hero__arch{
  position:absolute; bottom:-2px; left:50%; transform:translateX(-50%);
  width:min(1400px, 220vw); opacity:.9; z-index:0;
}
.hero__leaves{
  position:absolute; inset:0; z-index:0; pointer-events:none;
}
.hero__leaves svg{ position:absolute; opacity:.5; }
.hero__leaves svg:nth-child(1){ top:8%; left:6%; width:70px; }
.hero__leaves svg:nth-child(2){ top:20%; right:9%; width:50px; transform:rotate(30deg); }
.hero__leaves svg:nth-child(3){ bottom:30%; left:12%; width:44px; transform:rotate(-18deg); }
.hero__leaves svg:nth-child(4){ bottom:14%; right:16%; width:60px; transform:rotate(12deg); }
.hero__mono{
  position:relative; z-index:1; width:min(190px, 40vw);
  margin:0 auto 18px; animation:mono-breathe 7s ease-in-out infinite;
  border-radius:50%; overflow:hidden; box-shadow:var(--shadow);
  border:4px solid var(--paper);
}
.hero__mono img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
@keyframes mono-breathe{
  0%,100%{ transform:scale(1) rotate(0deg); }
  50%{ transform:scale(1.035) rotate(1.2deg); }
}
.hero__eyebrow{
  position:relative; z-index:1; font-size:12px; letter-spacing:5px;
  text-transform:uppercase; color:var(--ink); font-weight:700; margin-bottom:6px;
}
.hero h1{
  position:relative; z-index:1; font-size:clamp(56px, 12vw, 148px);
  line-height:.92; letter-spacing:-1px; color:var(--ink);
}
.hero h1 em{
  font-style:normal; background:var(--yellow); color:var(--ink);
  padding:0 .12em; border-radius:.14em; display:inline-block;
}
.hero__sub{
  position:relative; z-index:1; margin-top:20px; font-size:clamp(15px,2vw,19px);
  color:var(--ink-soft); max-width:560px; font-weight:300;
}
.hero__badges{
  position:relative; z-index:1; margin-top:32px; display:flex; gap:14px;
  flex-wrap:wrap; justify-content:center;
}
.pill{
  border:1px solid var(--line); border-radius:999px; padding:9px 18px;
  font-size:12.5px; letter-spacing:.6px; color:var(--ink-soft);
  background:rgba(255,255,255,.5); opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  min-height:44px; display:inline-flex; align-items:center; box-sizing:border-box;
}
.pill.is-visible{ opacity:1; transform:translateY(0); }
.hero__scroll{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:10.5px; letter-spacing:3px; text-transform:uppercase; color:var(--ink-faint);
}
.hero__scroll span{
  width:1px; height:34px; background:linear-gradient(var(--ink), transparent);
  animation:scroll-line 1.8s ease-in-out infinite;
}
@keyframes scroll-line{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{transform:scaleY(1); transform-origin:top;} 51%{transform-origin:bottom;} 100%{transform:scaleY(0); transform-origin:bottom;} }

/* ---------------- reveal utility ---------------- */
[data-reveal]{ opacity:0; transform:translateY(36px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
[data-reveal="left"]{ transform:translateX(-40px); }
[data-reveal="left"].is-visible{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(40px); }
[data-reveal="right"].is-visible{ transform:translateX(0); }
[data-reveal="scale"]{ transform:scale(.92); }
[data-reveal="scale"].is-visible{ transform:scale(1); }

/* ---------------- section shell ---------------- */
.section{ padding:130px 0; position:relative; }
.section--dark{
  background:var(--black); color:var(--paper);
}
.section--dark .eyebrow{ color:var(--yellow); }
.section-head{ max-width:640px; margin-bottom:64px; }
.eyebrow{
  display:inline-block; font-size:12px; letter-spacing:5px; text-transform:uppercase;
  color:var(--ink); font-weight:700; margin-bottom:16px;
}
.section-head h2{ font-size:clamp(32px,4.4vw,54px); line-height:1.08; }
.section-head p{ margin-top:20px; font-size:17px; color:var(--ink-soft); font-weight:300; line-height:1.7; }
.section--dark .section-head p{ color:rgba(251,247,239,0.7); }

/* ---------------- concept / storia ---------------- */
.concept{ display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center; }
.concept__art{ position:relative; }
.concept__art svg{ width:100%; height:auto; }
.concept__art img{
  width:100%; height:auto; display:block; border-radius:24px;
  box-shadow:var(--shadow); object-fit:cover; aspect-ratio:420/460;
}
.concept__quote{
  margin-top:26px; font-family:var(--sans); font-style:italic; font-weight:500; font-size:19px;
  color:var(--ink); border-left:3px solid var(--yellow); padding-left:20px; line-height:1.55;
}
.concept__facts{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:38px; }
.fact{ border-top:1px solid var(--line); padding-top:14px; }
.fact strong{ display:block; font-family:var(--serif); font-size:26px; color:var(--ink); }
.fact span{ font-size:13px; color:var(--ink-soft); letter-spacing:.3px; }

/* ---------------- day timeline ---------------- */
.timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.timeline__item{
  background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius-md);
  padding:34px 26px; position:relative; overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.timeline__item:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.timeline__time{
  font-family:var(--serif); font-size:12.5px; letter-spacing:.5px; margin-bottom:16px;
  display:inline-block; background:var(--yellow); color:var(--ink); padding:4px 12px;
  border-radius:999px;
}
.timeline__item h3{ font-size:22px; margin-bottom:10px; }
.timeline__item p{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; }
.timeline__icon{ width:38px; height:38px; margin-bottom:18px; color:var(--ink); }

/* ---------------- gallery (illustrated, no stock photos) ---------------- */
.gallery{
  display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:150px; gap:16px;
}
.gcard{
  position:relative; border-radius:var(--radius-md); overflow:hidden;
  display:flex; align-items:flex-end; padding:22px; color:var(--paper);
  isolation:isolate;
}
.gcard::before{
  content:''; position:absolute; inset:0; z-index:-1; transition:transform .7s var(--ease);
}
.gcard:hover::before{ transform:scale(1.08); }
.gcard span{ font-family:var(--serif); font-size:17px; letter-spacing:.3px; position:relative; z-index:1; }
.gcard small{ position:relative; z-index:1; display:block; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; opacity:.75; margin-bottom:4px; }
.g1{ grid-column:span 3; grid-row:span 2; }
.g2{ grid-column:span 3; grid-row:span 1; }
.g3{ grid-column:span 3; grid-row:span 1; }
.g4{ grid-column:span 2; grid-row:span 1; }
.g5{ grid-column:span 2; grid-row:span 1; }
.g6{ grid-column:span 2; grid-row:span 1; }
.g1::before{ background:linear-gradient(0deg,rgba(20,8,10,.75) 0%,rgba(20,8,10,.05) 55%),url('img/gallery-colazione.jpg') center/cover; }
.g2::before{ background:linear-gradient(0deg,rgba(20,8,10,.78) 0%,rgba(20,8,10,.1) 60%),url('img/gallery-zest.jpg') center/cover; }
.g3::before{ background:linear-gradient(0deg,rgba(20,8,10,.75) 0%,rgba(20,8,10,.05) 55%),url('img/gallery-aperitivo.jpg') center/cover; }
.g4::before{ background:linear-gradient(0deg,rgba(20,8,10,.78) 0%,rgba(20,8,10,.1) 60%),url('img/gallery-frutta.jpg') center/cover; }
.g5::before{ background:linear-gradient(0deg,rgba(20,8,10,.78) 0%,rgba(20,8,10,.1) 60%),url('img/gallery-pesca.jpg') center/cover; }
.g6::before{ background:linear-gradient(0deg,rgba(20,8,10,.75) 0%,rgba(20,8,10,.05) 55%),url('img/gallery-staff.jpg') center/cover; }
.gcard .gpattern{ position:absolute; inset:0; opacity:.22; z-index:0; }
.gallery-note{ margin-top:22px; font-size:13px; color:var(--ink-faint); }

/* ---------------- dove siamo ---------------- */
.dove{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:stretch; }
.dove__map{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line-soft); min-height:420px; box-shadow:var(--shadow); }
.dove__map iframe{ width:100%; height:100%; border:0; min-height:420px; filter:saturate(.85) sepia(.08); }
.dove__info{ display:flex; flex-direction:column; justify-content:center; gap:26px; }
.dove__row{ display:flex; gap:16px; align-items:flex-start; }
.dove__row svg{ width:22px; height:22px; flex:none; margin-top:3px; color:var(--ink); }
.dove__row h4{ font-family:var(--sans); font-weight:600; font-size:15px; margin-bottom:4px; }
.dove__row p, .dove__row a{ color:var(--ink-soft); font-size:15px; line-height:1.6; }
.rating{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); }
.rating strong{ color:var(--ink); font-family:var(--serif); font-size:18px; }

/* ---------------- contatti ---------------- */
.contact{ text-align:center; }
.contact .section-head{ margin:0 auto 46px; text-align:center; }
.contact-actions{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:17px 32px; border-radius:999px;
  font-size:14px; letter-spacing:1px; text-transform:uppercase; font-weight:600;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.btn svg{ width:18px; height:18px; }
.btn-primary{ background:#25D366; color:#0b2013; }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -14px rgba(37,211,102,.55); }
.btn-outline{ border:1.5px solid rgba(251,247,239,.4); color:var(--paper); }
.btn-outline:hover{ background:rgba(251,247,239,.1); transform:translateY(-3px); }
.section--dark .contact-foot{ margin-top:40px; color:rgba(255,255,255,.55); font-size:13.5px; }
.section--dark .contact-foot a{ color:var(--yellow); text-decoration:underline; }

/* ---------------- footer ---------------- */
.site-footer{
  padding:46px 0 34px; background:var(--black); color:rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  font-size:13px;
}
.site-footer .brand{ color:var(--yellow); font-size:16px; }
.footer-badge{
  display:inline-flex; align-items:center; gap:6px; color:rgba(255,255,255,.55);
}
.footer-badge a{ color:var(--yellow); font-weight:600; }
.footer-links{ display:flex; gap:18px; }

/* ---------------- menu nav link shared, page-leave transition ---------------- */
body.page-leaving{ opacity:0; transition:opacity .25s ease; }

/* ============================================================
   MENU PAGE
   ============================================================ */
.menu-hero{
  padding:150px 0 60px; text-align:center;
  background:linear-gradient(180deg,var(--cream-soft),var(--cream));
}
.menu-hero .eyebrow{ display:block; }
.menu-hero h1{ font-size:clamp(42px,7vw,84px); margin-top:10px; }
.menu-hero p{ margin-top:16px; color:var(--ink-soft); font-size:16px; max-width:520px; margin-left:auto; margin-right:auto; }
.menu-wrap{ padding:20px 0 100px; }
.menu-categories{ display:flex; flex-direction:column; gap:70px; }
.menu-category__head{ display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.menu-category__head .icon{ color:var(--ink); font-size:20px; }
.menu-category__head h2{ font-size:28px; }
.menu-category__line{ flex:1; height:1px; background:var(--line); }
.menu-category__note{ color:var(--ink-soft); font-size:14px; margin:6px 0 22px; font-style:italic; }
.menu-dish-list{ display:grid; gap:0; }
.menu-dish{
  display:flex; align-items:baseline; gap:18px; padding:16px 0; border-bottom:1px solid var(--line-soft);
}
.menu-dish__info{ flex:1; }
.menu-dish__info h4{ font-family:var(--sans); font-weight:600; font-size:16px; }
.menu-dish__info p{ font-size:13.5px; color:var(--ink-soft); margin-top:4px; line-height:1.55; }
.menu-dish__allergens{ font-size:11.5px !important; color:var(--ink-faint) !important; text-transform:uppercase; letter-spacing:.4px; }
.menu-dish__price{
  font-family:var(--serif); font-size:13px; color:var(--ink); white-space:nowrap;
  background:var(--yellow); padding:3px 11px; border-radius:999px;
}
.menu-extra-info{ display:flex; gap:24px; margin-top:12px; font-size:13px; color:var(--ink-faint); flex-wrap:wrap; }
.menu-pending{
  border:1px dashed var(--line); border-radius:var(--radius-md); padding:18px 22px;
  font-size:13.5px; color:var(--ink-faint); margin-top:8px; background:var(--paper);
}
.menu-cta{ text-align:center; padding:0 0 20px; }

/* ---------------- responsive ---------------- */
@media (max-width:980px){
  .concept{ grid-template-columns:1fr; gap:40px; }
  .dove{ grid-template-columns:1fr; }
  .timeline{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:repeat(4,1fr); grid-auto-rows:130px; }
  .g1{ grid-column:span 4; grid-row:span 2; }
  .g2,.g3{ grid-column:span 4; }
  .g4,.g5,.g6{ grid-column:span 2; }
}

@media (max-width:720px){
  .site-nav{ padding:18px 20px; }
  .nav-toggle{ display:block; }
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(320px,84vw); height:100dvh;
    background:var(--cream); flex-direction:column; align-items:flex-start;
    justify-content:center; gap:8px; padding:40px 36px; transform:translateX(100%);
    transition:transform .5s var(--ease); box-shadow:-20px 0 60px rgba(0,0,0,.15);
  }
  body.nav-open .nav-links{ transform:translateX(0); }
  .nav-links a{ font-size:16px; padding:12px 0; min-height:44px; display:flex; align-items:center; }
  .nav-cta{ margin-top:6px; padding:12px 20px !important; }
  .hero{ padding:110px 20px 70px; min-height:100dvh; }
  .section{ padding:88px 0; }
  .section .wrap{ padding:0 20px; }
  .timeline{ grid-template-columns:1fr; }
  .concept__facts{ grid-template-columns:1fr 1fr; gap:16px; }
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:120px; }
  .g1{ grid-column:span 2; grid-row:span 2; }
  .g2,.g3,.g4,.g5,.g6{ grid-column:span 2; grid-row:span 1; }
  .dove__map{ min-height:280px; }
  .dove__map iframe{ min-height:280px; }
  .contact-actions{ flex-direction:column; align-items:stretch; }
  .btn{ justify-content:center; }
  .site-footer{ flex-direction:column; text-align:center; justify-content:center; }
  .footer-links{ justify-content:center; }
  .menu-dish{ flex-wrap:wrap; }
  .menu-dish__price{ order:1; width:100%; text-align:left; }
}

@media (min-width:721px) and (max-width:980px){
  .nav-links{ gap:20px; }
  .nav-links a{ font-size:12px; }
}