/* The Pictures Band theme: "The Main Stage" (design study C, chosen by Bob 2026-10-19), layered
   over bands/band.css. Near-black blue ground, saturated stage color pulled from the band's own
   photos (hot magenta, electric cyan, a little amber), hard edges, 1px lines, bold uppercase
   grotesk headlines, a mono for data labels. No paper, no halftone dots, no print shadows, no
   tilted frames, no rounded corners anywhere.
   Type: the study loads Archivo (wdth 62..125, wght 400..900) and JetBrains Mono 500/700 from
   Google Fonts. Neither file is on disk. Archivo's weight-only variable file (band.css, ../fonts/)
   carries the display and body until the width-axis file arrives; IBM Plex Mono (local) stands in
   for JetBrains Mono. When the files are fetched, add the two @font-face lines below and nothing
   else changes:
     font-family 'Archivo Wide', file fonts/Archivo-wdth-wght.woff2, font-weight 400 900, font-stretch 62% 125%
     font-family 'JetBrains Mono', file fonts/JetBrainsMono-500.woff2, font-weight 500 (and 700)
   (written out as @font-face rules; the build copies every theme font it finds under fonts/, so the files must exist first).
   Fonts are local (bands/themes/fonts/), copied to assets/fonts/ by the build. */
@font-face{font-family:'Archivo Wide';src:url('fonts/Archivo-wdth-wght.woff2') format('woff2');font-weight:400 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/JetBrainsMono-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/JetBrainsMono-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Plex';src:url('fonts/IBMPlexMono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex';src:url('fonts/IBMPlexMono-500.woff2') format('woff2');font-weight:500 900;font-display:swap}

/* ---------- tokens: the stage replaces the agency's paper and ink ---------- */
:root{
 --bg:#080b1a;--panel:#121835;--raise:#1a2147;--line-c:#262e5c;--ink:#f3f5ff;--muted:#aeb5d6;--ctl:#7d87be;
 --mag:#ff3d9a;--cyan:#22e1ff;--amber:#ffb547;
 --paper:var(--bg);--white:var(--panel);--rocket-red:var(--mag);--atomic-teal:var(--cyan);--deep-teal:var(--raise);--signal-yellow:var(--amber);
 --line:1px solid var(--line-c);
 --display:'Archivo Wide','Archivo','Arial Black',system-ui,sans-serif;--body:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
 --mono:'JetBrains Mono','Plex','IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
 --wide:115%}

/* ---------- base type ---------- */
body{font-family:var(--body);font-size:17px;line-height:1.55;color:var(--ink);background:var(--bg)}
h1,h2,h3{font-family:var(--display);font-stretch:var(--wide);text-transform:uppercase;line-height:.95;letter-spacing:-.005em;text-shadow:none;color:var(--ink);text-wrap:balance;overflow-wrap:break-word}
h2{font-size:clamp(34px,4.6vw,64px);font-weight:850}
h3{font-size:22px;font-weight:800;line-height:1.05}
a{color:inherit;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.eyebrow{font:700 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mag)}
.frame-caption,.photo-grid figcaption,.photo-lead figcaption,.cover-photos .cap{font:500 12px/1.4 var(--mono);letter-spacing:.02em;text-transform:none;color:var(--muted)}

/* Buttons: the study's .btn. Hard edges, dark text on neon, a lift and a glow on hover. */
.button{font:800 15px/1 var(--display);font-stretch:110%;letter-spacing:.04em;text-transform:uppercase;min-height:48px;padding:12px 22px;gap:10px;border:2px solid transparent;border-radius:0;background:var(--cyan);color:var(--bg);box-shadow:none;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.button:hover{transform:translateY(-2px);box-shadow:0 10px 32px -8px rgba(34,225,255,.7);color:var(--bg)}
.button.mag{background:var(--mag)}
.button.mag:hover{box-shadow:0 10px 32px -8px rgba(255,61,154,.7)}
.button.light,.button.yellow{background:transparent;color:var(--ink);border-color:var(--ctl);box-shadow:none}
.button.light:hover,.button.yellow:hover{border-color:var(--cyan);color:var(--ink);box-shadow:none;transform:translateY(-2px)}
.actions{gap:12px}

/* ---------- header: a glass bar over the stage, the wordmark in wide caps ---------- */
.band-nav{background:rgba(8,11,26,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);border-bottom:1px solid var(--line-c)}
.band-nav-inner{min-height:68px;gap:28px}
.band-nav .band-name,.band-menu .band-name{font:900 19px/1 var(--display);font-stretch:var(--wide);letter-spacing:.02em;text-transform:uppercase;color:var(--ink);text-shadow:none;padding:6px 0;text-decoration:none}
.band-nav .band-name:hover{color:var(--cyan)}
.band-nav-links ul{gap:2px}
.band-nav-links ul a{display:inline-flex;align-items:center;height:44px;padding:0 12px;font:600 14px/1 var(--body);letter-spacing:.02em;color:var(--ink);border:0;border-radius:0;position:relative;transition:color .15s}
.band-nav-links ul a::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:2px;background:var(--mag);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.band-nav-links ul a:hover{text-decoration:none}
.band-nav-links ul a:hover::after,.band-nav-links ul a[aria-current]::after{transform:scaleX(1)}
.band-nav-links ul a[aria-current]{background:transparent;color:var(--ink);border:0;box-shadow:none;border-radius:0}
.band-nav .band-book{min-height:44px;padding:10px 16px;font-size:14px;background:var(--cyan);color:var(--bg);box-shadow:none}
.band-nav .band-book:hover{box-shadow:0 10px 32px -8px rgba(34,225,255,.7)}
.band-nav .band-book[aria-current]{background:var(--ink);color:var(--bg)}
.band-menu-button{font:700 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:transparent;color:var(--ink);border:2px solid var(--ctl);border-radius:0;box-shadow:none;min-height:44px;padding:8px 14px}
/* Phone menu: the same ground, big wide-caps links, magenta marks the page you are on. */
.band-menu{background:var(--bg);color:var(--ink);padding:16px 20px 32px}
.band-menu::backdrop{background:#000}
.band-menu-close{font:700 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:transparent;color:var(--ink);border:2px solid var(--ctl);border-radius:0;box-shadow:none}
.band-menu ul{margin:36px 0 28px}
.band-menu ul a{font:850 26px/1 var(--display);font-stretch:112%;letter-spacing:0;text-transform:uppercase;color:var(--ink);padding:18px 0;border-bottom:1px solid var(--line-c)}
.band-menu ul a[aria-current]{background:transparent;color:var(--mag);text-shadow:none;border:0;border-bottom:1px solid var(--line-c);box-shadow:none;border-radius:0}
.band-menu .band-book{background:var(--cyan);color:var(--bg);box-shadow:none;font-size:15px}

/* ---------- home hero: the LED wall with their own name on it, the statement, the stats rail ---------- */
.band-hero{background:var(--bg);color:var(--ink);border-bottom:0;min-height:max(640px,min(calc(100svh - 68px),900px));display:flex;flex-direction:column;justify-content:flex-end}
.hero-photo{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:62% 35%}
/* Scrim: a floor of .64 behind every line of hero type (the study's contrast table). */
.band-hero::before{inset:0;z-index:1;opacity:1;background-image:linear-gradient(0deg,rgba(8,11,26,.97) 0,rgba(8,11,26,.9) 150px,rgba(8,11,26,0) 46%),linear-gradient(90deg,rgba(8,11,26,.9) 0,rgba(8,11,26,.82) 40%,rgba(8,11,26,.66) 58%,rgba(8,11,26,.1) 80%,rgba(8,11,26,0) 100%);background-size:auto}
.band-hero::after{content:"";position:absolute;left:0;right:0;top:0;width:auto;height:3px;z-index:2;background:linear-gradient(90deg,var(--mag),var(--cyan) 60%,var(--amber));opacity:1;transform:none}
.band-hero-inner{z-index:2;display:block;padding:120px 0 0}
.band-hero-copy{padding-bottom:40px}
.band-hero .kicker{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--ink);margin-bottom:18px}
.band-hero .kicker span+span::before{content:"/";color:var(--ink);margin-right:18px}
.band-hero h1{font-size:clamp(42px,6vw,86px);font-weight:900;font-stretch:118%;line-height:.9;letter-spacing:-.005em;color:var(--ink);text-shadow:none;max-width:min(15ch,880px)}
.band-hero h1 em{font-style:normal;color:var(--cyan)}
.band-hero h1 .amp{color:var(--amber)}
.band-hero .lede{font:400 clamp(18px,1.5vw,21px)/1.5 var(--body);color:var(--ink);max-width:44ch;margin-top:26px}
.band-hero .actions{margin-top:32px}
.band-hero .actions .button{min-width:200px;background:var(--cyan);color:var(--bg);border-color:transparent}
.band-hero .actions .button.light{background:transparent;color:var(--ink);border-color:var(--ctl)}
.band-hero .actions .button.light:hover{border-color:var(--cyan)}
.rail{list-style:none;margin:0;padding:0;border-top:1px solid rgba(174,181,214,.35);display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.rail li{padding:20px 24px 24px 0;position:relative}
.rail li+li{padding-left:24px;border-left:1px solid rgba(174,181,214,.25)}
.rail li::before{content:"";position:absolute;top:-1px;left:0;width:56px;height:3px;background:var(--mag)}
.rail li+li::before{left:24px}
.rail .r-cyan::before{background:var(--cyan)}.rail .r-amber::before{background:var(--amber)}
.rail .n{display:block;font:900 clamp(36px,3.8vw,54px)/1 var(--display);font-stretch:112%;letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.rail .n small{font-size:.5em;font-weight:800;margin:0 .12em}
.rail .n small.w{font-size:.42em;margin:0}
.rail .l{display:block;margin-top:8px;font:500 13px/1.35 var(--mono);color:var(--muted);letter-spacing:.02em}

/* ---------- interior page hero: the panel gradient, wide caps, a hard-edged photo ---------- */
.page-hero{background:linear-gradient(180deg,var(--panel),var(--bg));color:var(--ink);border-bottom:1px solid var(--line-c);border-top:3px solid var(--cyan)}
.page-hero::before{display:none}
.page-hero-inner{padding:56px 0 60px;gap:clamp(28px,3vw,48px)}
.page-hero-inner.has-photo{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.page-hero .kicker{color:var(--mag);margin-bottom:14px}
.page-hero h1{font-size:clamp(34px,4.4vw,62px);font-weight:900;line-height:.95;color:var(--ink);text-shadow:none;max-width:none}
.page-hero .lede{font-size:clamp(16px,1.3vw,18px);line-height:1.55;color:var(--muted);margin-top:18px;max-width:none}
.page-hero .actions{margin-top:26px}
.page-hero .actions .button{background:var(--cyan);color:var(--bg)}
.page-hero .actions .button.light{background:transparent;color:var(--ink);border-color:var(--ctl)}
.page-hero .actions .button.light:hover{border-color:var(--cyan)}
.page-hero-media{transform:none;margin:0}
.page-hero-media .shot{border:1px solid var(--line-c);box-shadow:none;background:#000}
.chips{gap:10px;margin-top:22px}
.chips li,.chips li:nth-child(even){font:800 13px/1 var(--display);font-stretch:110%;letter-spacing:.02em;text-transform:uppercase;padding:10px 14px;border:2px solid var(--ctl);border-radius:0;background:transparent;color:var(--ink)}

/* ---------- section grammar: a hairline above every section, mono numbers, wide-caps titles ---------- */
.band-section{padding:88px 0;border-top:1px solid var(--line-c)}
.band-section+.band-section{padding-top:88px}
.section-heading{margin-bottom:40px;align-items:end;gap:16px 56px}
.section-heading .eyebrow{display:block;background:transparent;color:var(--mag);border:0;padding:0;box-shadow:none;margin-bottom:14px}
.section-heading>p:not(.eyebrow){font-size:18px;line-height:1.55;color:var(--muted);max-width:440px}
.panel{border:1px solid var(--line-c);border-radius:0;background:var(--panel);box-shadow:none}
.dots::after,.shot::after{display:none}
.shot{background:#000}
.shot img{font:500 12px/1.4 var(--mono);color:var(--muted)}
.link-row a{font:800 13px/1 var(--display);font-stretch:110%;letter-spacing:.04em;text-transform:uppercase;min-height:44px;padding:12px 18px;border:2px solid var(--ctl);border-radius:0;background:transparent;color:var(--ink);box-shadow:none}
.link-row a:hover{border-color:var(--cyan);background:transparent}

/* ---------- home: the note and the awards, right after the hero ---------- */
.note-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;background:var(--panel);border:1px solid var(--line-c);padding:24px}
.note-card img{width:100%;height:auto;aspect-ratio:1448/1086;object-fit:cover;background:#fff}
.note-quote{margin:0;display:flex;flex-direction:column;gap:14px;font-size:17px;line-height:1.55}
.note-quote .eyebrow{color:var(--amber)}
.note-quote cite{font:700 13px/1.3 var(--mono);font-style:normal;color:var(--amber)}
.awards{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(150px,auto);gap:12px}
.awards li{background:var(--panel);border:1px solid var(--line-c);padding:24px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;position:relative;overflow:hidden;transition:transform .25s ease,border-color .25s ease}
.awards li:hover{transform:translateY(-3px);border-color:var(--ctl)}
.awards .eyebrow{margin:0}
.awards .a-cyan .eyebrow{color:var(--cyan)}.awards .a-amber .eyebrow{color:var(--amber)}.awards .a-mag .eyebrow{color:var(--mag)}
.awards b{display:block;font:850 22px/1.05 var(--display);font-stretch:110%;text-transform:uppercase}
.awards .yr{font:900 44px/1 var(--display);font-stretch:112%}
.awards .a-cyan .yr{color:var(--cyan)}.awards .a-amber .yr{color:var(--amber)}.awards .a-mag .yr{color:var(--mag)}
.awards .sub{font:500 13px/1.4 var(--mono);color:var(--muted);margin-top:8px}
.awards .a-wide{grid-column:span 2}
.awards .a-rev{grid-column:span 2;grid-row:span 2;background:radial-gradient(120% 90% at 0% 100%,rgba(255,61,154,.22),transparent 60%),radial-gradient(90% 80% at 100% 0%,rgba(34,225,255,.16),transparent 60%),var(--panel)}
.awards .a-rev .eyebrow{color:var(--amber)}
.awards .stars{display:block;color:var(--amber);font-size:26px;letter-spacing:4px;line-height:1}
.awards .big{display:block;font:900 clamp(96px,11vw,168px)/.85 var(--display);font-stretch:var(--wide);letter-spacing:-.03em;margin-top:10px}
.awards p.t{font:800 22px/1.15 var(--display);font-stretch:110%;text-transform:uppercase;margin:0}
.awards p.t span{display:block;font:500 14px/1.45 var(--body);text-transform:none;color:var(--muted);margin-top:8px}
.awards .a-quote q{font:900 clamp(40px,4vw,58px)/.95 var(--display);font-stretch:var(--wide);text-transform:uppercase;color:var(--mag);quotes:none}

/* ---------- home: cover lines as the study's panels ---------- */
.cover{gap:40px}
.cover-lines{gap:12px}
.cover-line{background:var(--panel);color:var(--ink);border:1px solid var(--line-c);border-radius:0;box-shadow:none;padding:22px 24px;gap:10px 20px;transition:border-color .15s,transform .18s}
.cover-line:hover{transform:translateY(-3px);border-color:var(--ctl)}
.cover-lines li:nth-child(2) .cover-line,.cover-lines li:nth-child(3) .cover-line{box-shadow:none}
.cover-line .num{font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;background:transparent;color:var(--cyan);border:0;padding:0;box-shadow:none;margin-top:6px}
.cover-line h3{font-size:22px;margin-bottom:6px}
.cover-line:hover h3{color:var(--cyan)}
.cover-line p{font-size:15px;color:var(--muted)}
.cover-line .go{font:700 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mag);margin-top:4px}
.cover-line:hover .go{text-decoration:none}
.cover-line.book{background:radial-gradient(90% 80% at 100% 0%,rgba(255,61,154,.22),transparent 60%),var(--panel);color:var(--ink);border-color:rgba(255,61,154,.5);box-shadow:none}
.cover-line.book .num{background:transparent;color:var(--mag)}
.cover-line.book h3{color:var(--ink)}.cover-line.book:hover h3{color:var(--mag)}
.cover-line.book p{color:var(--muted)}.cover-line.book .go{color:var(--cyan)}
.cover-photos{gap:12px}
.cover-photos a,.cover-photos a:first-child,.cover-photos a:nth-child(2){transform:none;border:1px solid var(--line-c);border-radius:0;background:var(--panel);box-shadow:none;overflow:hidden;transition:transform .18s,border-color .15s}
.cover-photos a:hover,.cover-photos a:first-child:hover{transform:translateY(-3px);border-color:var(--ctl)}
.cover-photos .shot{border-bottom:1px solid var(--line-c)}
.cover-photos a:first-child .shot{aspect-ratio:16/9}
.cover-photos .cap{padding:10px 14px}

/* ---------- home: the three tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line-c)}
.tier{display:flex;flex-direction:column;background:var(--panel);position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;--c:var(--cyan)}
.tier.t-amber{--c:var(--amber)}.tier.t-mag{--c:var(--mag)}
.tier+.tier{border-left:1px solid var(--line-c)}
.tier-ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:#000}
.tier-ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tier-ph .lvl{position:absolute;left:0;top:0;background:var(--bg);padding:10px 14px;font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.tier-bd{padding:26px 26px 28px;display:flex;flex-direction:column;gap:14px;flex:1}
.tier h3{font-size:clamp(24px,2.2vw,30px)}
.tier h3 span{display:block;color:var(--c);font-size:.62em;font-stretch:100%;margin-bottom:6px;letter-spacing:.04em}
.tier p{color:var(--muted)}
.addons{list-style:none;margin:auto 0 0;padding:16px 0 0;border-top:1px solid var(--line-c);display:flex;flex-direction:column;gap:6px}
.addons li{display:flex;align-items:center;gap:12px;min-height:40px;padding:8px 12px;border:1px solid var(--ctl);font-size:15px;font-weight:600}
.addons li::before{content:"+";font:700 14px/1 var(--mono);color:var(--c)}
.tier::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.09) 50%,transparent 65%);transform:translateX(-120%)}
.tier:hover{transform:translateY(-4px);box-shadow:0 24px 48px -24px var(--c);z-index:1}
.tier:hover .tier-ph img{transform:scale(1.04)}
.tier:hover::after{transform:translateX(120%);transition:transform .9s ease}
.impact-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 56px;margin-top:32px;padding-top:28px;border-top:1px solid var(--line-c)}
.impact-foot p{color:var(--muted);margin:0}
.impact-foot strong{color:var(--ink);font-weight:700}

/* ---------- home: the cities band, magenta, outline every other city ---------- */
.cities{padding:72px 0;background:var(--mag);color:var(--bg);overflow:hidden;position:relative}
.cities .eyebrow{color:var(--bg)}
.cities ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:0 28px;margin:22px 0 0;font:900 clamp(26px,3.1vw,44px)/1.06 var(--display);font-stretch:118%;text-transform:uppercase;letter-spacing:-.01em}
.cities li{flex:1 1 auto;white-space:nowrap;border-top:3px solid var(--bg);padding:10px 0 14px}
.cities li:nth-child(even){color:transparent;-webkit-text-stroke:2px var(--bg)}
.cities li.note{font:700 14px/1.4 var(--mono);text-transform:none;letter-spacing:.02em;display:flex;flex-direction:column;justify-content:center;gap:4px;-webkit-text-stroke:0;color:var(--bg);flex:0 1 auto}
@media(prefers-reduced-motion:no-preference){
 .cities::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-110%);animation:sweep 2.4s cubic-bezier(.3,.1,.3,1) 1s 1 forwards}
}
@keyframes sweep{to{transform:translateX(110%)}}

/* ---------- home: two lanes, weddings and galas ---------- */
.lanes{padding:0;border-top:1px solid var(--line-c)}
.lane-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.lane{position:relative;display:flex;flex-direction:column;background:var(--panel);--c:var(--cyan)}
.lane.l-mag{--c:var(--mag)}
.lane+.lane{border-left:1px solid var(--line-c)}
.lane-ph{position:relative;aspect-ratio:16/8;overflow:hidden;border-bottom:4px solid var(--c)}
.lane-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:transform .8s ease}
.lane-ph .eyebrow{position:absolute;left:0;bottom:0;margin:0;background:var(--bg);padding:12px 16px 10px;color:var(--c)}
.lane:hover .lane-ph img{transform:scale(1.03)}
.lane-in{padding:36px 40px 44px;display:flex;flex-direction:column;flex:1}
.lane h3{font-size:clamp(28px,3vw,44px);font-weight:900;margin:0 0 16px}
.lane p{max-width:62ch;color:var(--muted);margin:0}
.lane p+p{margin-top:12px;color:var(--ink)}
.lane .button{margin-top:auto;align-self:flex-start}
.lane p:last-of-type{margin-bottom:28px}

/* ---------- set list: the study's set panels ---------- */
.song-groups{column-gap:12px}
.song-group,.song-group:nth-child(3n+2),.song-group:nth-child(3n){background:var(--panel);color:var(--ink);border:1px solid var(--line-c);border-radius:0;box-shadow:none;padding:22px 22px 24px;margin-bottom:12px}
.song-group h3{font-size:18px;color:var(--cyan);margin-bottom:12px;justify-content:space-between;align-items:baseline}
.song-group h3 small{font:700 12px/1 var(--mono);letter-spacing:.1em;color:var(--amber)}
.songs li{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;padding:7px 0;border-bottom:1px solid var(--line-c);font-size:16px}
.songs li:last-child{border-bottom:0}
.songs li b{font-weight:600;color:var(--ink)}
.songs li span{display:inline;font:500 12px/1.3 var(--mono);letter-spacing:.02em;text-transform:none;opacity:1;color:var(--muted)}
.songs li i{font:500 12px/1 var(--mono);font-style:normal;color:var(--amber)}
.requests{background:var(--panel);color:var(--ink);border:1px solid var(--line-c);border-left:3px solid var(--mag);border-radius:0;box-shadow:none;padding:22px 26px;max-width:860px;margin-top:28px}
.requests .eyebrow{color:var(--mag);margin-bottom:8px}
.requests p:not(.eyebrow){font-size:16px;color:var(--muted)}

/* ---------- media: the video wall and the photo grid ---------- */
.wall{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.film{position:relative;display:block;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;color:var(--ink);text-decoration:none}
.film img{width:100%;height:100%;object-fit:cover;opacity:.88;transition:transform .5s ease,opacity .3s ease}
.film .shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,11,26,.92) 0,rgba(8,11,26,.75) 30%,rgba(8,11,26,0) 62%)}
.film .play{position:absolute;left:20px;top:20px;width:56px;height:56px;display:grid;place-items:center;background:var(--cyan);color:var(--bg);font-size:20px;padding-left:4px;transition:transform .2s ease}
.film .ttl{position:absolute;left:20px;right:20px;bottom:16px;font:800 17px/1.15 var(--display);font-stretch:108%;text-transform:uppercase}
.film .ttl small{display:block;font:500 12px/1.3 var(--mono);text-transform:none;color:var(--muted);margin-top:6px;letter-spacing:.02em}
.film:hover img{transform:scale(1.04);opacity:1}
.film:hover .play{transform:scale(1.08)}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.photo-grid{gap:12px}
.photo-grid figure,.photo-grid figure:nth-child(3n+2),.photo-grid figure:nth-child(3n),.photo-lead{border:1px solid var(--line-c);border-radius:0;background:var(--panel);box-shadow:none;overflow:hidden}
.photo-grid .shot,.photo-lead .shot{aspect-ratio:3/2;border-bottom:1px solid var(--line-c)}
.photo-grid figcaption,.photo-lead figcaption{padding:10px 14px;background:transparent}

