/* Palladino's Jazz Bar — Nocturne. Last Waltz theme baked in. */

:root {
  color-scheme: dark;
  --bg:#0a0809; --bg2:#060507; --ink:#e2b24e; --accent:#e6b44b;
  --c1:#e6b44b; --c2:#d98a3e; --c3:#c9683f; --pa:#16100b; --pb:#1c0e0a;
  --gGlow:#5e461d; --gBot:#3c1518; --tintTop:transparent;
  --tintBottom:rgba(168,46,58,0.22); --frameA:#e6b44b; --frameB:#b8485a;
  --grain:0.06;
}

* { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  background:var(--bg);
  color:#f1e7d6;
  font-family:'Jost',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection { background:rgba(194,162,98,0.3); color:#fff }

@keyframes heroIn { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
@keyframes bob { 0%,100%{transform:translateY(0);opacity:.55} 50%{transform:translateY(7px);opacity:1} }
@keyframes glow { 0%,100%{opacity:.4} 50%{opacity:.85} }

/* Full-screen atmosphere overlays (kept out of the markup for readability). */
.fx-grain {
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:var(--grain,0.06); mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fx-vignette {
  position:fixed; inset:0; z-index:58; pointer-events:none;
  box-shadow:inset 0 0 220px 50px rgba(0,0,0,0.62), inset 0 0 90px 0 rgba(0,0,0,0.4);
  background:radial-gradient(ellipse 120% 110% at 50% 48%,transparent 52%,rgba(0,0,0,0.55) 100%);
}
.fx-tint {
  position:absolute; inset:0; z-index:57; pointer-events:none;
  background:linear-gradient(180deg,var(--tintTop,transparent),transparent 26%,transparent 74%,var(--tintBottom,transparent));
}
.fx-frame { position:fixed; inset:clamp(9px,1.3vw,18px); z-index:59; pointer-events:none }

/* Image slots — show a warm gradient until a real photo is dropped in. */
.img-slot { position:relative; overflow:hidden; background:linear-gradient(160deg,var(--pa,#16100b),var(--pb,#1c0e0a)) }
.img-slot img { width:100%; height:100%; object-fit:cover; display:block }
/* Hero crop: bias toward the upper third so the band's heads aren't cut off. */
#heroImg { object-position: center 28%; }
.img-slot img:not([src]), .img-slot img[src=""] { display:none }

/* Who's Playing cards (built by the events renderer). */
#actsGrid .act {
  position:relative; aspect-ratio:4/3; overflow:hidden;
  border:1px solid rgba(194,162,98,0.25); box-shadow:0 24px 50px rgba(0,0,0,0.5);
  text-decoration:none; display:block;
}
#actsGrid .act-empty {
  display:flex; align-items:center; justify-content:center; text-align:center;
  aspect-ratio:4/3; border:1px solid rgba(194,162,98,0.2);
  color:#a89a84; font-weight:300; padding:24px; grid-column:1/-1;
}

/* Newsletter form — base styles live inline; these win over them on hover/focus. */
#signupForm input:focus { border-bottom-color:var(--accent,#c2a262) !important }
.btn:hover { color:#15120f !important; background:#c2a262 !important; border-color:var(--accent,#c2a262) !important }
.nav-cta:hover { color:#000 !important; background:var(--accent,#c8a35e) !important; border-color:var(--accent,#c8a35e) !important }
.link-underline:hover { color:var(--ink,#f0e6d4) !important; border-color:var(--ink,#f0e6d4) !important }
.foot-link:hover { color:var(--accent,#c2a262) !important }

.signup-consent { font-size:12px; line-height:1.7; color:#9a8c78; margin-top:18px; max-width:460px; margin-left:auto; margin-right:auto }
.visually-hidden { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* Tablet (641–1024px): the source only handled phones; tame the desktop rhythm. */
@media (min-width:641px) and (max-width:1024px) {
  #top { height:78vh !important; min-height:560px !important }
  #room, #visit { padding-top:96px !important; padding-bottom:96px !important }
  #whatson > div { padding-top:96px !important; padding-bottom:96px !important }
  nav { padding:18px clamp(28px,4vw,48px) !important }
}

/* Phone (≤640px): ported verbatim from the source design. */
@media (max-width:640px) {
  nav { padding:14px 20px !important }
  .nav-cta { padding:9px 18px !important; font-size:11px !important; letter-spacing:0.18em !important }
  #top { height:88vh !important; min-height:540px !important }
  #room, #visit { padding-top:64px !important; padding-bottom:64px !important; gap:36px !important }
  #room { text-align:center }
  #room p { margin-left:auto; margin-right:auto }
  #whatson > div { padding-top:56px !important; padding-bottom:56px !important }
  section[id] + section, #whatson { margin-top:0 }
  footer { padding:40px 22px !important }
  footer > div { flex-direction:column !important; text-align:center; gap:18px !important }
}