/* Layout: full-bleed group photo with the logo centered over it, then sections that trade off
   between soft sand and muted evening olive, taken from the photos. Tall hand-drawn headings echo
   the logo lettering. One deliberate look (no light/dark switch): every color is set explicitly. */
:root {
  --night: #2a2e24;      /* muted evening olive (dark ground) */
  --night-2: #33382c;    /* slightly lifted olive for cards on dark */
  --barn: #415e50;       /* the green barn doors, softened */
  --sand: #efe7d6;       /* tile wall in soft light (light ground) */
  --paper: #f8f3e8;      /* cards and form on light */
  --amber: #cf9452;      /* golden hour, toned down */
  --glow: #e7bd84;       /* warm highlight on dark */
  --cream: #f1e6d0;      /* text on dark */
  --ink: #2c3026;        /* text on light */
  --ink-soft: #626655;
  --line-dark: rgba(241, 230, 208, .14);
  --line-light: rgba(44, 48, 38, .14);

  --hand: "Amatic SC", "Marker Felt", "Comic Sans MS", cursive;
  --body: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Motion: one easing for everything, slow and unhurried like a swell rolling in */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.45, 0, .2, 1);
  --t-fast: .25s;
  --t-med: .6s;
  --t-slow: 1.1s;

  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--night); color: var(--cream); font: 400 1.0625rem/1.7 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--glow); outline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-family: var(--hand); font-weight: 700; letter-spacing: .02em; }
.wrap { max-width: 74rem; margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }

/* ── Logo menu: fixed, centered ── */
.masthead {
  position: fixed; inset: 0 0 auto; z-index: 20;
  padding-top: calc(env(safe-area-inset-top, 0px) + .75rem); padding-bottom: .5rem;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  display: flex; flex-direction: column; align-items: center;
}
/* Scrolled: no banner. The logo shrinks and floats over the one dark ground in the logo's own cream,
   and the menu label and arrow share that cream. */
.masthead { pointer-events: none; --logo-cream: #FFE7C2; }
.masthead > * { pointer-events: auto; }
.logo-btn { appearance: none; background: none; border: 0; padding: .25rem .5rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .1rem;
  color: var(--logo-cream); }
.logo-stack { position: relative; display: block; width: clamp(9.5rem, 22vw, 14.5rem); }
/* Hover: the logo turns the same amber as the homepage buttons. The amber logo is its own layer that
   fades in over the cream one, so only opacity animates. */
.logo-tint { position: absolute; inset: 0; background: var(--amber); opacity: 0; transition: opacity .25s var(--ease);
  -webkit-mask: url("images/logo-cream.svg") 50% 50% / contain no-repeat; mask: url("images/logo-cream.svg") 50% 50% / contain no-repeat; }
.logo-btn:hover .logo-tint, .logo-btn:focus-visible .logo-tint, .logo-btn[aria-expanded="true"] .logo-tint { opacity: 1; }
@media (hover: none) { .logo-btn:hover .logo-tint { opacity: 0; } .logo-btn[aria-expanded="true"] .logo-tint { opacity: 1; } }
.logo-stack img { width: 100%; height: auto; }
/* The fade-in only fills backwards, so once it's done it stops holding transform and opacity */
.logo-btn { animation: logo-in 1.2s var(--ease) backwards .15s; transform-origin: 50% 35%; }
@keyframes logo-in { from { opacity: 0; transform: translateY(-10px); } }
@keyframes pop { 0% { transform: scale(.88); } 55% { transform: scale(1.1); } 100% { transform: scale(1); } }
/* Past the photo the logo and the Menu label pop away together as one badge (a quick swell, then gone),
   and pop back in together on the way up. The pop runs on the whole button (main.js), only scale and
   opacity, so nothing on the page reflows. Once it's gone it's also hidden from clicks and keys. */
.logo-btn { transition: visibility 0s; }
.masthead.scrolled .logo-btn { visibility: hidden; transition: visibility 0s linear .18s; }

/* Instagram, top right */
.ig-corner { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 1rem); right: calc(var(--gutter-r) + .25rem); width: 2.5rem; height: 2.5rem; display: grid; place-items: center; color: var(--logo-cream); border-radius: 50%;
  transition: color .25s var(--ease); animation: logo-in 1.2s var(--ease) backwards .3s; }
