/* ========================================================================
   DOMAS · COMPONENTS · v8 Heritage Steakhouse
   ======================================================================== */

/* =================================================================
   HEADER
   ================================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--gutter);
  background: transparent;
  transition: background var(--dur-norm) var(--ease-out), border-color var(--dur-norm);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: oklch(13% 0.010 40 / 0.90);
  backdrop-filter: blur(12px) saturate(110%);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
  border-bottom-color: var(--hairline);
}

.brand { display: inline-flex; align-items: center; }
.brand-wordmark {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2.4rem);
  color: var(--bone);
  letter-spacing: 0.03em;
  line-height: 1;
  transition: color var(--dur-fast) var(--ease-out);
}
.brand:hover .brand-wordmark { color: var(--ottone); }

.cta-reserve {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-style: italic;
  color: var(--bone);
  border: 1px solid var(--hairline-strong);
  padding: 0.55rem 1.4rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 0;
  /* explicit props (no transform): GSAP magnetic quickTo owns the transform */
  transition: border-color var(--dur-norm) var(--ease-out),
              color var(--dur-norm) var(--ease-out),
              background var(--dur-norm) var(--ease-out);
}
.cta-reserve:hover {
  border-color: var(--ottone);
  color: var(--ottone);
  background: oklch(72% 0.13 75 / 0.06);
}

/* =================================================================
   MASTHEAD HERO
   ================================================================= */
.masthead {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 9rem var(--gutter) 4rem;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.masthead::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--candle);
  z-index: -1;
}
.masthead-monogram {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20rem, 50vw, 50rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px oklch(72% 0.13 75 / 0.07);
  pointer-events: none;
  z-index: -1;
  user-select: none;
  letter-spacing: -0.04em;
}

.masthead-inner {
  display: grid;
  gap: var(--space-8);
  justify-items: center;
  max-width: 1500px;
  width: 100%;
}

.masthead-tagline {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  /* Tagline uses --text-h1 (client choice), two natural lines
     ("Carne frollata," / "birra alla spina."). */
  font-size: var(--text-h1);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--bone);
  max-width: 18ch;
  margin: 0;
}
.masthead-tagline .char {
  display: inline-block;
  /* No permanent will-change: layer promotion is left to the browser
     during the intro tween (17 short-lived compositor layers are worse
     than none on low-RAM mobile) */
}
.masthead-tagline .word { display: inline-block; white-space: nowrap; }

.masthead-bottom {
  display: flex;
  gap: clamp(1rem, 1rem + 3vw, 4rem);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--bone-mute);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-4);
}
.masthead-bottom strong { color: var(--ottone); font-weight: 400; }

.masthead-cue {
  position: absolute;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  color: var(--bone-faint);
  text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-1);
}
.masthead-cue::after {
  content: "";
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, var(--ottone), transparent);
  animation: cueDrop 2.4s var(--ease-out) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .masthead-cue::after { animation: none; }
}
@keyframes cueDrop {
  0%   { transform: scaleY(0); transform-origin: top; }
  60%  { transform: scaleY(1); transform-origin: top; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* =================================================================
   CARTA DELLA CARNE
   ================================================================= */
.cuts-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: var(--space-12);
}
.cut-flagship {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-12);
  padding: var(--space-12) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.cut-flagship-name {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(2.8rem, 1.4rem + 5.5vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin: 0;
}
.cut-flagship-name em {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ottone);
}
.cut-flagship-tagline {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--bone-mute);
  margin-top: var(--space-3);
  font-style: italic;
  font-weight: 300;
}
.cut-flagship-desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--bone-mute);
  line-height: 1.7;
  margin-top: var(--space-6);
}
.cut-flagship-side { display: grid; gap: var(--space-6); padding-top: var(--space-4); }

.cut-meta-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0;
}
.cut-meta-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bone-faint);
}
.cut-meta-list li strong { color: var(--bone); font-weight: 400; letter-spacing: 0.06em; }

.cuts-secondary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
.cut-card {
  display: grid; gap: var(--space-3);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--hairline);
}
.cut-card-name {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--bone);
}
.cut-card-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--bone-faint);
}
.cut-card-desc {
  color: var(--bone-mute);
  font-size: var(--text-sm);
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 900px) {
  .cut-flagship { grid-template-columns: 1fr; gap: var(--space-8); }
  .cuts-secondary { grid-template-columns: 1fr; }
}

/* =================================================================
   PIN SECTION — Tomahawk
   ================================================================= */
