/* The CJP Band — site styles.
   Shared by index.html, press.html and privacy.html so the three stay in step.
   Fonts are self-hosted (see the @font-face rules below): rendering text makes
   no request to Google or anyone else, so the page can honestly say nothing
   third-party is fetched until a visitor asks for it. */

/* ---------- fonts, self-hosted ----------
   Served from this site, so rendering text makes no request to Google (or
   anyone else) and the page is honest when it says nothing third-party is
   fetched until a visitor asks for it. Latin + Latin-ext only; Fraunces and
   Hanken Grotesk are variable files, Space Mono ships one per weight. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600 800;font-display:swap;src:url(fonts/fraunces-latin-2.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600 800;font-display:swap;src:url(fonts/fraunces-latin-ext-1.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/hanken-grotesk-latin-4.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/hanken-grotesk-latin-ext-3.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/space-mono-latin-6.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/space-mono-latin-8.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/space-mono-latin-ext-5.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/space-mono-latin-ext-7.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* ============================================================
   THEME TOKENS — the Melosuite family: warm black + cream,
   sharp corners, structural hairlines, no shadows.
   Gold is a placeholder accent — one token to re-skin.
   ============================================================ */
:root{
  --bg:#14100B;
  --bg-raise:#1E1812;
  --bg-sink:#0E0A06;
  --ink:#F4E9DA;
  --ink-soft:#C9B69E;
  --ink-faint:#9A8769;
  --line:#33291C;
  --line-strong:#5A4A30;
  --gold:#DFAE54;
  --gold-ink:#F0C877;
  --gold-dim:#3A2F1B;
  --warn:#EE8064;
  --line-form:#7A6540;   /* form borders: 3:1 against the field fill */
  color-scheme:dark;
  font-size:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.serif{font-family:'Fraunces','Cooper Black','Cooper Std',Georgia,serif;font-optical-sizing:auto;font-variation-settings:"SOFT" 100,"WONK" 0}
.mono{font-family:'Space Mono',ui-monospace,Menlo,monospace}
img{display:block;max-width:100%}
a{color:var(--gold-ink)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
.wrap{max-width:1080px;margin-inline:auto;padding-inline:24px}

/* ---------- header / nav ---------- */
header.site{
  position:sticky;top:0;z-index:20;
  background:var(--bg);
  border-bottom:1px solid var(--line-strong);
}
.navbar{
  max-width:1080px;margin-inline:auto;padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.wordmark{display:block;flex:none;text-decoration:none}
.wordmark img{display:block;height:42px;width:auto}
nav.links{display:flex;gap:22px;flex-wrap:wrap}
nav.links a{
  font:700 12px/1 'Space Mono',monospace;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);
  /* 40px tall tap target; the hover underline is drawn with text-decoration so the padding doesn't push it away */
  padding:14px 0;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;text-decoration-thickness:1px;
}
nav.links a:hover{color:var(--gold-ink);text-decoration-color:var(--gold-dim)}
/* phones: logo on top, section links in one swipeable row (seven links no longer wrap to three lines) */
@media(max-width:640px){
  .navbar{flex-direction:column;align-items:flex-start;gap:4px;padding:12px 16px 0}
  .wordmark img{height:34px}
  nav.links{flex-wrap:nowrap;overflow-x:auto;width:100%;gap:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  nav.links::-webkit-scrollbar{display:none}
  nav.links a{flex:none}
  nav.links{padding-right:40px}
  /* the fade only appears while there is more to scroll to, so the last link
     (Contact) is never left permanently dimmed */
  nav.links.more{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  section{scroll-margin-top:112px}
}

/* ---------- sections ---------- */
section{padding:76px 0;scroll-margin-top:84px}
section + section{border-top:1px solid var(--line)}
.kicker{
  font:12px/1 'Space Mono',monospace;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:14px;
}
h2{font-size:clamp(32px,4.4vw,48px);line-height:1.05;font-weight:800;margin-bottom:14px}
.lede{font-size:17px;color:var(--ink-soft);max-width:60ch;margin-bottom:26px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media(max-width:860px){.cols{grid-template-columns:1fr;gap:32px}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:700 12px/1 'Space Mono',monospace;
  letter-spacing:.09em;text-transform:uppercase;
  padding:14px 22px;
  border:1px solid var(--line-strong);
  background:transparent;color:var(--ink);
  cursor:pointer;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.btn.primary{background:var(--gold);border-color:var(--gold);color:#1A1308}
.btn:hover{border-color:var(--gold)}
.btn.primary:hover{filter:brightness(1.05)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:110px 0 120px;border-bottom:1px solid var(--line)}
/* Hero media — two different photos, art-directed per device.
   Desktop: hero-192-* — the landscape shot, unmirrored (flipping it puts the
   amp's Fender nameplate into reverse, and it read no better). Its frame is
   1.95:1 against a hero box that runs from about 1.3:1 on a small laptop to
   3.5:1 on an ultrawide, so the crop is steered rather than left to chance:
   above ~1360px the photo fills the width and object-position Y (20%) sets
   how much of the stage drops off the bottom, which keeps every head in
   frame; below that the box is squarer than the photo, so the photo fills the
   height and X (24%) holds the cap player and the singer while the guitarist
   falls off the right. No crop suits every shape, so each range gets the
   framing it needs.
   Phone:   hero-phone-band.webp — the same Shindig shot, cropped 3:2 from
   just below the festival banner so the branding is out without retouching,
   and wide enough to keep all four on stage (Christopher, the drummer, the
   singer and Geoff). Shown as a panel in normal flow, fading into the page
   colour at its foot, with the wordmark on the fade over the crowd.
   The scrim keeps the cream text readable over either. */
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--bg)}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:saturate(.9) brightness(.58)}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,16,11,.66) 0%,rgba(20,16,11,.30) 52%,rgba(20,16,11,.93) 100%);
}
.hero-inner{max-width:900px;position:relative;z-index:1}
.hero .band-name{margin:0;line-height:0}
.hero .band-name img{display:block;width:min(620px,88vw);height:auto;opacity:.94}
.hero .tagline{font-size:21px;margin-top:26px;color:var(--ink-soft);font-style:italic}
.hero .tagline b{color:var(--gold-ink);font-weight:600}
.hero .proof{margin-top:30px;display:flex;flex-wrap:wrap;gap:8px 26px}
.hero .proof span{font:12px/1.5 'Space Mono',monospace;color:var(--ink-faint);letter-spacing:.05em;text-transform:uppercase}
.hero .proof span b{color:var(--ink-soft);font-weight:400}
@media(max-width:1360px) and (min-width:641px){.hero-photo{object-position:24% center}}
/* Phone hero — "the seam". An 88vw wordmark is too tall to overlay on a
   phone-sized photo without covering someone's face, so the photo is a panel
   in normal flow at near full brightness, fading to the page colour at its
   foot, and the wordmark is pulled up onto that fade — over the crowd, below
   every face — with everything else on solid ground. All sizes are in vw, so
   the composition is identical at every phone width.
   3/2 matches the crop, which is the only shape that holds all four of the
   band once the banner is cropped off. Faces end at about 31% of the panel;
   margin-top -22vw puts the top of the mark at about 67%, so there is a clear
   gap, the band shows down to the instruments, and the buttons stay above the
   fold at 360x640, 390x700 and 430x760. Don't push the overlap past about
   -34vw or the mark starts to climb onto the faces. */
@media(max-width:640px){
  .hero{padding:0 0 56px}
  .hero-media{position:relative;inset:auto;aspect-ratio:3/2}
  .hero-photo{object-position:center;filter:saturate(.95) brightness(.92)}
  .hero-media::after{background:linear-gradient(180deg,
    rgba(20,16,11,.22) 0%,
    rgba(20,16,11,0) 16%,
    rgba(20,16,11,0) 50%,
    rgba(20,16,11,.72) 76%,
    var(--bg) 100%)}
  .hero-inner{margin-top:-22vw}
}

/* Desktop hero — the same "seam" idea, at 641px and up. Chris's note (9 Oct):
   the computer version still had the wordmark across the band, so the photo
   becomes a wide panel in normal flow and the wordmark is pulled up onto its
   faded foot, below every face. The panel is deliberately shallow — a taller
   one reads better but pushes Book the band below the fold on a 1180x780
   window, and booking is the point of the page. */
@media(min-width:641px){
  .hero{padding:0 0 56px}
  /* height, not aspect-ratio: with aspect-ratio set, max-height shrinks the
     WIDTH to preserve the ratio, which strands the panel on the left at 1920. */
  .hero-media{position:relative;inset:auto;height:min(46vh,430px)}
  .hero-photo{object-position:center 18%}
  .hero-media::after{background:linear-gradient(180deg,
    rgba(20,16,11,.38) 0%,
    rgba(20,16,11,0) 22%,
    rgba(20,16,11,0) 46%,
    rgba(20,16,11,.85) 74%,
    var(--bg) 88%)}
  /* Only a shallow overlap: -150px reached the band at 1920, where a fixed
     panel height crops the photo to a thinner slice and the heads sit lower.
     -40px keeps the wordmark on the part of the panel that has already faded
     to the page colour, so it never lands on the photograph at any width. */
  .hero-inner{margin-top:-40px}
}

/* ---------- rules ---------- */
.rule{height:1px;background:var(--line-strong);border:0;margin:26px 0}
.small-note{font:12px/1.7 'Space Mono',monospace;color:var(--ink-faint);margin-top:14px}

/* ---------- releases ---------- */
.sleeves{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:4px}
@media(max-width:860px){.sleeves{grid-template-columns:repeat(2,1fr);gap:18px}}
.rel-art{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--line);background:var(--bg-sink)}
.rel{display:flex;flex-direction:column}
.rel h3{font-size:18px;font-weight:600;line-height:1.25;margin-top:12px}
.rel .play{margin-top:auto}
.rel h3 .feat{display:block;font-size:14px;font-weight:400;color:var(--ink-soft);margin-top:2px}
.rel .meta{font:12px/1.5 'Space Mono',monospace;color:var(--ink-faint);margin-top:4px;letter-spacing:.02em}
.links{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:2px}
/* 40px tall tap targets (WCAG 2.5.8); underline via text-decoration so it stays under the text */
.links a{font:700 12px/1 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;padding:14px 0;text-decoration:underline;text-decoration-color:var(--gold-dim);text-underline-offset:5px;text-decoration-thickness:1px}
.links a:hover{text-decoration-color:var(--gold)}
.links a.off{color:var(--ink-faint);text-decoration-color:transparent;cursor:pointer}
.card{background:var(--bg-raise);border:1px solid var(--line);padding:22px}
/* Hear it: the Bandcamp iframe is injected only on click, so no third-party
   request — and no cookie — happens unless the visitor asks for one.
   The player opens in a bar pinned to the bottom of the window, and the
   button itself never leaves the page, so pressing Hear it cannot reflow
   the grid or move any of the other buttons. */
