/* Sarah Maclaine — editorial performance site */
:root {
  --ink: #f7f1e8;
  --ink-strong: #fffaf2;
  --muted: #c9beb2;
  --dim: #998d84;
  --canvas: #100d0d;
  --canvas-deep: #090707;
  --surface: #181313;
  --surface-raised: #211919;
  --line: rgba(242, 224, 198, .18);
  --gold: #d5b36b;
  --gold-bright: #f1d18a;
  --wine: #761b26;
  --red: #a62535;
  --max: 1240px;
  --site-header-height: 113px;
  --site-header-scrolled-height: 84px;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --shadow: 0 30px 80px rgba(0, 0, 0, .36);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--site-header-height);
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: .07em; text-underline-offset: .25em; }
button, input, textarea { font: inherit; }
button { color: inherit; }
::selection { background: var(--gold); color: #1a1110; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: .7rem 1rem;
  background: var(--ink-strong);
  color: var(--canvas);
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 4px; }
.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.eyebrow {
  margin: 0 0 1rem;
  color: var(--gold-bright);
  font: 600 .73rem/1.2 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.display {
  margin: 0;
  color: var(--ink-strong);
  font: 500 clamp(3.3rem, 7vw, 6.8rem)/.86 var(--serif);
  letter-spacing: -.045em;
  text-wrap: balance;
}
.page-title {
  margin: .35rem 0 1rem;
  font: 500 clamp(3.1rem, 6vw, 5.8rem)/.9 var(--serif);
  letter-spacing: -.035em;
}
.lede { max-width: 730px; color: var(--muted); font: 400 clamp(1.05rem, 2vw, 1.3rem)/1.65 var(--sans); }
.section-title { margin: 0; font: 500 clamp(2.6rem, 4.4vw, 4.8rem)/.95 var(--serif); letter-spacing: -.025em; }

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  --site-header-flow-height: var(--site-header-height);
  --site-header-colour-transition: 500ms;
  --site-header-geometry-transition: 320ms;
  --site-header-transition-easing: cubic-bezier(.4, 0, .2, 1);
  border-bottom: 1px solid rgba(255,255,255,.16);
  color: white;
  background: var(--canvas-deep);
}
.site-header.is-scrolled {
  --site-header-flow-height: var(--site-header-scrolled-height);
}
/* Keep the homepage hero artwork behind the header until the user scrolls. */
.site-header:not(.inner) {
  margin-bottom: calc(-1 * var(--site-header-flow-height));
  background-color: transparent;
  transition:
    margin-bottom var(--site-header-geometry-transition) var(--site-header-transition-easing),
    background-color var(--site-header-colour-transition) var(--site-header-transition-easing),
    backdrop-filter var(--site-header-colour-transition) var(--site-header-transition-easing);
}
.site-header:not(.inner).is-scrolled {
  background-color: rgba(9,7,7,.96);
  backdrop-filter: blur(14px);
}
.site-header.inner { background: var(--canvas-deep); }
.header-inner {
  min-height: calc(var(--site-header-height) - 1px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  transition: min-height var(--site-header-geometry-transition) var(--site-header-transition-easing);
}
.site-header.is-scrolled .header-inner {
  min-height: calc(var(--site-header-scrolled-height) - 1px);
}
.logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.logo-link img {
  width: clamp(190px, 21vw, 280px);
  height: auto;
  transition: width var(--site-header-geometry-transition) var(--site-header-transition-easing);
}
.site-header.is-scrolled .logo-link img { width: clamp(150px, 16.5vw, 220px); }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.2rem); }
.site-nav a {
  padding-block: .8rem;
  color: rgba(255,255,255,.86);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--gold-bright); }
.menu-toggle { display: none; border: 0; background: transparent; padding: .7rem; cursor: pointer; }
.menu-toggle span, .menu-toggle::before, .menu-toggle::after { display:block; width: 28px; height: 1px; background: currentColor; content:""; margin: 6px 0; }