.pin-section {
  position: relative;
  background: var(--surface);
  border-block: 1px solid var(--hairline);
}
.pin-stage {
  /* min-height:100vh removed: residual of the deleted pin-scroll, left empty space */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  padding: var(--space-section) var(--gutter);
  max-width: var(--maxw);
  margin: 0 auto;
}
.pin-headline {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(3rem, 1.5rem + 6vw, 7rem);
  line-height: 0.95;
  color: var(--bone);
}
.pin-headline em {
  font-family: var(--font-italic);
  color: var(--ottone);
  font-style: italic;
  display: block;
}
.pin-metric {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-xl);
  line-height: 1.15;
  color: var(--bone-mute);
  margin: var(--space-8) 0 0;
}
.pin-metric em {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ottone);
}
.pin-data { display: grid; gap: 0; }
.pin-data-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--hairline);
}
.pin-data-row .label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--bone-faint);
}
.pin-data-row .value {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--bone);
  text-align: right;
}
@media (max-width: 900px) {
  .pin-stage { grid-template-columns: 1fr; }
  .pin-data-row .value { text-align: left; }
}

/* =================================================================
   BEER LIST — carta vini
   ================================================================= */
.beer-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-12);
}
.beer-col-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--ottone);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--hairline-strong);
  margin-bottom: var(--space-6);
}
.beer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.beer-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.beer-name {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--bone);
  line-height: 1.1;
}
.beer-abv {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ottone);
  text-align: right;
  letter-spacing: 0.05em;
}
.beer-tag {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--text-base);
  color: var(--bone-mute);
  line-height: 1.4;
}
.beer-origin {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--bone-faint);
}
.beer-cta {
  display: flex;
  max-width: var(--maxw);
  margin: var(--space-12) auto 0;
  padding-inline: var(--gutter);
  border-bottom: 0;
  width: auto;
}
@media (max-width: 900px) {
  .beer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* =================================================================
   MENU FLAGSHIP
   ================================================================= */
.menu-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: var(--space-12);
}
.menu-flagship-cta {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-4);
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(1.8rem, 1rem + 3vw, 3.5rem);
  color: var(--bone);
  border-bottom: 1px solid var(--hairline-strong);
  padding-bottom: var(--space-4);
  width: fit-content;
  transition: color var(--dur-norm) var(--ease-out);
}
.menu-flagship-cta:hover { color: var(--ottone); }
.menu-flagship-cta .arrow {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--text-base);
  color: var(--ottone);
  letter-spacing: 0;
}

.menu-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.menu-item {
  display: grid;
  grid-template-columns: 1fr;
  align-items: baseline;
  gap: var(--space-6);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--hairline);
}
.menu-item-name {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--bone);
  line-height: 1.05;
  margin-bottom: var(--space-2);
}
.menu-item-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--bone-mute);
  line-height: 1.55;
  max-width: 60ch;
  margin: 0;
}
/* =================================================================
   HERITAGE STRIP — marquee italic
   ================================================================= */
.heritage-strip {
  border-block: 1px solid var(--hairline-strong);
  background: var(--bg-deep);
  padding-block: var(--space-12);
  overflow: hidden;
  position: relative;
  z-index: 3;
}
.heritage-track {
  display: flex;
  /* will-change removed — ticker already promotes layer via translate3d */
  gap: 4rem;
  white-space: nowrap;
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(3rem, 1rem + 7vw, 8rem);
  line-height: 1;
  color: var(--bone);
}
.heritage-track span {
  display: inline-flex;
  align-items: center;
  gap: 4rem;
}
.heritage-track .sep {
  color: var(--ottone);
  font-style: normal;
  font-family: var(--font-display);
  opacity: 0.7;
}

/* =================================================================
   CONTACT GRID
   ================================================================= */
.contact-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  /* columns set once in the v11 block below (2fr 1fr 1fr, info dominant) */
  gap: var(--space-12);
  align-items: start;
}
.contact-info { display: grid; gap: var(--space-8); }
.contact-address {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(2rem, 1rem + 3.5vw, 4rem);
  line-height: 1.05;
  color: var(--bone);
}
.contact-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* space-5 (not space-6): at the 1024 collapse band the wider gap left each
     card at 199.6px, 0.4px under the 200px min; -4px gap = +2px/card. */
  gap: var(--space-5);
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-8);
}
.contact-card h3 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--ottone);
  font-weight: 400;
  margin-bottom: var(--space-3);
}
.contact-card p {
  font-family: var(--font-body);
  color: var(--bone);
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.contact-card a { color: var(--bone); border-bottom: 1px solid var(--hairline); padding-bottom: 1px; }
.contact-card a:hover { color: var(--ottone); border-color: var(--ottone); }

.contact-map {
  position: relative;
  aspect-ratio: 1 / 1.05;
  border: 1px solid var(--hairline-strong);
  overflow: hidden;
  background: var(--surface);
  transition: transform var(--dur-norm) var(--ease-out);
}
.contact-map:hover { transform: scale(1.02); }
.contact-map iframe {
  width: 100%; height: 100%;
  border: 0;
  filter: contrast(0.92) saturate(0.7) brightness(0.85) sepia(0.25);
}
/* contact collapse handled by the v11 max-width:1000px block below,
   aligned to the HTML `sizes` breakpoint (was a stray 900px threshold) */

/* =================================================================
   CREST FOOTER
   ================================================================= */
.crest-footer {
  background: var(--bg-deep);
  padding: var(--space-16) var(--gutter) var(--space-8);
  border-top: 1px solid var(--hairline);
  position: relative;
  z-index: 3;
}
.crest-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  gap: var(--space-6);
  justify-items: center;
  text-align: center;
}
.crest-mark {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--ottone);
  padding: 4px;
  background: var(--bg);
}
.crest-mark img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.crest-line {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--bone);
}
.crest-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--bone-faint);
}
.crest-meta a { color: var(--bone-mute); }
.crest-meta a:hover { color: var(--ottone); }