.play{display:inline-flex;align-items:center;gap:7px;width:100%;margin-top:10px;
  font:700 12px/1 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;
  padding:13px 12px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.play:hover{border-color:var(--gold);color:var(--gold-ink)}
.play .tri{font-size:11px;color:var(--gold-ink)}
.play[aria-expanded="true"]{border-color:var(--gold);color:var(--gold-ink);background:rgba(223,174,84,.09)}
.player iframe{display:block;width:100%;height:42px;border:0;background:var(--bg-sink)}
.nowbar{position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--bg-raise);border-top:1px solid var(--line-strong);
  box-shadow:0 -10px 30px rgba(0,0,0,.55)}
.nowbar[hidden]{display:none}
.nowbar-inner{max-width:760px;margin-inline:auto;padding:10px 24px;display:flex;align-items:center;gap:12px}
.nowbar-kicker{flex:none;font:700 11px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.nowbar .player{flex:1;min-width:0;border:1px solid var(--line-strong)}
.nowbar-close{flex:none;width:42px;height:42px;border:1px solid var(--line-strong);background:transparent;
  color:var(--ink-soft);cursor:pointer;font-size:15px;line-height:1;-webkit-tap-highlight-color:transparent}
.nowbar-close:hover{border-color:var(--gold);color:var(--gold-ink)}
@media(max-width:640px){.nowbar-kicker{display:none}.nowbar-inner{padding:10px 16px}}
/* keep the toast clear of the player bar */
.has-nowbar .toast{bottom:78px}
.album-card{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.album-card h3{font-size:24px;line-height:1.15}
.album-card .meta{font:12px/1.6 'Space Mono',monospace;color:var(--ink-faint);margin-top:6px;letter-spacing:.02em}

/* ---------- watch ---------- */
/* Facade cards: the poster is ours, the YouTube iframe is built on click, so
   the page still fetches nothing from YouTube until someone asks for a video. */
.watch-group + .watch-group{margin-top:36px}
.watch-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 18px;flex-wrap:wrap;margin-bottom:14px}
.watch-head h3{font-size:20px;font-weight:600}
.watch-head .meta{font:12px/1.5 'Space Mono',monospace;color:var(--ink-faint);letter-spacing:.02em}
.videos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* three films in a two-column grid strands one on a row of its own, so on
   phones they become a swipe row instead — which is how upright films get
   watched anyway */
@media(max-width:700px){
  .videos{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6px}
  .videos::-webkit-scrollbar{display:none}
  .video{flex:0 0 62%;scroll-snap-align:start}
}
.video{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line-strong);
  background:var(--bg-sink);cursor:pointer;overflow:hidden;text-align:left;-webkit-tap-highlight-color:transparent}
