/* The Jaded -- public site.
   Greyscale on pure black, gritty texture, no colour accent anywhere.
   Tokens are lifted from the `grit` theme in design/site/Main.dc.html. */

:root {
  --bg: #000000;
  --bg2: #101010;
  --ink: #e8e8e8;
  --muted: #a3a3a3;
  --muted-2: #cfcfcf;
  --muted-3: #bdbdbd;
  --line: #2b2b2b;
  --line-2: #262626;
  --accent: #d6d6d6;
  --accent-text: #b8b8b8;
  --on-accent: #000000;
  --ph-border: #4a4a4a;
  --ph-text: #a3a3a3;
  --tape: rgba(232, 232, 232, 0.16);
  --inv-solid: #cfcfcf;
  --inv-ink: #000000;
  --inv-muted: #383838;
  --field: #141414;
  --field-border: #3a3a3a;

  --scratch: repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 2px, rgba(255,255,255,0) 2px 9px);
  --scratch-ph: repeating-linear-gradient(115deg, rgba(255,255,255,0.04) 0 2px, rgba(255,255,255,0) 2px 9px);
  --scratch-bg2: repeating-linear-gradient(115deg, rgba(255,255,255,0.03) 0 2px, rgba(255,255,255,0) 2px 10px);
  --scratch-inv: repeating-linear-gradient(115deg, rgba(0,0,0,0.06) 0 2px, rgba(0,0,0,0) 2px 10px);

  --display: 'Oswald', 'Arial Narrow', sans-serif;
  --body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  /* Small-caps labels, list numbers, captions. Was IBM Plex Mono: monospace is off-limits in
     Tank's apps (house rule), so labels use the poster face, Oswald (22nd Oct 2026). */
  --label: 'Oswald', 'Arial Narrow', sans-serif;

  --pad: 96px;   /* desktop content padding */
  --max: 1440px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  /* `overflow-x: hidden` here would make body the nearest scrolling ancestor
     and the sticky header would silently never stick -- no error, it just sits
     at the top of the page and scrolls away. `clip` does the same job (the
     rotated hero and the wide poster line-up must not cause sideways scroll)
     WITHOUT creating a scroll container. `hidden` first as a fallback for
     anything that does not know `clip`; such a browser loses the sticky nav,
     not the layout. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* An in-page link (#photos, #video on the gallery) must not land underneath
   the sticky header. */
html { scroll-padding-top: 120px; }
@media (max-width: 860px) { html { scroll-padding-top: 84px; } }

/* A hidden element must stay hidden: a `display:` rule from a utility class
   otherwise beats the attribute and the thing shows up on every page. */
[hidden] { display: none !important; }

img { max-width: 100%; }

a { color: var(--ink); }
a:hover { color: var(--muted); }

/* The UA stylesheet gives a <button> `color: buttontext`, i.e. black, and an
   inline SVG's stroke="currentColor" then resolves to black on a black page --
   invisible, with nothing in the markup to show why. Inherit instead; every
   button that wants its own colour sets one below. */