/* =================================================================
   FLOAT CTA WhatsApp
   ================================================================= */
.float-cta {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.85rem 1.4rem;
  min-height: 44px;
  background: var(--ottone);
  color: var(--bg-deep);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-base);
  border: 1px solid var(--ottone);
  border-radius: 0;
  box-shadow: 0 12px 36px oklch(8% 0.008 40 / 0.5),
              0 2px 6px oklch(72% 0.13 75 / 0.25);
  /* no transform in transition: GSAP magnetic quickTo owns the inline
     transform; reveal rides opacity + visibility instead of the slide */
  transition: opacity var(--dur-slow) var(--ease-out),
              visibility var(--dur-slow) var(--ease-out),
              background var(--dur-norm),
              color var(--dur-norm);
}
/* Visible by default (survives a main.js 404); hidden only while JS is
   active and initFloatCta has not yet added .is-visible. visibility:hidden
   pulls it out of the tab order while invisible (WCAG 2.4.7). */
.js .float-cta:not(.is-visible) {
  transform: translateY(80px) scale(0.94);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.float-cta:hover { background: var(--bg); color: var(--ottone); }

@media (max-width: 600px) {
  .float-cta { bottom: 1rem; right: 1rem; padding: 0.75rem 1.1rem; font-size: var(--text-sm); }
}


/* ---- IO Reveal: hidden state scoped to .js, visible by default ---------- */
/* Content is fully visible without JS. The .js class (set synchronously
   before paint) opts elements into the hidden "from" state. The
   IntersectionObserver adds .is-revealed to transition them in.
   transition-delay respects the --io-delay stagger set inline by JS.        */

.js [data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translateY(24px);
}
.js [data-reveal-stagger] > *:not(.is-revealed) {
  opacity: 0;
  transform: translateY(20px);
}
[data-reveal].is-revealed,
[data-reveal-stagger] > *.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out) var(--io-delay, 0ms),
              transform var(--dur-slow) var(--ease-out) var(--io-delay, 0ms);
}

/* no-JS: content never hidden */
@media (scripting: none) {
  [data-reveal],
  [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
}

/* =================================================================
   v9 MOTION ENHANCEMENTS
   ================================================================= */

/* --- Heading mask wrapper (injected by JS) ----------------------- */
.js-mask-wrap {
  overflow: hidden;
  /* Prevent margin collapse inside the clip container */
  display: flow-root;
  /* Room for descenders (g, p, q) inside the clip, margin-compensated
     so layout metrics stay identical */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
/* The actual heading line that slides up into the mask */
.js-mask-line {
  display: block;
}
/* Hidden only when JS is active and IO has not yet fired */
.js .js-mask-line:not(.is-revealed) {
  opacity: 0;
  transform: translateY(40px);
  /* no static will-change: ~22 hidden lines would be GPU-promoted from load.
     Apply it in JS on the IO callback and clear it at transitionend if needed. */
}
.js-mask-line.is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

/* no-JS: ensure mask-wrapped headings are always visible */
@media (scripting: none) {
  .js-mask-wrap { overflow: visible; }
  .js-mask-line { opacity: 1 !important; transform: none !important; }
}

/* --- Figure images: clip-path reveal initial state -------------- */
/*
   Default state: fully visible. No clip-path, no hidden opacity, no
   persistent will-change. The "from" hidden state is applied ONLY by
   GSAP at runtime (gsap.fromTo). No will-change is declared here or in
   JS — GSAP manages compositing for the duration of its own tweens. This avoids forced compositing layers
   that blank large raster images in some render paths.
*/
figure img {
  clip-path: none;
  opacity: 1;
  /* No will-change here — GSAP handles compositing during tweens */
}
/* no-JS: never hide figure images */
@media (scripting: none) {
  figure img {
    clip-path: none !important;
    transform: none !important;
    opacity: 1 !important;
    will-change: auto;
  }
}

/* --- Pin-rule: the animated border-bottom line ------------------- */
.pin-rule {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--hairline-strong);
  transform-origin: left center;
  /* scaleX animated 0->1 by GSAP */
  pointer-events: none;
}
/* pin-data-row needs position:relative for pin-rule absolute child */
.pin-data-row { position: relative; }

/* pin-data-row: hidden only under .js until IO fires */
.js .pin-data-row:not(.is-revealed) {
  border-bottom-color: transparent;
  opacity: 0;
  transform: translateY(20px);
}
.pin-data-row.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out) var(--io-delay, 0ms),
              transform var(--dur-slow) var(--ease-out) var(--io-delay, 0ms);
}