.ig-corner svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ig-corner svg .dot { fill: currentColor; stroke: none; }
/* Hover: same as the logo, a soft fade to the homepage-button amber */
.ig-corner:hover, .ig-corner:focus-visible { color: var(--amber); }
.ig-corner:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
@media (hover: none) { .ig-corner:hover { color: var(--logo-cream); } }

/* Back to top: pops in once you're past the photo */
.to-top { position: fixed; z-index: 19; right: calc(var(--gutter-r) + .25rem); bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
  display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border-radius: 999px; text-decoration: none;
  font: 700 .75rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--logo-cream, #FFE7C2);
  background: rgba(42, 46, 36, .88); border: 1.5px solid rgba(241, 230, 208, .55); box-shadow: 0 10px 24px rgba(10, 12, 8, .35);
  opacity: 0; transform: scale(.6); pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.to-top::before { content: ""; width: .45rem; height: .45rem; border: solid currentColor; border-width: 2px 0 0 2px; transform: translateY(2px) rotate(45deg); }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; animation: pop .6s cubic-bezier(.3, 1.6, .5, 1); }
.to-top:hover, .to-top:focus-visible { background: var(--amber); border-color: var(--amber); color: var(--night); }

.menu {
  margin-top: .6rem; width: min(22rem, 100%); padding: .4rem;
  background: rgba(42, 46, 36, .97); color: var(--cream); border: 1px solid var(--line-dark); border-radius: 6px;
  box-shadow: 0 22px 50px rgba(10, 12, 8, .45); transform-origin: 50% 0;
  opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.98);
  transition: opacity .25s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
}
/* The dropdown stays in the page and fades and drops in or out, so closing is as smooth as opening */
.menu.open { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .35s var(--ease), visibility 0s; }
.menu li { opacity: 0; translate: 0 6px; transition: opacity .2s var(--ease), translate .2s var(--ease); }
.menu.open li { opacity: 1; translate: none; transition-duration: .45s; transition-delay: calc(var(--i, 0) * 40ms + 60ms); }
.menu ul { list-style: none; margin: 0; padding: 0; display: grid; }
.menu a { display: block; padding: .55rem 1rem; text-decoration: none; text-align: center; font: 700 2rem/1.1 var(--hand); letter-spacing: .03em; border-radius: 4px; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-med) var(--ease); }
/* A gentle swell on hover (scale, so the text doesn't re-wrap every frame like letter-spacing did) */
.menu a:hover { transform: scale(1.04); }
.menu a:hover, .menu a:focus-visible { background: rgba(241, 230, 208, .08); color: var(--glow); }
.menu a small { display: none; }

/* ── Hero ── */
.hero { position: relative; height: clamp(26rem, 62vw, 92vh); overflow: hidden; background: var(--night); }
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; animation: settle 2.8s var(--ease) both; }
@keyframes settle { from { opacity: .4; transform: scale(1.06); } }
.hero .caption .wrap > * { animation: rise-lg 1.1s var(--ease) both; }
.hero .caption .wrap > :nth-child(1) { animation-delay: .5s; }
.hero .caption .wrap > :nth-child(2) { animation-delay: .7s; }
@keyframes rise-lg { from { opacity: 0; transform: translateY(18px); } }
.hero-kicker { margin-bottom: .6rem; }
.hero::before, .hero::after { content: ""; position: absolute; inset-inline: 0; pointer-events: none; }
.hero::before { top: 0; height: 40%; background: linear-gradient(rgba(42, 46, 36, .7), transparent); }
.hero::after { bottom: 0; height: 50%; background: linear-gradient(transparent, rgba(42, 46, 36, .9)); }
.hero .caption { position: absolute; inset: auto 0 0; z-index: 2; }
.hero .caption .wrap { padding-block: 0 clamp(1.75rem, 4vw, 3rem); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
.hero-kicker { margin-bottom: 0; }
.hero h1 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; max-width: 26rem; color: var(--cream); }