/* The films are shot upright on a phone, so the frame is 9:16. A 16:9 box
   pillarboxes them with black bars down each side the moment they play. */
.v-frame{position:relative;display:block;aspect-ratio:9/16;background:#000;overflow:hidden}
.v-frame img,.v-frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;object-fit:cover;display:block}
.video img{opacity:.86;transition:opacity .2s ease}
.video:hover img{opacity:1}
.video .v-play{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.video .v-play i{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;
  background:rgba(20,16,11,.74);border:1px solid var(--gold);color:var(--gold-ink);font-size:15px;font-style:normal;padding-left:3px}
.video:hover .v-play i,.video:focus-visible .v-play i{background:var(--gold);border-color:var(--gold);color:#1A1308}
.video .v-title{display:block;padding:11px 12px;font:700 12px/1.4 'Space Mono',monospace;letter-spacing:.03em;color:var(--ink-soft)}
.video.on img,.video.on .v-play{display:none}
.watch-more{margin-top:26px;font-size:15px;color:var(--ink-soft)}
.played-by{margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.played-by p{font-size:15px;color:var(--ink-soft);max-width:78ch}
.played-by b{color:var(--ink);font-weight:600}

/* ---------- gigs ---------- */
.gig{padding:20px 0;border-bottom:1px solid var(--line)}
/* only the very last gig loses its rule — the rows are split between #gig-rows
   and the card, so :last-of-type stopped a line appearing before the last one */
.card > .gig:last-child{border-bottom:0}
.gig-date{display:inline-block;font:12px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--bg);background:var(--gold);padding:5px 10px;margin-bottom:10px}
.gig.tbc .gig-date{background:var(--warn);color:#1A0A05}
.gig h3{font-size:21px;font-weight:600;line-height:1.2}
.gig .meta{font-size:15px;color:var(--ink-soft);margin-top:4px}
.more-dates{font-size:15px;color:var(--ink-soft);margin-top:18px}
.gig .note{font:12px/1.5 'Space Mono',monospace;color:var(--ink-faint);margin-top:9px}
/* A gig with the promoter's poster: thumbnail on the left, text beside it.
   Tapping the poster opens it full size, since at thumbnail size it can't be
   read. Smaller on phones so the venue name doesn't wrap to four lines. */
.gig.has-poster{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;align-items:start}
.gig-poster{display:block;line-height:0;border:1px solid var(--line-strong);background:var(--bg-sink)}
.gig-poster img{display:block;width:100%;height:auto}
.gig-poster:hover{border-color:var(--gold)}
.gig .gig-address{font-size:14px;color:var(--ink-faint)}
/* poster viewer (a native <dialog>): the poster fills the screen over a dark veil */
.lightbox{padding:0;border:0;background:transparent;max-width:none;max-height:none;margin:auto;overflow:visible}
.lightbox::backdrop{background:rgba(10,8,5,.88)}
.lightbox img{display:block;width:auto;height:auto;max-width:min(92vw,720px);max-height:88vh;max-height:88dvh;
  border:1px solid var(--line-strong);background:var(--bg-sink);cursor:zoom-out}
.lightbox-close{position:fixed;top:14px;right:14px;width:44px;height:44px;border:1px solid var(--line-strong);
  background:var(--bg);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.lightbox-close:hover{border-color:var(--gold);color:var(--gold-ink)}
.lightbox-open{overflow:hidden}
.gig-poster{cursor:zoom-in}
/* phones: the poster sits beside the date and title only, and the details,
   address and ticket link run the full width underneath, so they aren't
   squeezed into a narrow column beside it */
@media(max-width:640px){
  .gig.has-poster{grid-template-columns:88px minmax(0,1fr);gap:0 14px}
  .gig.has-poster .gig-body{display:contents}
  .gig.has-poster .gig-poster{grid-column:1;grid-row:1 / span 2}
  .gig.has-poster .gig-date{grid-column:2;justify-self:start;align-self:start}
  .gig.has-poster h3{grid-column:2}
  .gig.has-poster .meta,.gig.has-poster .links{grid-column:1 / -1}
  .gig.has-poster .meta:not(.gig-address){margin-top:14px}
}

/* ---------- gallery ---------- */
/* dense packing so a full-width frame never leaves a hole beside a single
   square when the grid drops to two columns on a phone */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;grid-auto-flow:dense}
@media(max-width:720px){.gallery{grid-template-columns:repeat(2,1fr)}}
.gallery .tile{position:relative;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line-strong);background:var(--bg-sink)}
.gallery .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* the band shot runs the full width of the grid: a square crop would take the
   two ends off the line-up. 5:2 on desktop, 3:2 on phones where it spans 2. */
.gallery .tile.feature{grid-column:span 3;aspect-ratio:5/2}
@media(max-width:720px){.gallery .tile.feature{grid-column:span 2;aspect-ratio:3/2}}

/* ---------- forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font:12px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;background:var(--bg-sink);
  border:1px solid var(--line-form);color:var(--ink);
  font:15px 'Hanken Grotesk',system-ui,sans-serif;
  padding:12px;border-radius:0;-webkit-appearance:none;appearance:none;
}
.field textarea{min-height:100px;resize:vertical}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--gold-ink) 50%),linear-gradient(135deg,var(--gold-ink) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px;background-repeat:no-repeat;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hint{font-size:12px;color:var(--ink-faint);margin-top:6px}

/* newsletter */
.newsletter{display:flex;gap:10px;flex-wrap:wrap}
.newsletter input{
  flex:1;min-width:220px;background:var(--bg-sink);
  border:1px solid var(--line-form);color:var(--ink);
  font:15px 'Hanken Grotesk',system-ui,sans-serif;
  padding:12px;border-radius:0;-webkit-appearance:none;appearance:none;
}
.newsletter input::placeholder{color:var(--ink-faint)}
.newsletter input:focus{border-color:var(--gold)}

/* ---------- socials ---------- */
.socials{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:8px;max-width:560px}
.socials a{flex:1;min-width:0;background:var(--bg-raise);color:var(--ink-soft);text-decoration:none;text-align:center;font:11px 'Space Mono',monospace;padding:16px 4px;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis}
.socials a b{display:block;font-size:16px;margin-bottom:5px}
.socials a:hover{background:var(--gold-dim);color:var(--gold-ink)}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line-strong);padding:34px 0 44px}
.footer-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:baseline}
footer p{font:12px/1.9 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
/* the one link in the footer that sends Phil an enquiry — gold so it reads as an action */
footer .footer-cta{color:var(--gold-ink)}

/* ---------- light section (About) — same tokens, cream ground ---------- */
section.light{
  background:#F1E6D3;color:var(--ink);
  --ink:#1A140C;--ink-soft:#4B3C28;--ink-faint:#6B5739;
  --line:#D8C7A9;--line-strong:#BFA984;--bg-raise:#E9DCC4;
  --gold-ink:#8B5B10;--gold-dim:#D9B87A;
}
section.light + section{border-top:0}
.bio{max-width:68ch}
.slim{padding:52px 0}

/* toast */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:26px;
  background:var(--gold);color:#1A1308;
  font:700 12px/1.4 'Space Mono',monospace;letter-spacing:.03em;
  padding:13px 18px;max-width:min(560px,calc(100vw - 40px));text-align:center;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
  z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.toast.show{opacity:1}
/* ---------- press / EPK and privacy pages ---------- */
.page-head{padding:60px 0 34px;border-bottom:1px solid var(--line-strong)}
.page-head h1{font-size:clamp(32px,4.4vw,46px);line-height:1.05;font-weight:800;margin-bottom:14px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:9px 26px}
.facts dt{font:12px/1.7 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.facts dd{font-size:15px;color:var(--ink-soft)}
@media(max-width:600px){.facts{grid-template-columns:1fr;gap:0}.facts dt{margin-top:14px}.facts dd{margin-bottom:2px}}
.bio-block{border-left:2px solid var(--gold-dim);padding-left:18px;margin:0 0 26px}
.bio-block .kicker{margin-bottom:8px}
.bio-block p{font-size:16px;color:var(--ink-soft);max-width:74ch}
.copyline{font:12px/1.6 'Space Mono',monospace;color:var(--ink-faint);margin-top:12px}
.rel-table{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
.rel-table th,.rel-table td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-soft)}
.rel-table th{font:12px/1.4 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:400}
.rel-table td:first-child{color:var(--gold-ink);white-space:nowrap}
.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:860px){.photo-grid{grid-template-columns:repeat(2,1fr)}}
.photo-grid a{display:block;border:1px solid var(--line-strong);background:var(--bg-sink)}
.photo-grid img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;opacity:.92}
.photo-grid a:hover img{opacity:1}
.prose{max-width:74ch}
.prose h2{margin-top:40px}
.prose h2:first-child{margin-top:0}
.prose p{font-size:16px;color:var(--ink-soft);margin-bottom:14px}
.prose ul{margin:0 0 14px 20px;font-size:16px;color:var(--ink-soft)}
.prose li{margin-bottom:7px}
.prose strong{color:var(--ink)}

