/* ==========================================================================
   Joe Magnetico & Associates — joemagnetico.com
   Static site. No build step, no dependencies.
   Direction: black / champagne gold, 1920s supper-club luxury.
   ========================================================================== */

:root{
  --ink:      #050506;
  --ink-2:    #08080a;
  --ink-3:    #0b0b0e;
  --panel:    #0e0e11;

  --gold:     #c9a75f;
  --gold-lo:  #8e7440;
  --gold-hi:  #e6cf9b;
  --champ:    #ede4d2;

  --line:     rgba(201,167,95,.16);
  --line-2:   rgba(201,167,95,.34);
  --line-w:   rgba(255,255,255,.08);

  --text:     #f1ede5;
  --muted:    #9c968a;
  --muted-2:  #6f6a61;

  --wrap: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans:  'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* so native controls (the date picker, scrollbars) render dark, not white-on-dark */
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.72;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:28px; }

.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--gold); color:#000; padding:12px 18px; }
.skip:focus{ left:0; }
:focus-visible{ outline:1px solid var(--gold); outline-offset:4px; }

/* ── type ───────────────────────────────────────────────────────────────── */
h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:400; letter-spacing:-.012em; line-height:1.08; text-wrap:balance; }
h1{ font-size:clamp(2.7rem, 5.8vw, 4.9rem); line-height:1.03; }
h2{ font-size:clamp(2rem, 4.3vw, 3.4rem); }
h3{ font-size:1.35rem; }
p{ margin:0 0 1.15em; }

.eyebrow{
  font-family:var(--sans);
  font-size:.66rem; font-weight:500; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); margin:0 0 22px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.eyebrow .dot{ width:3px; height:3px; border-radius:50%; background:var(--gold-lo); flex:none; }
.nb{ white-space:nowrap; }

.lede{ font-size:clamp(1.02rem,1.5vw,1.16rem); color:var(--muted); max-width:56ch; font-weight:300; }
.sec-sub{ color:var(--muted); max-width:60ch; font-weight:300; }
.hl{ color:var(--gold-hi); font-style:italic; }

/* thin gold rule used as a section signature */
.rule{ width:56px; height:1px; background:var(--gold); opacity:.7; margin:0 0 26px; border:0; }

/* ── header ─────────────────────────────────────────────────────────────── */
/* fixed so the hero video runs full-bleed underneath it */
.site-head{
  position:fixed; inset:0 0 auto; z-index:100;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
/* keep anchor targets clear of the fixed header */
section[id]{ scroll-margin-top:84px; }
.site-head.stuck{
  background:rgba(5,5,6,.86);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  border-bottom-color:var(--line);
}
.head-inner{ display:flex; align-items:center; gap:26px; min-height:82px; }

.brand{ display:flex; align-items:center; gap:15px; text-decoration:none; margin-right:auto; }
.brand-mark{
  font-family:var(--sans); font-weight:600; font-size:.82rem; letter-spacing:.16em;
  line-height:1; padding:11px 11px 10px 13px; flex:none;
  color:var(--gold-hi);
  border:1px solid var(--line-2);
  background:linear-gradient(155deg, rgba(201,167,95,.14), rgba(201,167,95,.02));
}
.brand-txt{ display:flex; flex-direction:column; gap:3px; }
.brand-txt strong{
  font-family:var(--serif); font-size:1.16rem; font-weight:400; letter-spacing:.005em; line-height:1;
}
.brand-txt .amp{ color:var(--gold); font-style:italic; }
.brand-txt em{
  font-style:normal; font-size:.56rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted-2);
}

