/* ==========================================================================
   SPEEDY PIZZA — Pianoro
   Direction: hand-made workshop signage. Warm "night pergola" dark canvas
   (bolted black letters on raw wood, warm string lights). Heavy Egyptian slab
   display echoing the physical sign, industrial grotesque body. One amber
   accent from the fairy lights. Everything points at the phone number.
   Dials: VARIANCE 7 / MOTION 3 (CSS only) / DENSITY 4. Mobile-first (390px).
   ========================================================================== */

:root {
  --bg: #171310;            /* warm near-black — pergola in shadow */
  --surface: #201914;       /* lifted wood-brown surface */
  --surface-2: #2a211a;     /* menu cards / hover */
  --line: #3a2f25;          /* hairline on dark wood */
  --text: #f4ece0;          /* warm off-white, string-light glow */
  --muted: #b3a48f;         /* weathered wood grey */
  --accent: #f0a835;        /* warm string-light amber (single accent) */
  --accent-deep: #d98b1f;   /* amber pressed */
  --accent-ink: #1c1206;    /* text on amber */
  --font-display: "Alfa Slab One", Georgia, serif;
  --font-body: "Barlow", -apple-system, "Segoe UI", sans-serif;
  --radius: 4px;
  --measure: 64ch;
  --maxw: 1080px;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2 { font-family: var(--font-display); font-weight: 400; line-height: 1.02; letter-spacing: 0.005em; }
h2 { font-size: clamp(1.9rem, 6.5vw, 2.9rem); text-transform: uppercase; }
h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em; }

/* -- top bar --------------------------------------------------------------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.7rem 1.15rem;
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand {
  font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.01em;
  text-transform: uppercase;
}
.topbar-cta {
  text-decoration: none; font-weight: 700; font-size: 0.95rem;
  color: var(--accent-ink); background: var(--accent);
  padding: 0.42rem 0.85rem; border-radius: 999px;
  font-variant-numeric: tabular-nums;
  transition: transform .18s ease, background .18s ease;
}
.topbar-cta:active { transform: translateY(1px); }

/* -- buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  text-decoration: none; font-weight: 600; font-size: 1rem;
  padding: 0.8rem 1.4rem; border-radius: 999px;
  border: 1.5px solid transparent;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn svg { flex: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost { color: var(--text); border-color: color-mix(in srgb, var(--text) 45%, transparent); background: transparent; }
.btn-ghost:hover { border-color: var(--text); }
.btn-ghost:active { transform: translateY(1px); }

/* -- hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 5rem 1.15rem 2.6rem;
  overflow: hidden;
}
.hero-media {
  position: absolute; inset: 0;
  background: url("images/hero.jpg") center / cover no-repeat;
  transform: scale(1.02);
}
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 70% 15%, rgba(240,168,53,0.16), transparent 55%),
    linear-gradient(to top, var(--bg) 6%, rgba(23,19,16,0.72) 42%, rgba(23,19,16,0.45) 100%);
}
.hero-inner { position: relative; z-index: 1; max-width: 34ch; }
.hero-kicker {
  color: var(--accent); font-weight: 600; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 0.9rem;
}
.hero h1 {
  font-size: clamp(3.4rem, 17vw, 6.2rem);
  color: var(--text);
  text-shadow: 0 2px 30px rgba(0,0,0,0.45);
  margin-bottom: 1.1rem;
}
.hero-sub { color: var(--text); opacity: 0.92; max-width: 40ch; margin-bottom: 1.7rem; font-size: 1.05rem; }
.hero-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.hero .btn-primary { font-variant-numeric: tabular-nums; }

/* -- sections -------------------------------------------------------------- */
.section { padding: 3.6rem 1.15rem; max-width: var(--maxw); margin: 0 auto; }