/* ---------- launch-show list ---------- */
.launch-list{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.launch-list > label{display:block;font:12px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
.launch-list .hint{margin-top:8px}

/* ---------- interactive sleeves ---------- */
/* The artwork is a button: pressing it plays or stops the record, exactly as
   the Hear it button does. While a record is playing a small disc turns in the
   corner and the sleeve takes a gold ring, so it is obvious which one is on. */
.rel-art-btn{position:relative;display:block;width:100%;padding:0;border:0;background:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.rel-art-btn .rel-art{transition:transform .2s ease,filter .2s ease}
.rel-art-btn:hover .rel-art{filter:brightness(1.08)}
.rel.playing .rel-art-btn .rel-art{outline:2px solid var(--gold);outline-offset:-2px;transform:scale(.96)}
.rel-art-btn .disc{position:absolute;right:9px;bottom:9px;width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--gold) 0 20%,#17120C 20% 33%,#2A2116 33% 60%,#17120C 60% 100%);
  border:1px solid var(--line-strong);opacity:0;transform:scale(.8);
  transition:opacity .25s ease,transform .25s ease}
/* a mark off-centre: a concentric gradient looks identical at every angle, so
   without this the rotation is invisible */
.rel-art-btn .disc::after{content:"";position:absolute;left:50%;top:5px;width:5px;height:5px;
  margin-left:-2.5px;border-radius:50%;background:var(--gold)}
@media(max-width:560px){
  .rel-art-btn .disc{width:30px;height:30px;right:6px;bottom:6px}
  .rel-art-btn .disc::after{width:4px;height:4px;margin-left:-2px;top:4px}
}
.rel.playing .rel-art-btn .disc{opacity:1;transform:scale(1)}
@media(prefers-reduced-motion:no-preference){
  .rel.playing .rel-art-btn .disc{animation:discspin 3.6s linear infinite}
}
@keyframes discspin{from{transform:scale(1) rotate(0)}to{transform:scale(1) rotate(360deg)}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}