.nav{ display:flex; align-items:center; gap:4px; }
.nav a{
  text-decoration:none; font-size:.74rem; font-weight:400; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
  padding:10px 14px; transition:color .25s;
}
.nav a:hover{ color:var(--gold-hi); }
.nav .nav-cta{
  color:var(--gold-hi); border:1px solid var(--line-2); margin-left:14px; padding:11px 20px;
  transition:background .3s, color .3s, border-color .3s;
}
.nav .nav-cta:hover{ background:var(--gold); color:#0a0a0a; border-color:var(--gold); }

.burger{
  display:none; width:44px; height:44px; border:1px solid var(--line-2);
  background:transparent; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:5px; padding:0;
}
.burger span{ width:16px; height:1px; background:var(--gold-hi); transition:.25s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  padding:17px 32px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap; background:none;
  transition:background .3s var(--ease), color .3s, border-color .3s, opacity .3s;
}
.btn-primary{ background:var(--gold); color:#0a0a0a; border-color:var(--gold); }
.btn-primary:hover{ background:var(--gold-hi); border-color:var(--gold-hi); }
.btn-ghost{ border-color:var(--line-2); color:var(--champ); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-hi); background:rgba(201,167,95,.07); }
.btn-link{
  padding:16px 0; color:var(--gold); border-bottom:1px solid var(--line-2);
  letter-spacing:.14em;
}
.btn-link:hover{ color:var(--gold-hi); border-bottom-color:var(--gold); }
.btn-sm{ padding:12px 22px; font-size:.66rem; }

/* ── hero ───────────────────────────────────────────────────────────────
   Full-bleed background video, same treatment as juliaskibamusic.com: the
   video is knocked back with opacity rather than buried under a heavy scrim,
   then a vertical gradient and a fine grain layer sit over it. Knocking the
   source back is what makes it read as atmosphere rather than as a video that
   happens to be playing.

   Layers: clip 0 · scrim 2 · grain 3 · copy 4 · control 5
------------------------------------------------------------------------ */
.hero{
  position:relative; overflow:hidden;
  min-height:100vh; display:flex; align-items:center;
  padding:clamp(132px,16vh,180px) 0 clamp(56px,7vh,88px);
  /* poster as a background too, so there is ground colour before it decodes */
  background:var(--ink) url('../assets/img/hero-joe-warm-poster.jpg') center 38% / cover no-repeat;
}
/* No CSS filter on this element, deliberately. A filter on a 2560x1440 video
   forces the compositor to reprocess every frame off the GPU fast path, which
   shows up as stutter and frozen frames on a full-width Retina display.
   Nothing animates on this element. */
/* opacity .7 to match juliaskibamusic.com — at .5 the plate read as hazy and
   dim, which is most of what looked like "blurry" */
/* FULL opacity, same as JJ Insight's hero. Knocking a video to 70% over a
   black ground blends every pixel 30% toward flat black — that loss of
   micro-contrast is what kept reading as "blur" regardless of how sharp the
   source file was. The gradient below does all the legibility work. */
.hero-video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:center 38%;
}
/* scrim — light at the top so the shot breathes, near-solid at the base so
   it hands off cleanly into the next section */
/* JJ Insight's hero gradient, recoloured to this site's ink:
   .34 top → .55 mid → .88 → solid at the base. One layer, vertical only. */
.hero::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(5,5,6,.34) 0%, rgba(5,5,6,.55) 42%,
                            rgba(5,5,6,.88) 80%, var(--ink) 100%);
}