/* -- perché (marks strip) -------------------------------------------------- */
.marks {
  display: grid; gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.mark { padding: 2rem 1.15rem; border-bottom: 1px solid var(--line); }
.mark:last-child { border-bottom: none; }
.mark-k {
  display: block; font-family: var(--font-display); color: var(--accent);
  font-size: 1.9rem; line-height: 1.05; margin-bottom: 0.7rem; text-transform: uppercase;
}
.mark h3 { margin-bottom: 0.35rem; }
.mark p { color: var(--muted); max-width: 42ch; }

/* -- menu ------------------------------------------------------------------ */
.menu { max-width: var(--maxw); }
.menu-head { margin-bottom: 2rem; }
.menu-head h2 { color: var(--accent); margin-bottom: 0.6rem; }
.menu-head p { color: var(--muted); max-width: 52ch; }
.menu-cols { display: grid; gap: 2.2rem 3rem; }
.menu-group { break-inside: avoid; }
.menu-group > h3 {
  color: var(--text); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.12em;
  padding-bottom: 0.55rem; margin-bottom: 0.7rem;
  border-bottom: 2px solid var(--accent);
  display: flex; align-items: center; gap: 0.5rem;
}
.tag {
  font-size: 0.62rem; letter-spacing: 0.14em; font-weight: 700;
  color: var(--accent-ink); background: var(--accent);
  padding: 0.12rem 0.42rem; border-radius: 999px;
}
.menu-list { list-style: none; padding: 0; }
.menu-list li { display: flex; align-items: baseline; gap: 0.4rem; padding: 0.4rem 0; }
.dish { font-weight: 600; }
.dish em {
  display: block; font-style: normal; font-weight: 400;
  color: var(--muted); font-size: 0.85rem; line-height: 1.35;
}
.dots { flex: 1; border-bottom: 1px dotted var(--line); align-self: flex-end; margin-bottom: 0.28rem; }
.price {
  color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price::before { content: "€ "; color: var(--muted); font-weight: 400; }
.signature .dish { color: var(--accent); }
.menu-note { margin-top: 1.8rem; color: var(--muted); font-size: 0.9rem; }

/* -- statement band (night pergola) ---------------------------------------- */
.statement {
  position: relative; overflow: hidden;
  padding: 5rem 1.15rem;
  display: flex; align-items: center;
}
.statement-media {
  position: absolute; inset: 0;
  background: url("images/sera.jpg") center / cover no-repeat;
}
.statement-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(23,19,16,0.92), rgba(23,19,16,0.62));
}
.statement-inner { position: relative; z-index: 1; max-width: 34ch; }
.statement-inner p {
  font-family: var(--font-display); font-size: clamp(1.4rem, 4.6vw, 2rem);
  line-height: 1.2; text-transform: none; margin-bottom: 1.6rem;
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}

/* -- gallery --------------------------------------------------------------- */
.gallery-sec h2 { color: var(--accent); margin-bottom: 1.4rem; }
.gallery { display: grid; gap: 0.6rem; grid-template-columns: 1fr 1fr; }
.gallery figure { margin: 0; overflow: hidden; border-radius: var(--radius); }
.gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.gallery figure:hover img { transform: scale(1.04); }
.g-lead { grid-column: 1 / -1; }
.g-lead img { aspect-ratio: 16 / 10; }

/* -- orari & dove ---------------------------------------------------------- */
.dove h2 { color: var(--accent); margin-bottom: 1.6rem; }
.info-grid { display: grid; gap: 2rem; }
.info-block { margin-bottom: 1.8rem; }
.hours { border-collapse: collapse; width: 100%; max-width: 22rem; }
.hours td { padding: 0.32rem 0; border-bottom: 1px solid var(--line); color: var(--muted); font-variant-numeric: tabular-nums; }
.hours tr:last-child td { border-bottom: none; }
.hours td:first-child { color: var(--text); font-weight: 600; width: 3.2rem; text-transform: uppercase; font-size: 0.9rem; }
.contact-lines { margin-bottom: 1.2rem; line-height: 1.7; }
.tel-line {
  font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.01em;
  text-decoration: none; font-variant-numeric: tabular-nums;
  display: inline-block; margin-top: 0.3rem;
}
.dove-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.info-photo { margin: 0; }
.info-photo img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.info-photo figcaption { color: var(--muted); font-size: 0.85rem; margin-top: 0.6rem; }

/* -- footer ---------------------------------------------------------------- */
.footer {
  padding: 3rem 1.15rem 3.2rem; text-align: center;
  color: var(--muted); font-size: 0.92rem;
  border-top: 1px solid var(--line);
}
.foot-brand {
  font-family: var(--font-display); font-size: 1.6rem; color: var(--text);
  text-transform: uppercase; margin-bottom: 0.5rem;
}
.footer a { color: var(--accent); text-decoration: none; }
.demo-note { margin-top: 0.9rem; opacity: 0.65; font-size: 0.82rem; }

/* -- entrance motion (MOTION 3, CSS only) ---------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-inner > * { opacity: 0; transform: translateY(14px); animation: rise .7s cubic-bezier(0.16,1,0.3,1) forwards; }
  .hero-kicker { animation-delay: .05s; }
  .hero h1 { animation-delay: .13s; }
  .hero-sub { animation-delay: .24s; }
  .hero-actions { animation-delay: .34s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* -- responsive ------------------------------------------------------------ */
@media (min-width: 680px) {
  .marks { grid-template-columns: repeat(3, 1fr); }
  .mark { border-bottom: none; border-right: 1px solid var(--line); }
  .mark:last-child { border-right: none; }
  .menu-cols { grid-template-columns: 1fr 1fr; }
  .g-lead img { aspect-ratio: 2 / 1; }
}

@media (min-width: 940px) {
  .section { padding: 4.6rem 1.5rem; }
  .hero { padding: 6rem 3rem 3.4rem; }
  .hero-inner { max-width: 40ch; }
  .menu-cols { grid-template-columns: repeat(3, 1fr); column-gap: 3.2rem; }
  .info-grid { grid-template-columns: 1.1fr 0.9fr; align-items: start; gap: 3rem; }
  .statement { padding: 6.5rem 3rem; }
}