.cta { display: flex; gap: .65rem; flex-wrap: wrap; justify-content: center; max-width: 66rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.5rem; cursor: pointer;
  font: 700 .8125rem/1 var(--body); text-transform: uppercase; letter-spacing: .14em; text-decoration: none;
  position: relative; border: 1.5px solid var(--amber); border-radius: 999px; background: var(--amber); color: var(--night);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform .35s var(--ease);
}
/* The hover shadow is painted once on a layer and faded in, instead of redrawing a blur every frame */
.btn::after { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 8px 18px rgba(20, 22, 16, .22); opacity: 0; transition: opacity .35s var(--ease); }
.btn:hover { background: var(--glow); border-color: var(--glow); transform: translateY(-2px); }
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(0); transition-duration: .08s; }
.btn:active::after { opacity: 0; transition-duration: .08s; }
.btn.ghost { background: transparent; color: var(--cream); border-color: rgba(241, 230, 208, .6); }
.btn.ghost:hover, .btn.ghost:focus-visible { border-color: var(--amber); background: var(--amber); color: var(--night); }
.btn[aria-disabled="true"] { background: transparent; color: var(--ink-soft); border: 1.5px solid var(--line-light); cursor: default; transform: none; }
.btn[aria-disabled="true"]::after { content: none; }

/* ── Section grounds ── */
section.band { position: relative; padding-block: clamp(4rem, 9vw, 6.5rem); }
/* One ground for the whole page (Chris: no light/dark flipping behind the logo). The light-ground
   tokens are remapped to their dark-ground equivalents here; light cards (the form, merch mocks)
   set them back for their own contents. Sections are separated by a quiet hairline. */
.ground-night { background: var(--night); color: var(--cream); --ink: var(--cream); --ink-soft: rgba(241, 230, 208, .62); --line-light: var(--line-dark); --barn: var(--glow); }