/* no-JS: keep original border, rows always visible */
@media (scripting: none) {
  .pin-data-row {
    opacity: 1;
    transform: none;
    border-bottom-color: var(--hairline);
  }
  .pin-rule { display: none; }
}

/* --- Magnetic + parallax targets ---------------------------------- */
/* .cta-reserve, .float-cta, .menu-flagship-cta, .masthead-bg,
   .masthead-monogram: no permanent will-change; layer promotion is
   managed transiently by GSAP while the tweens run. */

/* Prefers-reduced-motion: kill will-change on all v9 targets */
@media (prefers-reduced-motion: reduce) {
  .js-mask-line,
  figure img,
  .masthead-bg,
  .masthead-monogram,
  .masthead-tagline .char,
  .cta-reserve,
  .float-cta,
  .menu-flagship-cta {
    will-change: auto;
  }

  /* FIX: float-cta must be reachable for reduced-motion users.
     JS reduced-motion branch adds .is-visible, but also cover the
     edge case where the class is applied via CSS transition override. */
  .float-cta,
  .js .float-cta:not(.is-visible) {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* Reveal system: neutralize the hidden "from" states and kill the
     transitions so content is immediately visible, without motion. */
  .js [data-reveal]:not(.is-revealed),
  .js [data-reveal-stagger] > *:not(.is-revealed),
  .js .js-mask-line:not(.is-revealed) {
    opacity: 1;
    transform: none;
  }
  .js .pin-data-row:not(.is-revealed) {
    opacity: 1;
    transform: none;
    border-bottom-color: var(--hairline);
  }
  [data-reveal].is-revealed,
  [data-reveal-stagger] > *.is-revealed,
  .js-mask-line.is-revealed,
  .pin-data-row.is-revealed {
    transition: none;
  }
}

/* FIX: no-JS users must see the float-cta; it is hidden by default CSS. */
@media (scripting: none) {
  .float-cta {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* =================================================================
   v9 — NEW SECTIONS (storia, lavorazione, eventi, recensioni, faq,
   come-arrivare, cookie banner, map-placeholder, footer legal)
   ================================================================= */

/* --- STORIA ------------------------------------------------------ */
.storia { padding-top: var(--space-section); padding-bottom: var(--space-section); }
/* grid-template-columns set in v10 block below (14rem 1fr 18rem with photo column) */
.storia-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: clamp(2rem, 2vw + 1rem, 5rem);
  align-items: start;
}
.storia-meta {
  border-top: 1px solid var(--hairline-strong);
  padding-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.storia-stamp {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ottone);
}
.storia-origin {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.storia-headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-h2);
  line-height: 0.98;
  color: var(--bone);
  margin: 0 0 var(--space-12);
}
.storia-headline em {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ottone);
}
.storia-para {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--bone-mute);
  max-width: 56ch;
  margin: 0 0 var(--space-6);
}
/* storia-grid single-column collapse handled by the v10 max-width:1000px
   block below; the old 860px rule here was redundant. */

/* --- LAVORAZIONE ------------------------------------------------- */
.lavorazione-timeline {
  list-style: none;
  margin: 0 auto 0;
  padding: 0 var(--gutter);
  max-width: var(--maxw);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.lav-step {
  position: relative;
  padding: var(--space-10, 2.5rem) var(--space-8) var(--space-10, 2.5rem) var(--space-6);
  border-left: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.lav-step:first-child { border-left-color: var(--hairline-strong); }
.lav-step-num {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(3rem, 1rem + 6vw, 7rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ottone-deep);
  display: block;
  margin-bottom: var(--space-2);
  user-select: none;
}
@supports (-webkit-text-stroke: 1px currentColor) {
  .lav-step-num {
    color: transparent;
    -webkit-text-stroke: 1px var(--ottone-deep);
  }
}
.lav-step-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--bone);
  margin: 0;
  line-height: 1.1;
}
.lav-step-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--bone-mute);
  margin: 0;
}
@media (max-width: 860px) {
  .lav-step { padding-inline: var(--space-4); }
}
@media (max-width: 520px) {
  .lavorazione-timeline { grid-template-columns: 1fr; }
  .lav-step { border-left: none; border-top: 1px solid var(--hairline); padding-left: 0; }
  .lav-step:first-child { border-top-color: var(--hairline-strong); }
}

/* --- MENU ALLERGENI ---------------------------------------------- */
.menu-allergeni {
  margin-top: var(--space-12);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  color: var(--bone-faint);
  max-width: 62ch;
}

