/* Osteria La Trappola, bozza 3
   Affascinante ma professionale: un solo colore scuro dominante (verde notte), crema per la
   carta e un accento color ottone. Titoli in Instrument Serif, dritti e in tondo; testo in
   Bricolage Grotesque a larghezza normale. I piatti scontornati stanno sotto una luce calda,
   come fotografati in sala. Pensato prima per il telefono. */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif.woff2") format("woff2");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
}

:root {
  --notte: #13281f;
  --notte-alta: #1b3a2d;
  --notte-bassa: #0d1d16;
  --crema: #f2e9d8;
  --carta: #f7f1e6;
  --ottone: #c9a063;
  --ottone-scuro: #7a5c2b;
  --salvia: #b9c4b5;
  --inchiostro: #1d1a16;
  --seppia: #5f5546;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --sezione: clamp(5rem, 12vw, 9.5rem);
  --max: 78rem;
  --filo: 1px solid rgba(242, 233, 216, 0.16);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--notte);
  color: var(--crema);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--ottone); outline-offset: 3px; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 200; padding: 0.6rem 1rem; background: var(--ottone); color: var(--notte); }
.skip:focus { top: 0.75rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* Titoli: serif dritto, interlinea ≥ 1 perché gli accenti maiuscoli non tocchino la riga sopra */
.title {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}

/* ---------- Bottoni ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.1rem; padding: 0.7rem 1.4rem;
  border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn-small { min-height: 2.4rem; padding: 0.45rem 1rem; font-size: 0.95rem; }
.btn-gold { background: var(--ottone); color: var(--notte); }
.btn-gold:hover { background: var(--crema); }
.btn-line { border-color: rgba(242, 233, 216, 0.45); color: var(--crema); }
.btn-line:hover { border-color: var(--crema); background: rgba(242, 233, 216, 0.08); }

/* ---------- Testata ---------- */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 120;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem var(--gutter);
}
.logo, .footer-logo {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--serif); font-size: 1.6rem; line-height: 1;
  text-decoration: none; white-space: nowrap;
}
.trap { width: 1.9rem; height: auto; flex: none; color: var(--ottone); }
.nav-list a { text-decoration: none; }
.solo-largo { display: none; }
.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 2.4rem; padding: 0.4rem 0.2rem 0.4rem 0.6rem;
  background: none; border: 0; color: inherit; font: inherit; font-size: 0.95rem; font-weight: 500; cursor: pointer;
}
.nav-toggle-lines { position: relative; width: 1.35rem; height: 0.55rem; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transition: transform 0.2s; }
.nav-open .nav-toggle-lines { height: 0; border-bottom: 0; transform: rotate(0); }

@media (max-width: 59.99rem) {
  .topbar-call { margin-left: auto; }
  .nav { order: 4; }
  .nav-panel {
    position: fixed; inset: 0; z-index: -1;
    display: flex; flex-direction: column; justify-content: center; gap: 2.5rem;
    padding: 6rem var(--gutter) 3rem;
    background: var(--notte-bassa);
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s, visibility 0s 0.3s;
  }
  .nav-open .nav-panel { opacity: 1; visibility: visible; transition: opacity 0.3s; }
  .nav-list li { border-bottom: var(--filo); }
  .nav-list a { display: block; padding: 0.55rem 0; font-family: var(--serif); font-size: clamp(2.3rem, 10vw, 3.4rem); line-height: 1.1; }
  .nav-list a:hover { color: var(--ottone); }
  .nav-call { align-self: flex-start; }
  .nav-open { overflow: hidden; }
  .no-js .nav-toggle { display: none; }
}
@media (max-width: 23.5rem) {
  .logo { font-size: 1.4rem; }
  .nav-toggle-text { display: none; }
}
@media (min-width: 60rem) {
  .nav-toggle, .nav-call { display: none; }
  .nav { margin-left: auto; }
  .nav-list { display: flex; gap: 2rem; font-size: 0.98rem; }
  .nav-list a:hover { color: var(--ottone); }
  .topbar-call { margin-left: 1.25rem; }
  .solo-largo { display: inline; }
}

/* ---------- Apertura ---------- */
.hero {
  position: relative;
  padding: 5.75rem var(--gutter) 2.5rem;
  background:
    radial-gradient(70% 42% at 62% 66%, rgba(201, 160, 99, 0.16), transparent 70%),
    radial-gradient(90% 60% at 60% 64%, var(--notte-alta), var(--notte) 72%);
  overflow: hidden;
}
.hero-inner { max-width: var(--max); margin: 0 auto; display: grid; }
.hero-name {
  display: block;
  font-family: var(--sans); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.04em;
  color: var(--ottone);
  margin-bottom: 1.1rem;
}
.hero-claim {
  display: block;
  font-family: var(--serif);
  font-size: clamp(3.35rem, 1.4rem + 8.6vw, 6.6rem);
  line-height: 1;
  letter-spacing: -0.015em;
}
.hero-lead { max-width: 27rem; margin-top: 1.25rem; font-size: 1.0625rem; color: var(--salvia); }
.hero-dish { position: relative; margin: 0.5rem calc(var(--gutter) * -1) 0; }
.hero-dish img { width: 112%; max-width: none; margin-left: 2%; filter: drop-shadow(0 2.2rem 2.4rem rgba(0, 0, 0, 0.5)); }
.hero-dish figcaption {
  margin: -0.5rem var(--gutter) 0 0; text-align: right;
  font-size: 0.85rem; letter-spacing: 0.03em; color: var(--salvia);
}
.hero-foot { position: relative; z-index: 2; margin-top: 0.5rem; }
.status {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin: 1.1rem 0 0;
  font-size: 0.92rem; color: var(--salvia);
}
.status[hidden] { display: none; }
.status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ottone); flex: none; }
.status.is-open::before { background: #7fd394; box-shadow: 0 0 0 0.22rem rgba(127, 211, 148, 0.18); }

@media (min-width: 60rem) {
  .hero { min-height: min(100svh, 60rem); padding-top: 7.5rem; display: flex; align-items: center; }
  .hero-inner {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas: "testo piatto" "piede piatto";
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
  }
  .hero-text { grid-area: testo; }
  .hero-claim { font-size: clamp(4rem, 1rem + 4.6vw, 6.6rem); }
  .hero-dish { grid-area: piatto; align-self: center; margin: 0 calc(var(--gutter) * -1) 0 0; }
  .hero-dish img { width: 108%; margin-left: 0; }
  .hero-dish figcaption { margin: -1rem 12% 0 0; }
  .hero-foot { grid-area: piede; margin-top: 2.25rem; }
}

/* Un solo momento all'apertura: il testo si posa, il coccio entra piano. Solo CSS: senza
   animazioni (o senza JS) tutto è già visibile. */
@media (prefers-reduced-motion: no-preference) {
  .hero-text, .hero-foot { animation: posa 0.9s cubic-bezier(.2,.7,.2,1) both; }
  .hero-foot { animation-delay: 0.15s; }
  .hero-dish img { animation: entra 1.4s cubic-bezier(.2,.7,.2,1) 0.1s both; }
}
@keyframes posa { from { opacity: 0; transform: translateY(0.75rem); } }
@keyframes entra { from { opacity: 0; transform: translateY(1.5rem) rotate(-6deg) scale(0.96); } }

/* ---------- La storia: titolo e citazione, collage di due foto, linea del tempo ---------- */
.storia { background: var(--carta); color: var(--inchiostro); padding-block: var(--sezione); overflow: clip; } /* clip, non hidden: con hidden le schede «sticky» non si fermano */
.storia-grid { display: grid; gap: 3rem; }
.storia .title { color: var(--notte); max-width: 11em; }
.storia-quote { margin: 2rem 0 0; padding-left: 1.25rem; border-left: 2px solid var(--ottone); }
.storia-quote p { font-family: var(--serif); font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem); line-height: 1.2; color: var(--notte); }
.storia-quote footer { margin-top: 0.85rem; font-size: 0.9rem; color: var(--seppia); }