.kicker { font: 700 .75rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; margin: 0 0 .9rem; color: var(--glow); }
.sec-head { margin-bottom: 2.25rem; display: flex; justify-content: space-between; align-items: end; gap: 1rem 2.5rem; flex-wrap: wrap; }
.sec-head h2 { font-size: clamp(3.25rem, 8vw, 5.5rem); line-height: .9; }
.sec-head p { margin: 0; max-width: 28rem; opacity: .8; }
.note { font-size: .875rem; line-height: 1.5; border: 1px dashed currentColor; padding: .8rem 1rem; border-radius: 6px; margin: 1.75rem 0 0; opacity: .65; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem 4.5rem; align-items: center; }
.split.wide-left { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.split.wide-right { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
@media (max-width: 52rem) { .split, .split.wide-left, .split.wide-right { grid-template-columns: minmax(0, 1fr); } }
.photo { overflow: hidden; border-radius: 6px; background: var(--night-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.photo:hover img { transform: scale(1.035); }

/* About */
.bio p { max-width: 36rem; margin: 0 0 1.1rem; font-size: 1.1875rem; }
.lineup { list-style: none; margin: 2.25rem 0 0; padding: 0; max-width: 38rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 1.25rem 1rem; }
.lineup li { display: grid; gap: .1rem; }
.lineup li strong { font: 700 2.25rem/1 var(--hand); letter-spacing: .02em; }
.lineup li span { font-size: .9375rem; color: var(--ink-soft); }
.about-photos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 16rem 16rem; gap: .75rem; }
.about-photos .photo:first-child { grid-row: span 2; }
@media (max-width: 34rem) { .about-photos { grid-template-rows: 12rem 12rem; } }

/* Songs: original music on the way */
#songs .backdrop { position: absolute; inset: 0; overflow: hidden; }
#songs .backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: .32; filter: grayscale(1); }
#songs .backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--night) 30%, rgba(42, 46, 36, .55)); }
#songs .wrap { position: relative; }
.soon { max-width: 36rem; }
.soon h2 { font-size: clamp(3.5rem, 9vw, 6.5rem); line-height: .88; margin-bottom: 1.25rem; }
.soon h2 span { color: var(--glow); }
.soon p { font-size: 1.1875rem; margin: 0 0 1.75rem; opacity: .88; }
.tracks { list-style: none; margin: 2.5rem 0 0; padding: 0; max-width: 30rem; }
.tracks li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line-dark); font-size: .9375rem; opacity: .6; }
.tracks li:last-child { border-bottom: 1px solid var(--line-dark); }
.tracks li b { font: 700 1.5rem/1 var(--hand); letter-spacing: .03em; opacity: 1; }
.eq { display: inline-flex; gap: 3px; align-items: end; height: 1rem; }
.eq i { width: 3px; background: var(--glow); border-radius: 2px; animation: eq 1.2s ease-in-out infinite; }
.eq i:nth-child(1) { height: 40%; } .eq i:nth-child(2) { height: 90%; animation-delay: .2s; } .eq i:nth-child(3) { height: 60%; animation-delay: .4s; } .eq i:nth-child(4) { height: 30%; animation-delay: .1s; }
@keyframes eq { 50% { transform: scaleY(.4); } }
.eq i { transform-origin: bottom; }

/* Shows */
.gigs { list-style: none; margin: 0; padding: 0; }
.gig { position: relative; display: grid; grid-template-columns: 4.75rem minmax(0, 1fr) auto; gap: 1rem 1.5rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--line-light); }
/* Hover: the wash fades in on its own layer and the date and name slide over, with no relayout */
.gig::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(231, 189, 132, .08), transparent 70%); opacity: 0; transition: opacity var(--t-med) var(--ease); }
.gig > * { position: relative; transition: translate var(--t-med) var(--ease); }
.gig:hover::before { opacity: 1; }
.gig:hover .date, .gig:hover .what { translate: .5rem 0; }
.gig:first-child { border-top: 1px solid var(--line-light); }
.gig .date { text-align: center; line-height: .9; color: var(--barn); }
.gig .date .m { display: block; font: 700 .75rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase; }
.gig .date .d { display: block; font: 700 2.75rem/1 var(--hand); margin-top: .1rem; }
.gig .what { min-width: 0; }
.gig .what strong { display: block; font: 700 1.75rem/1.05 var(--hand); letter-spacing: .02em; }
.gig .what span { font-size: .9375rem; color: var(--ink-soft); }
.gig .time { font: 700 .875rem/1 var(--body); letter-spacing: .06em; color: var(--ink-soft); white-space: nowrap; }
@media (max-width: 34rem) { .gig { grid-template-columns: 4rem minmax(0, 1fr); } .gig .time { grid-column: 2; } }
.gig-empty { margin: 0; padding: 1.4rem 0; border-block: 1px solid var(--line-light); font-size: 1.0625rem; color: var(--ink-soft); max-width: 30rem; }
.gig-empty a { color: var(--barn); font-weight: 700; }
.cal-frame { width: 100%; height: 36rem; border: 0; border-radius: 6px; background: #fff; }
.shows-photo { aspect-ratio: 4 / 5; max-width: 100%; }

/* Live performances */
.reels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; align-items: start; }
.reels .instagram-media { min-width: 0 !important; width: 100% !important; margin: 0 !important; }
.reels.clips { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
a.reel { display: block; color: inherit; text-decoration: none; }
.reel { position: relative; aspect-ratio: 9 / 14; max-width: 100%; overflow: hidden; border-radius: 6px; background: var(--night-2); }
.reel img, .reel video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s var(--ease); }
.clip { cursor: pointer; }
.clip.playing video { transform: none; }
.clip.playing::after, .clip.playing .play, .clip.playing .label { opacity: 0; pointer-events: none; }
.clip::after, .clip .play, .clip .label { transition: opacity var(--t-med) var(--ease); }
.reel:hover img, .clip:not(.playing):hover video { transform: scale(1.05); }
.reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(42, 46, 36, .85)); }
.reel .play { position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: 1; width: 3.75rem; height: 3.75rem; border-radius: 50%; background: rgba(241, 230, 208, .9); display: grid; place-items: center; transition: transform var(--t-med) var(--ease), background var(--t-fast) var(--ease); }
.reel:hover .play { transform: scale(1.08); background: var(--cream); }
.reel .play::after { content: ""; border-left: 1rem solid var(--night); border-block: .62rem solid transparent; margin-left: .3rem; }
.reel .label { position: absolute; inset: auto 0 0; z-index: 1; padding: 1rem; display: grid; gap: .2rem; color: var(--cream); }
.reel .label strong { font: 700 1.875rem/1 var(--hand); letter-spacing: .02em; }
.reel .label span { font-size: .8125rem; opacity: .75; }
.sec-head a { color: var(--glow); }