.hero-inner{ position:relative; z-index:4; width:100%; }
.hero h1{ font-size:clamp(2.6rem, 5.4vw, 4.6rem); max-width:19ch; margin-bottom:26px; }
.hero .lede{ margin-bottom:34px; max-width:50ch; color:#cfc9bc; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:clamp(36px,4vw,52px); }

.hero-facts{
  list-style:none; margin:clamp(40px,4.5vw,60px) 0 0; padding:32px 0 0;
  border-top:1px solid rgba(201,167,95,.28);
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
.hero-facts li{ display:flex; flex-direction:column; gap:6px; }
.hero-facts b{
  font-family:var(--serif); font-size:clamp(2.1rem,3.6vw,2.9rem); font-weight:400;
  letter-spacing:-.01em; line-height:1; color:var(--gold-hi);
}
.hero-facts span{
  font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted-2); line-height:1.5;
}

/* motion toggle, bottom-right of the hero. Anything that auto-plays and loops
   past five seconds needs a way to stop it, and the loop is fourteen. */
.vid-toggle{
  position:absolute; right:28px; bottom:26px; z-index:5;
  width:40px; height:40px; padding:0; cursor:pointer;
  border:1px solid var(--line-2); background:rgba(5,5,6,.5);
  color:var(--gold-hi); font-size:.7rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s, background .3s, color .3s;
}
.vid-toggle:hover{ border-color:var(--gold); background:rgba(5,5,6,.8); }
/* Not playing — autoplay refused, reduced motion, or a phone. As a background
   it must not throw a big play badge over the headline, so it just widens into
   a labelled control in the corner. */
.hero.is-idle .vid-toggle{
  width:auto; height:40px; padding:0 16px; gap:9px;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  border-color:var(--gold); background:rgba(5,5,6,.72);
}
.hero.is-idle .vid-toggle::after{ content:'Play'; }
/* the clip plays once and stops on the last frame — offer a replay */
.hero.is-ended .vid-toggle{
  width:auto; height:40px; padding:0 16px; gap:9px;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  border-color:var(--line-2); background:rgba(5,5,6,.6);
}
.hero.is-ended .vid-toggle::after{ content:'Replay'; }
.hero.is-ended .vid-toggle:hover{ border-color:var(--gold); background:rgba(5,5,6,.85); }
.hero.is-idle .vid-toggle:hover{ background:rgba(5,5,6,.9); }

/* ── sections ───────────────────────────────────────────────────────────── */
.section{ padding:clamp(84px,11vw,150px) 0; position:relative; }
.sec-head{ margin-bottom:clamp(46px,5.5vw,72px); max-width:780px; }
.sec-head h2{ margin-bottom:20px; }

/* ── featured artist ────────────────────────────────────────────────────── */
.featured{
  background:
    radial-gradient(64% 84% at 86% 14%, rgba(201,167,95,.09), transparent 64%),
    var(--ink-2);
  border-block:1px solid var(--line);
}
.feat-grid{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(40px,6vw,88px); align-items:center;
}
.feat-photo{ position:relative; margin:0; }
.feat-photo img{ position:relative; z-index:1; width:100%; box-shadow:0 40px 100px -30px rgba(0,0,0,.95); }
/* thin gold frame, offset down-right behind the photo */
.feat-photo::after{
  content:''; position:absolute; inset:18px -18px -18px 18px; z-index:0;
  border:1px solid var(--line-2); pointer-events:none;
}
.feat-photo figcaption{
  position:absolute; left:18px; bottom:18px; right:18px;
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; font-weight:500;
  color:rgba(255,255,255,.95); text-shadow:0 2px 16px rgba(0,0,0,.9);
}
.feat-body h2{ margin-bottom:24px; }
.feat-body p{ color:var(--muted); max-width:50ch; }
.feat-body strong{ color:var(--champ); font-weight:400; }
.feat-body em{ font-family:var(--serif); font-size:1.08em; color:var(--champ); }

.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:9px; margin:30px 0 34px; padding:0; }
.chips li{
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); padding:8px 16px;
}
.feat-links{ display:flex; flex-wrap:wrap; align-items:center; gap:24px; }

