/* ==========================================================================
   AL TEATRO — pizzeria a Barcellona Pozzo di Gotto
   Direction: "programma di sala" (opera evening-program). A deep theatre-curtain
   bordeaux hero rises to reveal a cream libretto-paper program. Roman-inscriptional
   caps (Cinzel) over old-style body (EB Garamond). ONE accent = theatre red.
   Radius system: all-sharp (0) — letterpress / printed-bill feel.
   Mobile-first (390px), then scale up at 720px.
   ========================================================================== */

:root {
  --paper:  #f6ecd9;         /* aged program cream (canvas) */
  --paper-2:#efe2c7;         /* deeper band for alternating sections */
  --ink:    #2a1c14;         /* warm sepia-black — body text */
  --muted:  #63513c;         /* secondary warm brown (AA on cream) */
  --curtain:#560e15;         /* deepest theatre-curtain red (hero + footer blocks) */
  --accent: #8e1f26;         /* theatre red — the single accent (CTAs, rules, prices) */
  --accent-dk:#71161c;       /* accent hover */
  --on-dark:#f6ecd9;         /* cream text on the dark red blocks */

  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-body: "EB Garamond", Georgia, "Times New Roman", serif;
  --measure: 64ch;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); }
a:hover { color: var(--accent-dk); }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; font-weight: 600; }

/* -- buttons (all sharp) --------------------------------------------------- */
.btn {
  display: inline-block; text-decoration: none;
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.82rem; letter-spacing: 0.11em; text-transform: uppercase;
  padding: 0.72rem 1.5rem; border: 1.5px solid transparent;
  border-radius: 0; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 0.5rem 1.05rem; font-size: 0.72rem; }

.btn-solid { background: var(--accent); color: var(--on-dark); border-color: var(--accent); }
.btn-solid:hover { background: var(--accent-dk); border-color: var(--accent-dk); color: var(--on-dark); }

.btn-cream { background: var(--on-dark); color: var(--curtain); border-color: var(--on-dark); }
.btn-cream:hover { background: #fff6e6; color: var(--curtain); }

.btn-outline { background: transparent; color: var(--on-dark); border-color: rgba(246,236,217,0.55); }
.btn-outline:hover { border-color: var(--on-dark); background: rgba(246,236,217,0.10); color: var(--on-dark); }

/* -- top bar --------------------------------------------------------------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.7rem 1.25rem;
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(42,28,20,0.10);
}
.brand {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.15rem; letter-spacing: 0.06em; color: var(--ink);
}

/* -- hero : the curtain ---------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  min-height: 86vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 4.5rem 1.4rem 5rem;
  color: var(--on-dark);
  background-color: var(--curtain);
  /* soft top/bottom shading (valance + floor) over vertical velvet folds */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 66%, rgba(0,0,0,0.46) 100%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.30) 0px, rgba(255,255,255,0.055) 46px, rgba(0,0,0,0.30) 92px);
}
.hero-inner { max-width: 42ch; position: relative; z-index: 1; }
.hero-eyebrow {
  font-family: var(--font-display); font-weight: 400;
  font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(246,236,217,0.72); margin-bottom: 1.4rem;
}
.hero h1 {
  font-size: clamp(3rem, 13vw, 5.4rem); letter-spacing: 0.04em;
  line-height: 0.98; text-shadow: 0 2px 18px rgba(0,0,0,0.35);
  white-space: nowrap;
}
.hero-rule {
  display: block; width: 3.4rem; height: 1px; margin: 1.5rem auto;
  background: rgba(246,236,217,0.5); position: relative;
}
.hero-rule::before {
  content: ""; position: absolute; width: 7px; height: 7px;
  background: var(--on-dark); transform: translate(-50%,-50%) rotate(45deg);
  left: 50%; top: 50%;
}
.hero-sub {
  font-size: 1.2rem; line-height: 1.55; color: rgba(246,236,217,0.9);
  margin: 0 auto 2rem; max-width: 40ch;
}
.hero-actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }

/* -- section shell --------------------------------------------------------- */
.sec { padding: 3.5rem 0; }
.band { background: var(--paper-2); }
.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1.4rem; }
.wrap-wide { max-width: 1000px; }