/* Booking on barn green */
.pitch p { margin: 0 0 1rem; max-width: 30rem; font-size: 1.125rem; }
.pitch dl { margin: 1.75rem 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1.25rem; }
.pitch dt { font: 700 .75rem/2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--glow); }
.pitch dd { margin: 0; overflow-wrap: anywhere; font-weight: 700; }
.book-photo { aspect-ratio: 4 / 3; max-width: 100%; }
form.booking { --ink: #2c3026; --ink-soft: #626655; --line-light: rgba(44, 48, 38, .14); --barn: #415e50; background: var(--paper); color: var(--ink); border-radius: 8px; padding: clamp(1.5rem, 3.5vw, 2.5rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; box-shadow: 0 24px 50px rgba(20, 30, 24, .25); }
form.booking .form-title { grid-column: 1 / -1; font: 700 2.25rem/1 var(--hand); margin: 0 0 .25rem; }
@media (max-width: 34rem) { form.booking { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: .35rem; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font: 700 .6875rem/1.2 var(--body); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); }
.field input, .field select, .field textarea { font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid var(--line-light); border-radius: 6px; padding: .7rem .75rem; width: 100%; min-width: 0; color-scheme: light; }
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--amber); outline-offset: 0; border-color: var(--amber); }
.form-foot { grid-column: 1 / -1; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.form-status { margin: 0; font-size: .9375rem; color: var(--ink-soft); }
.form-status.ok { color: var(--barn); font-weight: 700; }


/* Privacy policy and terms: two quiet fold-open panels under the booking form */
.legal { margin-top: 2.5rem; display: grid; max-width: 46rem; }
.legal details { border-top: 1px solid var(--line-dark); }
.legal details:last-child { border-bottom: 1px solid var(--line-dark); }
.legal summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 0;
  font: 700 .75rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--glow); transition: color var(--t-fast) var(--ease); }
.legal summary::-webkit-details-marker { display: none; }
.legal summary::after { content: ""; width: .45rem; height: .45rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform var(--t-fast) var(--ease); }
.legal details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.legal summary:hover { color: var(--cream); }
.legal-body { display: grid; gap: 1.1rem; padding: .25rem 0 1.75rem; font-size: .9375rem; line-height: 1.6; color: rgba(241, 230, 208, .82); }
.legal-body h4 { margin: 0 0 .3rem; font: 700 .9375rem/1.3 var(--body); color: var(--cream); }
.legal-body p, .legal-body ul { margin: 0 0 .5rem; }
.legal-body ul { padding-left: 1.2rem; display: grid; gap: .3rem; }
.legal-body .key { border: 1px solid var(--line-dark); border-radius: 6px; padding: .8rem 1rem; margin-bottom: .6rem; background: rgba(241, 230, 208, .04); }
.legal-body .key p { margin: 0; }
.legal-body a { color: var(--glow); }
.legal-date { color: rgba(241, 230, 208, .55); }

/* Photo lightbox */
.photo.zoomable { cursor: zoom-in; }
.photo.zoomable:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
/* The blur is drawn at full strength on its own layer and faded in, rather than re-blurring the page at a
   new radius on every frame */