/* --- EVENTI ------------------------------------------------------ */
.eventi-grid {
  max-width: var(--maxw);
  margin: var(--space-16) auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 1vw + 1rem, 3rem);
}
.evento-card {
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  padding: clamp(1.75rem, 1vw + 1rem, 3rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.evento-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ottone);
  margin: 0;
}
.evento-title {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--bone);
  margin: 0;
  line-height: 1.1;
}
.evento-desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--bone-mute);
  margin: 0;
}
.evento-tags {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.evento-tags li {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-mute);
  border: 1px solid var(--hairline);
  padding: 0.3rem 0.7rem;
}
.evento-cta {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--ottone);
  text-decoration: none;
  border-bottom: 1px solid var(--ottone);
  padding-bottom: 0.15rem;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.evento-cta:hover { color: var(--bone); border-color: var(--bone); }
@media (max-width: 760px) {
  .eventi-grid { grid-template-columns: 1fr; }
}

/* --- RECENSIONI -------------------------------------------------- */
.eyebrow-link { color: var(--ottone); text-decoration: none; border-bottom: 1px solid currentColor; }
.eyebrow-link:hover { color: var(--bone); }
.recensioni-wall {
  max-width: var(--maxw);
  margin: var(--space-16) auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 1.5vw + 1rem, 3.5rem);
}
.recensione {
  margin: 0;
  padding: var(--space-8) 0 0;
  border-top: 1px solid var(--hairline-strong);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.recensione-text {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 0.9rem + 0.9vw, 1.75rem);
  line-height: 1.3;
  color: var(--bone);
  margin: 0;
}
.recensione-attr {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
@media (max-width: 860px) {
  .recensioni-wall { grid-template-columns: 1fr; }
}

/* --- FAQ --------------------------------------------------------- */
.faq-list {
  max-width: 68rem;
  margin: var(--space-16) auto 0;
  padding: 0 var(--gutter);
}
.faq-item {
  border-top: 1px solid var(--hairline);
  padding: var(--space-6) 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--bone);
  transition: color var(--dur-fast);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  color: var(--ottone);
  transition: transform var(--dur-norm) var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--ottone); }
@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after { transition: none; }
}
.faq-item p {
  margin: var(--space-4) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--bone-mute);
  max-width: 62ch;
}

/* --- COME ARRIVARE ---------------------------------------------- */
.come-arrivare-grid {
  max-width: var(--maxw);
  margin: var(--space-16) auto 0;
  padding: var(--space-12) var(--gutter) 0;
  border-top: 1px solid var(--hairline-strong);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 1.5vw + 1rem, 3.5rem);
}
.ca-col { display: flex; flex-direction: column; gap: var(--space-3); }
.ca-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ottone);
  margin: 0;
}
.ca-text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--bone-mute);
  margin: 0;
}
@media (max-width: 760px) {
  .come-arrivare-grid { grid-template-columns: 1fr; }
}

/* --- MAP PLACEHOLDER -------------------------------------------- */
.map-slot { width: 100%; height: 100%; min-height: 340px; position: relative; }
.map-slot iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
.map-placeholder {
  position: absolute;
  inset: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1.5rem, 2vw, 2.5rem);
  gap: var(--space-4);
}
.map-placeholder-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ottone);
  margin: 0;
}
.map-placeholder-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.3;
  color: var(--bone);
  margin: 0;
  max-width: 34ch;
}
.map-placeholder-btn {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  background: var(--ottone);
  color: var(--bg-deep);
  border: 1px solid var(--ottone);
  padding: 0.75rem 1.1rem;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.map-placeholder-btn:hover { background: var(--bg); color: var(--ottone); }
.map-placeholder-alt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  color: var(--bone-faint);
}
.map-placeholder-alt a { color: var(--bone-mute); }
.map-placeholder-alt a:hover { color: var(--ottone); }

/* --- FOOTER LEGAL ----------------------------------------------- */
.crest-legal {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--bone-faint);
  line-height: 1.7;
  max-width: 62ch;
  margin: var(--space-4) auto;
  text-align: center;
}
.crest-legal a { color: var(--bone-mute); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.crest-legal a:hover { color: var(--ottone); border-color: var(--ottone); }

/* --- COOKIE BANNER ---------------------------------------------- */
.ck-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--bg-deep);
  border-top: 1px solid var(--hairline-strong);
  box-shadow: 0 -16px 48px oklch(5% 0.008 40 / 0.7);
  transform: translateY(120%);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}