/* ---------- book the band: the study's booking band, dark form, the note ---------- */
#book{background:radial-gradient(70% 90% at 100% 0%,rgba(34,225,255,.12),transparent 60%),radial-gradient(60% 80% at 0% 100%,rgba(255,61,154,.14),transparent 60%),#0c1026;border-top:3px solid var(--cyan)}
.book-panel{gap:28px}
.book-panel .panel{padding:32px;border:1px solid var(--line-c);border-radius:0;background:var(--panel);box-shadow:none}
.book-panel aside.panel{background:radial-gradient(90% 80% at 100% 0%,rgba(255,61,154,.18),transparent 60%),var(--panel);color:var(--ink);box-shadow:none}
.book-panel aside .eyebrow{color:var(--cyan)}
.book-panel aside h2{font-size:clamp(24px,2.4vw,32px);color:var(--ink);text-shadow:none;margin-bottom:14px}
.book-panel aside p{font-size:16px;line-height:1.55;color:var(--muted)}
.book-form{gap:18px 20px}
.book-form label{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:700 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.book-form label input,.book-form label select,.book-form label textarea{flex:1 1 100%}
.book-form .req{color:var(--mag)}
.book-form input,.book-form select,.book-form textarea{font:500 16px/1.3 var(--body);padding:12px 14px;min-height:48px;border:2px solid var(--ctl);border-radius:0;background:var(--bg);color:var(--ink);box-shadow:none;color-scheme:dark}
.book-form select{background-color:var(--bg);background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;background-size:6px 6px;background-repeat:no-repeat}
.book-form input:focus-visible,.book-form select:focus-visible,.book-form textarea:focus-visible{outline:3px solid var(--cyan);outline-offset:1px;border-color:var(--cyan)}
.book-form .form-foot .button{background:var(--cyan);color:var(--bg)}
.book-form [role=status]{font:700 14px/1.45 var(--mono);color:var(--amber)}
.presented-by{font:700 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:transparent;color:var(--ink);border:2px solid var(--ctl);border-radius:0;box-shadow:none;padding:12px 16px;margin-top:22px}
.presented-by:hover{transform:translateY(-2px);border-color:var(--cyan)}

/* ---------- footer: the ground, a hairline on top ---------- */
.band-footer{background:var(--bg);color:var(--muted);border-top:1px solid var(--line-c);padding:56px 0 40px}
.band-footer::before{display:none}
.band-footer-inner{gap:32px 48px;grid-template-columns:1.4fr 1fr}
.band-footer .eyebrow{font:700 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mag);text-shadow:none;margin-bottom:14px}
.band-footer-name{font:850 24px/1.05 var(--display);font-stretch:var(--wide);letter-spacing:0;text-transform:uppercase;color:var(--ink);text-shadow:none;margin-bottom:14px}
.band-footer-brand .actions .button{background:var(--cyan);color:var(--bg)}
.band-footer ul{gap:6px}
.band-footer ul a{font:400 15px/1.3 var(--body);color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
.band-footer ul a:hover{color:var(--cyan)}
.band-footer ul a[aria-current]{text-decoration:none;color:var(--cyan)}
.band-footer-credit{font:500 12px/1.5 var(--mono);letter-spacing:.02em;text-transform:none;color:var(--muted);border-top:1px solid var(--line-c);padding-top:22px;margin-top:24px}
.band-footer-credit a{color:var(--muted)}.band-footer-credit a:hover{color:var(--cyan)}

/* ---------- responsive ---------- */
@media(max-width:1100px){
 .awards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .awards .a-rev{grid-column:1/-1;grid-row:auto}
}
@media(max-width:1050px){
 .note-card{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
 .band-section{padding:64px 0}.band-section+.band-section{padding-top:64px}
 .section-heading{margin-bottom:28px}
 .tiers{grid-template-columns:minmax(0,1fr)}
 .tier+.tier{border-left:0;border-top:1px solid var(--line-c)}
 .tier-ph{aspect-ratio:16/9}
 .impact-foot{grid-template-columns:minmax(0,1fr)}
 .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lane-grid{grid-template-columns:minmax(0,1fr)}
 .lane+.lane{border-left:0;border-top:1px solid var(--line-c)}
 .rail{grid-template-columns:repeat(2,minmax(0,1fr))}
 .rail li:nth-child(3){padding-left:0;border-left:0}
 .rail li:nth-child(3)::before{left:0}
 .rail li:nth-child(n+3){border-top:1px solid rgba(174,181,214,.25)}
 .band-hero-inner{padding-top:96px}
}
@media(max-width:860px){
 .band-nav-inner{min-height:64px}
 .band-nav .band-name{font-size:17px}
}
@media(max-width:760px){
 body{font-size:16px}
 h2{font-size:clamp(30px,8vw,40px)}
 .band-hero{min-height:0}
 .band-hero::before{background-image:linear-gradient(0deg,rgba(8,11,26,.97) 0,rgba(8,11,26,.9) 260px,rgba(8,11,26,.74) 60%,rgba(8,11,26,.64) 100%)}
 .hero-photo img{object-position:42% 30%}
 .band-hero-inner{padding:150px 0 0}
 .band-hero-copy{padding-bottom:36px}
 .band-hero .kicker{gap:6px 10px}.band-hero .kicker span+span::before{margin-right:10px}
 .band-hero h1{font-size:clamp(40px,11.5vw,54px);line-height:.92;text-shadow:none}
 .band-hero .lede{font-size:17px;max-width:none}
 .band-hero .actions{gap:12px}.band-hero .actions .button{flex:1 1 100%;min-width:0;font-size:14px;padding:12px 14px}
 .rail li{padding:18px 12px 22px 0}.rail li+li{padding-left:14px}.rail li+li::before{left:14px}.rail li:nth-child(3){padding-left:0}.rail .l{font-size:12px}
 .page-hero-inner,.page-hero-inner.has-photo{grid-template-columns:1fr;padding:36px 0 40px;gap:24px}
 .page-hero h1{font-size:clamp(32px,9.5vw,42px);line-height:.96;text-shadow:none}
 .page-hero .lede{font-size:16px}
 .page-hero-media .shot{aspect-ratio:16/9}
 .chips li,.chips li:nth-child(even){font-size:12px;padding:8px 10px}
 .section-heading>p:not(.eyebrow){margin-top:12px;max-width:none}
 .note-card{grid-template-columns:1fr;padding:16px;gap:18px}
 .awards{gap:10px;grid-auto-rows:auto}
 .awards li{padding:18px 16px}
 .awards .a-wide,.awards .a-rev{grid-column:1/-1}
 .awards b{font-size:17px}.awards .yr{font-size:34px}
 .awards .big{font-size:clamp(84px,24vw,120px)}
 .awards .a-quote q{font-size:clamp(34px,10vw,44px)}
 .cover{gap:28px}.cover-line{padding:18px 16px;gap:8px 12px}.cover-line h3{font-size:20px}
 .cover-photos{gap:10px}
 .tier-bd{padding:20px 16px 22px}
 .cities{padding:52px 0}
 .cities li:nth-child(even){-webkit-text-stroke:1.5px var(--bg)}
 .lane-in{padding:24px 16px 32px}
 .lane-ph{aspect-ratio:4/3}
 .song-group,.song-group:nth-child(3n+2),.song-group:nth-child(3n){padding:18px 16px 20px;margin-bottom:10px}
 .requests{padding:18px 16px}
 .wall{grid-template-columns:minmax(0,1fr)}
 .film .play{width:48px;height:48px;left:14px;top:14px}
 .film .ttl{left:14px;right:14px}
 .photo-grid{gap:10px}
 .book-panel{gap:20px}.book-panel .panel{padding:20px 16px 24px}.book-form{gap:14px}
 .band-footer{padding:44px 0 32px}.band-footer-inner{grid-template-columns:1fr;gap:28px}
 .band-footer-name{font-size:22px}
}
@media(max-width:380px){
 .band-nav .band-name{font-size:15px}
 .band-menu-button{padding:8px 10px}
}
@media(prefers-reduced-motion:reduce){
 .tier:hover,.awards li:hover,.cover-line:hover,.button:hover{transform:none}
 .tier:hover .tier-ph img,.film:hover img,.lane:hover .lane-ph img,.film:hover .play{transform:none}
 .tier::after,.cities::after{display:none}
}