/* ── worked-with wall ───────────────────────────────────────────────────── */
.wall{
  list-style:none; margin:0 0 44px; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px;
}
.wall figure{ margin:0; position:relative; overflow:hidden; border:1px solid var(--line); }
.wall img{
  width:100%; aspect-ratio:3/2; object-fit:cover; object-position:50% 28%;
  filter:grayscale(1) sepia(.28) contrast(1.1) brightness(.82);
  transition:filter .7s var(--ease), transform .8s var(--ease);
}
/* per-photo framing so nobody gets cropped out of a candid shot */
.wall .p-haley img  { object-position:50% 30%; }
.wall .p-piscopo img{ object-position:50% 26%; }
.wall .p-long img   { object-position:50% 24%; }
.wall .p-shaffer img{ object-position:50% 34%; }
.wall .p-jardine img{ object-position:50% 30%; }
.wall .p-bryson img { object-position:50% 24%; }
.wall .p-johnson img{ object-position:50% 18%; }
.wall .p-mello img  { object-position:50% 20%; }
.wall figure:hover img{ filter:grayscale(.15) sepia(.06) contrast(1) brightness(.98); transform:scale(1.035); }
.wall figcaption{
  position:absolute; inset:auto 0 0; padding:44px 20px 18px;
  background:linear-gradient(to top, rgba(5,5,6,.97), rgba(5,5,6,.74) 45%, transparent);
  display:flex; flex-direction:column; gap:4px;
}
.wall figcaption strong{ font-family:var(--serif); font-size:1.24rem; font-weight:400; letter-spacing:.005em; }
.wall figcaption span{ font-size:.66rem; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); }

/* click-to-enlarge affordance on photos */
.zoom{ display:block; position:relative; cursor:zoom-in; }
.zoom::after{
  content:'⤢'; position:absolute; top:12px; right:12px;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  font-size:.8rem; color:var(--gold-hi);
  background:rgba(5,5,6,.62); border:1px solid var(--line-2);
  opacity:0; transform:translateY(-4px); transition:.35s var(--ease);
  pointer-events:none;
}
.zoom:hover::after, .zoom:focus-visible::after{ opacity:1; transform:none; }

/* ── upcoming dates ─────────────────────────────────────────────────────── */
.events{ border-bottom:1px solid var(--line); }
.gigs{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.gigs li{
  display:grid; grid-template-columns:82px minmax(0,1fr) auto;
  align-items:center; gap:clamp(18px,3vw,40px);
  padding:24px 6px; border-bottom:1px solid var(--line);
}
.gig-date{
  display:flex; flex-direction:column; align-items:flex-start; line-height:1;
  border-left:2px solid var(--gold); padding-left:14px;
}
.gig-date b{
  font-family:var(--serif); font-weight:400; font-size:2.1rem;
  color:var(--gold-hi); font-variant-numeric:tabular-nums;
}
.gig-date i{
  font-style:normal; font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted-2); margin-top:5px;
}
.gig-body{ display:flex; flex-direction:column; gap:5px; }
.gig-name{ font-family:var(--serif); font-size:clamp(1.24rem,2vw,1.6rem); color:var(--text); line-height:1.15; }
.gig-meta{ font-size:.85rem; color:var(--muted); }
.gig-time{
  font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted-2); white-space:nowrap; text-align:right;
}
.gigs-none{ margin:26px 0 0; color:var(--muted); }
.gigs-none a{ color:var(--gold); }
.gigs-cta{ margin-top:32px; }

/* ── roster ─────────────────────────────────────────────────────────────── */
.roster{ background:var(--ink-2); border-bottom:1px solid var(--line); }
.acts{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.acts li{ border-bottom:1px solid var(--line); }
/* each row is its own grid, so the third track needs a fixed width —
   an `auto` track sizes per-row and the columns drift out of alignment */
.acts a{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr) 132px;
  align-items:baseline; gap:clamp(16px,3vw,40px);
  padding:26px 6px; text-decoration:none;
  transition:background .4s var(--ease), padding-inline .4s var(--ease);
}
.acts a:hover{ background:rgba(201,167,95,.05); padding-inline:16px 12px; }
.act-name{
  font-family:var(--serif); font-size:clamp(1.32rem,2.2vw,1.78rem);
  color:var(--text); letter-spacing:.005em; line-height:1.15;
}
.act-name em{ font-size:.78em; color:var(--muted); font-style:italic; }
.acts a:hover .act-name{ color:var(--gold-hi); }
.act-desc{ font-size:.87rem; color:var(--muted); }
.act-desc em{ font-family:var(--serif); font-size:1.1em; }
.act-go{
  font-size:.63rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted-2); white-space:nowrap; text-align:right; transition:color .3s;
}
.acts a:hover .act-go{ color:var(--gold); }