.sec h2 {
  font-size: clamp(1.75rem, 5.5vw, 2.5rem); letter-spacing: 0.03em;
  margin-bottom: 1.4rem;
}
.sec h2::after {
  content: ""; display: block; width: 2.6rem; height: 2px;
  background: var(--accent); margin-top: 0.7rem;
}

/* -- in sala : split ------------------------------------------------------- */
.split { display: grid; gap: 1.6rem; }
.split-text p { max-width: 46ch; margin-bottom: 0.9rem; }
.rating {
  font-family: var(--font-display); font-weight: 400; font-size: 0.9rem;
  letter-spacing: 0.06em; color: var(--muted); margin-top: 0.4rem;
}
.split-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* -- menu : the program ---------------------------------------------------- */
.menu-intro { max-width: 60ch; margin-bottom: 2.2rem; font-size: 1.14rem; }
.act-group { margin-bottom: 2.6rem; }
.act {
  font-family: var(--font-display); font-weight: 600; color: var(--accent);
  font-size: 1.05rem; letter-spacing: 0.09em;
  margin-bottom: 1.15rem; padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(142,31,38,0.28);
}
.dishes { list-style: none; padding: 0; display: grid; gap: 1.25rem; }
.dish-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.85rem; }
.dish-name { font-weight: 500; font-size: 1.16rem; }
.dish-price {
  color: var(--accent); font-weight: 500; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.baby { color: var(--muted); font-size: 0.82em; }
.dish-desc { color: var(--muted); font-size: 1rem; line-height: 1.4; margin-top: 0.2rem; max-width: 46ch; }

.small-acts { display: grid; gap: 1rem; }
.compact { gap: 0.7rem; }
.compact .dish-desc { display: none; }

.menu-note { color: var(--muted); font-size: 0.95rem; margin-top: 0.5rem; }

/* -- gallery --------------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: 1fr; gap: 0.7rem; }
.gallery figure { overflow: hidden; background: var(--paper-2); }
.gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.g-insegna img { object-position: left center; }
.g-det img { object-position: left center; }
.gallery figure:hover img { transform: scale(1.045); }

/* -- dove : hours + contacts ----------------------------------------------- */
.info-grid { display: grid; gap: 2.2rem; }
.hours { border-collapse: collapse; width: 100%; }
.hours td { padding: 0.5rem 0; border-bottom: 1px solid rgba(42,28,20,0.12); vertical-align: top; }
.hours td:first-child { font-weight: 500; padding-right: 1.5rem; }
.hours td:last-child { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.contact-lines { line-height: 1.95; margin-bottom: 1.4rem; }

/* -- footer : curtain closes ----------------------------------------------- */
.footer {
  background: var(--curtain); color: rgba(246,236,217,0.85);
  text-align: center; padding: 2.75rem 1.4rem 3rem;
  font-size: 0.95rem;
}
.footer a { color: var(--on-dark); }
.foot-brand {
  font-family: var(--font-display); font-weight: 600; color: var(--on-dark);
  font-size: 1.35rem; letter-spacing: 0.08em; margin-bottom: 0.55rem;
}
.demo-note { margin-top: 0.8rem; font-size: 0.82rem; opacity: 0.65; }

/* ==========================================================================
   DESKTOP (>= 720px)
   ========================================================================== */
@media (min-width: 720px) {
  .sec { padding: 5rem 0; }
  .split { grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; }
  .split-figure img { aspect-ratio: 4 / 3; }

  /* the pizze acts read as two columns of billing */
  .act-group .dishes { grid-template-columns: 1fr 1fr; gap: 1.3rem 3rem; }
  .small-acts { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .small-acts .dishes { grid-template-columns: 1fr; }

  .gallery { grid-template-columns: 1fr 1fr; gap: 0.85rem; }

  .info-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

/* ==========================================================================
   MOTION — dial 3, CSS only. The program reveals as the curtain settles.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .hero-inner > * { opacity: 0; transform: translateY(16px); animation: rise .85s cubic-bezier(.16,1,.3,1) forwards; }
  .hero-eyebrow { animation-delay: .05s; }
  .hero h1 { animation-delay: .16s; }
  .hero-rule { animation-delay: .30s; }
  .hero-sub { animation-delay: .42s; }
  .hero-actions { animation-delay: .54s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}