button { color: inherit; font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: 12px 18px; font-family: var(--label); font-size: 13px;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------------------------------------------------------------- texture -- */

.grain {
  position: fixed; inset: 0;
  background-image: url('../img/grain.png');
  background-size: 400px 400px;
  pointer-events: none;
  z-index: 20;
  opacity: 0.55;
}

.distress {
  -webkit-mask-image: url('../img/distress-mask.png');
  mask-image: url('../img/distress-mask.png');
  -webkit-mask-size: 360px 360px;
  mask-size: 360px 360px;
}

.card {
  background: var(--scratch), #141414;
  border: 1px solid var(--line);
}

/* --------------------------------------------------------------- typography -- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

h1 { font-size: clamp(38px, 7.4vw, 112px); line-height: 0.92; }
h2 { font-size: clamp(34px, 4.6vw, 64px); line-height: 1; }
h3 { font-size: clamp(22px, 1.9vw, 26px); font-weight: 600; letter-spacing: 1px; }

p { margin: 0; }

.eyebrow {
  font-family: var(--label);
  font-size: clamp(13px, 0.28vw + 11.94px, 16px);
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent-text);
}

.lede { font-size: clamp(16px, 1.3vw, 20px); line-height: 1.55; color: var(--muted-2); }
.body-muted { color: var(--muted); line-height: 1.6; }
.meta { font-family: var(--label); font-size: clamp(13px, 0.28vw + 11.94px, 16px); letter-spacing: 2px; color: var(--muted); }

/* ----------------------------------------------------------------- layout -- */

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.page { max-width: var(--max); margin: 0 auto; position: relative; }

section { position: relative; }

.section { padding-block: 128px; }
.section-tight { padding-block: 96px; }

.inverse {
  background: var(--scratch-inv), var(--inv-solid);
  color: var(--inv-ink);
}
.inverse .eyebrow { color: var(--inv-muted); }
.inverse .body-muted { color: var(--inv-muted); }
.inverse a { color: var(--inv-ink); }

.bg2 { background: var(--scratch-bg2), var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; text-decoration: none;
  border: 0; border-radius: 0; cursor: pointer;
  font-size: 17px; padding: 18px 32px;
  background: var(--accent); color: var(--on-accent);
}
.btn:hover { background: #ffffff; color: var(--on-accent); }

.btn-outline {
  background: transparent; color: var(--ink);
  border: 2px solid var(--ink); padding: 16px 30px;
}
.btn-outline:hover { background: var(--ink); color: var(--bg); }

.btn-sm { font-size: 15px; padding: 14px 24px; }
.btn-lg { font-size: 18px; padding: 20px 36px; }

.inverse .btn { background: var(--inv-ink); color: var(--inv-solid); }
.inverse .btn:hover { background: #222; }

.link-underline {
  font-family: var(--label); font-size: clamp(14px, 0.19vw + 13.30px, 16px); font-weight: 500; letter-spacing: 2px;
  text-decoration: none; border-bottom: 2px solid var(--accent);
  padding-bottom: 4px; white-space: nowrap;
}

/* -------------------------------------------------------------------- nav -- */

/* The header sticks; the grain layer (z-index 20) still sits over it, so the
   texture stays continuous across the whole page. */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
/* Only once the page has moved -- a hairline under the nav at the very top
   would read as a stray rule across the hero. */
.site-header.is-stuck { border-bottom-color: var(--line); }

.nav {
  position: relative; z-index: 6;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 104px;
}
.nav-logo { display: flex; flex-shrink: 0; }
.nav-logo img { width: 92px; height: 52px; display: block; }

.nav-links {
  display: flex; align-items: center; gap: 36px;
  font-family: var(--label); font-size: 13px; font-weight: 500; letter-spacing: 2px;
}
.nav-links a { text-decoration: none; color: var(--ink); white-space: nowrap; }
.nav-links a[aria-current='page'] { color: var(--accent); }
/* BOOK US is a .btn inside the menu: `.nav-links a` outranks `.btn`, which left light
   text on the light button (Tank, 22nd Oct 2026). Buttons keep their own black text. */
.nav-links a.btn, .nav-links a.btn[aria-current='page'],
.nav-drawer a.btn, .nav-drawer a.btn[aria-current='page'] { color: var(--on-accent); }

.nav-burger {
  display: none;
  color: var(--ink);
  width: 48px; height: 48px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-burger svg { stroke: var(--ink); }

.nav-drawer { display: none; }

/* DORMANT since 22nd Oct 2026: no page sets nav_overlay any more (Tank wanted
   the bar solid on The Show too). Kept so it can be switched back on with
   one line in a template.

   The Show page's nav floated over its full-bleed hero. It is still STICKY, not
   absolute -- the hero is pulled up underneath it instead, so the design is
   unchanged at the top of the page and the nav still sticks on the way down.
   Transparent only while the page is at rest at the top: the default is solid,
   so with JS off the nav is readable rather than invisible over a photo. */
.site-header--overlay.is-top { background: transparent; }
/* `~`, not `+`: the mobile nav drawer is a sibling sitting between the header
   and <main>, so the adjacent combinator matches nothing. The pull-up equals
   the header height, which puts the hero back where it was when the header was
   absolutely positioned. */
.site-header--overlay ~ main > .hero-bleed:first-child { margin-top: -105px; }
@media (max-width: 860px) {
  .site-header--overlay ~ main > .hero-bleed:first-child { margin-top: -73px; }
}

/* ------------------------------------------------------------ placeholders -- */
/* Dashed border, centred mono label. Real uploads replace them. */

.ph {
  background: var(--scratch-ph), #1a1a1a;
  border: 1px dashed var(--ph-border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--label); font-size: 12px; line-height: 1.5;
  color: var(--ph-text); text-align: center; padding: 16px;
}

.photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-frame { position: relative; overflow: hidden; background: #0d0d0d; }

/* ------------------------------------------------------------------- hero -- */

.hero {
  padding-block: 72px 120px;
  display: grid; grid-template-columns: minmax(0, 1fr) 560px;
  gap: 72px; align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
.hero-logo { width: min(520px, 100%); height: auto; display: block; margin-left: -24px; }
.hero h1 { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.02; max-width: 640px; }
.hero .lede { max-width: 560px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* Pasted-on, not boxed in: rotated, taped, with logo corner brackets. */
.hero-art { position: relative; height: 720px; }
.hero-art-inner {
  position: absolute; left: 10px; top: 20px; right: 10px; bottom: 20px;
  transform: rotate(-2deg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}
/* The slot macro drops a .ph or a .photo-frame in here; neither carries a
   height of its own, so without this the absolutely-positioned frame collapses
   to the height of its label. */
.hero-art-inner > .ph,
.hero-art-inner > .photo-frame { width: 100%; height: 100%; }

.hero-tape {
  position: absolute; left: 38%; top: 4px; width: 140px; height: 32px;
  transform: rotate(3deg); background: var(--tape); z-index: 3;
}
.bracket { position: absolute; width: 150px; height: 110px; z-index: 2; }
.bracket-tl { left: -22px; top: -14px; border-top: 7px solid var(--accent); border-left: 7px solid var(--accent); }
.bracket-br { right: -22px; bottom: -14px; border-bottom: 7px solid var(--accent); border-right: 7px solid var(--accent); }

/* ------------------------------------------------------------------ stats -- */

.stats {
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stats > div {
  padding: 40px 48px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.stats > div:last-child { border-right: 0; }
.stat-big { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.6vw, 36px); line-height: 1; }
.stat-small { font-size: 15px; color: var(--muted); }

/* ------------------------------------------------------------------ grids -- */

.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 48px; flex-wrap: wrap;
}
.section-head-copy { display: flex; flex-direction: column; gap: 16px; }

.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.event-card { display: flex; flex-direction: column; gap: 18px; }
.event-card .ph, .event-card .photo-frame { height: 360px; }

.member-card { display: flex; flex-direction: column; gap: 14px; }
.member-card .ph, .member-card .photo-frame { height: 400px; }
.member-name { font-family: var(--display); font-weight: 600; font-size: 26px; text-transform: uppercase; letter-spacing: 1px; }
.member-role { font-family: var(--label); font-size: clamp(13px, 0.28vw + 11.94px, 16px); letter-spacing: 2px; color: var(--muted); }

/* The feature list on the home Show band and mobile */
.feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; margin-top: 8px; }
.feature {
  display: flex; flex-direction: column; gap: 8px;
  border-top: 2px solid var(--ink); padding-top: 16px;
}
.feature-num { font-family: var(--label); font-size: clamp(12px, 0.56vw + 9.89px, 18px); font-weight: 600; letter-spacing: 2px; color: var(--accent-text); }
.feature-title { font-family: var(--display); font-weight: 600; font-size: 22px; text-transform: uppercase; letter-spacing: 1px; }
.feature-body { font-size: 15px; line-height: 1.55; color: var(--muted); }

/* --------------------------------------------------------- artists line-up -- */

.lineup {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: 18px; row-gap: 6px;
  border-top: 2px solid var(--inv-ink); border-bottom: 2px solid var(--inv-ink);
  padding: 28px 0;
}
.lineup-item { display: flex; align-items: baseline; gap: 18px; }
.lineup-name { font-family: var(--display); line-height: 1.05; text-transform: uppercase; overflow-wrap: anywhere; }
.lineup-slash { font-family: var(--display); font-size: 24px; color: var(--inv-muted); }
.lineup-item:last-child .lineup-slash { display: none; }

/* --------------------------------------------------------------- quotes --- */

.quote-card { margin: 0; padding: 40px; display: flex; flex-direction: column; gap: 28px; }
.quote-mark { font-family: var(--display); font-weight: 700; font-size: 64px; line-height: 0.6; color: var(--accent-text); }
.quote-card blockquote { margin: 0; font-size: 19px; line-height: 1.6; }
.quote-card figcaption { font-family: var(--label); font-size: clamp(13px, 0.28vw + 11.94px, 16px); letter-spacing: 1.5px; color: var(--muted); }

/* ----------------------------------------------------------------- gigs --- */

.gig-list { display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.gig-row {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) 240px 160px;
  align-items: center; gap: 24px; padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.gig-date { font-family: var(--display); font-weight: 600; font-size: 24px; color: var(--accent-text); }
.gig-venue { font-family: var(--display); font-weight: 600; font-size: 26px; text-transform: uppercase; }
.gig-town { font-size: 16px; color: var(--muted); }
.gig-row .link-underline { justify-self: end; }

/* ------------------------------------------------------------------- CTA --- */

.cta {
  background: var(--accent); color: var(--on-accent);
  padding-block: 128px;
  text-align: center;
}
.cta-inner { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.cta h2 { font-size: clamp(42px, 6.1vw, 88px); line-height: 0.95; }
.cta p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; max-width: 620px; }
.cta .btn { background: var(--on-accent); color: var(--accent); }
.cta .btn:hover { background: #1a1a1a; }
.cta-contact { font-family: var(--label); font-size: 15px; font-weight: 500; letter-spacing: 1px; }
.cta-contact a { color: var(--on-accent); }

.cta-split { padding-block: 120px; }
.split-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 48px; flex-wrap: wrap;
}
.cta-split.on-accent { background: var(--accent); color: var(--on-accent); }
.cta-split.on-accent .btn { background: var(--bg); color: var(--ink); }

/* ---------------------------------------------------------------- footer --- */

.site-footer {
  padding-block: 56px;
  border-top: 1px solid var(--line-2);
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
}
.site-footer img { width: 92px; height: 52px; display: block; }
.footer-links { display: flex; gap: 32px; font-family: var(--label); font-size: clamp(13px, 0.28vw + 11.94px, 16px); letter-spacing: 2px; }
.footer-links a { text-decoration: none; }
.footer-copy { font-family: var(--label); font-size: clamp(13px, 0.28vw + 11.94px, 16px); color: var(--muted); }

/* ------------------------------------------------------- full-bleed hero --- */

.hero-bleed { position: relative; min-height: 675px; display: flex; align-items: center; overflow: hidden; }
.hero-bleed-bg { position: absolute; inset: 0; background: var(--scratch-ph), #1a1a1a; }
.hero-bleed-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-bleed-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.hero-bleed-inner {
  position: relative; z-index: 2; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  text-align: center; padding-block: 35px 80px;
}
.hero-bleed-inner .lede { max-width: 680px; }
.hero-bleed-label { position: absolute; right: var(--pad); bottom: 36px; z-index: 2; font-family: var(--label); font-size: clamp(12px, 0.19vw + 11.30px, 14px); color: var(--muted); }

/* ------------------------------------------------------------ show pillars -- */

.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 96px 64px; }
.pillar { display: flex; flex-direction: column; gap: 24px; }
.pillar .ph, .pillar .photo-frame { height: 440px; }
.pillar-head { display: flex; align-items: baseline; gap: 16px; }
.pillar-num { font-family: var(--label); font-size: clamp(14px, 0.38vw + 12.59px, 18px); font-weight: 600; color: var(--accent-text); }
.pillar h2 { font-size: clamp(30px, 3.1vw, 44px); line-height: 1; }
.pillar p { font-size: 18px; line-height: 1.65; color: var(--muted-2); }

.tiers {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 3px solid #0b0b0b;
}
.tier { padding: 36px 32px 8px 0; display: flex; flex-direction: column; gap: 14px; }
.tier-label { font-family: var(--label); font-size: clamp(13px, 0.28vw + 11.94px, 16px); font-weight: 600; letter-spacing: 2px; color: #595959; }
.tier-title { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.4vw, 34px); text-transform: uppercase; line-height: 1.05; }
.tier p { font-size: 17px; line-height: 1.6; color: #3a3a3a; }

/* --------------------------------------------------------------- band page -- */

.page-head {
  padding-block: 120px 96px;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 64px; flex-wrap: wrap;
}
.page-head--ruled { border-bottom: 1px solid var(--line-2); }
.page-head-copy { display: flex; flex-direction: column; gap: 20px; }
.page-head p { font-size: 19px; line-height: 1.65; color: var(--muted-2); max-width: 520px; }
.page-head--stack { flex-direction: column; align-items: flex-start; padding-block: 104px 64px; }
.page-head--stack p { max-width: 640px; }

.bios { display: flex; flex-direction: column; gap: 96px; padding-block: 96px 120px; }
.bio { display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 72px; align-items: center; }
.bio .ph, .bio .photo-frame { height: 460px; }
.bio-copy { display: flex; flex-direction: column; gap: 18px; }
.bio-role { font-family: var(--label); font-size: clamp(14px, 0.19vw + 13.30px, 16px); font-weight: 600; letter-spacing: 3px; color: var(--accent-text); }
.bio h2 { font-size: clamp(34px, 4.6vw, 64px); }
.bio p { font-size: 19px; line-height: 1.7; color: var(--muted-2); max-width: 620px; }

/* ------------------------------------------------------------- artists page -- */

.filters { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding-bottom: 40px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: var(--label); font-size: clamp(13px, 0.09vw + 12.65px, 14px); letter-spacing: 2px; color: var(--muted-3); text-transform: uppercase; }
.field input, .field select, .field textarea {
  background: var(--field); border: 1px solid var(--field-border); color: var(--ink);
  font-family: var(--body); font-size: 16px; padding: 0 18px; height: 56px;
  border-radius: 0; width: 100%;
}
.field textarea { padding: 16px 18px; height: auto; resize: vertical; line-height: 1.55; }
.field input[type='date'] { color-scheme: dark; }
.field-search input { height: 52px; }
.field-search { width: min(420px, 100%); }

.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  height: 52px; padding: 0 22px; cursor: pointer;
  background: transparent; color: var(--ink); border: 1px solid var(--field-border);
  font-family: var(--label); font-size: clamp(13px, 0.19vw + 12.30px, 15px); font-weight: 500; letter-spacing: 2px;
  text-transform: uppercase;
}
.chip[aria-pressed='true'] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }

.artist-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; padding-bottom: 120px; }
.artist-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.artist {
  border-top: 2px solid var(--ink); padding: 18px 0 22px;
  display: flex; flex-direction: column; gap: 8px;
}
.artist-name { font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1.05; text-transform: uppercase; }
.artist-meta { font-family: var(--label); font-size: clamp(13px, 0.28vw + 11.94px, 16px); letter-spacing: 1px; color: var(--muted-3); }
.aside-card { padding: 36px; display: flex; flex-direction: column; gap: 18px; }
.aside-card h2, .aside-card .aside-title {
  font-family: var(--display); font-weight: 700; font-size: 32px;
  line-height: 1.05; text-transform: uppercase;
}
.aside-card p { font-size: 16px; line-height: 1.6; color: var(--muted-2); }
.aside-card .btn { text-align: center; font-size: 16px; padding: 16px 22px; }
.aside-card a.contact { font-family: var(--label); font-size: 17px; font-weight: 500; text-decoration: none; }

.no-results { color: var(--muted); font-family: var(--label); font-size: 13px; letter-spacing: 1px; padding: 24px 0; }

/* -------------------------------------------------------------- gallery --- */

.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-bottom: 112px; }
.gallery-hero { grid-column: span 2; }
.gallery-hero .ph, .gallery-hero .photo-frame { height: 560px; }
.gallery-second .ph, .gallery-second .photo-frame { height: 560px; }
.gallery-tile { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.gallery-tile .ph, .gallery-tile .photo-frame { height: 340px; }
.gallery-tile figcaption { font-family: var(--label); font-size: clamp(13px, 0.09vw + 12.65px, 14px); letter-spacing: 1px; color: var(--muted-3); }

.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.video { display: flex; flex-direction: column; gap: 14px; }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--scratch-ph), #1a1a1a; border: 1px dashed var(--ph-border); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-link { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.video-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.play {
  position: relative; width: 84px; height: 84px; border-radius: 50%;
  background: var(--accent); display: flex; align-items: center; justify-content: center;
}
.video-title { font-family: var(--display); font-weight: 600; font-size: 22px; text-transform: uppercase; }

/* ------------------------------------------------------------------ FAQ --- */

.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; align-items: start; padding-bottom: 120px; }
.faq-list { display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; min-height: 84px; padding: 20px 0;
  background: transparent; border: 0; cursor: pointer; color: var(--ink);
  display: flex; align-items: center; gap: 24px; text-align: left;
}
.faq-cat { width: 120px; flex-shrink: 0; font-family: var(--label); font-size: clamp(12px, 0.19vw + 11.30px, 14px); letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }
.faq-text { flex-grow: 1; font-family: var(--display); font-weight: 600; font-size: clamp(19px, 1.9vw, 26px); line-height: 1.15; text-transform: uppercase; }
.faq-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border: 2px solid var(--ink); background: transparent; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 24px; font-weight: 600; line-height: 1;
}
.faq-q[aria-expanded='true'] .faq-icon { background: var(--ink); color: var(--bg); }
.faq-a { padding: 0 64px 28px 144px; font-size: 18px; line-height: 1.7; color: var(--muted-2); }

/* ----------------------------------------------------------------- book --- */

.book-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 80px; align-items: start; padding-block: 96px 120px; }
.book-form { display: flex; flex-direction: column; gap: 40px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.span-2 { grid-column: span 2; }
.field-error { font-family: var(--label); font-size: clamp(13px, 0.09vw + 12.65px, 14px); letter-spacing: 1px; color: #ffffff; background: #3a3a3a; padding: 6px 10px; }
.field input[aria-invalid='true'], .field textarea[aria-invalid='true'] { border-color: #ffffff; }
.form-note { font-size: 14px; color: var(--muted); }

.steps { display: flex; flex-direction: column; gap: 22px; }
.step { display: flex; gap: 18px; }
.step-num {
  width: 36px; height: 36px; flex-shrink: 0;
  border: 2px solid var(--accent); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--label); font-size: 14px; font-weight: 600;
}
.step-copy { display: flex; flex-direction: column; gap: 4px; }
.step-title { font-family: var(--display); font-weight: 600; font-size: 19px; text-transform: uppercase; }
.step-body { font-size: 15px; line-height: 1.55; color: var(--muted-2); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.thanks { padding-block: 140px 160px; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; max-width: 720px; }

/* --------------------------------------------------------------- mobile --- */

@media (max-width: 1100px) {
  :root { --pad: 40px; }
  .hero { grid-template-columns: 1fr; gap: 40px; padding-block: 40px 80px; }
  .hero-art { height: 520px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars { grid-template-columns: 1fr; gap: 56px; }
  .bio { grid-template-columns: 1fr; gap: 28px; }
  .bio .ph, .bio .photo-frame { height: 380px; }
  .artist-layout, .faq-layout, .book-layout { grid-template-columns: 1fr; gap: 40px; }
  .artist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gig-row { grid-template-columns: 150px minmax(0, 1fr) auto; }
  .gig-row .link-underline { grid-column: 1 / -1; justify-self: start; }
  .tiers { grid-template-columns: 1fr; }
  .tier { padding: 28px 0 8px; border-top: 1px solid rgba(0,0,0,0.2); }
  .tiers .tier:first-child { border-top: 0; }
}

@media (max-width: 860px) {
  .nav { height: 72px; }
  .nav-logo img { width: 72px; height: 40px; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }

  .nav-drawer {
    display: block; position: fixed; inset: 0; z-index: 30;
    background: var(--bg);
    padding: 24px 20px 40px;
    overflow-y: auto;
  }
  .nav-drawer[hidden] { display: none !important; }
  .nav-drawer-top { display: flex; justify-content: space-between; align-items: center; height: 48px; }
  .nav-drawer-close { width: 48px; height: 48px; background: transparent; border: 0; color: var(--ink); font-size: 28px; cursor: pointer; line-height: 1; }
  .nav-drawer nav { display: flex; flex-direction: column; gap: 4px; margin-top: 32px; }
  .nav-drawer nav a {
    font-family: var(--display); font-weight: 600; font-size: 30px;
    text-transform: uppercase; text-decoration: none; letter-spacing: 1px;
    padding: 14px 0; border-bottom: 1px solid var(--line);
  }
  .nav-drawer .btn { margin-top: 28px; width: 100%; }

  :root { --pad: 20px; }
  .section { padding-block: 72px; }
  .section-tight { padding-block: 56px; }
  .cta, .cta-split { padding-block: 72px; }
  .page-head, .page-head--stack { padding-block: 56px 40px; gap: 28px; }
  .bios { padding-block: 56px 72px; gap: 56px; }
  .book-layout { padding-block: 48px 72px; }

  .hero-logo { width: min(300px, 100%); margin-left: 0; }
  .hero-art { height: 420px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .bracket { width: 96px; height: 70px; border-width: 5px !important; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div { padding: 24px 20px; border-bottom: 1px solid var(--line); }
  .stats > div:last-child { grid-column: span 2; border-right: 0; border-bottom: 0; }

  .grid-4, .grid-3, .grid-2, .form-grid, .video-grid { grid-template-columns: 1fr; }
  .feature-list { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
  .event-card { flex-direction: row; align-items: center; gap: 16px; }
  .event-card .ph, .event-card .photo-frame { width: 96px; height: 96px; flex-shrink: 0; }
  .event-card h3 { font-size: 20px; }

  .member-card .ph, .member-card .photo-frame { height: 190px; }
  .grid-4.members { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

  .artist-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-hero { grid-column: span 1; }
  .gallery-hero .ph, .gallery-hero .photo-frame,
  .gallery-second .ph, .gallery-second .photo-frame { height: 300px; }
  .gallery-tile .ph, .gallery-tile .photo-frame { height: 260px; }

  .gig-row { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  .faq-q { gap: 12px; flex-wrap: wrap; }
  .faq-cat { width: 100%; order: -1; }
  .faq-a { padding: 0 0 24px; }

  .site-footer { flex-direction: column; align-items: center; gap: 16px; padding-block: 36px; }
  .hero-bleed { min-height: 567px; }
  .hero-bleed-inner { padding-block: 37px 60px; }
  .hero-bleed-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .hero-art-inner { transform: none; }
}

/* ------------------------------------------------- signed-in edit affordance -- */
/* Shown only to a signed-in band member, so an ordinary visitor never sees it.
   Sits opposite the nginx-injected "Tankway Tools" pill, which is bottom-LEFT. */

.edit-wording {
  position: fixed; z-index: 25;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--label); font-size: 12px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.edit-wording:hover { background: #ffffff; color: var(--on-accent); }

/* Footer "where we play" line: plain text the band edits in Admin > Wording
   (Every page). It names the towns for local search, so it stays real text. */
.footer-area {
  margin: 18px 0 0; max-width: 760px;
  font-size: 14px; line-height: 1.6; color: var(--muted-3, #9a9a9a);
}

@media (max-width: 860px) {
  .footer-area { text-align: center; margin-left: auto; margin-right: auto; }
}

/* Gig guide + a single gig's page */
a.gig-row { color: inherit; text-decoration: none; }
a.gig-row:hover .gig-venue, a.gig-row:focus-visible .gig-venue { text-decoration: underline; text-underline-offset: 5px; }
.gig-list--past .gig-date { color: var(--muted); font-size: 20px; }
.gigs-empty { max-width: 560px; }
.section-sub { font-family: var(--display); font-size: clamp(28px, 3vw, 40px); text-transform: uppercase; margin: 88px 0 24px; }
.gig-page { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; padding-bottom: 104px; }
.gig-facts { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px 24px; margin: 0; font-size: 19px; line-height: 1.55; }
.gig-facts dt { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.gig-facts dd { margin: 0; }
.gig-actions { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.gig-actions .btn { text-align: center; }
.gig-actions .link-underline { align-self: flex-start; margin-top: 6px; }
@media (max-width: 860px) {
  .gig-page { grid-template-columns: 1fr; gap: 28px; }
  .gig-facts { grid-template-columns: 1fr; gap: 2px; }
  .gig-facts dd { margin-bottom: 14px; }
}

/* SEO Phase 1: footer links, service pages, Where we play */
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px; }
.footer-nav a { font-family: var(--display); font-size: 14px; letter-spacing: 1.5px; color: var(--muted-3, #9a9a9a); text-decoration: none; }
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--ink); text-decoration: underline; }
.event-more { display: inline-block; margin-top: 14px; }
.service-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-block: 96px 72px; }
.service-head .lede { max-width: 560px; }
.service-photo .ph, .service-photo .photo-frame { height: 440px; }
.service-points { gap: 40px; padding-block: 24px 72px; border-top: 1px solid var(--line); }
.service-point-title { font-family: var(--display); font-size: 26px; text-transform: uppercase; margin: 24px 0 10px; }
.service-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; padding-bottom: 72px; }
.service-quotes blockquote { margin: 0; font-size: 19px; line-height: 1.55; }
.service-quotes figcaption { color: var(--muted); }
.service-faqs { display: grid; gap: 28px; max-width: 820px; padding-bottom: 104px; }
.service-faq-q { font-family: var(--display); font-size: 22px; text-transform: uppercase; margin: 0 0 8px; }
.region { padding-block: 8px 24px; border-top: 1px solid var(--line); }
.region .section-sub { margin-top: 40px; }
.region-body { font-size: 19px; line-height: 1.6; max-width: 720px; color: var(--muted-2); }
@media (max-width: 860px) {
  .service-head { grid-template-columns: 1fr; gap: 32px; padding-block: 56px 48px; }
  .service-photo .ph, .service-photo .photo-frame { height: 260px; }
  .footer-nav { justify-content: center; }
}
.service-head h1 { font-size: clamp(40px, 5vw, 76px); line-height: 1.02; }

/* ------------------------------------------------ tablet band (600-860px) -- */
/* Layout pass 22nd Oct 2026: below 860px every grid fell to one column, so a tablet got
   the phone layout stretched wide (the gallery was 14 full-width photos, ~4,000px).
   Phones (<600px) keep one column. An odd last item spans both columns. */
@media (min-width: 600px) and (max-width: 860px) {
  .grid-4, .grid-3, .grid-2, .video-grid, .feature-list,
  .gallery-grid, .artist-grid, .pillars, .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars { gap: 56px 32px; }
  .grid-4 > :last-child:nth-child(odd), .grid-3 > :last-child:nth-child(odd),
  .tiers > :last-child:nth-child(odd), .pillars > :last-child:nth-child(odd),
  .feature-list > :last-child:nth-child(odd) { grid-column: span 2; }
  .gallery-hero, .gallery-second { grid-column: span 2; }
  .gallery-tile .ph, .gallery-tile .photo-frame { height: 240px; }
}

/* -------------------------------------------------------- tap targets -- */
/* Small text links get an invisible hit area of 44px or more (Apple/Google guidance) without
   changing how they look. Layout pass 22nd Oct 2026. */
.link-underline, .footer-links a, .footer-nav a, .cta-contact a, .aside-card a.contact { position: relative; }
.link-underline::before, .footer-links a::before, .footer-nav a::before, .cta-contact a::before, .aside-card a.contact::before {
  content: ""; position: absolute; left: -6px; right: -6px; top: 50%;
  height: 44px; transform: translateY(-50%);
}
@media (max-width: 860px) {
  /* Footer link rows sit 44px apart so neighbouring hit areas don't overlap. */
  .footer-nav { row-gap: 22px; }
  /* The hero's corner brackets sat 22px outside the photo, 2px past a phone's 20px gutter,
     which made the home page scroll sideways. Inside the gutter now; same look. */
  .bracket-tl { left: -14px; top: -10px; }
  .bracket-br { right: -14px; bottom: -10px; }
}