/* Shared styles for index.html and trailer.html */
html { scroll-behavior: smooth; }
/* Anchor jumps (#menu, #plan...) land below the fixed header */
section[id] { scroll-margin-top: 5rem; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #0a0706;
  color: #ece6dd;
}
.font-display { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.04em; }

/* Smooth, layered dark background — warm ember glow on near-black */
.bg-ember {
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(255,138,45,0.10), transparent 60%),
    radial-gradient(900px 600px at 95% 10%, rgba(220,55,30,0.09), transparent 60%),
    radial-gradient(1000px 800px at 60% 110%, rgba(120,50,20,0.14), transparent 60%),
    linear-gradient(180deg, #0b0807 0%, #100b09 40%, #0a0706 100%);
}
.card-gradient {
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
}
.grain::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
}
.hairline { border-color: rgba(255, 220, 180, 0.08); }
.amber-glow { box-shadow: 0 10px 40px -12px rgba(255, 140, 50, 0.35); }

.btn-primary {
  background: linear-gradient(180deg, #f59e3c 0%, #d9632a 100%);
  color: #1a0f08;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { border: 1px solid rgba(255,220,180,0.18); }
.btn-ghost:hover { background: rgba(255,220,180,0.06); }

.nav-blur { backdrop-filter: saturate(140%) blur(12px); background: rgba(10, 7, 6, 0.65); }

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,220,180,0.22), transparent);
}

/* One-line hero headline in Special Elite, a worn typewriter face that matches the logo's BURDY'S lettering.
   Uppercase "TEXAS SMOKED BBQ" at 0.02em tracking is ~9.42em wide, so size it to the content width, capped at 8rem where max-w-7xl stops growing (1216px / 9.42). */
.hero-title {
  font-family: 'Special Elite', 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: min(calc((100vw - 2rem) * 0.105), 8rem);
}
@media (min-width: 640px) { .hero-title { font-size: min(calc((100vw - 4rem) * 0.105), 8rem); } }

/* Food ring card width: mobile first, bigger on desktop */
#ring { --ring-w: clamp(170px, 52vw, 260px); }
@media (min-width: 768px) { #ring { --ring-w: 320px; } }

@keyframes ringZoom { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
.ring-zoom { animation: ringZoom .28s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .ring-zoom { animation: none; }
  html { scroll-behavior: auto; }
}