.storia-collage { position: relative; }
.storia-collage img { width: 100%; border-radius: 0.45rem; box-shadow: 0 1.5rem 3rem rgba(19, 40, 31, 0.16); }
.storia-collage figcaption { margin-top: 0.55rem; font-size: 0.85rem; color: var(--seppia); }
.foto-cucina { width: 88%; margin-left: auto; }
.foto-cucina figcaption { text-align: right; }
.foto-sala { position: relative; width: 60%; margin-top: -24%; }
.foto-sala img { outline: 0.4rem solid var(--carta); }

.linea { margin: clamp(3.5rem, 9vw, 6.5rem) 0 0; padding: 0 0 0 1.6rem; border-left: 1px solid var(--ottone); list-style: none; }
.linea li { position: relative; padding-bottom: 2.25rem; }
.linea li:last-child { padding-bottom: 0; }
.linea li::before {
  content: ""; position: absolute; left: calc(-1.6rem - 5px); top: 0.3rem;
  width: 9px; height: 9px; border-radius: 50%; background: var(--ottone);
  box-shadow: 0 0 0 4px var(--carta);
}
.linea .quando { margin: 0 0 0.35rem; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.04em; color: var(--ottone-scuro); }
.linea h3 { font-family: var(--serif); font-size: clamp(1.7rem, 1.4rem + 1vw, 2.1rem); line-height: 1.1; color: var(--notte); }
.linea h3 + p { margin-top: 0.5rem; max-width: 22rem; color: var(--seppia); }

/* Su telefono le tappe sono schede scure che, scorrendo, si impilano: della scheda sotto resta
   visibile la data, come le linguette di un quaderno di ricette. */
@media (max-width: 59.99rem) {
  .linea { display: block; padding: 0; border-left: 0; --linguetta: 3.4rem; }
  .linea li {
    position: sticky; top: calc(4.5rem + var(--i, 0) * var(--linguetta));
    /* Il margine sotto fa sì che, quando la sezione finisce, tutte le schede partano insieme:
       senza, l'ultima salirebbe prima e scoprirebbe il testo di quella sotto. Il margine sopra
       della scheda dopo lo compensa (i margini si sommano), così fra le schede resta 1rem. */
    margin-bottom: calc((3 - var(--i, 0)) * var(--linguetta));
    height: 17.5rem; /* tutte uguali: impilate, l'ultima copre per intero quelle sotto */
    padding: 1.15rem 1.4rem 1.5rem;
    display: flex; flex-direction: column;
    background: var(--notte); color: var(--crema);
    border-radius: 0.6rem;
    box-shadow: 0 -0.6rem 1.6rem rgba(13, 29, 22, 0.22);
  }
  .linea li:nth-child(even) { background: var(--notte-alta); }
  /* un tratto di scorrimento con la pila completa ferma, prima che la sezione se ne vada */
  .linea li + li { margin-top: calc(1rem - (4 - var(--i, 0)) * var(--linguetta)); }
  .linea li:last-child { margin-bottom: 7rem; padding-bottom: 1.5rem; }
  .storia { padding-bottom: 1rem; }
  .linea li::before { display: none; }
  .linea .quando {
    display: flex; align-items: center; gap: 0.7rem;
    margin: 0 0 auto; min-height: 2rem;
    font-family: var(--serif); font-size: 1.55rem; font-weight: 400; letter-spacing: 0; line-height: 1.1;
    color: var(--ottone);
  }
  .linea .quando::after { content: ""; flex: 1; height: 1px; background: rgba(201, 160, 99, 0.45); }
  .linea h3 { margin-top: 2.5rem; font-size: 2.3rem; color: var(--crema); }
  .linea h3 + p { color: var(--salvia); }
}