.tributes{ margin-top:48px; display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 28px; }
.tributes-k{
  margin:0; font-size:.63rem; font-weight:500; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold); white-space:nowrap;
}
.tributes-list{
  margin:0; font-family:var(--serif); font-size:clamp(1rem,1.6vw,1.22rem);
  color:var(--muted); flex:1; min-width:min(100%,320px);
}
.tributes-list i{ color:var(--gold-lo); font-style:normal; padding-inline:2px; }


/* ── lightbox ───────────────────────────────────────────────────────────── */
.lb{
  position:fixed; inset:0; z-index:300; display:none;
  align-items:center; justify-content:center; padding:clamp(20px,5vh,60px);
  background:rgba(3,3,4,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transition:opacity .35s var(--ease);
}
.lb.open{ display:flex; }
.lb.shown{ opacity:1; }
.lb figure{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; gap:16px; }
.lb img{
  max-width:100%; max-height:calc(100vh - 160px); width:auto; object-fit:contain;
  border:1px solid var(--line-2);
}
.lb figcaption{
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); text-align:center;
}
.lb-close{
  position:absolute; top:22px; right:24px; width:44px; height:44px;
  background:none; border:1px solid var(--line-2); color:var(--gold-hi);
  font-size:1.1rem; cursor:pointer; line-height:1;
  transition:border-color .3s, background .3s;
}
.lb-close:hover{ border-color:var(--gold); background:rgba(201,167,95,.08); }

/* ── live performance ───────────────────────────────────────────────────── */
.live{
  background:
    radial-gradient(60% 80% at 18% 12%, rgba(201,167,95,.08), transparent 64%),
    var(--ink-2);
  border-block:1px solid var(--line);
}
.live-grid{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(36px,5vw,72px); align-items:center;
}
.live-body h2{ margin-bottom:22px; }
.live-body p{ color:var(--muted); max-width:48ch; }
.live-video{ margin:0; position:relative; }
.live-video video{
  position:relative; z-index:1;
  display:block; width:100%; height:auto; background:#000;
  border:1px solid var(--line-2);
}
/* source is 568x320, so cap it — stretched full-bleed it just looks soft */
.live-video{ max-width:640px; margin-inline:auto; }
/* z-index:0, not -1 — a negative index drops it behind the section background */
.live-video::after{
  content:''; position:absolute; inset:16px -16px -16px 16px; z-index:0;
  border:1px solid var(--line); pointer-events:none;
}
.live-video figcaption{
  margin-top:16px; font-size:.64rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted-2); text-align:center;
}

/* ── what we book ───────────────────────────────────────────────────────── */
.book-what{ background:var(--ink-3); border-block:1px solid var(--line); }
.cards{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.cards li{
  padding:38px 32px 42px; background:var(--ink-3);
  transition:background .4s var(--ease);
}
.cards li:hover{ background:var(--panel); }
.cards .num{
  display:block; font-family:var(--serif); font-size:1.4rem; font-style:italic;
  color:var(--gold-lo); margin-bottom:20px;
}
.cards h3{ margin-bottom:12px; }
.cards p{ margin:0; font-size:.88rem; color:var(--muted); }

/* ── about ──────────────────────────────────────────────────────────────── */
.about{ position:relative; overflow:hidden; }
.about::before{
  content:''; position:absolute; inset:auto 0 0; height:300px; z-index:0;
  background:url('../assets/img/skyline-band.jpg') center bottom / cover no-repeat;
  opacity:.2; filter:grayscale(1) sepia(.45);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 70%);
  mask-image:linear-gradient(to bottom, transparent, #000 70%);
  pointer-events:none;
}
.about-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.74fr);
  gap:clamp(40px,5.5vw,80px); align-items:start;
}
.about-body h2{ margin-bottom:26px; }
.about-body p{ color:var(--muted); max-width:54ch; }