.ck-banner.is-visible { transform: translateY(0); opacity: 1; }
.ck-banner-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(1rem, 1vw + 0.8rem, 1.6rem) var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  align-items: center;
}
.ck-banner-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--bone-mute);
  margin: 0;
  max-width: 72ch;
}
.ck-banner-text strong {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--bone);
  margin-right: 0.35rem;
}
.ck-banner-text a { color: var(--ottone); border-bottom: 1px solid currentColor; text-decoration: none; }
.ck-banner-actions { display: flex; gap: var(--space-3); }
.ck-btn {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 0.75rem 1.15rem;
  border: 1px solid var(--hairline-strong);
  background: transparent;
  color: var(--bone-mute);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.ck-btn-reject:hover { color: var(--bone); border-color: var(--bone); }
.ck-btn-accept {
  background: var(--ottone);
  color: var(--bg-deep);
  border-color: var(--ottone);
}
.ck-btn-accept:hover { background: var(--bg); color: var(--ottone); }
@media (max-width: 680px) {
  .ck-banner-inner { grid-template-columns: 1fr; }
  .ck-banner-actions { justify-content: flex-end; }
}

/* --- LEGAL PAGES (shared) --------------------------------------- */
.legal-page {
  max-width: 72ch;
  margin: 0 auto;
  padding: var(--space-section) var(--gutter);
  color: var(--bone-mute);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
}
.legal-page h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-h2);
  color: var(--bone);
  line-height: 1.05;
  margin: 0 0 var(--space-8);
}
.legal-page h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--bone);
  margin: var(--space-12) 0 var(--space-4);
}
.legal-page h3 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ottone);
  margin: var(--space-8) 0 var(--space-2);
}
.legal-page p { margin: 0 0 var(--space-4); }
.legal-page ul { padding-left: 1.25rem; margin: 0 0 var(--space-6); }
.legal-page li { margin-bottom: var(--space-2); }
.legal-page a { color: var(--ottone); }
.legal-page a:hover { color: var(--bone); }
.legal-back {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bone-faint);
  display: inline-block;
  margin-bottom: var(--space-12);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 0.2rem;
}
.legal-back:hover { color: var(--ottone); border-color: var(--ottone); }

/* =================================================================
   GALLERIA — Bento asimmetrico, foto reali via TripAdvisor
   ================================================================= */
.galleria { padding-top: var(--space-section); padding-bottom: var(--space-section); }

.galleria-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 220px;
  grid-auto-flow: row dense;
  gap: var(--space-2);
  margin-top: var(--space-12);
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Bento hierarchy at every breakpoint: tall items span 2 rows even on
   mobile; wide items span 2 columns as soon as the grid has them. */
.galleria-item--tall { grid-row: span 2; }

@media (min-width: 640px) {
  .galleria-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 240px;
    gap: var(--space-3);
  }
  .galleria-item--wide { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .galleria-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 220px;
    gap: var(--space-3);
  }
}

.galleria-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  border: 1px solid var(--hairline);
  background: var(--bg-deep);
  isolation: isolate;
}
.galleria-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    oklch(8% 0.010 40 / 0.78) 0%,
    oklch(8% 0.010 40 / 0.20) 36%,
    transparent 60%
  );
  opacity: 0.85;
  transition: opacity var(--dur-norm) var(--ease-out);
  pointer-events: none;
  z-index: 1;
}
.galleria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1),
              filter 600ms cubic-bezier(0.16, 1, 0.3, 1);
  filter: brightness(0.92) saturate(0.95);
}
.galleria-item:hover img {
  transform: scale(1.04);
  filter: brightness(1.05) saturate(1.0);
}
/* Caption reveal: hover + focus-within parity. The scrim stays at 0.85
   while the caption is visible so the text keeps its contrast. */
.galleria-item:hover .galleria-caption,
.galleria-item:focus-within .galleria-caption { opacity: 1; transform: translateY(0); }

.galleria-caption {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone, oklch(95% 0.005 80));
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-norm) var(--ease-out),
              transform var(--dur-norm) var(--ease-out);
}
.cap-num {
  color: var(--ottone);
  border-right: 1px solid var(--hairline-strong);
  padding-right: var(--space-2);
}

@media (hover: none) {
  .galleria-caption { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .galleria-item img {
    transition: filter 600ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: auto;
  }
  .galleria-item:hover img { transform: none; }
  .galleria-caption {
    transition: opacity var(--dur-norm) var(--ease-out);
  }
}

.galleria-attr {
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-faint);
  text-align: center;
}
.galleria-attr a {
  color: var(--ottone);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  transition: border-color var(--dur-fast);
}
.galleria-attr a:hover { border-color: var(--ottone); }

/* =================================================================
   v10 — PHOTO DISTRIBUTION ACROSS SECTIONS
   ================================================================= */

/* shared photo treatment */
.storia-photo img,
.carne-photo-wide img,
.beer-photo-col img,
.contatti-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.92) saturate(0.95);
  transition: filter 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.storia-photo:hover img,
.carne-photo-wide:hover img,
.beer-photo-col:hover img,
.contatti-photo:hover img {
  filter: brightness(1.04) saturate(1.0);
}

.storia-photo,
.carne-photo-wide,
.beer-photo-col,
.contatti-photo {
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-deep);
  position: relative;
}

