/* Doc Bowling & his Blues Professors — static rebuild
   Matches the live bluesprofessors.com look: light/cream pages, black serif body,
   Bebas Neue display headings, dark footer. Palette pulled from the live Elementor
   kit (red #C62728, gold #FFDD57, blue #406DB0) — the album-artwork colours. */

:root{
  --bg:#ffffff;
  --cream:#ede8dd;        /* warm off-white section background */
  --cream2:#f6f2ea;
  --ink:#111111;          /* primary text */
  --muted:#6f6a63;
  --line:#e3ddd2;
  --red:#c62728;          /* primary accent — the album banner red */
  --red-dark:#a51f20;
  --gold:#ffdd57;         /* secondary — the album field yellow */
  --blue:#406db0;         /* tertiary accent */
  --footer:#141210;
  /* warm dark surfaces — used to re-skin the old cream sections (stay-in-touch, etc.) */
  --dark:#1b1714;         /* warm near-black section background */
  --dark-2:#241e19;       /* lifted surface — cards on dark */
  --on-dark:#ece6db;      /* primary text on dark */
  --on-dark-soft:#cabfae; /* secondary text on dark */
  --on-dark-muted:#9b9082;/* muted text on dark */
  --dark-line:#39312a;    /* hairline on dark */
  --maxw:1080px;
  --font-head:"Bebas Neue", Impact, "Haettenschweiler", sans-serif;
  --font-body:"Fraunces", Georgia, "Times New Roman", serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* keep anchor targets (#album, the reviews #ids) clear of the sticky 74px header when jumped to */
:where([id]){scroll-margin-top:84px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:18px; line-height:1.65;
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--red); text-decoration:none; transition:color .18s}
a:hover{color:var(--red-dark)}
.container{max-width:var(--maxw); margin:0 auto; padding:0 22px}
section{padding:88px 0}

h1,h2,h3{font-family:var(--font-head); font-weight:400; line-height:.98; margin:0 0 .35em; letter-spacing:.5px}
h1{font-size:clamp(44px,7vw,76px); text-transform:uppercase}
h2{font-size:clamp(34px,5vw,56px); text-transform:uppercase}
h3{font-size:26px; text-transform:uppercase; letter-spacing:1px}
p{margin:0 0 1.1em}
.eyebrow{display:inline-block; font-family:var(--font-head); text-transform:uppercase;
  letter-spacing:3px; color:var(--red); font-size:17px; margin-bottom:12px; position:relative}
.eyebrow::after{content:""; display:block; width:36px; height:3px; background:var(--gold); margin-top:8px}
.center .eyebrow::after,.eyebrow.c::after{margin-left:auto; margin-right:auto}
.lead{font-size:21px; line-height:1.6; color:#2a2722}
.muted{color:var(--muted)}
.center{text-align:center}
em{font-style:italic}

/* buttons */
.btn{display:inline-block; font-family:var(--font-head); text-transform:uppercase;
  letter-spacing:2px; font-size:19px; line-height:1; padding:15px 32px; border-radius:2px; cursor:pointer;
  background:var(--red); color:#fff; border:2px solid var(--red); transition:.18s}
.btn:hover{background:var(--red-dark); border-color:var(--red-dark); color:#fff; transform:translateY(-2px)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink); color:#fff; transform:translateY(-2px)}

/* header — red bar (the album banner red), white logo + nav */
header.site{position:sticky; top:0; z-index:50; background:var(--red);
  border-bottom:1px solid var(--red-dark)}
.nav{display:flex; align-items:center; justify-content:space-between; height:74px}
.nav .brand img{height:40px} /* white logo art reads on the red bar */
.nav nav{display:flex; gap:34px}
.nav nav a{font-family:var(--font-head); text-transform:uppercase; letter-spacing:2px;
  font-size:20px; color:#fff; position:relative; padding:4px 0}
.nav nav a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:3px; background:var(--gold); transition:width .22s}
.nav nav a:hover::after,.nav nav a.active::after{width:100%}
.nav nav a:hover,.nav nav a.active{color:var(--gold)}
.menu-toggle{display:none; background:none; border:0; color:#fff; font-size:26px; cursor:pointer}

/* hero — full-bleed background slideshow with a dark overlay so the white logo reads */
.hero{min-height:82vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:100px 22px 70px; position:relative; overflow:hidden; color:#fff; background:#000}
.hero-slides{position:absolute; inset:0; z-index:0}
.hero-slide{position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.6s ease-in-out}
.hero-slide.active{opacity:1}
/* slow Ken Burns zoom on whichever slide is showing */
.hero-slide.active{animation:kenburns 8s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1)}}
/* dark gradient overlay between the photos and the content */
.hero::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(rgba(12,11,10,.5),rgba(12,11,10,.7) 60%,rgba(12,11,10,.86))}
.hero-content{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center}
.hero img.logo{width:min(560px,86vw); margin-bottom:26px; filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}
.hero p{max-width:620px; color:#f1ece2; font-size:21px; margin:0 auto 30px}
.hero .cta-row{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
.hero .btn.ghost{color:#fff; border-color:#fff}
.hero .btn.ghost:hover{background:#fff; color:var(--ink)}
@media(prefers-reduced-motion:reduce){.hero-slide.active{animation:none}}

/* streaming / link row */
.streams{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
.streams a{font-family:var(--font-head); text-transform:uppercase; letter-spacing:2px;
  font-size:18px; color:var(--ink); border:2px solid var(--ink); padding:9px 20px; border-radius:2px; transition:.18s}
.streams a:hover{color:#fff; background:var(--ink); border-color:var(--ink); transform:translateY(-1px)}
.hero .streams a{color:#fff; border-color:rgba(255,255,255,.6)}
.hero .streams a:hover{background:#fff; color:var(--ink); border-color:#fff}

/* album — "The American Songbag" on gold (matches the live --secondary section) */
.album{background:var(--gold); color:var(--ink)}
.album-title{font-family:var(--font-body); font-weight:900; text-transform:none;
  font-size:clamp(36px,5.2vw,60px); letter-spacing:0; margin-bottom:38px}
/* carousel left, text right; stacks on mobile */
.album-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center}
.album-text{font-size:19px}
.album-text p{margin:0 0 1em}
.album-text .dropcap::first-letter{float:left; font-family:var(--font-body); font-weight:900;
  font-size:4.2em; line-height:.78; padding:6px 12px 0 0; color:var(--ink)}
.album-text p:last-child{font-size:21px; margin-top:18px; margin-bottom:0}

/* image carousel */
.carousel{position:relative; width:100%; margin:0}
.carousel-viewport{overflow:hidden; border-radius:5px; box-shadow:0 16px 40px rgba(0,0,0,.28)}
.carousel-track{display:flex; transition:transform .5s ease; will-change:transform}
.carousel-track img{flex:0 0 100%; width:100%; aspect-ratio:3/2; object-fit:cover; display:block}
.carousel-btn{position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:46px; height:46px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(17,17,17,.6); color:#fff; font-size:28px; line-height:1; transition:background .18s}
.carousel-btn:hover{background:var(--red)}
.carousel-btn.prev{left:12px}
.carousel-btn.next{right:12px}

/* meet the band — on blue (matches the live --accent section) */
.meet{background:var(--blue); color:#fff}
.meet-heading{color:#fff; margin-bottom:14px}
.meet-wordmark{width:min(680px,90vw); margin:0 auto 26px}
.meet-text{max-width:780px; margin:0 auto 40px; font-size:20px; color:#eef2f8}
.member-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:760px; margin:0 auto}
.member-grid img{width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center top;
  border-radius:4px; filter:grayscale(.15)}

/* testimonials — dark section, lifted charcoal cards with gold quote marks */
.quotes{background:var(--dark); color:var(--on-dark)}
.quotes h2{color:#fff}
.quotes .eyebrow{color:var(--gold)}
.quotes .eyebrow::after{background:var(--red)}
.quotes .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.quote{position:relative; padding:34px 26px 28px; background:var(--dark-2); border-radius:8px;
  border:1px solid var(--dark-line); border-top:4px solid var(--red); box-shadow:0 12px 32px rgba(0,0,0,.38)}
.quote::before{content:"\201C"; position:absolute; top:2px; left:16px; font-family:var(--font-head);
  font-size:64px; color:var(--gold); line-height:1}
.quote p{font-style:italic; font-size:19px; margin:18px 0 14px; color:var(--on-dark)}
.quote cite{color:var(--on-dark-muted); font-style:normal; font-family:var(--font-head); font-size:16px;
  text-transform:uppercase; letter-spacing:1.5px}

/* testimonial carousel — one quote at a time, reuses the .carousel JS */
.quote-carousel{position:relative; max-width:760px; margin:34px auto 0; padding:0 56px}
.quote-carousel .carousel-viewport{overflow:hidden; border-radius:8px; box-shadow:none}
.quote-carousel .carousel-track{align-items:stretch}
.quote-carousel .carousel-track .quote{flex:0 0 100%; margin:0; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center; min-height:240px; padding:46px 44px 40px}
.quote-carousel .quote::before{position:static; display:block; font-size:74px; margin:0 0 4px}
.quote-carousel .quote p{font-size:clamp(22px,2.6vw,28px); line-height:1.4; margin:0 0 18px}
.quote-carousel .quote cite{font-size:17px}
.quote-carousel .carousel-btn{background:rgba(255,255,255,.08); border:1px solid var(--dark-line)}
.quote-carousel .carousel-btn:hover{background:var(--red); border-color:var(--red)}
.quote-carousel .carousel-btn.prev{left:0}
.quote-carousel .carousel-btn.next{right:0}

/* contact — dark "stay in touch" section (like the live site's dark footer band) */
.contact{background:var(--dark); color:var(--on-dark); border-top:1px solid var(--dark-line)}
.contact h2{color:#fff}
.contact .eyebrow{color:var(--gold)}
.contact .eyebrow::after{background:var(--red)}
.contact .cols{display:grid; grid-template-columns:1fr 1fr; gap:54px}
.contact .big{font-size:20px; color:var(--on-dark)}
.contact .lead{color:var(--on-dark-soft)}
.contact .muted{color:var(--on-dark-muted)}
.contact a{font-weight:600; color:var(--gold)}
.contact a:hover{color:#fff}

/* Mailchimp embed — restyled on-brand.
   Scoped under .contact so these beat Mailchimp's classic-061523.css (which loads in the body).
   Functional markup (action, field names, scripts) is left untouched. */
.contact #mc_embed_signup{background:transparent; font-family:var(--font-body);
  width:100%; max-width:480px; clear:none; margin-top:18px; color:var(--on-dark)}
.contact #mc_embed_signup form{padding:0; margin:0}
.contact #mc_embed_signup #mc_embed_signup_scroll{display:block}
.contact #mc_embed_signup h2{display:none}                 /* section already has a heading */
.contact #mc_embed_signup .indicates-required{font-family:var(--font-body); font-size:13px;
  color:var(--on-dark-muted); text-align:right; margin:0 0 10px}
.contact #mc_embed_signup .asterisk{color:var(--red)}
.contact #mc_embed_signup .mc-field-group{width:100%; padding:0; margin:0 0 14px}
.contact #mc_embed_signup .mc-field-group label{display:block; font-family:var(--font-body);
  font-size:15px; font-weight:600; color:var(--on-dark); margin:0 0 6px}
.contact #mc_embed_signup .mc-field-group input{display:block; width:100%; padding:13px 15px;
  font-family:var(--font-body); font-size:17px; background:#fff; border:1px solid var(--line);
  border-radius:3px; color:var(--ink)}
.contact #mc_embed_signup .mc-field-group input:focus{outline:none; border-color:var(--red)}
.contact #mc_embed_signup #mce-responses{padding:0; margin:0; width:100%}
.contact #mc_embed_signup .response{font-family:var(--font-body); font-size:15px; margin:6px 0; padding:0}
.contact #mc_embed_signup #mce-error-response{color:var(--red-dark)}
.contact #mc_embed_signup #mce-success-response{color:#2f7d32}
.contact #mc_embed_signup .clear.foot{display:flex; align-items:center; gap:18px;
  flex-wrap:wrap; margin-top:8px}
/* Mailchimp targets the submit with #mc_embed_signup #mc-embedded-subscribe + !important,
   so we add a third id (the form's) to out-specify it. */
#mc_embed_signup #mc-embedded-subscribe-form #mc-embedded-subscribe{display:inline-block;
  width:auto; height:auto; font-family:var(--font-head); text-transform:uppercase; letter-spacing:2px;
  font-size:19px; line-height:1; padding:15px 32px; border-radius:2px; cursor:pointer;
  background:var(--red) !important; color:#fff !important; border:2px solid var(--red) !important;
  transition:.18s; margin:0}
#mc_embed_signup #mc-embedded-subscribe-form #mc-embedded-subscribe:hover{
  background:var(--red-dark) !important; border-color:var(--red-dark) !important;
  transform:translateY(-2px)}
.contact #mc_embed_signup .optionalParent .clear.foot p{margin:0}
.contact #mc_embed_signup .refferal_badge{opacity:.7}

/* footer — dark, three columns like the live site */
footer.site{background:var(--footer); color:#d8d2c7; padding:56px 0 36px}
footer.site .cols{display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-bottom:38px}
footer.site h3{color:#fff; font-size:22px; margin-bottom:14px}
footer.site .col a{display:block; color:#cfc8bc; padding:5px 0; font-size:17px}
footer.site .col a:hover{color:var(--gold)}
footer.site .copy{border-top:1px solid #2c2823; padding-top:22px; text-align:center}
footer.site .copy small{color:#8c857a}

/* music — upcoming gigs (mirrors the live LOCATION / Date gig list) */
.gigs{background:var(--bg)}
.gigs .gig-head{display:grid; grid-template-columns:1fr 170px 130px; gap:24px; align-items:end;
  padding-bottom:10px; border-bottom:2px solid var(--ink)}
.gigs .gig-head span{font-family:var(--font-head); text-transform:uppercase; letter-spacing:2px;
  font-size:19px; color:var(--muted)}
.gig{display:grid; grid-template-columns:1fr 170px 130px; gap:24px; align-items:center;
  padding:24px 0; border-bottom:1px solid var(--line)}
.gig .venue{font-family:var(--font-head); text-transform:uppercase; letter-spacing:.5px;
  font-size:25px; line-height:1.05; color:var(--ink); margin-bottom:4px}
.gig .addr{color:var(--muted); font-size:16px; line-height:1.4}
.gig .date{font-family:var(--font-head); font-size:23px; letter-spacing:1px; white-space:nowrap}
.gig .btn{padding:10px 24px; font-size:16px; justify-self:start}
.gigs .none{margin-top:14px; padding:30px 28px; background:#fbeeee;
  border-left:4px solid var(--red); border-radius:4px; color:#2a2722}
.gigs .none p{margin:0 0 .5em} .gigs .none p:last-child{margin:0}

/* music — discography (album title + Spotify embed per album), dark section */
.disco{background:var(--blue); color:#fff}
.disco h2{color:#fff}
.disco .sub{font-family:var(--font-head); text-transform:uppercase; letter-spacing:2px;
  color:rgba(255,255,255,.82); font-size:22px; margin:-6px 0 18px}
.disco .intro{max-width:760px}
.disco .streams{justify-content:flex-start; margin:6px 0 4px}
.disco .streams a{color:#fff; border-color:rgba(255,255,255,.55)}
.disco .streams a:hover{background:#fff; color:var(--ink); border-color:#fff}
/* brand-coloured streaming buttons (Spotify green, Apple black, YouTube red) */
.disco .streams.brand a{color:#fff}
.disco .streams.brand a.sp{background:#1db954; border-color:#1db954}
.disco .streams.brand a.sp:hover{background:#1ed760; border-color:#1ed760; color:#fff}
.disco .streams.brand a.ap{background:#000; border-color:#000}
.disco .streams.brand a.ap:hover{background:#222; border-color:#222; color:#fff}
.disco .streams.brand a.yt{background:#ff0000; border-color:#ff0000}
.disco .streams.brand a.yt:hover{background:#cc0000; border-color:#cc0000; color:#fff}
/* discography layout — featured album (American Songbag) on the left, intro + stream
   buttons on the right; the three earlier albums in a row below. Each album is a dark card. */
.disco-grid{display:grid; column-gap:26px; row-gap:40px; align-items:start;
  grid-template-columns:repeat(6,1fr);
  grid-template-areas:
    "feat feat feat intro intro intro"
    "alb1 alb1 alb2 alb2 alb3 alb3"}
.disco-grid>.intro{grid-area:intro; align-self:center; max-width:none; margin:0}
.disco-grid>.featured{grid-area:feat}
.disco-grid>:nth-child(3){grid-area:alb1}
.disco-grid>:nth-child(4){grid-area:alb2}
.disco-grid>:nth-child(5){grid-area:alb3}
.disco .album-row{margin:0; background:var(--dark); padding:22px 22px 24px; border-radius:10px;
  border:1px solid rgba(0,0,0,.22); box-shadow:0 16px 34px rgba(0,0,0,.24)}
.disco .album-row .title{font-family:var(--font-head); text-transform:uppercase; letter-spacing:1px;
  font-size:30px; line-height:1; margin:0 0 16px; color:#fff}
/* large square album cover, slim Spotify player beneath */
.disco .album-row .cover{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px;
  margin:0 0 16px; box-shadow:0 10px 26px rgba(0,0,0,.32)}
.disco iframe{border-radius:12px; border:0; display:block; width:100%}

/* reviews — chart achievements strip (dark band, gold numbers; the proud bit) */
.charts{background:var(--footer); color:#f1ece2}
.charts .eyebrow{color:var(--gold)}
.charts .eyebrow::after{background:var(--red)}
.charts h2{color:#fff}
.charts .lead{color:#cfc8bc; max-width:680px; margin-left:auto; margin-right:auto}
.chart-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px}
.chart-card{text-align:center; padding:36px 22px 30px; background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.1); border-radius:8px}
.chart-card .rank{font-family:var(--font-head); font-size:clamp(66px,9vw,108px); line-height:.85;
  color:var(--gold); letter-spacing:1px}
.chart-card .rank span{font-size:.42em; vertical-align:top; margin-right:1px; color:var(--red)}
.chart-card .what{font-family:var(--font-head); text-transform:uppercase; letter-spacing:1.5px;
  font-size:21px; color:#fff; margin:16px 0 6px; line-height:1.05}
.chart-card .src{color:#b3aca0; font-size:14.5px; font-style:italic; line-height:1.45}
.charts .airplay{margin:40px auto 0; max-width:760px; text-align:center; font-size:19px;
  color:#e7e1d6; line-height:1.55}
.charts .airplay strong{color:var(--gold); font-weight:400}

/* reviews — featured full reviews (magazine-style read column) */
.features{background:var(--bg)}
.review{max-width:760px; margin:0 auto; padding:48px 0; border-bottom:1px solid var(--line)}
.review:first-of-type{padding-top:8px}
.review:last-child{border-bottom:0; padding-bottom:0}
.review .pub{font-family:var(--font-head); text-transform:uppercase; letter-spacing:1px;
  font-size:clamp(28px,4vw,38px); line-height:1; color:var(--ink); margin:0 0 6px}
.review .meta{font-family:var(--font-head); letter-spacing:2px; text-transform:uppercase;
  font-size:15px; color:var(--red); margin:0 0 24px}
.review .pull{font-family:var(--font-body); font-weight:700; font-style:italic;
  font-size:clamp(21px,2.6vw,27px); line-height:1.32; color:var(--ink); margin:0 0 24px;
  padding-left:22px; border-left:4px solid var(--gold)}
.review .body p{font-size:18px; color:#2a2722; margin:0 0 1.1em}
.review .body p:first-of-type::first-letter{float:left; font-family:var(--font-body); font-weight:900;
  font-size:3.6em; line-height:.72; padding:8px 12px 0 0; color:var(--red)}
.review .byline{font-family:var(--font-head); text-transform:uppercase; letter-spacing:2px;
  font-size:16px; color:var(--muted); margin:18px 0 0}
.review .byline a{font-family:var(--font-body); font-style:italic; text-transform:none; letter-spacing:0}

/* reviews — PRESS WALL: critic quotes shown as pasted newspaper/magazine
   cuttings on a dark board (taped, slightly askew, straighten + lift on hover).
   Replaces the plain quote grid with an editorial "the reviews are in" montage. */
.press{background:var(--dark); color:var(--on-dark); position:relative; overflow:hidden}
.press::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(150% 130% at 50% 120%, rgba(0,0,0,.55), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.013) 0 2px, transparent 2px 7px)}
.press .container{position:relative; z-index:1}
.press .eyebrow{color:var(--gold)}
.press .eyebrow::after{background:var(--red)}
.press h2{color:#fff}

/* a single cutting (shared by the hero clipping + the montage) */
.clip{position:relative; background:linear-gradient(168deg,#f8f3e8,#efe7d6); color:var(--ink);
  padding:26px 24px 22px; border-radius:2px; border:1px solid rgba(0,0,0,.10);
  box-shadow:0 16px 34px rgba(0,0,0,.46), inset 0 0 36px rgba(120,96,60,.07)}
/* a strip of tape across the top */
.clip::before{content:""; position:absolute; top:-12px; left:50%; width:96px; height:26px;
  transform:translateX(-50%) rotate(-2.5deg);
  background:linear-gradient(160deg, rgba(255,236,150,.5), rgba(255,221,87,.32));
  border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 5px rgba(0,0,0,.18); opacity:.9}
.clip .kicker{font-family:var(--font-head); text-transform:uppercase; letter-spacing:2px;
  font-size:14px; color:var(--red); margin:6px 0 4px}
.clip .mast{font-family:var(--font-head); text-transform:uppercase; letter-spacing:1px;
  font-size:30px; line-height:.92; color:var(--ink); padding-bottom:9px; margin-bottom:14px;
  border-bottom:3px double rgba(0,0,0,.42)}
.clip .say{font-family:var(--font-body); font-style:italic; font-size:18.5px; line-height:1.5;
  color:#211d18; margin:0 0 14px}
.clip .by{font-family:var(--font-head); text-transform:uppercase; letter-spacing:1.5px;
  font-size:15px; color:var(--muted)}
.clip .src-link{display:inline-block; margin-top:10px; font-family:var(--font-head);
  text-transform:uppercase; letter-spacing:1.5px; font-size:13.5px; color:var(--red)}
.clip .src-link:hover{color:var(--red-dark)}
.clip .src-link::after{content:" \2192"}

/* the montage — organic multi-column "pinboard" flow */
.clips{columns:3; column-gap:26px; margin-top:30px}
.clips .clip{break-inside:avoid; display:inline-block; width:100%; margin:0 0 26px;
  transition:transform .25s ease, box-shadow .25s ease}
.clips .clip:nth-child(1){transform:rotate(-2deg)}
.clips .clip:nth-child(2){transform:rotate(1.4deg)}
.clips .clip:nth-child(3){transform:rotate(-1deg)}
.clips .clip:nth-child(4){transform:rotate(2deg)}
.clips .clip:nth-child(5){transform:rotate(-1.6deg)}
.clips .clip:nth-child(6){transform:rotate(1deg)}
/* a couple read as grey newsprint rather than cream, for variety */
.clips .clip:nth-child(3n+2){background:linear-gradient(168deg,#f0f1ec,#e6e7e0)}
.clips .clip::before{transform:translateX(-50%) rotate(2deg)}
.clips .clip:nth-child(even)::before{transform:translateX(-50%) rotate(-3deg)}
.clips .clip:hover{transform:rotate(0) translateY(-6px) scale(1.02);
  box-shadow:0 26px 50px rgba(0,0,0,.55); z-index:3}

/* the front-page headline clipping (the standout) */
.press-hero{max-width:760px; margin:0 auto; text-align:center; padding:40px 38px 34px;
  background:linear-gradient(168deg,#fbf7ee,#f2ead8); transform:rotate(-.6deg)}
.press-hero::before{width:120px; height:30px; left:38px; transform:rotate(-3deg)}
.press-hero::after{content:""; position:absolute; top:-12px; right:38px; width:120px; height:30px;
  transform:rotate(3deg); background:linear-gradient(160deg, rgba(255,236,150,.5), rgba(255,221,87,.32));
  border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 5px rgba(0,0,0,.18); opacity:.9}
.press-hero .kicker{font-size:15px}
.press-hero .mast{font-size:25px; border-bottom:0; padding:0; margin:2px 0 12px; color:var(--muted)}
.press-hero .head{font-family:var(--font-head); text-transform:uppercase; letter-spacing:1px;
  font-size:clamp(48px,9vw,104px); line-height:.84; color:var(--ink); margin:4px 0 18px}
.press-hero .say{font-size:20px; max-width:560px; margin:0 auto 14px}
.press-hero .by{color:var(--red)}

/* press-wall responsive */
@media(max-width:980px){.clips{columns:2}}
@media(max-width:640px){
  .clips{columns:1; max-width:420px; margin-left:auto; margin-right:auto}
  .clips .clip:nth-child(n),.press-hero{transform:none}
  .clips .clip:nth-child(n):hover{transform:translateY(-6px)}
}

/* reviews-page mobile overrides */
@media(max-width:820px){
  .chart-grid{grid-template-columns:1fr; gap:18px; max-width:420px; margin-left:auto; margin-right:auto}
  .quote-carousel{padding:0 44px}
  .quote-carousel .carousel-track .quote{padding:38px 22px 34px; min-height:0}
}

/* responsive */
@media(max-width:820px){
  .menu-toggle{display:block}
  .nav nav{position:absolute; top:74px; left:0; right:0; flex-direction:column; gap:0;
    background:var(--red); border-bottom:1px solid var(--red-dark); max-height:0; overflow:hidden; transition:max-height .3s}
  .nav nav.open{max-height:340px}
  .nav nav a{padding:16px 22px; border-top:1px solid var(--red-dark)}
  .album-grid,.contact .cols{grid-template-columns:1fr; gap:32px}
  /* mobile: centred intro, then each album full-width for roomy Spotify players */
  .disco-grid{gap:22px;
    grid-template-columns:1fr;
    grid-template-areas:
      "intro"
      "feat"
      "alb1"
      "alb2"
      "alb3"}
  .disco-grid>.intro{text-align:center; margin-bottom:6px}
  .disco-grid>.intro .streams{justify-content:center}
  .gigs .gig-head,.gig{grid-template-columns:1fr; gap:6px}
  .gigs .gig-head{display:none}
  .quotes .grid{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr; gap:26px; text-align:center}
  section{padding:60px 0}
}