.notice{
  margin-top:38px; padding:28px 30px;
  border:1px solid var(--line-2);
  background:linear-gradient(165deg, rgba(201,167,95,.08), rgba(201,167,95,.015));
}
.notice-k{
  font-size:.64rem; font-weight:500; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:12px;
}
.notice p:last-child{ margin:0; font-size:.9rem; }

.about-aside{ border:1px solid var(--line); padding:34px 32px; background:rgba(14,14,17,.72); }
.about-aside h3{
  font-family:var(--sans); font-size:.64rem; font-weight:500; letter-spacing:.3em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:24px;
}
.big-link{
  display:block; text-decoration:none; font-family:var(--serif);
  font-size:clamp(1.3rem,2vw,1.66rem); font-weight:400; letter-spacing:0;
  margin-bottom:14px; transition:color .3s; overflow-wrap:break-word;
}
.big-link:hover{ color:var(--gold-hi); }
.socials{ display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; padding-top:26px; border-top:1px solid var(--line); }
.socials a{
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  color:var(--muted); border:1px solid var(--line); padding:9px 15px;
  transition:color .3s, border-color .3s;
}
.socials a:hover{ color:var(--gold-hi); border-color:var(--line-2); }

/* ── booking + QR ───────────────────────────────────────────────────────── */
.booking{ background:var(--ink-2); border-top:1px solid var(--line); }
.booking-grid{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(40px,5.5vw,76px); align-items:start;
}
.form-col h2{ margin-bottom:20px; }
.form{ margin-top:36px; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form label{
  display:block; margin-bottom:18px;
  font-size:.63rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted-2);
}
.form input, .form textarea{
  display:block; width:100%; margin-top:10px;
  font-family:var(--sans); font-size:.94rem; font-weight:300;
  letter-spacing:normal; text-transform:none;
  color:var(--text); background:rgba(255,255,255,.028);
  border:0; border-bottom:1px solid var(--line-2); padding:12px 2px;
  transition:border-color .3s, background .3s;
}
.form textarea{ resize:vertical; min-height:100px; }
.form input:hover, .form textarea:hover{ border-bottom-color:var(--gold-lo); }
.form input:focus, .form textarea:focus{
  outline:none; border-bottom-color:var(--gold); background:rgba(201,167,95,.05);
}
.form input:user-invalid{ border-bottom-color:#c2685f; }
.form button{ margin-top:14px; }
.form-note{ margin:16px 0 0; font-size:.83rem; color:var(--muted-2); min-height:1.4em; }
.form-note.err{ color:#d98d86; }
.form-note.ok{ color:var(--gold-hi); }

.qr-col{ display:flex; flex-direction:column; gap:18px; }
.qr-card{ border:1px solid var(--line); padding:32px 30px 34px; background:var(--panel); text-align:center; }
.qr-card.alt{ background:transparent; }
.qr-card .eyebrow{ justify-content:center; }
/* white, not champagne — the QR PNG's own quiet zone is white, and max
   contrast is what makes it scan on the first try */
.qr-card .qr{
  width:168px; height:168px; margin:0 auto 24px;
  padding:12px; background:#fff;
  image-rendering:pixelated;
  box-shadow:0 14px 40px -14px rgba(0,0,0,.9);
}
.qr-card h3{ margin-bottom:10px; font-size:1.2rem; }
.qr-card p{ font-size:.84rem; color:var(--muted); margin-bottom:22px; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-foot{ border-top:1px solid var(--line); padding:62px 0 48px; background:var(--ink); }
.foot-inner{ display:grid; grid-template-columns:auto 1fr auto; gap:38px; align-items:start; }
.foot-brand{ display:flex; gap:15px; align-items:flex-start; }
.foot-brand p{ margin:0; font-size:.8rem; line-height:1.6; color:var(--muted-2); }
.foot-brand strong{ font-family:var(--serif); font-size:1.06rem; font-weight:400; color:var(--champ); display:block; margin-bottom:2px; }
.foot-links{ display:flex; flex-direction:column; gap:10px; }
.foot-links a{ font-size:.8rem; letter-spacing:.06em; text-decoration:none; color:var(--muted); transition:color .3s; }
.foot-links a:hover{ color:var(--gold-hi); }
.copy{
  grid-column:1/-1; margin:0; padding-top:34px; border-top:1px solid var(--line);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
}

/* ── reveal ─────────────────────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.09s; } .reveal.d2{ transition-delay:.18s; }
.reveal.d3{ transition-delay:.27s; } .reveal.d4{ transition-delay:.36s; }
.reveal.d5{ transition-delay:.45s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .wall img, .cards li, .btn{ transition:none; }
}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .acts a{ grid-template-columns:1fr; gap:8px; padding:22px 6px; }
  .act-go{ margin-top:4px; }
  .feat-grid, .about-grid, .booking-grid, .live-grid{ grid-template-columns:1fr; }
  .feat-photo{ max-width:400px; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .qr-col{ flex-direction:row; }
  .qr-col > *{ flex:1; }
}

@media (max-width:820px){
  .burger{ display:flex; }
  .nav{
    position:fixed; inset:82px 0 auto; flex-direction:column; align-items:stretch; gap:0;
    background:rgba(5,5,6,.98);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    padding:16px 28px 26px;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:.3s var(--ease);
  }
  .nav.open{ transform:none; opacity:1; visibility:visible; }
  .nav a{ font-size:.82rem; padding:15px 2px; border-bottom:1px solid var(--line); }
  .nav .nav-cta{ margin:16px 0 0; justify-content:center; padding:16px; border-bottom:1px solid var(--line-2); }
  .site-head{ background:rgba(5,5,6,.86); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom-color:var(--line); }
  .foot-inner{ grid-template-columns:1fr; gap:30px; }
  .hero{ padding-top:120px; min-height:92vh; }
  /* a portrait viewport crops the 16:9 plate hard. Biasing all the way to Joe
     leaves a near-black slab, so sit between him and the lit stage and lift
     the plate slightly to compensate for the tighter crop. */
  .hero-video{ object-position:58% 40%; }
  .hero{ background-position:58% 40%; }
}

@media (max-width:620px){
  body{ font-size:16px; }
  .gigs li{ grid-template-columns:64px minmax(0,1fr); gap:16px; padding:20px 4px; }
  .gig-date b{ font-size:1.7rem; }
  /* the time moves under the title rather than squeezing a third column */
  .gig-time{ grid-column:2; text-align:left; }
  .hero-facts{ grid-template-columns:1fr; gap:18px; padding-top:24px; }
  .hero-facts li{ flex-direction:row; align-items:baseline; gap:16px; }
  .hero-facts b{ font-size:1.9rem; min-width:72px; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; }
  .cards{ grid-template-columns:1fr; }
  .form .row{ grid-template-columns:1fr; gap:0; }
  .qr-col{ flex-direction:column; }
  .feat-photo::after{ inset:10px -10px -10px 10px; }

  /* the two-line tagline collides with the wordmark at this width — drop it,
     the nav already says what JM&A does */
  .brand-txt em{ display:none; }
  .brand-txt strong{ font-size:.95rem; }
  .brand-mark{ font-size:.72rem; padding:9px 9px 8px 11px; }
  .brand{ gap:11px; }

  .tributes{ flex-direction:column; gap:12px; }
}

@media (max-width:460px){
  .wall{ grid-template-columns:1fr; }
}