.storia-photo figcaption,
.beer-photo-col figcaption,
.contatti-photo figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-faint);
  padding: var(--space-3) 0 0;
  text-align: left;
}

/* --- MASTHEAD BG ------------------------------------------------- */
.masthead-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  z-index: -2;
  filter: brightness(0.55) saturate(1.05);
  pointer-events: none;
  user-select: none;
  image-rendering: auto;
}
.masthead-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, oklch(8% 0.010 40 / 0.15), oklch(8% 0.010 40 / 0.82) 75%),
    var(--candle);
  pointer-events: none;
}
@media (max-width: 600px) {
  .masthead-bg { filter: brightness(0.58) saturate(1.0); }
}

/* --- STORIA SPLIT ------------------------------------------------ */
.storia-grid {
  grid-template-columns: 14rem 1fr 18rem;
}
.storia-photo { aspect-ratio: 4/5; }
.storia-photo figcaption {
  padding: var(--space-3) var(--space-3);
  background: var(--bg-deep);
}
@media (max-width: 1000px) {
  .storia-grid { grid-template-columns: 1fr; }
  .storia-photo { aspect-ratio: 16/10; }
}

/* --- CARNE WIDE PHOTO ------------------------------------------- */
.carne-photo-wide {
  max-width: var(--maxw);
  margin: var(--space-12) auto var(--space-12);
  padding: 0 var(--gutter);
  border: none;
  background: transparent;
}
.carne-photo-wide img {
  aspect-ratio: 3/2;
  width: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  border: 1px solid var(--hairline);
}
/* figcaption consistent with lav-masthead-photo figcaption */
.carne-photo-wide figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-faint);
  padding: var(--space-3) 0 0;
  text-align: left;
}
@media (max-width: 760px) {
  .carne-photo-wide img { aspect-ratio: 4/3; object-position: center 15%; }
}

/* --- LAVORAZIONE MASTHEAD PHOTO --------------------------------- */
/* H2 fix: overflow:hidden moved off figure onto inner frame so figcaption is not clipped */
.lav-masthead-photo {
  max-width: var(--maxw);
  margin: var(--space-12) auto var(--space-16);
  padding: 0 var(--gutter);
  border: none;
  background: transparent;
}
.lav-masthead-photo-frame {
  aspect-ratio: 21 / 8;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.lav-masthead-photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: brightness(0.78) saturate(0.9);
  border: 1px solid var(--hairline);
}
.lav-masthead-photo figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-faint);
  padding: var(--space-3) 0 0;
  text-align: left;
}
@media (max-width: 760px) {
  .lav-masthead-photo-frame { aspect-ratio: 16 / 9; }
}

/* --- BIRRE PHOTO COL --------------------------------------------- */
.beer-photo-col {
  aspect-ratio: 4/3;
  margin: 0 0 var(--space-6);
  position: relative;
  overflow: hidden;
}
.beer-photo-col img {
  object-position: center top;
}
.beer-photo-col figcaption {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  padding: 0.25rem 0.55rem;
  background: oklch(8% 0.010 40 / 0.78);
  color: var(--bone);
  border: 1px solid var(--hairline);
}

/* --- EVENTI BG --------------------------------------------------- */
.eventi {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.eventi-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: -2;
  filter: brightness(0.45) saturate(0.85);
  pointer-events: none;
}
.eventi-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at center, transparent 30%, oklch(8% 0.010 40 / 0.70) 100%),
    linear-gradient(to top, oklch(8% 0.010 40 / 0.95) 0%, oklch(8% 0.010 40 / 0.60) 50%, oklch(8% 0.010 40 / 0.88) 100%);
  pointer-events: none;
}
.eventi .evento-card {
  background: oklch(13% 0.010 40 / 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* --- RECENSIONI WATERMARK --------------------------------------- */
.recensioni { position: relative; isolation: isolate; overflow: hidden; }
.recensioni-watermark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 0.08;
  filter: brightness(0.6) saturate(0.6) contrast(0.9);
  pointer-events: none;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .storia-photo img,
  .carne-photo-wide img,
  .beer-photo-col img,
  .contatti-photo img {
    transition: filter 600ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: auto;
  }
  .contact-map { transition: none; }
  .contact-map:hover { transform: none; }
}

/* =================================================================
   BURGER SECTION — v11
   ================================================================= */
.burger-section { padding-top: var(--space-section); padding-bottom: var(--space-section); }

.burger-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  grid-template-rows: auto auto auto;
  gap: var(--space-8);
  align-items: start;
}

.burger-photo-hero {
  grid-column: 1;
  grid-row: 1 / 4;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--bg-deep);
  position: relative;
}
.burger-photo-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  filter: brightness(0.92) saturate(0.95);
  transition: filter 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.burger-photo-hero:hover img {
  filter: brightness(1.04) saturate(1.0);
  transform: scale(1.02);
}
.burger-photo-hero figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-faint);
  padding: var(--space-3) 0 0;
}

