/* =============================================================
   VINTAGE — SHARED SITE STYLES
   Foundation used by every page: design tokens, base elements,
   type, the sticky nav + social icons, and the global responsive
   / accessibility rules. Page-specific styles (hero, calendar,
   bios, shop, booking form, footers) stay inline in each page.

   Loaded BEFORE each page's inline <style>, so a page can still
   override anything here when it needs to.
   ============================================================= */

/* ---- DESIGN TOKENS — Vintage Americana / blues-rock tour poster ---- */
:root{
  --ink:#0d0d10; --ink-2:#161519; --ink-3:#201d23;
  --red:#c8102e; --red-deep:#8c0a20; --red-tint:rgba(200,16,46,.18);
  --blue:#2c63ad; --cream:#f4ecd6; --cream-dim:#d8cfb6;
  --chrome-1:#f3f5f8; --chrome-2:#aeb6c2; --gold:#e3a92b;
  --muted:#93909c; --line:rgba(244,236,214,.14);
  --maxw:1080px; --radius:14px; --shadow:0 18px 40px -18px rgba(0,0,0,.85);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--cream);
  font-family:"Barlow", system-ui, sans-serif; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.05;
  background-image:radial-gradient(rgba(255,255,255,.7) 1px, transparent 1px); background-size:4px 4px;
}
a{ color:inherit; }
img{ max-width:100%; display:block; }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:22px; }

/* ---- TYPE ---- */
.eyebrow{ font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.32em; font-weight:500; font-size:.72rem; color:var(--gold); }
h1,h2,h3{ font-family:"Oswald",sans-serif; font-weight:700; line-height:1; margin:0; }
.chrome{
  background:linear-gradient(180deg,var(--chrome-1) 0%,#7d8694 48%,#cfd6df 52%,#5d6573 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 2px 0 rgba(0,0,0,.35);
}

/* ---- NAV ---- */
.nav{ position:sticky; top:0; z-index:50; background:rgba(13,13,16,.82); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px; }
.brand{ font-family:"Oswald",sans-serif; font-weight:700; letter-spacing:.16em; font-size:1.18rem; text-transform:uppercase; display:flex; align-items:center; gap:.5em; text-decoration:none; }
.brand .star{ color:var(--red); font-size:.85em; }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{ font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:.82rem; font-weight:500; text-decoration:none; padding:8px 12px; border-radius:8px; color:var(--cream-dim); transition:color .15s, background .15s; }
.nav-links a:hover, .nav-links a:focus-visible{ color:var(--cream); background:rgba(244,236,214,.07); }
.nav-links a[aria-current="page"]{ color:var(--cream); background:rgba(200,16,46,.22); }
.nav-divider{ width:1px; height:22px; background:var(--line); margin:0 6px; }
.social{ display:flex; gap:4px; }
.social a{ display:grid; place-items:center; width:36px; height:36px; border-radius:9px; color:var(--cream-dim); transition:color .15s, background .15s, transform .15s; }
.social a:hover, .social a:focus-visible{ color:var(--cream); background:var(--red); transform:translateY(-1px); }
.social svg{ width:19px; height:19px; }

/* ---- SHARED RESPONSIVE (nav) + ACCESSIBILITY ---- */
@media (max-width:720px){
  .nav-links .label-only{ display:none; }
  .nav-divider{ display:none; }
  /* Tighter nav so the links fit on a phone without crowding/overflow. */
  .nav-inner{ gap:8px; }
  .brand{ font-size:1rem; letter-spacing:.1em; }
  .nav-links{ gap:1px; }
  .nav-links a{ font-size:.72rem; letter-spacing:.03em; padding:6px 6px; }
  .social{ gap:1px; margin-left:2px; }
  .social a{ width:30px; height:30px; }
  .social svg{ width:16px; height:16px; }
}
@media (max-width:430px){
  /* On small phones, drop the social icons from the bar so the 4 links fit cleanly. */
  .social{ display:none; }
  .nav-links a{ font-size:.7rem; padding:6px 5px; }
}
@media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms !important; transition:none !important; scroll-behavior:auto; } }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }