/* ============================================================
   THE BRITISH INVASION YEARS — Live Web Studios
   Design direction: "Royal" — deep royal blue, cream, refined red,
   blue-splash accents. All design tokens as CSS custom properties.
   ============================================================ */

/* ---------- Custom display face: Cheltenham Condensed Bold (marquee sign) ---------- */
@font-face {
  font-family: 'Cheltenham Condensed';
  src: url('../fonts/cheltenham-condensed-bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Backgrounds */
  --bg: #0b1645;          /* deep royal blue — page background */
  --bg-2: #0d1c54;        /* alternating section background */
  --panel: #122562;       /* raised card base */

  /* Text */
  --cream: #f3eee6;       /* primary text / headings */
  --ink: #c6cfe2;         /* body text */
  --muted: #8694b2;       /* secondary / meta text */
  --muted-2: #7c89aa;     /* faint text, copyright — AA-compliant on --bg-2 */

  /* Accent red — brighter, truer red (less orange) */
  --accent: #e12f26;      /* refined red — buttons, eyebrows, dates, nav, headers */
  --accent-soft: #f0564c; /* hover red / italic highlight text */
  --accent-deep: #a01b15; /* pressed / deep red */

  /* Blue splash */
  --splash: #2563d4;                    /* vivid British-flag blue */
  --splash-glow: rgba(37,99,212,.28);   /* glow effects */
  --splash-soft: rgba(37,99,212,.12);   /* subtle tint backgrounds */

  /* Lines / borders */
  --line: rgba(190,206,245,.16);
  --line-2: rgba(190,206,245,.30);

  /* Typography */
  /* Display/heading face — classy medium-weight geometric sans (kept as --serif
     so every heading/nav reference picks it up). */
  --serif: 'Montserrat', system-ui, -apple-system, sans-serif;
  --sans: 'Mulish', system-ui, sans-serif;

  /* Layout */
  --container: 1200px;
  --ease: cubic-bezier(.22,.61,.18,1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--cream);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.16; letter-spacing: -.012em; color: var(--cream); }
h1 em, h2 em, h3 em, h4 em { font-style: italic; font-weight: 500; color: var(--accent-soft); }

.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.block { padding: 96px 0; position: relative; }
.block.alt { background: var(--bg-2); }

/* ---------- Eyebrow / section head ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-size: 11.5px;
  color: var(--accent);
  margin-bottom: 14px;
}

.sec-head { text-align: center; margin-bottom: 56px; }
.sec-head h2 { font-size: clamp(32px, 4.6vw, 54px); }

/* ---------- Section divider (blue splash) ---------- */
.section-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--splash), transparent);
  opacity: .35;
  margin: 0 auto;
  max-width: 600px;
}

/* ============================================================
   BUTTON SYSTEM
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer; border: none; font-family: var(--sans); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; font-size: 11.5px;
  padding: 15px 30px; border-radius: 7px; white-space: nowrap;
  transition: transform .18s var(--ease), background .3s, box-shadow .3s, color .3s, border-color .3s;
  text-decoration: none;
}
.btn-primary {
  background: var(--accent); color: var(--cream);
  box-shadow: 0 10px 30px -12px rgba(225,47,38,.6);
}
.btn-primary:hover {
  background: var(--accent-soft); transform: translateY(-2px);
  box-shadow: 0 16px 40px -14px rgba(240,86,76,.65);
}
.btn-outline {
  background: transparent; color: var(--cream); border: 1px solid var(--line-2);
}
.btn-outline:hover {
  border-color: var(--accent); color: var(--accent); transform: translateY(-2px);
}
.textlink {
  font-family: var(--sans); font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; font-size: 11.5px; color: var(--accent);
  display: inline-flex; align-items: center; gap: 9px;
  transition: gap .25s, color .25s; text-decoration: none;
}
.textlink:hover { gap: 15px; color: var(--accent-soft); }

/* ============================================================
   CARD HOVER — radial glow at top (red crest → blue haze)
   ============================================================ */
.card-glow { position: relative; overflow: hidden; transition: transform .3s var(--ease), border-color .3s; }
.card-glow::before {
  content: "";
  position: absolute;
  top: 0; left: -20%; right: -20%;
  height: 55%;
  border-radius: 12px 12px 0 0;
  background: radial-gradient(ellipse at 50% -10%, rgba(225,47,38,.5) 0%, var(--splash-glow) 40%, transparent 70%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
  z-index: 1;
}
.card-glow:hover { transform: translateY(-5px); border-color: rgba(225,47,38,.4); }
.card-glow:hover::before { opacity: 1; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
#hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: .4s var(--ease);
  border-bottom: 1px solid transparent;
  overflow: visible;
}
#hdr.scrolled {
  background: rgba(11,22,69,.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; gap: 24px; overflow: visible;
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
/* Small guitar mark in the upper-left — the resting state on every page/breakpoint.
   On the home hero it scales up and hangs down (see the hero-drop block below). */
.nav-logo {
  height: 66px; width: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(140,180,255,.35));
}

/* ---------- The guitar mark drops down oversized on load (EVERY page) ----------
   At the top of any page the guitar scales up and hangs into the hero/banner
   below. Past 40px of scroll #hdr gains .scrolled and it glides back to the
   compact upper-left mark. Desktop nav only (>900px). The big guitar owns the
   left of the header, so the whole nav group is pushed to the right
   (margin-left:auto) to keep it well clear of the artwork. */
@media (min-width: 901px) {
  /* The guitar mark is position:absolute, so this anchor would otherwise
     collapse to a zero-size hit area. Give .brand a real clickable box and lift
     it above the artwork; the mark itself also takes pointer events (see
     .nav-logo below) so a click anywhere on the visible guitar links home. */
  .brand { position: relative; width: 92px; height: 72px; z-index: 4; }
  .nav-links { position: relative; z-index: 3; margin-left: auto; }

  /* The mark is absolute in BOTH states so it can GLIDE between the oversized
     drop and the compact scrolled mark — width/top/left/filter all animate.
     (A switch to position:static or width:auto would kill the transition, which
     is why the resting small state is expressed here in absolute terms too.)
     Resting/scrolled state: the small upper-left mark. */
  .nav-logo {
    position: absolute;
    top: 9px; left: 0;
    z-index: 2;
    height: auto; width: 92px;
    max-width: none;
    pointer-events: auto; cursor: pointer;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(140,180,255,.35));
    transition: width .5s var(--ease), top .5s var(--ease), left .5s var(--ease), filter .5s var(--ease);
    animation: heroMarkDrop .8s var(--ease) both;
  }

  /* Top of the page: scaled up, hanging into the hero / page banner. */
  #hdr:not(.scrolled) .nav-logo {
    top: -6px; left: -16px;
    width: clamp(185px, 18vw, 288px);
    filter: drop-shadow(0 14px 34px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(140,180,255,.32));
  }

  body:has(.hero) .hero { padding-top: clamp(140px, 15vw, 225px); }
}
@keyframes heroMarkDrop {
  from { opacity: 0; transform: translateY(-18px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.nav-links { display: flex; gap: 38px; align-items: center; }
.nav-links > li { position: relative; }
.nav-links a {
  font-family: var(--serif); font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: .15em; color: var(--cream);
  position: relative; padding: 6px 0; transition: color .3s var(--ease);
  text-shadow: 0 1px 6px rgba(7,12,40,.55); white-space: nowrap;
}
#hdr.scrolled .nav-links a { text-shadow: none; }
.nav-links a::after {
  content: ""; position: absolute; bottom: 0; left: 50%; right: 50%; height: 1px;
  background: var(--accent); transition: left .3s var(--ease), right .3s var(--ease);
}
.nav-links a:hover { color: var(--accent); }
.nav-links a:hover::after { left: 0; right: 0; }

/* active page indicator — blue splash dot */
.nav-links a.active { color: var(--accent); }
.nav-links a.active::before {
  content: ""; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--splash);
  box-shadow: 0 0 8px var(--splash-glow);
}

/* dropdown */
.has-dropdown > a { cursor: pointer; }
.dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 0; min-width: 190px; opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.7); z-index: 60;
}
.dropdown::before {
  content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px;
}
.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown li a { display: block; padding: 10px 22px; font-size: 12px; letter-spacing: .13em; white-space: nowrap; }
.dropdown li a::after { display: none; }

/* subscribe button — white pill, blue letters. Sits between CONTACT and the
   social icons. Points at the #news signup form; repoint if Mailchimp gets its
   own hosted URL at go-live. */
.nav-links > li.nav-cta { margin-left: -14px; }
.nav-links .btn-subscribe,
.nav-drawer .btn-subscribe {
  display: inline-block; color: var(--splash);
  /* Red glow off the bottom edge only. The caps sit between 38% and 61% up, so
     the fade is spent by 34% and the letters keep clean white behind them --
     that also lets the bottom carry real saturation instead of washing out to
     the dusty pink you get from low-alpha red over white. */
  background-color: #fff;
  background-image: linear-gradient(to top,
    rgba(225,47,38,.55) 0%,
    rgba(225,47,38,.26) 14%,
    rgba(225,47,38,0) 34%);
  border-radius: 999px; text-shadow: none;
  transition: background-image .3s var(--ease), background-color .3s var(--ease),
              transform .3s var(--ease), box-shadow .3s var(--ease);
}
.nav-links .btn-subscribe {
  padding: 9px 20px; font-size: 12px; letter-spacing: .14em;
  /* warm the drop shadow so it reads as one red glow with the gradient above it
     rather than a navy shadow fighting a red edge */
  box-shadow: 0 3px 12px rgba(160,27,21,.42);
}
.nav-links .btn-subscribe::after { display: none; }
.nav-links .btn-subscribe:hover,
.nav-drawer .btn-subscribe:hover {
  /* same stops, just deeper, so it interpolates smoothly */
  background-image: linear-gradient(to top,
    rgba(225,47,38,.78) 0%,
    rgba(225,47,38,.40) 14%,
    rgba(225,47,38,0) 34%);
  /* hold the blue: the generic nav/drawer a:hover would otherwise flip these
     letters to the accent red, which muddies them against the red tint */
  color: var(--splash);
  transform: translateY(-2px); box-shadow: 0 6px 18px rgba(160,27,21,.55);
}

/* drawer version — same pill, inset from the full-width drawer rows */
.nav-drawer li.drawer-cta { padding: 6px 28px 14px; }
.nav-drawer li.drawer-cta a {
  padding: 13px 26px; border-bottom: none; text-align: center;
}

/* social icons */
.nav-social { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; color: var(--muted);
  transition: color .3s, transform .3s, box-shadow .3s;
}
.nav-social svg { width: 24px; height: 24px; fill: currentColor; }
.nav-social a:hover { color: var(--accent); transform: translateY(-2px); box-shadow: 0 0 12px var(--splash-glow); }

/* Tight desktop band. With SUBSCRIBE in the row the nav needs ~1130px to sit at
   full size, so between the mobile breakpoint and there it compacts instead of
   pushing the social icons past the edge. */
@media (min-width: 901px) and (max-width: 1140px) {
  .nav-links { gap: 15px; }
  .nav-links a { font-size: 12px; letter-spacing: .10em; }
  .nav-links > li.nav-cta { margin-left: -4px; }
  .nav-links .btn-subscribe { padding: 8px 14px; font-size: 11px; letter-spacing: .10em; }
  .nav-social { gap: 4px; }
  .nav-social a { width: 32px; height: 32px; }
  .nav-social svg { width: 20px; height: 20px; }
}

/* hamburger */
.hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; background: transparent; border: none; cursor: pointer;
}
.hamburger span { display: block; width: 24px; height: 2px; background: var(--cream); transition: .3s var(--ease); margin: 0 auto; }
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile drawer */
.nav-drawer {
  position: fixed; top: 84px; left: 0; right: 0;
  background: rgba(11,22,69,.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 0;
  max-height: 0; overflow: hidden; visibility: hidden;
  transition: max-height .4s var(--ease), visibility 0s linear .4s; z-index: 49;
}
.nav-drawer.open {
  max-height: 70vh; visibility: visible;
  /* the list outgrew 70vh once SUBSCRIBE joined it, so let it scroll rather
     than clip the last row on shorter phones */
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--line);
  transition: max-height .4s var(--ease), visibility 0s;
}
.nav-drawer ul { padding: 12px 0; }
.nav-drawer li a {
  display: block; padding: 16px 28px; font-family: var(--serif); font-size: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: var(--cream);
  border-bottom: 1px solid var(--line);
}
.nav-drawer li:last-child a { border-bottom: none; }
.nav-drawer li a:active, .nav-drawer li a:hover { color: var(--accent); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: flex-start; justify-content: center;
  text-align: center; overflow: hidden; padding: 104px 24px 80px;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 120%; object-fit: cover; object-position: center 60%; will-change: transform; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(130% 100% at 50% 36%, rgba(7,12,40,.3), rgba(7,12,40,.76) 66%, var(--bg) 98%),
    linear-gradient(180deg, rgba(7,12,40,.55), rgba(7,12,40,0) 32%, rgba(7,12,40,.55) 78%, var(--bg) 100%);
}

/* spotlight beams */
.beam {
  position: absolute; top: -18%; left: 50%; width: 46vw; height: 138vh; z-index: 1;
  margin-left: -23vw; mix-blend-mode: screen; pointer-events: none; filter: blur(11px);
  transform-origin: 50% 0%;
  background: linear-gradient(180deg, rgba(202,218,255,.32), rgba(202,218,255,.06) 50%, transparent 73%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  animation: swing 8s ease-in-out infinite;
}
.beam.b2 {
  background: linear-gradient(180deg, rgba(255,206,200,.18), rgba(255,206,200,.03) 50%, transparent 73%);
  animation-duration: 11.5s; animation-delay: -3.2s; opacity: .75;
}
@keyframes swing { 0%,100% { transform: rotate(-19deg); } 50% { transform: rotate(19deg); } }

.hero-inner {
  position: relative; z-index: 3; max-width: 760px; padding: 54px 52px 58px;
}

.hero-logo {
  width: min(64vw, 500px); margin: 0 auto 30px;
  filter: drop-shadow(0 8px 44px rgba(140,180,255,.32)) drop-shadow(0 3px 12px rgba(0,0,0,.7));
}
.ornament { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 24px; color: var(--accent); }
.ornament .r { height: 1px; width: 42px; background: linear-gradient(90deg, transparent, var(--accent)); }
.ornament .r.r2 { background: linear-gradient(90deg, var(--accent), transparent); }
.ornament .dot { width: 5px; height: 5px; border: 1px solid var(--accent); transform: rotate(45deg); }
.ornament .eyebrow { margin-bottom: 0; text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 20px rgba(0,0,0,.7); }

.hero-line { font-size: clamp(26px, 4.2vw, 52px); margin-bottom: 22px;
  text-shadow: 0 1px 3px rgba(0,0,0,.92), 0 3px 18px rgba(0,0,0,.85), 0 0 46px rgba(0,0,0,.6); }
.hero-sub { color: var(--ink); font-size: 16px; font-weight: 300; max-width: 560px; margin: 0 auto 32px; line-height: 1.8;
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 2px 14px rgba(0,0,0,.85), 0 0 36px rgba(0,0,0,.55); }
.hero-cta { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; }

/* Hero two-column (desktop) — logo left, copy right. The side-by-side layout is
   much shorter than the stacked version, so it sits in a slim horizontal band
   and keeps the band members in the rotating photos mostly clear.
   Mobile keeps the centered stacked layout. */
@media (min-width: 900px) {
  .hero { align-items: flex-start; padding-top: 13vh; }
  .hero-inner {
    max-width: 1120px; display: flex; align-items: flex-start; gap: 52px;
    text-align: left; padding: 32px 52px;
  }
  .hero-logo { flex: 0 0 36%; width: 36%; max-width: 372px; margin: 96px 0 0; }
  .hero-copy { flex: 1 1 auto; min-width: 0; }
  .ornament { justify-content: flex-start; margin-bottom: 20px; }
  .hero-sub { margin-left: 0; margin-right: 0; max-width: 540px; }
  .hero-cta { justify-content: flex-start; }
}

/* ---------- Page banner (interior pages) ---------- */
/* padding-top clears the fixed nav AND the marquee sign hanging below it, so the
   red eyebrow line always starts below the sign instead of behind it. */
.page-banner {
  position: relative; min-height: 460px; display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden; padding: 208px 24px 70px;
}
.page-banner .hero-bg img { height: 100%; object-position: center 38%; }
.page-banner .banner-inner { position: relative; z-index: 3; max-width: 760px; }
.page-banner h1 { font-size: clamp(34px, 5vw, 60px); margin-top: 8px; }
.page-banner p { color: var(--ink); margin-top: 16px; font-weight: 300; max-width: 560px; margin-left: auto; margin-right: auto; }

/* ============================================================
   FILMSTRIP
   ============================================================ */
.strip {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
  max-width: var(--container); margin: 0 auto; padding: 28px 24px;
}
.strip .cell {
  aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer; position: relative;
  border-radius: 12px; border: 1px solid var(--line);
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.strip .cell img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.2) brightness(.82);
  transition: transform .8s var(--ease), filter .5s;
}
.strip .cell:hover {
  transform: translateY(-4px); border-color: rgba(225,47,38,.45);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.8);
}
.strip .cell:hover img { transform: scale(1.06); filter: none; }

/* ============================================================
   TOUR / SHOW CARDS
   ============================================================ */
.tour-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.show {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border: 1px solid var(--line); border-radius: 12px; padding: 30px 28px; overflow: hidden;
  display: flex; flex-direction: column;
}
.show > * { position: relative; z-index: 2; }
.show-date { font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.show-venue { font-family: var(--serif); font-weight: 600; font-size: 25px; color: var(--cream); min-height: 56px; line-height: 1.18; text-transform: uppercase; }
.show-addr { font-size: 13.5px; color: var(--muted); line-height: 1.6; font-weight: 300; margin-top: 6px; }
.show-time { font-size: 13.5px; color: var(--ink); margin-top: 8px; font-weight: 400; }
.show-badge { font-size: 13px; color: var(--accent); margin-top: 8px; font-weight: 400; }
.show-cta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.show-cta .btn { padding: 12px 22px; font-size: 10.5px; }

/* Frosted glass on the ghost buttons (RSVP / WHAT TO DO IN TOWN). The stage
   lights behind the card still come through, but diffused through the panel
   instead of read straight, so the label stays legible over a hot beam. */
.show-cta .btn-outline {
  /* thinner tint than a solid fill, and a top-lit gradient so the pane itself
     catches light — that sheen is what sells it as glass rather than a panel */
  background:
    linear-gradient(160deg, rgba(226,236,255,.16), rgba(226,236,255,.04) 42%, rgba(8,16,52,.20));
  /* brightness pushes the beams through instead of muddying them */
  backdrop-filter: blur(9px) saturate(190%) brightness(1.22);
  -webkit-backdrop-filter: blur(9px) saturate(190%) brightness(1.22);
  border-color: rgba(208, 224, 255, .38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),      /* specular top edge */
    inset 0 -1px 0 rgba(0,0,0,.32),           /* shaded bottom edge */
    inset 0 0 22px rgba(150,185,255,.10),     /* light caught inside the pane */
    0 6px 18px -10px rgba(0,0,0,.75);
  text-shadow: 0 1px 3px rgba(4,10,34,.85);   /* keeps the label legible over a hot beam */
}
.show-cta .btn-outline:hover {
  background:
    linear-gradient(160deg, rgba(255,225,220,.22), rgba(226,236,255,.06) 42%, rgba(8,16,52,.22));
  border-color: var(--accent);
}

/* TBA cards read dimmer, but the dimming is applied per-element rather than as
   an opacity group on .show — an opacity group becomes a backdrop root, which
   would leave the frosted RSVP button above with nothing to blur. */
.show.tba .show-date,
.show.tba .show-venue,
.show.tba .show-addr,
.show.tba .show-time,
.show.tba .show-badge { opacity: .72; }
/* Only the placeholder RSVP button is inert on a TBA card. The WHAT TO DO IN
   TOWN button next to it is a real link and must stay clickable. */
.show.tba .btn-rsvp { pointer-events: none; }
.tour-foot { text-align: center; margin-top: 48px; }
.tour-booking-note { color: var(--ink); font-weight: 300; margin-bottom: 18px; }
.tour-booking-note strong { color: var(--cream); }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.about-col h3 { font-size: 30px; color: var(--cream); margin-bottom: 18px; }
.about-col p { color: var(--ink); line-height: 1.85; margin-bottom: 16px; font-size: 16px; font-weight: 300; }
.about-col p strong { color: var(--cream); font-weight: 600; }
.about-col em { color: var(--accent-soft); font-style: italic; }
/* opening tagline + closing call in "The Show" column */
.about-col p.show-lead {
  font-family: var(--serif); font-style: italic; color: var(--accent-soft);
  font-size: 22px; font-weight: 400; line-height: 1.5; margin-bottom: 20px;
}
.about-col p.show-close {
  font-family: var(--serif); font-style: italic; color: var(--cream);
  font-size: 21px; font-weight: 400; line-height: 1.5;
  margin-top: 28px; margin-bottom: 20px;
  padding-top: 22px; border-top: 1px solid var(--line);
}

/* show sub-heads: same typography as the about page feature headings */
.about-col h4.show-sub { font-size: 27px; margin-bottom: 16px; margin-top: 34px; }
.about-col h4.show-sub:first-of-type { margin-top: 30px; }

.roster { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; margin-bottom: 26px; }
/* a roster that closes out a column needs no trailing gap */
.about-col > .roster:last-child { margin-bottom: 0; }
.chip {
  font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); border: 1px solid var(--line);
  border-radius: 100px; padding: 9px 16px; transition: border-color .25s, background .25s;
}
.chip b { color: var(--accent-soft); font-weight: 600; }
.chip:hover { border-color: var(--splash); background: var(--splash-soft); }
.shared { margin-top: 28px; }
.shared-lbl { font-size: 12px; color: var(--muted); margin-bottom: 8px; letter-spacing: .08em; text-transform: uppercase; }
.shared-names { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ink); line-height: 1.6; }

/* member profile cards (about page) */
.member-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 8px; scroll-margin-top: 120px; }
.member {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column;
}
.member > .member-body, .member > .member-photo { position: relative; z-index: 2; }
.member-photo { aspect-ratio: 3 / 4; overflow: hidden; }
.member-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.12) brightness(.92); transition: transform .6s var(--ease), filter .5s; }
.member:hover .member-photo img { transform: scale(1.04); filter: none; }
.member-photo.crop-top img { object-position: center top; }
.member-body { padding: 22px 22px 26px; }
.member-body h3 { font-size: 24px; margin-bottom: 4px; }
.member-role { font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.member-body p { font-size: 14px; color: var(--ink); line-height: 1.7; font-weight: 300; }

.cta-row { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; margin-top: 56px; }

/* about-page prose + shared-stage helpers */
.prose-narrow { max-width: 840px; margin: 0 auto; }
.prose-narrow.gap-lg { margin-bottom: 56px; }
.shared-center { text-align: center; max-width: 760px; margin: 0 auto; font-size: 24px; }

/* ============================================================
   QUOTE BAND (full-bleed)
   ============================================================ */
.quoteband { position: relative; overflow: hidden; padding: 120px 24px; text-align: center; }
.qbg { position: absolute; inset: 0; z-index: 0; }
.qbg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) brightness(.4); }
.qbg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 50%, rgba(11,22,69,.55), rgba(11,22,69,.85)); }
.quoteband .wrap { position: relative; z-index: 2; max-width: 900px; }
.quoteband blockquote { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 3.4vw, 40px); color: var(--cream); line-height: 1.4; position: relative; }
.quoteband .mark { display: block; font-family: var(--serif); font-size: 90px; line-height: .6; color: var(--accent); opacity: .5; margin-bottom: 10px; }
.quoteband cite { display: block; margin-top: 28px; font-family: var(--sans); font-weight: 600; font-variant: all-small-caps; letter-spacing: .14em; font-style: normal; color: var(--accent); font-size: 16px; }

/* ============================================================
   VIDEO
   ============================================================ */
.video-wrap {
  max-width: 980px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-2); box-shadow: 0 40px 100px -40px rgba(0,0,0,.85); position: relative;
}
.video-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-poster { position: absolute; inset: 0; cursor: pointer; }
.video-poster img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.62); transition: filter .4s; }
.video-poster:hover img { filter: brightness(.72); }
.video-poster .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 88px; height: 88px; border-radius: 50%; background: rgba(225,47,38,.95);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 40px -8px rgba(225,47,38,.7); transition: transform .3s var(--ease), background .3s;
}
.video-poster:hover .play { transform: translate(-50%, -50%) scale(1.08); background: var(--accent-soft); }
.video-poster .play::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid rgba(225,47,38,.55); animation: playpulse 2.4s var(--ease) infinite;
}
@keyframes playpulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.55); opacity: 0; } }
.video-poster .play svg { width: 34px; height: 34px; margin-left: 5px; }
.video-poster .play svg polygon { fill: var(--cream); }
.video-foot { text-align: center; margin-top: 40px; }
.gal-foot { text-align: center; margin-top: 36px; }

/* ============================================================
   HOME GALLERY (mosaic)
   ============================================================ */
.gal { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 12px; }
.gcell { overflow: hidden; border-radius: 10px; position: relative; border: 1px solid var(--line); }
.gcell.tall { grid-row: span 2; }
.gcell.wide { grid-column: span 2; }
.gcell img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.15) brightness(.9); transition: transform .5s var(--ease), filter .5s; position: relative; z-index: 0; }
.gcell:hover img { filter: none; transform: scale(1.03); }
/* portrait shots whose subject sits high in the frame: anchor the crop to the
   top so a centred cover crop does not cut the face off */
.gcell.crop-top img { object-position: top center; }

/* ============================================================
   GALLERY PAGES (band-gallery / fan-photos)
   ============================================================ */
.gallery-page { columns: 3; column-gap: 14px; }
.gallery-page .gcell { break-inside: avoid; margin-bottom: 14px; grid-row: auto; grid-column: auto; cursor: pointer; }
.gallery-page .gcell img { height: auto; filter: grayscale(.1) brightness(.92); }
.fan-intro { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.fan-intro p { color: var(--ink); font-weight: 300; line-height: 1.8; margin-top: 14px; }
.fan-intro a { color: var(--accent); }
.fan-intro a:hover { color: var(--accent-soft); }
.fan-note { font-size: 14px; color: var(--muted); }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.news-card { max-width: 720px; margin: 0 auto; text-align: center; padding: 52px 48px; }
@media (max-width: 640px) { .news-card { padding: 40px 24px; } }
.news-card h2 { font-size: clamp(32px, 4.6vw, 54px); margin-bottom: 16px; }
.news-card > p { color: var(--ink); font-weight: 300; margin-bottom: 32px; line-height: 1.8; }
.news-form { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.news-row { display: flex; gap: 14px; width: 100%; }
.news-form input {
  width: 100%; background: rgba(255,255,255,.03); border: 1px solid var(--line-2); border-radius: 8px;
  padding: 15px 18px; color: var(--cream); font-family: var(--sans); font-size: 15px; font-weight: 300;
  transition: border-color .25s, box-shadow .25s;
}
.news-form input::placeholder { color: var(--muted); }
.news-form input:focus { outline: none; border-color: var(--splash); box-shadow: 0 0 0 3px var(--splash-soft); }
.news-form .btn { margin-top: 6px; }
.news-note { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.contact-info h3 { font-size: 28px; margin-bottom: 18px; }
.contact-info .eyebrow { display: block; }
.contact-info p { color: var(--ink); font-weight: 300; line-height: 1.8; margin-bottom: 6px; }
.contact-info .booking-name { font-family: var(--serif); font-size: 22px; color: var(--cream); margin-bottom: 14px; }
.contact-info a { color: var(--ink); transition: color .25s; }
.contact-info a:hover { color: var(--accent); }
.contact-info .license { font-size: 13px; color: var(--muted); margin-top: 14px; }
/* Rachel Hill, full frame. The phone box is the composition, so this is never
   cropped to a square. Shares one framing rule with the seal below it so the
   two read as a matched pair and cannot drift apart. */
.contact-portrait,
.contact-seal { max-width: 220px; border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: rgba(255,255,255,.02); }
.contact-portrait { display: block; width: 100%; height: auto; margin-top: 26px; }
.contact-seal { margin-top: 30px; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%; background: #0d1a48; border: 1px solid var(--line-2); border-radius: 8px;
  padding: 15px 18px; color: var(--cream); font-family: var(--sans); font-size: 15px; font-weight: 300;
  transition: border-color .25s, box-shadow .25s; resize: vertical;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--muted); }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: none; border-color: var(--splash); box-shadow: 0 0 0 3px var(--splash-soft); }
.contact-form .btn { align-self: flex-start; margin-top: 4px; }
.form-note { font-size: 13px; color: var(--muted); }

/* Per-field required note + select styling */
.contact-form .field { display: flex; flex-direction: column; gap: 5px; }
.contact-form .req-note { font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.contact-form select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23a9b6e0' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 12px;
}
.contact-form select:invalid { color: var(--muted); }
.contact-form select option { color: var(--cream); background: #0d1a48; }

/* ============================================================
   FOOTER
   ============================================================ */
footer { background: var(--bg-2); border-top: 1px solid var(--line); padding: 80px 0 36px; margin-top: 0; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.15fr minmax(0, 260px); gap: 40px; align-items: start; }
/* represented-by square — far-right footer column */
.foot-col-br { justify-self: end; }
.foot-col-br img { width: 100%; max-width: 260px; height: auto; display: block; border-radius: 10px; border: 1px solid var(--line-2); transition: transform .3s var(--ease), box-shadow .3s; }
.foot-col-br a:hover img { transform: translateY(-2px); box-shadow: 0 0 16px var(--splash-glow); }
.foot-logo { height: 130px; width: auto; filter: drop-shadow(0 0 10px rgba(140,180,255,.4)); margin-bottom: 20px; }
.foot-brand p { color: var(--muted); font-size: 14px; font-weight: 300; max-width: 300px; line-height: 1.7; }
.foot-social { display: flex; gap: 12px; margin-top: 22px; }
.foot-social a {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid var(--line-2); color: var(--ink);
  transition: color .3s, border-color .3s, transform .3s, box-shadow .3s;
}
.foot-social svg { width: 18px; height: 18px; fill: currentColor; }
.foot-social a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); box-shadow: 0 0 14px var(--splash-glow); }
.foot-col h4 { font-family: var(--sans); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: 11px; color: var(--accent); margin-bottom: 18px; }
.foot-link { display: block; font-size: 14.5px; font-weight: 300; color: var(--ink); padding: 6px 0; transition: color .25s; }
.foot-link:hover { color: var(--accent); }
.foot-link strong { color: var(--cream); font-weight: 600; }
.foot-booking-name { font-family: var(--serif); font-size: 19px; color: var(--cream); margin-bottom: 10px; }
.foot-license { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.foot-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--line); margin-top: 60px; padding-top: 26px;
}
.foot-bottom span { font-size: 12px; color: var(--muted-2); }
.foot-bottom img { width: 150px; height: 37px; opacity: .85; transition: opacity .3s; }
.foot-bottom a:hover img { opacity: 1; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* staggered cascade for card grids */
.member-grid .member:nth-child(2) { transition-delay: .08s; }
.member-grid .member:nth-child(3) { transition-delay: .16s; }
.member-grid .member:nth-child(4) { transition-delay: .24s; }
.tour-grid .show:nth-child(3n+2) { transition-delay: .08s; }
.tour-grid .show:nth-child(3n+3) { transition-delay: .16s; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb-target { cursor: zoom-in; }
.lb-target:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.photo-band .pb-cap, .page-banner .banner-inner { cursor: auto; }
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease);
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox .lb-img { max-width: 90vw; max-height: 90vh; border-radius: 8px; box-shadow: 0 40px 120px -30px rgba(0,0,0,.9); }
.lightbox .lb-img.pop { animation: lbpop .4s var(--ease); }
@keyframes lbpop { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }
.lightbox button {
  position: absolute; background: rgba(225,47,38,.92); color: var(--cream); border: none; cursor: pointer;
  width: 46px; height: 46px; border-radius: 50%; font-size: 20px; display: flex; align-items: center; justify-content: center;
  transition: background .25s, transform .25s;
}
.lightbox button:hover { background: var(--accent-soft); transform: scale(1.08); }
.lb-close { top: 24px; right: 24px; width: 42px; height: 42px; font-size: 16px; }
.lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 24px; top: 50%; transform: translateY(-50%); }
.lb-prev:hover, .lb-next:hover { transform: translateY(-50%) scale(1.08); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .nav-links, .nav-social { display: none; }
  .hamburger { display: flex; }
  /* the marquee sign is an absolutely-positioned later sibling, so it paints
     over the (static) guitar mark. Lift the logo above it so it sits forward. */
  .brand { position: relative; z-index: 3; }
  .nav-logo { height: 68px; position: relative; z-index: 3; }
  .nav { height: 84px; }

  /* the marquee sign is narrower (and shorter) on mobile, so the interior-page
     banners don't need the full desktop clearance */
  .page-banner { padding-top: 176px; min-height: 420px; }
  .block.pad-top-offset { padding-top: 176px; }

  .block { padding: 72px 0; }
  .tour-grid { grid-template-columns: 1fr; }
  .about-grid, .foot-grid { grid-template-columns: 1fr; gap: 40px; }
  .foot-col-br { justify-self: start; }
  .member-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .strip { grid-template-columns: repeat(3, 1fr); }
  .strip .cell:nth-child(4), .strip .cell:nth-child(5) { display: none; }
  .gal { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .gallery-page { columns: 2; }
  .news-row { flex-direction: column; }
  .hero-inner { padding: 36px 24px; }
  /* clear the fixed nav + marquee sign now that the hero logo is gone */
  .hero { padding-top: 168px; }
  /* mobile: the hero photo sits as a short natural-aspect band, so its top/bottom
     edges meet the dark-blue background as hard lines. Fade those edges into the
     blue so the photo melts in instead of butting up against a seam. */
  .hero .hero-slide {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  }
  .foot-bottom { justify-content: center; text-align: center; }
}

@media (max-width: 560px) {
  .gal { grid-template-columns: 1fr; }
  .gal .gcell.wide, .gal .gcell.tall { grid-column: auto; grid-row: auto; }
  .member-grid { grid-template-columns: 1fr; }
  .hero-cta, .cta-row { flex-direction: column; gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .beam { animation: none; transform: rotate(0); }
  .reveal { opacity: 1; transform: none; transition: none; }
  .reveal[class*="nth"], .member, .show { transition-delay: 0s !important; }
  .video-poster .play::after { animation: none; }
}

/* ============================================================
   ABOUT — alternating photo/text feature rows
   ============================================================ */
.about-lead { max-width: 820px; margin: 0 auto 64px; text-align: center; }
.about-lead p { color: var(--ink); font-size: 18px; font-weight: 300; line-height: 1.85; }
.about-lead p em { color: var(--accent-soft); font-style: italic; }

.about-feature {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
  max-width: 1120px; margin: 0 auto 72px;
}
.about-feature:last-child { margin-bottom: 0; }
.about-feature .af-media {
  position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 36px 80px -46px rgba(0,0,0,.85);
}
.about-feature .af-media img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3;
  filter: grayscale(.12) brightness(.94); transition: transform .6s var(--ease), filter .5s;
}
.about-feature .af-media:hover img { transform: scale(1.04); filter: none; }
.about-feature.reverse .af-media { order: 2; }
.about-feature .af-text h3 { font-size: 27px; margin-bottom: 16px; }
.about-feature .af-text p { color: var(--ink); font-size: 16px; font-weight: 300; line-height: 1.85; margin-bottom: 14px; }
.about-feature .af-text p:last-child { margin-bottom: 0; }
.about-feature .af-text p strong { color: var(--cream); font-weight: 600; }
.about-feature .af-text em { color: var(--accent-soft); font-style: italic; }

/* full-bleed photo band between sections */
.photo-band { position: relative; overflow: hidden; min-height: 360px; display: flex; align-items: flex-end; }
.photo-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) brightness(.6); }
.photo-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,22,69,.4), rgba(11,22,69,.92)); }
.photo-band .pb-cap { position: relative; z-index: 2; padding: 40px 2.5rem; width: 100%; max-width: var(--container); margin: 0 auto; }
.photo-band .pb-cap p { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(20px, 2.6vw, 30px); color: var(--cream); max-width: 760px; line-height: 1.4; }

/* two-column caption — anniversary badge left, pull-quote right */
.pb-cols { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: 40px; align-items: center;
  max-width: 1120px; margin-inline: auto; }
.pb-col-media { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 36px 80px -46px rgba(0,0,0,.85); }
.pb-col-media img { width: 100%; height: auto; display: block; transition: transform .6s var(--ease); }
.pb-col-media:hover img { transform: scale(1.04); }
.pb-col-text p { max-width: none; }

/* three-up about photo strip */
.about-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1120px; margin: 56px auto 0; }
.about-trio .gcell { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); }
.about-trio .gcell img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.15) brightness(.9); transition: transform .5s var(--ease), filter .5s; }
.about-trio .gcell:hover img { transform: scale(1.05); filter: none; }

/* ============================================================
   VIDEOS PAGE
   ============================================================ */
.video-lead { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.video-lead p { color: var(--ink); font-weight: 300; line-height: 1.8; }
.video-feature { max-width: 980px; margin: 0 auto 64px; }
.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; max-width: 1080px; margin: 0 auto; }
.vid {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column;
}
.vid > * { position: relative; z-index: 2; }
.vid .video-wrap { max-width: none; margin: 0; border-radius: 0; border: 0; border-bottom: 1px solid var(--line); box-shadow: none; }
.vid-body { padding: 20px 22px 24px; }
.vid-body h3 { font-size: 20px; margin-bottom: 6px; }
.vid-body p { font-size: 14px; color: var(--ink); font-weight: 300; line-height: 1.65; }

/* ============================================================
   BLOG
   ============================================================ */
.blog-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 48px; }
.blog-filter {
  font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); border: 1px solid var(--line); background: transparent; border-radius: 100px;
  padding: 9px 18px; cursor: pointer; transition: border-color .25s, color .25s, background .25s;
}
.blog-filter:hover { border-color: var(--splash); color: var(--cream); }
.blog-filter.active { background: var(--accent); border-color: var(--accent); color: var(--cream); }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.post-card {
  display: flex; flex-direction: column; text-align: left; overflow: hidden; border-radius: 14px;
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.post-card > * { position: relative; z-index: 2; }
.post-card.feature { grid-column: span 3; display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; }
.post-thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--panel); }
.post-card.feature .post-thumb { aspect-ratio: auto; min-height: 320px; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.12) brightness(.9); transition: transform .55s var(--ease), filter .5s; }
.post-card:hover .post-thumb img { transform: scale(1.04); filter: none; }
.post-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.post-card.feature .post-body { justify-content: center; padding: 40px 40px; }
.post-cat { font-family: var(--sans); font-weight: 700; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.post-meta { font-size: 12px; color: var(--muted); margin-bottom: 12px; letter-spacing: .04em; }
/* the show date on a "what to do in town" post — brighter than a publish date,
   so it reads as the event it is */
.post-meta-event { color: var(--ink); font-weight: 500; }
.post-card h3 { font-size: 21px; line-height: 1.25; margin-bottom: 12px; }
.post-card.feature h3 { font-size: clamp(26px, 3vw, 36px); }
.post-card h3 a { color: var(--cream); transition: color .25s; }
.post-card:hover h3 a { color: var(--accent-soft); }
.post-card p.post-excerpt { font-size: 14.5px; color: var(--ink); font-weight: 300; line-height: 1.7; margin-bottom: 18px; flex: 1; }
.post-card.feature p.post-excerpt { font-size: 16px; }
.post-card .textlink { margin-top: auto; }

.blog-empty { text-align: center; color: var(--muted); font-style: italic; padding: 40px 0; }

/* single post */
.post-article { max-width: 760px; margin: 0 auto; }
.post-article .post-cat { text-align: center; }
.post-article h1 { font-size: clamp(30px, 4.4vw, 50px); text-align: center; line-height: 1.18; margin-bottom: 16px; }
.post-article .post-meta { text-align: center; font-size: 13px; margin-bottom: 36px; }
.post-hero { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); margin-bottom: 40px; filter: grayscale(.08); }
.post-content p { color: var(--ink); font-size: 17px; font-weight: 300; line-height: 1.9; margin-bottom: 22px; }
.post-content p strong { color: var(--cream); font-weight: 600; }
.post-content em { color: var(--accent-soft); font-style: italic; }
.post-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.post-content a:hover { color: var(--accent-soft); }
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 40px 0 8px; }
.post-tags .tag { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 100px; padding: 6px 13px; }
.post-content .attraction-card {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 22px 26px;
}
.post-ticket-cta { text-align: center; margin-top: 44px; }
.post-back { text-align: center; margin-top: 48px; }

@media (max-width: 900px) {
  .pb-cols { grid-template-columns: 1fr; gap: 28px; justify-items: center; text-align: center; }
  .pb-col-media { max-width: 280px; }
  .about-feature { grid-template-columns: 1fr; gap: 28px; margin-bottom: 52px; }
  .about-feature.reverse .af-media { order: 0; }
  .about-trio { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .video-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .post-card.feature { grid-column: span 2; grid-template-columns: 1fr; }
  .post-card.feature .post-thumb { min-height: 220px; }
  .post-card.feature .post-body { padding: 28px 26px; }
}

@media (max-width: 560px) {
  .blog-grid { grid-template-columns: 1fr; }
  .post-card.feature { grid-column: auto; }
  .about-trio { grid-template-columns: 1fr; }
}

/* ============================================================
   AMBIENT MOTION — slow drifting blue "lava" blobs behind solid sections.
   Two layered blobs per section (a lighter azure + a deeper royal) read
   against the deep-navy background while staying subtle. Behind content.
   ============================================================ */
.block { overflow: hidden; }
.block > .wrap { position: relative; z-index: 1; }

/* Rickenbacker drift canvas — transparent overlay behind section content */
canvas.rick-bg,
canvas.notes-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  canvas.rick-bg, canvas.notes-bg { display: none; }
}

/* primary blob — lighter azure, more visible on navy */
.block::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: min(72vw, 740px); aspect-ratio: 1 / 1; border-radius: 50%;
  top: -16%; left: -10%;
  background: radial-gradient(circle, rgba(94,148,255,.40), rgba(94,148,255,0) 70%);
  filter: blur(54px); opacity: .55;
  animation: blobDrift 34s ease-in-out infinite alternate;
  will-change: transform;
}
/* secondary blob — deeper royal, opposite corner & slower drift */
.block::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: min(60vw, 620px); aspect-ratio: 1 / 1; border-radius: 50%;
  bottom: -18%; right: -8%;
  background: radial-gradient(circle, rgba(45,104,224,.34), rgba(45,104,224,0) 70%);
  filter: blur(58px); opacity: .5;
  animation: blobDrift2 47s ease-in-out infinite alternate;
  will-change: transform;
}
.block.alt::before { animation-duration: 40s; animation-direction: alternate-reverse; }
.block.alt::after  { animation-duration: 53s; }

@keyframes blobDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(16vw, 9%, 0) scale(1.18); }
}
@keyframes blobDrift2 {
  0%   { transform: translate3d(0, 0, 0) scale(1.08); }
  100% { transform: translate3d(-14vw, -8%, 0) scale(.92); }
}

footer { position: relative; overflow: hidden; }
footer > .wrap { position: relative; z-index: 1; }
footer::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: min(62vw, 700px); aspect-ratio: 1 / 1; border-radius: 50%;
  bottom: -26%; left: 8%;
  background: radial-gradient(circle, rgba(94,148,255,.30), rgba(94,148,255,0) 70%);
  filter: blur(56px); opacity: .5;
  animation: blobDrift 50s ease-in-out infinite alternate;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .block::before, .block::after, footer::before { animation: none; }
  .lightbox .lb-img.pop { animation: none; }
}

/* ============================================================
   QA POLISH — keyboard focus, cursors (ui-ux-pro-max pass)
   ============================================================ */
:focus-visible { outline: 2px solid var(--splash); outline-offset: 3px; border-radius: 3px; }
a:focus-visible, button:focus-visible, .btn:focus-visible, .textlink:focus-visible,
.hamburger:focus-visible, .video-poster:focus-visible {
  outline: 2px solid var(--splash); outline-offset: 3px;
}
.gal .gcell { cursor: pointer; }

/* ============================================================
   HOME HERO — show the FULL photo width, lighter overlay
   (scoped to .hero so interior page-banners keep their cover crop)
   ============================================================ */
.hero .hero-bg { background: var(--bg); display: flex; align-items: center; justify-content: center; }
#heroImg { position: absolute; inset: 0; overflow: hidden; }   /* rotating-slide container (parallax target) */
.hero .hero-slide {
  position: absolute; top: 50%; left: 50%; width: 100%; height: auto;   /* full photo width, natural aspect — no side crop */
  max-width: none;
  transform: translate(-50%, -50%);
  opacity: 0; transition: opacity 1.4s ease-in-out; will-change: opacity;
}
.hero .hero-slide.is-active { opacity: 1; }
.hero .hero-bg::after {
  background:
    radial-gradient(130% 100% at 50% 42%, rgba(7,12,40,.10), rgba(7,12,40,.44) 72%, var(--bg) 99%),
    linear-gradient(180deg, rgba(7,12,40,.30), rgba(7,12,40,0) 38%, rgba(7,12,40,.32) 82%, var(--bg) 100%);
}

/* ============================================================
   LWS AGENCY GLOBAL MASTER DESIGN SYSTEM  (boilerplate-design.md)
   Premium-layout override layer — mapped to the Royal palette so
   the dark theme is preserved. Sections match the source doc.
   ============================================================ */

/* Elevation tokens — soft, colored (never harsh black) */
:root {
  --container: 1280px;                 /* §1.1 Container Law — fixed 1280 */
  --ds-ease: cubic-bezier(.4, 0, .2, 1);
  --shadow-low:  0 4px 6px -1px rgba(11,22,69,.45),  0 2px 4px -2px rgba(11,22,69,.40);
  --shadow-high: 0 20px 25px -5px rgba(7,12,40,.55), 0 8px 10px -6px rgba(7,12,40,.45);
}

/* §1.1 Container padding — 40px desktop, 20px mobile */
.wrap { padding-inline: 2.5rem; }
@media (max-width: 640px) { .wrap, .photo-band .pb-cap { padding-inline: 1.25rem; } }

/* §1.2 Proportional section spacing — premium room to breathe */
.block { padding-block: clamp(5rem, 8vw, 8rem); }
@media (max-width: 640px) { .block { padding-block: 3.5rem; } }

/* §1.4 Typography hierarchy — fluid scale + strict weight priority.
   Bare headings follow the system; hero/section showpieces keep their
   larger tuned sizes via their own selectors. */
h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 800; line-height: 1.1; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.75rem); font-weight: 700; line-height: 1.2; }
h3 { font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 600; }
body { line-height: 1.625; }
p { font-size: clamp(1rem, .6vw + .9rem, 1.125rem); line-height: 1.625; }

/* §2.1 Micro-interactions — every clickable element gets an explicit transition */
a, button, .btn, .card, .news-card, .gcell, .blog-card, .video-feature,
.about-feature .af-media img, input, textarea {
  transition: all .3s var(--ds-ease);
}

/* §3 Premium CTA patterns — solid→ghost swap with lift + elevation */
.btn { padding: .875rem 1.75rem; letter-spacing: .05em; border-radius: 6px; }
.btn-primary {
  border: 2px solid var(--accent);
}
.btn-primary:hover {
  background: transparent; color: var(--accent);
  transform: translateY(-2px); box-shadow: var(--shadow-high);
}
.btn-outline { border-width: 2px; }
.btn-outline:hover { transform: translateY(-2px); box-shadow: var(--shadow-high); }

/* §2.3 Card structures — standardized radius/border/overflow on dark panels */
.news-card, .video-feature, .blog-card, .member, .show-card {
  border-radius: 12px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.news-card:hover, .video-feature:hover, .blog-card:hover, .show-card:hover {
  box-shadow: var(--shadow-high);
}
/* §2.3 Media-in-card adaptive zoom on trigger */
.gcell, .blog-card .bc-media, .show-card .sc-media { overflow: hidden; }
.gcell img, .blog-card .bc-media img, .show-card .sc-media img,
.video-feature img { transition: transform .4s var(--ds-ease); }
.gcell:hover img, .blog-card:hover .bc-media img,
.show-card:hover .sc-media img, .video-feature:hover img { transform: scale(1.04); }

/* §1.3 Visual alternation — feature blocks invert on alternate rows */
.about-feature:nth-of-type(even) { flex-direction: row-reverse; }

/* §3.2 / §4.2 Form inputs — padded tracking + glowing brand focus ring */
.news-form input, .contact-form input, .contact-form textarea, .contact-form select {
  padding: .75rem 1rem;
}
.contact-form select { padding-right: 44px; }
.news-form input:focus, .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(225,47,38,.28);
}

/* §4.3 No center-aligned text blocks past 3 lines — left-align long copy */
.about-feature .af-text p, .news-card > p, .video-feature p { text-align: left; }

/* Utilities replacing former inline styles (no-inline-styles rule) */
#blogFeature { margin-bottom: 26px; }
/* clears the fixed nav, the marquee sign, AND the oversized guitar mark that
   hangs down on load (its box reaches ~221px, and the post column is wide
   enough to reach back under it) */
.block.pad-top-offset { padding-top: 228px; }

/* ============================================================
   STAGE FLOOR SPOTLIGHTS — 3 light beams rise from the bottom
   of a card on hover. Applied to show/tour cards (.show) and
   blog cards (.post-card). Content stays above the beams (z-2).
   ============================================================ */
.show, .post-card { position: relative; }
.post-card > * { position: relative; z-index: 2; }
.show::after, .post-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s var(--ds-ease);
  background:
    conic-gradient(from 324deg at 36% 138%, transparent 0deg, rgba(225,47,38,.42) 14deg, transparent 28deg),
    conic-gradient(from 346deg at 50% 140%, transparent 0deg, rgba(245,238,222,.46) 14deg, transparent 28deg),
    conic-gradient(from 8deg   at 64% 138%, transparent 0deg, rgba(37,99,212,.42) 14deg, transparent 28deg);
  mix-blend-mode: screen;
  filter: blur(1.2px);
  -webkit-mask: linear-gradient(to top, #000 0%, #000 28%, transparent 96%);
          mask: linear-gradient(to top, #000 0%, #000 28%, transparent 96%);
}
.show:hover::after, .post-card:hover::after { opacity: 1; }

/* Tour cards keep a low-burning version of the beams at rest. Without this the
   frosted buttons sit over flat navy, and blurring a flat colour looks exactly
   like the flat colour — there has to be light down there for glass to read.
   Blog cards stay hover-only. */
.show::after { opacity: .4; }

/* Keep card text bright + legible against the spotlight beams on hover */
.show:hover .show-venue,
.post-card:hover h3 a, .post-card:hover h3 { color: #fff; }
.show:hover .show-addr,
.show:hover .show-time,
.post-card:hover .post-excerpt,
.post-card:hover .post-meta { color: var(--cream); }
.show:hover .show-date,
.post-card:hover .post-cat { color: var(--accent-soft); }
.show:hover .show-venue, .show:hover .show-addr, .show:hover .show-time,
.show:hover .show-date, .show:hover .show-badge,
.post-card:hover h3, .post-card:hover .post-excerpt,
.post-card:hover .post-meta, .post-card:hover .post-cat {
  text-shadow: 0 1px 9px rgba(7,12,40,.9), 0 0 2px rgba(7,12,40,.7);
}

@media (prefers-reduced-motion: reduce) {
  .show::after, .post-card::after { transition: none; }
}

/* Powered-by credit line (LWS) — footer bottom bar */
.foot-bottom .footer-credit { font-size: 12px; color: var(--muted-2); }
.foot-bottom .footer-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.foot-bottom .footer-credit a:hover,
.foot-bottom .footer-credit a:focus-visible { color: var(--cream); }

/* ============================================================
   MARQUEE TAGLINE — vintage theater sign under the nav.
   Transparent frame PNG + live Cheltenham text + CSS chase bulbs.
   Part of the fixed header stack; floats over the hero.
   ============================================================ */
.marquee {
  position: absolute;              /* float it — don't add height to the header */
  top: 56px; left: 0; right: 0;    /* tucked up toward the nav items */
  display: flex;
  justify-content: center;
  pointer-events: none;            /* never block the hero beneath */
  transition: transform .5s var(--ease), opacity .4s var(--ease);
}
/* hide / slide the sign away once the page is scrolled (mobile + desktop) */
#hdr.scrolled .marquee {
  opacity: 0;
  transform: translateY(-135%);
}
.marquee-stage {
  position: relative;
  width: min(90%, 470px);
  container-type: inline-size;     /* enables cqw text + bulb sizing */
  /* soft dark halo so the cut-out edge melts into the background — biased
     UPWARD (negative Y) so no shadow casts down over the hero text below */
  filter:
    drop-shadow(0 -4px 16px rgba(5,8,28,.72))
    drop-shadow(0 -2px 8px rgba(5,8,28,.55));
  animation: mqDrop .8s var(--ease) both;
}
.marquee-frame { display: block; width: 100%; height: auto; }

/* live tagline on the white board */
.marquee-text {
  position: absolute; left: 9%; right: 9%; top: 27%; bottom: 28%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; line-height: 1;
  font-family: 'Cheltenham Condensed', Georgia, 'Times New Roman', serif;
  color: #15110c;
}
.mq-line2 { font-size: 3.15cqw; letter-spacing: 0; white-space: nowrap; }

/* chase bulbs (positions injected by main.js) */
.marquee-bulbs { position: absolute; inset: 0; }
.marquee-bulbs i {
  position: absolute; width: 1.4cqw; height: 1.4cqw; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 36%, #fff, var(--c) 60%, rgba(50,0,0,.55));
  animation: mqBulb 1.7s ease-in-out infinite;
  will-change: opacity, box-shadow;
}
@keyframes mqBulb {
  0%, 100% { opacity: .42; box-shadow: 0 0 .18cqw var(--c); }
  17%      { opacity: 1;   box-shadow: 0 0 .7cqw var(--c), 0 0 1.5cqw var(--c); }
  42%      { opacity: .42; box-shadow: 0 0 .18cqw var(--c); }
}
@keyframes mqDrop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .marquee-stage { width: min(94%, 360px); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee, .marquee-stage, .marquee-bulbs i { animation: none !important; }
  .marquee, .marquee-stage { transition: none; }
  .marquee-bulbs i { opacity: .92; }
}

/* ============================================================
   FOOTER STAGE LIGHTS — sets of 3 beams rising from the floor,
   swaying slowly. 3 sets on desktop, 2 on tablet, 1 on mobile.
   (The card spotlights stay static; only these move.)
   ============================================================ */
.footer-lights {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 80%; z-index: 0; pointer-events: none;
  display: flex; justify-content: space-around; align-items: flex-end;
  -webkit-mask: linear-gradient(to top, #000 0%, #000 24%, transparent 92%);
          mask: linear-gradient(to top, #000 0%, #000 24%, transparent 92%);
}
.fl-set { position: relative; flex: 0 0 30%; height: 100%; }
/* each color is its own beam on its own pivot, so they cross as they sway */
.flb { position: absolute; inset: 0; mix-blend-mode: screen; filter: blur(2.5px); }
.flb-r {
  background: conic-gradient(from 338deg at 40% 127%, transparent 0deg, rgba(225,47,38,.20) 12deg, transparent 24deg);
  transform-origin: 40% 100%;
  animation: flSwayA 7s ease-in-out infinite alternate;
}
.flb-c {
  background: conic-gradient(from 352deg at 50% 131%, transparent 0deg, rgba(245,238,222,.24) 12deg, transparent 24deg);
  transform-origin: 50% 100%;
  animation: flSwayB 5.5s ease-in-out infinite alternate;
}
.flb-b {
  background: conic-gradient(from 6deg at 60% 127%, transparent 0deg, rgba(37,99,212,.20) 12deg, transparent 24deg);
  transform-origin: 60% 100%;
  animation: flSwayC 8.5s ease-in-out infinite alternate;
}
/* desync the three sets so nothing marches in lockstep */
.fl-set:nth-child(2) .flb-r { animation-delay: -3s; }
.fl-set:nth-child(2) .flb-c { animation-delay: -5s; }
.fl-set:nth-child(2) .flb-b { animation-delay: -2s; }
.fl-set:nth-child(3) .flb-r { animation-delay: -6s; }
.fl-set:nth-child(3) .flb-c { animation-delay: -1s; }
.fl-set:nth-child(3) .flb-b { animation-delay: -8s; }
@keyframes flSwayA { from { transform: rotate(-9deg);  } to { transform: rotate(11deg);  } }
@keyframes flSwayB { from { transform: rotate(8deg);   } to { transform: rotate(-10deg); } }
@keyframes flSwayC { from { transform: rotate(-12deg); } to { transform: rotate(7deg);   } }
@media (max-width: 900px) { .fl-set:nth-child(3) { display: none; } }
@media (max-width: 600px) {
  .fl-set:nth-child(2) { display: none; }
  .fl-set:nth-child(1) { flex-basis: 64%; }
}
@media (prefers-reduced-motion: reduce) {
  .flb { animation: none; }
}

/* ============================================================
   CURSOR FOLLOW-SPOT + GLASS LENS
   A white theatre follow-spot tracks the pointer. There is no
   visible edge anywhere: the light ramps down over a long tail
   so it reads as a spot thrown on the wall, not a disc.
   A very soft lens rides behind it and bends the backdrop just
   enough to catch the eye, again with no hard rim, so text
   underneath stays fully readable.
   Injected by main.js. Fine-pointer devices only.
   ============================================================ */
.cursor-fx {
  position: fixed; inset: 0;
  z-index: 9998;
  pointer-events: none;
  contain: strict;
}

/* --- the beam: white house light, long gaussian tail ---
   Many closely-spaced stops on purpose. A short stop list is what
   produces the visible ring; this ramps all the way to nothing. */
.cursor-fx__beam {
  position: absolute; top: 0; left: 0;
  width: 600px; height: 600px; margin: -300px 0 0 -300px;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255, 253, 247, .150) 0%,
    rgba(255, 253, 247, .140) 8%,
    rgba(255, 252, 245, .118) 16%,
    rgba(255, 252, 245, .094) 24%,
    rgba(255, 251, 243, .072) 32%,
    rgba(255, 251, 243, .053) 40%,
    rgba(255, 250, 242, .038) 48%,
    rgba(255, 250, 242, .026) 56%,
    rgba(255, 250, 242, .017) 64%,
    rgba(255, 250, 242, .010) 72%,
    rgba(255, 250, 242, .005) 80%,
    rgba(255, 250, 242, .002) 89%,
    rgba(255, 250, 242, 0) 100%);
  mix-blend-mode: screen;
  filter: blur(9px);           /* dissolves any residual banding in the ramp */
  will-change: transform;
  transition: opacity .55s var(--ease);
}

/* --- the lens: soft refraction, no rim ---
   The mask never reaches full black, so the blur is only ever
   partially applied and fades out in every direction. */
.cursor-fx__lens {
  position: absolute; top: 0; left: 0;
  width: 300px; height: 300px; margin: -150px 0 0 -150px;
  border-radius: 50%;
  -webkit-backdrop-filter: blur(3px) saturate(1.22) brightness(1.04);
          backdrop-filter: blur(3px) saturate(1.22) brightness(1.04);
  -webkit-mask: radial-gradient(circle closest-side,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 22%, rgba(0,0,0,.20) 38%,
    rgba(0,0,0,.38) 52%, rgba(0,0,0,.44) 63%, rgba(0,0,0,.34) 74%,
    rgba(0,0,0,.18) 84%, rgba(0,0,0,.06) 92%, rgba(0,0,0,0) 100%);
          mask: radial-gradient(circle closest-side,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 22%, rgba(0,0,0,.20) 38%,
    rgba(0,0,0,.38) 52%, rgba(0,0,0,.44) 63%, rgba(0,0,0,.34) 74%,
    rgba(0,0,0,.18) 84%, rgba(0,0,0,.06) 92%, rgba(0,0,0,0) 100%);
  will-change: transform;
  transition: opacity .55s var(--ease);
}

/* off-canvas / idle: fade the whole rig out */
.cursor-fx.is-out .cursor-fx__beam,
.cursor-fx.is-out .cursor-fx__lens { opacity: 0; }

/* Never on touch, never when motion is reduced, never in print. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-fx { display: none; }
}
@media print { .cursor-fx { display: none; } }