@media (min-width: 60rem) {
  .storia-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: 5rem; align-items: center; }
  .foto-sala { width: 52%; margin-top: -30%; }
  .linea {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2.5rem;
    padding: 2.25rem 0 0; border-left: 0; border-top: 1px solid var(--ottone);
  }
  .linea li { padding-bottom: 0; }
  .linea li::before { left: 0; top: calc(-2.25rem - 5px); }
}

/* ---------- I piatti di casa: schede color carta, come piccole carte del menu ---------- */
.piatti { padding-block: var(--sezione); background: var(--notte); }
.piatti-head > p { max-width: 26rem; margin-top: 1.1rem; color: var(--salvia); }

.menu-cards {
  display: flex; gap: 0.85rem;
  margin: 0; padding: 2.25rem var(--gutter) 0.25rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.menu-cards::-webkit-scrollbar { display: none; }
.menu-card {
  position: relative;
  flex: 0 0 min(78vw, 21rem);
  display: flex; flex-direction: column;
  background: var(--carta); color: var(--inchiostro);
  border-radius: 0.6rem;
  scroll-snap-align: start;
  overflow: hidden;
}
.menu-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.menu-card .dialetto {
  position: absolute; top: 0.85rem; left: 0.85rem; margin: 0;
  padding: 0.28rem 0.7rem; border-radius: 999px;
  background: rgba(13, 29, 22, 0.78); color: var(--crema);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font-size: 0.78rem; letter-spacing: 0.02em;
}
.menu-card h3 {
  margin: 1.2rem 1.4rem 0;
  font-family: var(--serif); font-size: 2.1rem; line-height: 1.05;
  color: var(--notte);
}
.menu-card h3 + p { margin: 0.55rem 1.4rem 1.5rem; color: var(--seppia); }
.menu-card-cta { padding: 1.5rem 1.4rem 1.6rem; background: var(--ottone); color: var(--notte); }
.menu-card-cta h3 { margin: 0; font-size: 1.85rem; line-height: 1.12; }
.menu-card-cta h3 + p { margin: auto 0 1rem; padding-top: 1.5rem; color: var(--notte); font-weight: 500; }
.menu-card-cta .btn { align-self: flex-start; }
.btn-dark { background: var(--notte); color: var(--crema); }
.btn-dark:hover { background: var(--notte-bassa); }

/* barra sottile che segue lo scorrimento delle schede */
.menu-progress { height: 2px; margin-top: 1.4rem; border-radius: 2px; background: rgba(242, 233, 216, 0.14); overflow: hidden; }
.menu-progress span { display: block; height: 100%; width: 30%; background: var(--ottone); border-radius: 2px; }
.no-js .menu-progress { display: none; }

@media (min-width: 60rem) {
  .menu-cards {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem;
    max-width: var(--max); margin-inline: auto; padding-top: 3rem; overflow: visible;
  }
  .menu-progress { display: none; }
  .menu-card-cta { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 2.5rem; padding: 2rem 2.25rem; }
  .menu-card-cta h3 { flex: 1; max-width: 40rem; }
  .menu-card-cta h3 + p { margin: 0; padding: 0; }
}

/* ---------- Mare e terra ---------- */
.mare-terra {
  padding-block: var(--sezione);
  background: radial-gradient(80% 60% at 70% 60%, var(--notte-alta), var(--notte-bassa) 75%);
  overflow: hidden;
}
.mt-text p { max-width: 28rem; margin-top: 1.1rem; color: var(--salvia); }
.plates { display: grid; margin-top: 2.5rem; }
.plates li:nth-child(1) { width: 68%; }
.plates li:nth-child(2) { justify-self: end; width: 86%; margin-top: -1.5rem; }
.plates li:nth-child(3) { width: 62%; margin-top: -1rem; margin-left: 8%; }
.plates img { width: 100%; filter: drop-shadow(0 1.6rem 1.8rem rgba(0, 0, 0, 0.5)); }
@media (min-width: 60rem) {
  .mt-inner { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 4rem; align-items: center; }
  .plates { margin-top: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .plates img { animation: gira-piano linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .plates li:nth-child(2) img { animation-name: gira-piano-2; }
  }
}
@keyframes gira-piano { from { transform: rotate(-12deg); } to { transform: rotate(8deg); } }
@keyframes gira-piano-2 { from { transform: rotate(10deg); } to { transform: rotate(-6deg); } }

/* ---------- Vieni a trovarci ---------- */
.dove { position: relative; padding-block: var(--sezione); isolation: isolate; }
.dove-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.dove-photo img { width: 100%; height: 100%; object-fit: cover; }
.dove-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13, 29, 22, 0.72) 0%, rgba(13, 29, 22, 0.66) 40%, rgba(13, 29, 22, 0.94) 100%);
}
.dove-inner { display: grid; gap: 3rem; }
.dove-main address { margin-top: 1.1rem; color: var(--salvia); }
.dove-phone {
  display: inline-block; margin: 1.75rem 0 1.5rem;
  font-family: var(--serif); font-size: clamp(2.6rem, 1.8rem + 3.6vw, 4.2rem); line-height: 1;
  text-decoration: none; color: var(--ottone);
}
.dove-phone:hover { color: var(--crema); }
.dove-hours {
  padding: 1.6rem 1.4rem 1.4rem;
  background: rgba(13, 29, 22, 0.72);
  border: var(--filo); border-radius: 0.5rem;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.dove-hours .status { margin: 0 0 1rem; }
.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours caption { text-align: left; font-family: var(--serif); font-size: 2rem; line-height: 1.1; margin-bottom: 0.75rem; }
.hours thead th { font-weight: 500; font-size: 0.85rem; color: var(--salvia); text-align: left; padding: 0 0 0.4rem; }
.hours tbody th, .hours tbody td { padding: 0.6rem 0; border-top: var(--filo); text-align: left; font-weight: 400; }
.hours tbody th { padding-right: 0.75rem; }
.hours tbody tr.is-today th, .hours tbody tr.is-today td { color: var(--ottone); font-weight: 600; }
.hours .oggi { margin-left: 0.45rem; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.03em; }
.info { margin-top: 1.5rem; font-size: 0.95rem; color: var(--salvia); }
.info li { padding: 0.45rem 0; border-top: var(--filo); }
@media (min-width: 60rem) {
  .dove-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 6rem; align-items: center; }
  .dove-hours { padding: 2rem 2rem 1.75rem; }
}