.burger-body {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  gap: var(--space-6);
  padding-top: var(--space-4);
}
.burger-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--text-xl);
  line-height: 1.35;
  color: var(--bone);
  margin: 0;
  max-width: 44ch;
}
.burger-sub {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--bone-mute);
  margin: 0;
  max-width: 50ch;
}
.burger-photo-side {
  grid-column: 2;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--bg-deep);
  position: relative;
}
.burger-photo-side img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.92) saturate(0.95);
  transition: filter 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.burger-photo-side:hover img {
  filter: brightness(1.04) saturate(1.0);
  transform: scale(1.02);
}
.burger-photo-fries {
  grid-row: 2;
  aspect-ratio: 3 / 2;
}
.burger-photo-fries img { aspect-ratio: 3 / 2; }
.burger-photo-life {
  grid-row: 3;
  aspect-ratio: 4 / 5;
}
.burger-photo-side figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-faint);
  padding: var(--space-3) 0 0;
}

@media (max-width: 860px) {
  .burger-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .burger-photo-hero {
    grid-column: 1;
    grid-row: auto;
  }
  .burger-photo-hero img { aspect-ratio: 3 / 2; }
  .burger-body {
    grid-column: 1;
    grid-row: auto;
  }
  .burger-photo-fries {
    grid-column: 1;
    grid-row: auto;
  }
  .burger-photo-life {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 3 / 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .burger-photo-hero img,
  .burger-photo-side img {
    transition: filter 600ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .burger-photo-hero:hover img,
  .burger-photo-side:hover img { transform: none; }
}

/* --- LAVORAZIONE STEP PHOTO -------------------------------------- */
.lav-step-photo {
  margin: var(--space-4) 0 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--bg-deep);
}
.lav-step-photo img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center 20%;
  filter: brightness(0.85) saturate(0.9);
  transition: filter 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lav-step-photo:hover img { filter: brightness(0.95) saturate(1.0); }

@media (max-width: 860px) {
  .lav-step-photo img { height: 220px; }
}

/* --- CONTATTI PHOTO --------------------------------------------- */
.contact-grid {
  grid-template-columns: 2fr 1fr 1fr;
}
.contatti-photo {
  aspect-ratio: 1 / 1.05;
}
.contatti-photo figcaption {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  padding: 0.3rem 0.6rem;
  background: oklch(8% 0.010 40 / 0.78);
  color: var(--bone);
  border: 1px solid var(--hairline);
  margin: 0;
}
@media (max-width: 1000px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; }
  .contatti-photo { aspect-ratio: 16/10; }
}


/* =================================================================
   MENU (home) — solo foto, il menu completo sta in menu.html
   ================================================================= */
.menu-photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.menu-photo {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--bg-deep);
}
.menu-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.92) saturate(0.95);
  transition: filter 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.menu-photo:hover img { filter: brightness(1.04) saturate(1); }
@media (max-width: 560px) {
  .menu-photos { grid-template-columns: 1fr; }
}

/* =================================================================
   PAGINA MENU (menu.html) — solo nomi, niente descrizioni
   ================================================================= */
.menu-page {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-section) var(--gutter);
  color: var(--bone-mute);
  font-family: var(--font-body);
}
.menu-page-head { margin-bottom: var(--space-12); }
.menu-page-head h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-h1);
  color: var(--bone);
  line-height: 0.95;
  margin: var(--space-4) 0 var(--space-8);
}
.menu-page-head h1 em { font-family: var(--font-italic); color: var(--ottone); }
.menu-page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.menu-page-nav a { color: var(--bone-faint); text-decoration: none; }
.menu-page-nav a:hover, .menu-page-nav a:focus-visible { color: var(--ottone); }
.menu-cat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-8);
  padding: var(--space-12) 0;
  border-top: 1px solid var(--hairline-strong);
  scroll-margin-top: var(--space-8);
}
.menu-cat h2 {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-h2);
  color: var(--bone);
  line-height: 1;
  margin: 0;
}
.menu-cat-sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ottone);
  margin: var(--space-8) 0 var(--space-2);
}
.menu-cat-sub:first-child { margin-top: 0; }
.menu-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: var(--space-8);
}
.menu-cat-list li {
  break-inside: avoid;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--bone);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hairline);
}
.menu-page-photo {
  margin: 0 0 var(--space-4);
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--bg-deep);
}
.menu-page-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.92) saturate(0.95); }
.menu-page-foot {
  margin-top: var(--space-12);
  font-size: var(--text-sm);
  color: var(--bone-faint);
}
.menu-page-foot a { color: var(--ottone); }
@media (max-width: 760px) {
  .menu-cat { grid-template-columns: 1fr; gap: var(--space-4); }
  .menu-cat-list { columns: 1; }
  .menu-page-photo { aspect-ratio: 4 / 3; }
}