.lightbox { position: fixed; inset: 0; z-index: 100; cursor: zoom-out; }
.lightbox::before { content: ""; position: absolute; inset: 0; background: rgba(30, 33, 26, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transition: opacity .45s var(--ease); }
.lightbox.on::before { opacity: 1; }
.lightbox-img { position: fixed; max-width: none; object-fit: cover; border-radius: 6px; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0); transition: left .45s var(--ease), top .45s var(--ease), width .45s var(--ease), height .45s var(--ease), box-shadow .45s var(--ease); }
.lightbox-img.on { box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .45); }
.lightbox-close { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 1rem); right: calc(var(--gutter-r) + .25rem); z-index: 1; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: rgba(241, 230, 208, .9); cursor: pointer; opacity: 0; transition: opacity .3s var(--ease) .15s; }
.lightbox.on .lightbox-close { opacity: 1; }
.lightbox-close::before, .lightbox-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.1rem; height: 2px; background: var(--night); translate: -50% -50%; rotate: 45deg; }
.lightbox-close::after { rotate: -45deg; }
@media (prefers-reduced-motion: reduce) { .lightbox::before, .lightbox-img, .lightbox-close { transition: none; } }

/* Merch */
.merch { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 2rem 1.25rem; }
.item { display: grid; gap: .6rem; align-content: start; }
.mock { position: relative; aspect-ratio: 1; max-width: 100%; background: var(--paper); border-radius: 6px; display: grid; place-items: center; overflow: hidden; }
.mock svg.garment { width: 82%; height: auto; filter: drop-shadow(0 10px 14px rgba(44, 48, 38, .18)); }
.mock .print { position: absolute; background: var(--ink-color); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.mock.shirt .print { width: 30%; aspect-ratio: 1.47; top: 33%; left: 35%; }
.mock.hat .print { width: 36%; aspect-ratio: 2.3; top: 41%; left: 32%; }
.mock.patch img { width: 70%; filter: drop-shadow(0 6px 10px rgba(44, 48, 38, .2)); transform: rotate(-5deg); }
.item h3 { font-size: 2rem; line-height: 1; }
.item .meta { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.item .price { font-size: .9375rem; color: var(--ink-soft); }
.item .btn { padding: .55rem .95rem; font-size: .6875rem; }

/* Footer */
footer { position: relative; background: var(--night); color: var(--cream); }
footer .wrap { padding-block: 3rem; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; font-size: .9375rem; }
footer img { width: 9rem; height: auto; }
footer nav { display: flex; gap: .5rem 1.4rem; flex-wrap: wrap; }
footer nav a { text-decoration: none; font-weight: 700; opacity: .75; transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
footer nav a:hover { opacity: 1; color: var(--glow); }

/* ── Coastal details ── */

/* Set list: the artists we cover, in the logo's hand */
.covers { margin: 2rem 0 0; max-width: 38rem; }
.covers-label { font: 700 .75rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .5rem; }
.covers-names { margin: 0; font: 700 1.875rem/1.15 var(--hand); letter-spacing: .02em; color: var(--ink); }
.covers-names .sep { display: inline-block; margin: 0 .45rem; color: var(--amber); font-family: var(--body); font-size: .9rem; vertical-align: .35em; }
.covers-names .more { color: var(--ink-soft); }

/* Footer home port: a hand-drawn outline of the Cape that draws itself in */
.home-port { display: flex; align-items: center; gap: .9rem; }
.home-port p { margin: 0; display: grid; line-height: 1.35; }
.home-port .coords { font-size: .8125rem; opacity: .6; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
@keyframes ping { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.5); } }

/* ── Scroll reveals: content eases up into place as it comes into view ── */
.js-motion [data-reveal] {
  opacity: 0; translate: 0 22px;
  transition: opacity 1s var(--ease), translate 1s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js-motion [data-reveal="fade"] { translate: none; }
.js-motion [data-reveal="photo"] { translate: 0 16px; scale: .985; transition-property: opacity, translate, scale; }
.js-motion [data-reveal].in { opacity: 1; translate: none; scale: none; }

/* Narrower windows (a tab that isn't full screen, tablets): one column, so the spacing and the photos
   shrink with it instead of keeping their wide-screen size. */
@media (max-width: 52rem) {
  section.band { padding-block: clamp(2.75rem, 7vw, 3.5rem); }
  .sec-head { margin-bottom: 1.5rem; }
  .split { gap: 1.75rem; }
  .lineup { margin-top: 1.75rem; }
  .about-photos { grid-template-rows: 12rem 12rem; gap: .5rem; }
  .shows-photo { aspect-ratio: 16 / 9; }
  .book-photo { aspect-ratio: 16 / 9; }
  .pitch dl { margin: 1.25rem 0; }
  .note { margin-top: 1.25rem; }
  footer .wrap { padding-block: 2.25rem; gap: 1.25rem; }
}

/* Phones: the group photo runs edge to edge under the floating logo, over a soft, darkened copy of
   itself, with the tagline and buttons tucked under it. Everything else tightens up. */
@media (max-width: 40rem) {
  body { font-size: 1rem; line-height: 1.6; }
  .hero { height: auto; padding-top: calc(env(safe-area-inset-top, 0px) + 3rem); }
  .hero::before { display: block; content: ""; inset: -40px; height: auto; z-index: 0;
    background: url("images/band-group.jpg") 50% 45% / cover no-repeat; filter: blur(22px) brightness(.45) saturate(.9); }
  .hero::after { display: block; z-index: 0; top: 0; bottom: 0; height: auto; background: linear-gradient(transparent 35%, rgba(42, 46, 36, .85) 70%, var(--night)); }
  /* Wider than the screen so the players fill it edge to edge; the trimmed sides are empty wall */
  .hero img { position: relative; z-index: 1; width: 128%; max-width: none; height: auto; aspect-ratio: 3 / 2; margin-left: -14%;
    -webkit-mask: linear-gradient(#000 78%, transparent); mask: linear-gradient(#000 78%, transparent); }
  .hero .caption { position: relative; z-index: 2; margin-top: -2.75rem; }
  .hero .caption .wrap { padding-block: 0 calc(env(safe-area-inset-bottom, 0px) + 2.25rem); gap: 1.1rem; }
  .hero h1 { font-size: 2.125rem; max-width: 20rem; }
  .cta { width: 100%; gap: .5rem; }
  .cta .btn { padding: .7rem .95rem; font-size: .6875rem; letter-spacing: .12em; white-space: nowrap; }

  section.band { padding-block: 3.5rem; }
  .sec-head { margin-bottom: 1.5rem; }
  .sec-head h2 { font-size: 3.25rem; }
  .soon h2 { font-size: 3.75rem; }
  .bio p, .soon p, .pitch p { font-size: 1.0625rem; }
  .split { gap: 2.25rem; }
  .lineup { margin-top: 1.75rem; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .lineup li strong { font-size: 1.875rem; }
  .covers-names { font-size: 1.625rem; }
  .about-photos { grid-template-rows: 10.5rem 10.5rem; gap: .5rem; }
  .tracks { margin-top: 2rem; }
  .gig { padding: .9rem 0; gap: .25rem 1rem; }
  .gig .date .d { font-size: 2.375rem; }
  .gig .what strong { font-size: 1.5rem; }
  .shows-photo { aspect-ratio: 4 / 3; }
  .reels { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .reels.clips { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-left: calc(-1 * var(--gutter-l)); margin-right: calc(-1 * var(--gutter-r)); padding-left: var(--gutter-l); padding-right: var(--gutter-r); scroll-padding-left: var(--gutter-l); }
  .reels.clips::-webkit-scrollbar { display: none; }
  .reels.clips .clip { flex: 0 0 72%; scroll-snap-align: start; }
  .reel .play { width: 2.75rem; height: 2.75rem; }
  .reel .play::after { border-left-width: .75rem; border-block-width: .47rem; margin-left: .2rem; }
  .reel .label { padding: .7rem; }
  .reel .label strong { font-size: 1.375rem; }
  .pitch dl { margin: 1.25rem 0; }
  .merch { grid-template-columns: 1fr 1fr; gap: 1.5rem .75rem; }
  .item h3 { font-size: 1.625rem; }
  .item .meta { gap: .4rem; }
  .note { margin-top: 1.25rem; font-size: .8125rem; }
  footer .wrap { padding-block: 2.25rem; gap: 1.25rem; }
  footer img { width: 7rem; }
}