/* ---------- Piede ---------- */
.footer { background: var(--notte-bassa); color: var(--salvia); padding: 3.5rem 0 3rem; font-size: 0.95rem; border-top: var(--filo); }
.footer-inner { display: grid; gap: 1.25rem; }
.footer-logo { color: var(--crema); font-size: 2rem; margin: 0 0 0.5rem; }
.footer a { color: var(--crema); }
.footer-legal { font-size: 0.85rem; }
@media (min-width: 48rem) {
  .footer-inner { grid-template-columns: 1fr auto auto auto; align-items: end; gap: 3rem; }
  .footer-logo { margin: 0; }
}
@media (max-width: 59.99rem) { .footer { padding-bottom: 6.5rem; } }

/* ---------- Barra «Prenota» su telefono ---------- */
.call-bar {
  position: fixed; left: 0.75rem; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom)); z-index: 90;
  display: grid; grid-template-columns: 1fr auto; gap: 0.5rem;
  padding: 0.45rem; border-radius: 999px;
  background: rgba(13, 29, 22, 0.92);
  border: var(--filo);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.35);
  transform: translateY(160%);
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
}
.call-bar .btn { min-height: 2.9rem; }
.call-bar.is-visible { transform: none; }
.no-js .call-bar { display: none; }
@media (min-width: 60rem) { .call-bar { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .call-bar, .btn, .nav-panel { transition: none; }
}