.hero {
  min-height: max(720px, 92svh);
  display: grid;
  align-items: end;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #3c0710;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: url('/assets/images/hero.webp') 62% 35% / cover no-repeat;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(16,5,8,.94) 0%, rgba(31,5,10,.72) 32%, rgba(23,4,8,.12) 68%), linear-gradient(0deg, rgba(11,7,7,.75), transparent 42%);
}
.hero-content { padding: 210px 0 90px; width: min(790px, 68vw); }
.hero-signature { width: min(470px, 72vw); margin-bottom: 1.35rem; filter: drop-shadow(0 8px 30px rgba(0,0,0,.3)); }
.hero-copy { max-width: 650px; margin: 1.7rem 0 2rem; color: rgba(255,255,255,.82); font-size: clamp(1rem, 1.6vw, 1.22rem); }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  border: 1px solid var(--gold);
  padding: .75rem 1.2rem;
  background: var(--gold);
  color: #241511;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s, color .2s, transform .2s;
}
.button:hover { background: var(--gold-bright); transform: translateY(-2px); }
.button.ghost { background: rgba(9,7,7,.2); color: white; border-color: rgba(255,255,255,.42); backdrop-filter: blur(8px); }
.button.ghost:hover { background: white; color: var(--canvas); }

.marquee {
  width: 100%;
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding: .85rem 0;
  color: var(--gold);
  font: 500 .68rem/1 var(--sans);
  letter-spacing: .25em;
  text-transform: uppercase;
}
.marquee-track {
  --marquee-cycle: 50%;
  --marquee-group-gap: 3rem;
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee 24s linear infinite;
}
.marquee-track:not(.is-ready) {
  visibility: hidden;
  animation-play-state: paused;
}
.marquee-group {
  display: flex;
  flex: 0 0 auto;
  gap: 3rem;
  padding-inline-end: var(--marquee-group-gap);
}
.marquee span::after { content: "◆"; margin-left: 3rem; font-size: .45rem; vertical-align: .15em; }
@keyframes marquee { to { transform: translate3d(calc(-1 * var(--marquee-cycle)), 0, 0); } }

.section { padding-block: clamp(80px, 10vw, 150px); }
.section-rule { border-top: 1px solid var(--line); }
.intro-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(2rem, 8vw, 9rem); align-items: start; }
.intro-copy { max-width: 780px; }
.intro-copy p:first-child { margin-top: 0; color: var(--ink-strong); font: 400 clamp(1.7rem, 3.1vw, 3rem)/1.25 var(--serif); }
.intro-copy p { color: var(--muted); }
.text-link { color: var(--gold-bright); font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }

.poster-feature { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr); gap:clamp(2rem,8vw,9rem); align-items:center; }
.poster-feature-art { width:min(100%,460px); margin:0; padding:.7rem; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); transform:rotate(-1.2deg); }
.poster-feature-art img { width:100%; height:auto; }
.poster-feature-art figcaption { padding:.9rem .35rem .25rem; color:var(--muted); font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.poster-feature-copy { max-width:680px; }
.poster-feature-copy .section-title { max-width:620px; }
.poster-feature-copy .lede { max-width:610px; }

.quote-band { padding: clamp(80px, 12vw, 170px) 0; background: var(--ink); color: #2d1d19; }
.quote-band blockquote { margin: 0; max-width: 1050px; }
.quote-band p { margin: 0; font: 500 clamp(2.5rem, 4.6vw, 5rem)/.98 var(--serif); letter-spacing: -.035em; }
.quote-band footer { margin-top: 2rem; font-size: .74rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }

.section-head { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: clamp(2rem, 5vw, 4rem); }
.gig-list { border-top: 1px solid var(--line); }
.gig-row { border-bottom: 1px solid var(--line); }
.gig-summary { display: grid; grid-template-columns: 100px 1fr auto 30px; gap: clamp(1rem, 3vw, 3rem); align-items: center; min-height: 126px; padding: 1.3rem 0; cursor: pointer; list-style: none; }
.gig-summary::-webkit-details-marker { display: none; }
.gig-date { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .7rem; }
.gig-date strong { color: var(--gold-bright); font: 500 3.2rem/1 var(--serif); }
.gig-date span { color: var(--dim); font-size: .65rem; letter-spacing: .13em; text-transform: uppercase; }
.gig-name { font: 500 clamp(1.45rem, 2.7vw, 2.3rem)/1.05 var(--serif); }
.gig-place { color: var(--muted); font-size: .82rem; }
.gig-time { color: var(--muted); font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.gig-plus { color: var(--gold); font-size: 1.8rem; transition: transform .2s; }
.gig-row[open] .gig-plus { transform: rotate(45deg); }
.gig-body { display: grid; grid-template-columns: 100px 1fr; gap: clamp(1rem, 3vw, 3rem); padding: 0 0 2.3rem; }
.gig-body-inner { max-width: 720px; color: var(--muted); }
.gig-body .button { margin-top: .7rem; }

.featured-video-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr); gap:1.25rem; align-items:start; }
.featured-video-support { min-width:0; }
.featured-video-support-list { display:grid; gap:1.25rem; }
.featured-video-next-label { display:none; }
.video-card { position:relative; min-width:0; border:1px solid transparent; transition:border-color .2s; }
.video-card:hover, .video-card:focus-within { border-color:var(--gold); }
.video-card--lead { background:var(--wine); }
.video-card--support { background:var(--surface); }
.video-card.is-playing .video-card-details--lead { opacity:0; }
.video-facade { position:relative; aspect-ratio:16 / 9; overflow:hidden; background:linear-gradient(135deg,#761b26 0%,#3d0d16 54%,#090707 100%); }
.video-facade button { position:absolute; inset:0; z-index:1; width:100%; border:0; padding:0; cursor:pointer; background:transparent; }
.video-facade img { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; opacity:.82; transition:opacity .3s, transform .5s; }
.video-facade img[hidden] { display:none; }
.video-facade--lead img { opacity:.96; filter:saturate(1.08) contrast(1.04); }
.video-facade.is-image-failed img { display:none; }
.video-poster-fallback { position:absolute; z-index:0; inset:0; background:radial-gradient(circle at 72% 24%,rgba(213,179,107,.22),transparent 27%),linear-gradient(135deg,#761b26 0%,#3d0d16 54%,#090707 100%); }
.video-facade--lead button::after { content:""; position:absolute; z-index:2; inset:0; pointer-events:none; background:linear-gradient(0deg,rgba(118,27,38,.96) 0%,rgba(118,27,38,.3) 38%,transparent 72%); }
.play-disc { position:absolute; z-index:4; inset:50% auto auto 50%; width:70px; height:70px; display:grid; place-items:center; border:1px solid var(--gold-bright); border-radius:50%; background:rgba(213,179,107,.92); color:#241511; transform:translate(-50%,-50%); box-shadow:0 10px 30px rgba(0,0,0,.25); transition:background .2s, transform .2s; }
.play-disc::after { content:""; margin-left:5px; border-block:9px solid transparent; border-left:15px solid #241511; }
.video-facade--support .play-disc { width:56px; height:56px; background:rgba(213,179,107,.78); }
.video-facade button:hover img { opacity:1; transform:scale(1.02); }
.video-facade button:hover .play-disc { background:var(--gold-bright); transform:translate(-50%,-50%) scale(1.04); }
.video-card-details { display:grid; grid-template-columns:auto minmax(0,1fr); gap:.85rem; align-items:start; min-height:78px; padding:1rem 1.05rem 1.1rem; background:var(--surface); }
.video-card-details--lead { position:absolute; z-index:5; inset:auto 0 0; display:block; min-height:0; padding:4.5rem 1.5rem 1.35rem; background:linear-gradient(0deg,rgba(118,27,38,.96),rgba(118,27,38,0)); pointer-events:none; transition:opacity .2s; }
.video-card-kicker { display:block; margin-bottom:.42rem; color:var(--gold-bright); font:600 .68rem/1.2 var(--sans); letter-spacing:.2em; text-transform:uppercase; }
.video-card-title { margin:0; color:var(--ink-strong); font:500 clamp(1.15rem,2vw,1.7rem)/1.06 var(--serif); }
.video-card-details--lead .video-card-title { font-size:clamp(2.15rem,4vw,4.8rem); line-height:.94; letter-spacing:-.025em; }
.video-card-number { padding-top:.18rem; color:var(--gold); font-size:.7rem; font-weight:700; letter-spacing:.1em; }
.video-facade.is-playing > button { visibility:hidden; pointer-events:none; }
.video-player-detached { position:fixed; z-index:10; display:block; border:0; background:#000; opacity:0; pointer-events:none; visibility:hidden; }
.video-player-detached.is-visible { opacity:1; pointer-events:auto; visibility:visible; }
.video-showcase { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.72fr); gap:1px; border:1px solid var(--line); background:var(--line); }
.video-viewer { min-width:0; background:#080606; }
.video-viewer-stage { position:relative; aspect-ratio:16 / 9; overflow:hidden; background:#050404; }
.video-player { position:absolute; inset:0; width:100%; height:100%; display:block; }
.video-player iframe { width:100%; height:100%; display:block; border:0; }
.video-viewer-loading { position:absolute; inset:auto 1.2rem 1.1rem; margin:0; color:rgba(255,255,255,.82); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; pointer-events:none; }
.video-viewer-loading[hidden] { display:none; }
.video-viewer-stage noscript { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); white-space:nowrap; }
.video-viewer-meta { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; padding:1.2rem 1.35rem 1.35rem; }
.video-viewer-meta .eyebrow { margin-bottom:.35rem; }
.video-viewer-meta h3 { margin:0; color:var(--ink-strong); font:500 clamp(1.45rem,2.5vw,2.35rem)/1.02 var(--serif); }
.video-viewer-stats { display:flex; flex:0 0 auto; flex-direction:column; align-items:flex-end; gap:.2rem; color:var(--gold-bright); font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.video-selection { min-width:0; display:flex; flex-direction:column; padding:1.2rem; background:var(--surface); }
.video-selection-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.video-selection-head .eyebrow { margin-bottom:.3rem; }
.video-selection-title { margin:0; color:var(--ink-strong); font:500 1.65rem/1 var(--serif); }
.video-count { flex:0 0 auto; color:var(--gold-bright); font-size:.68rem; font-weight:700; letter-spacing:.11em; text-align:right; text-transform:uppercase; }
.video-rail { display:grid; gap:.45rem; min-height:0; max-height:min(620px,calc(100vh - 320px)); overflow-y:auto; overscroll-behavior:contain; margin:1rem 0; padding:0 .4rem 0 0; list-style:none; scrollbar-color:var(--gold) var(--surface-raised); scrollbar-width:thin; }
.video-rail-status { padding:1rem 0; color:var(--muted); font-size:.85rem; }
.video-choice { width:100%; display:grid; grid-template-columns:2rem 94px minmax(0,1fr); align-items:center; gap:.7rem; border:1px solid transparent; border-left:2px solid transparent; padding:.55rem; background:transparent; color:var(--ink); text-align:left; cursor:pointer; }
.video-choice:hover, .video-choice[aria-pressed="true"] { border-color:var(--line); border-left-color:var(--gold); background:rgba(9,7,7,.62); }
.video-choice:focus-visible { outline:3px solid var(--gold-bright); outline-offset:-3px; }
.video-choice-index { color:var(--gold); font-size:.68rem; font-weight:700; letter-spacing:.08em; }
.video-choice img { width:94px; aspect-ratio:16 / 9; object-fit:cover; background:#000; opacity:.74; transition:opacity .25s, transform .3s; }
.video-choice:hover img, .video-choice[aria-pressed="true"] img { opacity:1; transform:scale(1.025); }
.video-choice-copy { min-width:0; display:grid; gap:.18rem; }
.video-choice-title { display:-webkit-box; overflow:hidden; color:var(--ink-strong); font:500 .98rem/1.12 var(--serif); -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.video-choice-duration { color:var(--dim); font-size:.64rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }

.page-hero { padding: clamp(72px, 10vw, 140px) 0 clamp(60px, 8vw, 110px); background: radial-gradient(circle at 75% -20%, rgba(132,28,40,.38), transparent 45%), var(--canvas-deep); border-bottom: 1px solid var(--line); }
.page-hero .lede { margin-bottom: 0; }
.error-page { min-height: max(620px, calc(100svh - var(--site-header-height))); display:grid; align-items:center; overflow:hidden; padding-block:clamp(84px, 12vw, 170px); background:radial-gradient(circle at 78% 48%, rgba(118,27,38,.5), transparent 34%), linear-gradient(120deg, var(--canvas-deep), var(--canvas)); }
.error-page-inner { display:grid; grid-template-columns:minmax(0, 1fr) minmax(260px, .56fr); gap:clamp(2rem, 8vw, 8rem); align-items:center; }
.error-page-copy { position:relative; z-index:1; max-width:800px; }
.error-page .display { max-width:850px; }
.error-page .lede { max-width:640px; margin:2rem 0 2.2rem; }
.error-page-support { margin:2rem 0 0; color:var(--dim); font-size:.82rem; }
.error-page-support .text-link { margin-right:.25rem; }
.error-page-mark { position:relative; min-height:360px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--line); background:linear-gradient(145deg, rgba(118,27,38,.48), rgba(9,7,7,.78)); box-shadow:var(--shadow); }
.error-page-mark::before { content:""; position:absolute; inset:20px; border:1px solid rgba(213,179,107,.35); }
.error-page-mark::after { content:""; position:absolute; width:140%; height:1px; background:rgba(241,209,138,.28); transform:rotate(-45deg); }
.error-page-number { position:relative; z-index:1; color:transparent; font:500 clamp(8rem, 18vw, 17rem)/.7 var(--serif); letter-spacing:-.08em; -webkit-text-stroke:1px var(--gold-bright); }
.error-page-mark-label { position:absolute; z-index:2; right:1.2rem; bottom:1rem; color:var(--gold-bright); font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.content-narrow { width: min(calc(100% - 40px), 920px); margin-inline: auto; }
.prose { color: var(--muted); font-size: 1.05rem; }
.prose h2 { color: var(--ink); font: 500 2.6rem/1.1 var(--serif); }
.gig-detail-grid { display:grid; grid-template-columns:minmax(280px,.78fr) 1.22fr; gap:clamp(2.5rem,7vw,7rem); align-items:start; }
.gig-detail-grid:not(.has-image) { grid-template-columns:1fr; max-width:920px; }
.gig-detail-copy { max-width:720px; }
.gig-feature { margin:0; background:var(--surface); box-shadow:var(--shadow); }
.gig-feature img { width:100%; height:auto; }
.gig-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:2.2rem 0; padding:1.3rem 0; border-block:1px solid var(--line); }
.gig-fact { display:grid; gap:.25rem; color:var(--muted); font-size:.92rem; }
.gig-fact strong { color:var(--gold-bright); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; }
.gig-fact a { color:var(--gold-bright); }

.recording-grid { display: grid; grid-template-columns: minmax(280px,.72fr) 1.28fr; gap: clamp(2.5rem, 8vw, 8rem); align-items:center; }
.album-cover { box-shadow: var(--shadow); transform: rotate(-1.4deg); }
.album-copy h2 { margin: 0 0 .5rem; font: 500 clamp(3.2rem, 6vw, 6rem)/.9 var(--serif); }
.album-quote { margin: 2rem 0; padding-left: 1.5rem; border-left: 1px solid var(--gold); color: var(--ink); font: 400 1.5rem/1.45 var(--serif); }
.apple-music-grid { display:grid; grid-template-columns:minmax(240px,.62fr) minmax(0,1.38fr); gap:clamp(2rem,7vw,7rem); align-items:start; }
.apple-music-copy { max-width:460px; }
.apple-music-copy h2 { margin:0 0 .8rem; color:var(--ink); font:500 clamp(2.5rem,5vw,5rem)/.94 var(--serif); }
.apple-music-player { min-width:0; overflow:hidden; padding:clamp(.65rem,1.5vw,1rem); border:1px solid var(--line); border-top-color:var(--gold); border-radius:14px; background:linear-gradient(145deg,rgba(118,27,38,.22),rgba(9,7,7,.72)); box-shadow:var(--shadow); }
.apple-music-player iframe { display:block; width:100%; max-width:660px; height:450px; margin-inline:auto; border:0; border-radius:10px; background:transparent; }

.testimonial-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.testimonial { grid-column: span 4; min-height: 330px; display:flex; flex-direction:column; justify-content:space-between; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--surface); border-top: 1px solid var(--gold); }
.testimonial:nth-child(5n+1), .testimonial:nth-child(5n+4) { grid-column: span 6; }
.testimonial blockquote { margin: 0; color: var(--ink); font: 400 clamp(1.35rem, 2vw, 1.75rem)/1.38 var(--serif); }
.testimonial cite { display:block; margin-top:2rem; color: var(--gold-bright); font-style:normal; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }
.testimonial cite span { display:block; margin-top:.35rem; color:var(--dim); letter-spacing:.04em; text-transform:none; }

.gallery-grid { columns: 3; column-gap: 1rem; }
.gallery-item { break-inside: avoid; margin: 0 0 1rem; position: relative; overflow: hidden; background:var(--surface); }
.gallery-item a { display:block; text-decoration:none; }
.gallery-item img { width:100%; transition: transform .5s, opacity .3s; }
.gallery-item figcaption { position:absolute; inset:auto 0 0; padding:3rem 1rem 1rem; background:linear-gradient(transparent,rgba(0,0,0,.85)); color:white; font-size:.76rem; opacity:0; transition:opacity .3s; }
.gallery-item:hover img { transform: scale(1.025); opacity:.84; }
.gallery-item:hover figcaption, .gallery-item a:focus-visible figcaption { opacity:1; }
.lightbox { max-width: min(94vw, 1180px); max-height: 94vh; padding:0; border:0; background:#080606; color:white; box-shadow:var(--shadow); }
.lightbox::backdrop { background:rgba(3,2,2,.9); }
.lightbox img { max-height:82vh; margin:auto; }
.lightbox p { margin:.7rem 1rem 1rem; }
.lightbox-close { position:absolute; top:.7rem; right:.7rem; width:46px; height:46px; border:1px solid rgba(255,255,255,.6); border-radius:50%; background:rgba(0,0,0,.55); color:white; cursor:pointer; }

.contact-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(3rem,8vw,8rem); }
.contact-note { color:var(--muted); }
.enquiry-form { display:grid; gap:1.1rem; }
.field { display:grid; gap:.45rem; }
.field label { color:var(--gold-bright); font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
.field input, .field textarea { width:100%; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:1rem .2rem; background:transparent; color:var(--ink); }
.field textarea { min-height:150px; resize:vertical; }
.form-status { min-height:1.7em; color:var(--gold-bright); }

.site-footer { padding: 70px 0 40px; border-top: 1px solid var(--line); background:var(--canvas-deep); }
.footer-grid { display:grid; grid-template-columns:1fr auto; gap:3rem; align-items:end; }
.footer-logo { width:min(360px,80vw); }
.footer-nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:1rem 1.7rem; }
.footer-nav a { color:var(--muted); font-size:.72rem; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; }
.footer-meta { margin-top:3rem; padding-top:1.2rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:1rem; color:var(--dim); font-size:.72rem; }

@media (max-width: 900px) {
  .menu-toggle { display:block; }
  .header-inner { position:relative; }
  .site-nav {
    position:absolute;
    top:100%;
    left:auto;
    right:0;
    width:min(260px, calc(100vw - 28px));
    display:none;
    gap:.2rem;
    padding:.7rem .9rem .85rem;
    background:rgba(9,7,7,.98);
    border:1px solid var(--line);
    border-top:0;
    box-shadow:0 18px 34px rgba(0,0,0,.28);
    flex-direction:column;
    align-items:stretch;
  }
  .site-nav a {
    display:flex;
    width:100%;
    min-height:44px;
    align-items:center;
    justify-content:flex-end;
    padding:.5rem .1rem;
    text-align:right;
  }
  .site-nav.open { display:flex; }

  .hero-content { width:min(690px, 88vw); }
  .intro-grid, .recording-grid, .apple-music-grid, .contact-grid { grid-template-columns:1fr; }
  .poster-feature { grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr); gap:3rem; }
  .gig-detail-grid { grid-template-columns:1fr; }
  .intro-grid { gap:2rem; }
  .featured-video-grid { grid-template-columns:1fr; }
  .featured-video-support-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .video-showcase { grid-template-columns:1fr; }
  .video-rail { max-height:360px; }
  .testimonial { grid-column:span 6 !important; }
  .gallery-grid { columns:2; }
}

@media (max-width: 620px) {
  .container, .content-narrow { width:min(calc(100% - 28px), var(--max)); }
  :root { --site-header-height: 89px; --site-header-scrolled-height: 70px; }
  .site-header:not(.inner) { margin-bottom: calc(-1 * var(--site-header-flow-height)); }
  .header-inner { min-height:calc(var(--site-header-height) - 1px); }
  .hero { min-height: 760px; align-items:end; }
  .hero::before { background-position:67% center; }
  .hero::after { background:linear-gradient(0deg,rgba(13,5,7,.95) 0%,rgba(28,5,9,.65) 58%,rgba(15,3,6,.18) 100%); }
  .hero-content { width:min(calc(100% - 28px), var(--max)); margin-inline:auto; padding:150px 0 60px; }
  .hero-signature { width:78vw; }
  .display { font-size:clamp(3.1rem,17vw,5.2rem); }
  .marquee { padding-block:1rem; font-size:.72rem; letter-spacing:.28em; }
  .section-head { align-items:flex-start; flex-direction:column; }
  .poster-feature { grid-template-columns:1fr; gap:2rem; }
  .poster-feature-art { width:min(100%,430px); margin-inline:auto; }
  .error-page { min-height:auto; padding-block:clamp(72px, 18vw, 110px); }
  .error-page-inner { grid-template-columns:1fr; gap:2.5rem; }
  .error-page-mark { order:2; min-height:240px; }
  .error-page-number { font-size:clamp(7rem, 32vw, 11rem); }
  .error-page .actions { flex-direction:column; align-items:stretch; }
  .error-page .button { width:100%; }
  .gig-summary { grid-template-columns:72px 1fr 24px; min-height:112px; gap:.8rem; }
  .gig-date { display:block; }
  .gig-date strong { font-size:2.6rem; }
  .gig-date span { display:block; }
  .gig-time { grid-column:2; }
  .gig-plus { grid-column:3; grid-row:1 / 3; }
  .gig-body { grid-template-columns:72px 1fr; gap:.8rem; }
  .gig-facts { grid-template-columns:1fr; }
  .featured-video-support-list { grid-template-columns:1fr; gap:.75rem; }
  .featured-video-next-label { display:block; margin:0 0 .6rem; color:var(--gold-bright); font:600 .7rem/1.2 var(--sans); letter-spacing:.2em; text-transform:uppercase; }
  .video-card--support { display:grid; grid-template-columns:36% minmax(0,1fr); align-items:stretch; }
  .video-card--support .video-facade { height:100%; }
  .video-card--support.is-playing { display:block; }
  .video-card--support.is-playing .video-facade { width:100%; height:auto; }
  .video-card--support .video-card-details { min-height:0; align-items:center; padding:.75rem .8rem; }
  .video-card--support .video-card-title { font-size:clamp(1.05rem,4.5vw,1.35rem); }
  .video-card--support .video-card-number { padding-top:0; }
  .testimonial-grid { display:block; }
  .testimonial { min-height:0; margin-bottom:1rem; }
  .gallery-grid { columns:1; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-nav { justify-content:flex-start; }
  .footer-meta { flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  /* Keep the sticky header's readability/geometry state change gradual. */
  .site-header:not(.inner) {
    transition-duration:
      var(--site-header-geometry-transition),
      var(--site-header-colour-transition),
      var(--site-header-colour-transition) !important;
  }
  .site-header .header-inner,
  .site-header .logo-link img {
    transition-duration: var(--site-header-geometry-transition) !important;
  }
}