:root{
  --ink:#000; --paper:#fff; --stage:#0a0a0a; --stage-2:#141414;
  --muted:#6e6e6e; --muted-2:#9a9a9a; --rule:#dcdcdc; --rule-dark:#2a2a2a;
  --wrap:1180px; --read:66ch;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Karla",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.narrow{max-width:820px;margin:0 auto;padding:0 28px}

/* type */
.display{font-family:"Bodoni Moda","Didot",Georgia,serif;font-weight:700;
  letter-spacing:-.015em;line-height:1.02;text-wrap:balance}
h1.display{font-size:clamp(40px,7vw,86px);margin:0 0 24px}
h2.display{font-size:clamp(30px,4.6vw,52px);margin:0 0 20px;font-weight:600}
h3.display{font-size:clamp(22px,2.6vw,30px);margin:0 0 12px;font-weight:600;letter-spacing:-.005em}
.eyebrow{font-family:"Josefin Sans",sans-serif;font-size:12px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;margin:0 0 18px;color:var(--muted)}
.eyebrow.light{color:var(--muted-2)}
.lede{font-size:clamp(18px,2vw,22px);line-height:1.5;color:var(--muted);max-width:60ch;margin:0 auto 34px}
p{margin:0 0 18px;max-width:var(--read)}
.center p{margin-left:auto;margin-right:auto}
strong{font-weight:700}

/* header */
header.site{position:sticky;top:0;z-index:50;background:var(--stage);color:var(--paper);
  border-bottom:1px solid var(--rule-dark)}
header.site .bar{display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:var(--wrap);margin:0 auto;padding:16px 28px}
.brandlock{display:flex;align-items:center;gap:14px;flex:none;text-decoration:none;color:var(--paper)}
.brandlock .wca{width:84px;height:35px;display:block;flex:none}
.brandlock .brandmark{padding-left:14px;border-left:1px solid var(--rule-dark)}
.brandmark{font-family:"Bodoni Moda",Georgia,serif;font-size:21px;font-weight:700;
  text-decoration:none;letter-spacing:-.01em;white-space:nowrap;display:block}
.brandmark span{font-family:"Josefin Sans",sans-serif;font-size:9.5px;font-weight:400;
  letter-spacing:.3em;display:block;text-transform:uppercase;color:var(--muted-2);margin-top:3px}
nav.main{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
nav.main a{font-family:"Josefin Sans",sans-serif;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--paper);opacity:.82;padding:4px 0}
nav.main a:hover,nav.main a[aria-current="page"]{opacity:1;box-shadow:inset 0 -1px 0 var(--paper)}
nav.main a.tel{opacity:1;font-family:"Karla",sans-serif;letter-spacing:.02em;font-size:14px}
@media(max-width:1199px){header.site{position:static}
  header.site .bar{flex-direction:column;align-items:flex-start;gap:12px}
  nav.main{gap:18px}}
@media(max-width:520px){header.site .bar{padding:14px 18px}
  .brandlock{gap:11px}
  .brandlock .wca{width:67px;height:28px}
  .brandlock .brandmark{padding-left:11px}
  .brandmark{font-size:17px}
  .brandmark span{font-size:8px;letter-spacing:.22em}}

/* hero */
.hero{background:var(--stage);color:var(--paper);position:relative;overflow:hidden;isolation:isolate}
.hero .bg{position:absolute;inset:0;opacity:.34;object-fit:cover;width:100%;height:100%}
.hero .inner{position:relative;z-index:2;padding:clamp(72px,11vw,150px) 0;text-align:center}

/* decorative video backdrop */
.hero .vbg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:var(--stage)}
.hero .vbg iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:100%;border:0;pointer-events:none;background:var(--stage)}
/* scrim: knocks the footage back so the headline always wins */
.hero .vbg::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,8,8,.80),rgba(8,8,8,.68) 45%,rgba(8,8,8,.86));}
.hero.has-video .inner{padding-top:clamp(96px,13vw,180px);padding-bottom:clamp(96px,13vw,180px)}
/* still-image hero backdrop */
.hero .ibg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--stage)}
.hero .ibg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 22%}
.hero .ibg::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,8,8,.78),rgba(8,8,8,.66) 45%,rgba(8,8,8,.86));}
/* full-frame hero: the band takes the video's shape, nothing is cropped */
@media(min-width:761px){
  .hero.video-full{aspect-ratio:var(--vaspect);min-height:460px;display:flex;align-items:center}
  .hero.video-full .inner{width:100%;padding-top:28px;padding-bottom:28px}
  .hero.video-full .vbg iframe{top:0;left:0;transform:none;width:100%;height:100%}
}
@media(max-width:760px){.hero .vbg{display:none}}
@media(prefers-reduced-motion:reduce){.hero .vbg{display:none}}
.hero .lede{color:#d8d8d8}
.hero.compact .inner{padding:clamp(56px,8vw,104px) 0}

/* buttons */
.btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.btn{font-family:"Josefin Sans",sans-serif;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;padding:15px 30px;border:1px solid currentColor;display:inline-block;
  transition:background .15s,color .15s}
.btn.solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.solid:hover{background:transparent;color:var(--paper)}
.btn.ghost:hover{background:var(--paper);color:var(--ink)}
.btn.dark{border-color:var(--ink)}
.btn.dark:hover{background:var(--ink);color:var(--paper)}
.btn.dark.solid{background:var(--ink);color:var(--paper)}
.btn.dark.solid:hover{background:transparent;color:var(--ink)}

/* sections */
section{padding:clamp(56px,8vw,104px) 0}
section.dark{background:var(--stage);color:var(--paper)}
section.dark .eyebrow{color:var(--muted-2)}
section.dark p{color:#cfcfcf}
section.tight{padding:clamp(40px,5vw,64px) 0}
.rule{height:1px;background:var(--rule);border:0;margin:0}

/* client wall */
.clients{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:34px 0 0}
.clients .chip{background:var(--paper);display:flex;align-items:center;justify-content:center;
  padding:16px 18px;aspect-ratio:5/2;transition:opacity .15s;
  flex:0 1 calc((100% - 60px)/6);min-width:148px}
.clients .chip img{filter:grayscale(1);opacity:.86;max-height:100%;max-width:100%;
  width:auto;height:auto;object-fit:contain;transition:opacity .15s}
.clients .chip:hover img{opacity:1}

/* two-up */
.two{display:grid;grid-template-columns:1fr;gap:44px}
@media(min-width:860px){.two{grid-template-columns:1fr 1fr;gap:60px}}
.two .col p:last-child{margin-bottom:0}

/* show grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:32px}
.card{text-decoration:none;color:inherit;display:block;group:card}
.card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--stage-2)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card:hover .ph img{transform:scale(1.04)}
.card .tag{font-family:"Josefin Sans",sans-serif;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin:16px 0 6px}
.card h3{font-family:"Bodoni Moda",Georgia,serif;font-size:23px;font-weight:600;margin:0 0 8px;line-height:1.15}
.card p{font-size:15px;color:var(--muted);margin:0;max-width:none}

/* selector list */
.pick{border-top:1px solid var(--rule);padding:18px 0;display:grid;grid-template-columns:1fr;gap:6px}
@media(min-width:760px){.pick{grid-template-columns:230px 1fr;gap:24px;align-items:baseline}}
.pick .k{font-family:"Josefin Sans",sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.pick .v{margin:0;max-width:none}
.pick .v a{text-decoration:none;box-shadow:inset 0 -1px 0 var(--rule)}
.pick .v a:hover{box-shadow:inset 0 -1px 0 var(--ink)}

/* spec */
.spec{border-top:1px solid var(--rule);margin-top:8px}
.spec .row{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 0;border-bottom:1px solid var(--rule)}
@media(min-width:700px){.spec .row{grid-template-columns:210px 1fr;gap:24px}}
.spec .k{font-family:"Josefin Sans",sans-serif;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.spec .v{margin:0;max-width:none}

/* quote */
blockquote{margin:36px 0;padding:0 0 0 26px;border-left:2px solid var(--ink);max-width:60ch}
blockquote p{font-family:"Bodoni Moda",Georgia,serif;font-size:clamp(20px,2.4vw,27px);
  line-height:1.35;font-style:italic;margin:0 0 12px}
blockquote cite{font-family:"Josefin Sans",sans-serif;font-style:normal;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
section.dark blockquote{border-left-color:var(--paper)}
section.dark blockquote cite{color:var(--muted-2)}

/* songbook */
.songnote{color:var(--muted);max-width:62ch;margin:0 0 26px}
ol.songs{list-style:none;margin:0;padding:0;columns:1;column-gap:52px}
@media(min-width:640px){ol.songs.cols{columns:2}}
@media(min-width:1000px){ol.songs.cols{columns:3}}
/* head-to-head shows: one catalog per column, facing each other */
.songgroups{display:grid;grid-template-columns:1fr;gap:40px;align-items:start}
@media(min-width:820px){.songgroups{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:48px}}
.sgroup h3.display{margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
ol.songs li{break-inside:avoid;padding:9px 0;border-bottom:1px solid var(--rule);
  display:flex;flex-direction:column;gap:1px}
ol.songs .sg{font-size:16px;line-height:1.25}
ol.songs .ar{font-family:"Josefin Sans",sans-serif;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
section.dark ol.songs li{border-bottom-color:var(--rule-dark)}

/* video embeds - one feature, the rest in a grid */
.vitem{margin:0}
.vitem.feature{margin:38px 0 0}
.video{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--rule)}
.video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video video{object-fit:cover;background:#000}
/* phone-shot footage: give it a tall frame instead of letterboxing it */
.video.portrait{aspect-ratio:9/16;max-width:392px;margin-left:auto;margin-right:auto}
.vitem.feature:has(.video.portrait) .vcap{text-align:center}
.vcap{font-family:"Josefin Sans",sans-serif;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin:10px 0 0}
.vgrid{display:grid;grid-template-columns:1fr;gap:24px;margin:24px 0 0}
/* featured clip paired with a still */
.vpair{display:grid;grid-template-columns:1fr;gap:26px;margin:38px 0 0;align-items:center}
@media(min-width:860px){.vpair{grid-template-columns:1fr 1fr;gap:34px}}
.vpair .vitem.feature{margin:0}
.postfig{margin:44px auto 0;max-width:430px}
.postfig img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.postfig .vcap{text-align:center}
.sideimg{border:1px solid var(--rule);overflow:hidden;background:var(--stage-2)}
.sideimg img{width:100%;height:auto;display:block}
@media(min-width:620px){.vgrid{grid-template-columns:1fr 1fr}
  .vgrid .vcap{font-size:10.5px;letter-spacing:.14em}}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:36px}
.gal img{aspect-ratio:3/2;object-fit:cover;width:100%}

/* form */
form.book{margin-top:36px}
.f{margin-bottom:20px}
.f label{display:block;font-family:"Josefin Sans",sans-serif;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.f input,.f select,.f textarea{width:100%;padding:13px 14px;border:1px solid var(--rule);
  font-family:inherit;font-size:16px;background:var(--paper);color:var(--ink);border-radius:0}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--ink);outline-offset:-2px;border-color:var(--ink)}
.f textarea{min-height:120px;resize:vertical}
.fgrid{display:grid;grid-template-columns:1fr;gap:0 24px}
@media(min-width:700px){.fgrid{grid-template-columns:1fr 1fr}}
.checks{display:grid;grid-template-columns:1fr;gap:9px;margin-top:4px}
@media(min-width:640px){.checks{grid-template-columns:1fr 1fr}}
.checks label{display:flex;align-items:center;gap:10px;font-family:inherit;font-size:15.5px;
  letter-spacing:0;text-transform:none;color:var(--ink);margin:0;cursor:pointer}
.checks input{width:auto;margin:0}
.req{color:var(--muted)}

/* footer */
footer.site{background:var(--stage);color:var(--paper);padding:64px 0 40px;margin-top:0}
footer.site a{color:var(--paper)}
.fgrid2{display:grid;grid-template-columns:1fr;gap:34px}
@media(min-width:760px){.fgrid2{grid-template-columns:2fr 1fr 1fr}}
footer.site h4{font-family:"Josefin Sans",sans-serif;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-2);margin:0 0 14px;font-weight:500}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:8px;font-size:15px}
footer.site li a{text-decoration:none;opacity:.85}
footer.site li a:hover{opacity:1;text-decoration:underline}
.legal{border-top:1px solid var(--rule-dark);margin-top:44px;padding-top:22px;
  font-family:"Josefin Sans",sans-serif;font-size:11.5px;letter-spacing:.1em;color:var(--muted-2)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* typographic client wall (names we have no artwork for) */

/* show logo tiles */
.ph.logo{display:flex;align-items:center;justify-content:center;padding:20px;
  aspect-ratio:4/3;border:1px solid var(--rule);overflow:hidden}
.ph.logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  transition:transform .4s ease}
.card:hover .ph.logo img{transform:scale(1.04)}
section.dark .ph.logo{border-color:#333}

/* poster tiles in place of photography */
.ph.poster{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;
  padding:26px 24px;background:var(--stage);border:1px solid var(--rule-dark);
  aspect-ratio:4/3;transition:background .25s}
.card:hover .ph.poster{background:#1c1c1c}
.ph.poster .era{font-family:"Josefin Sans",sans-serif;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted-2)}
.ph.poster .nm{font-family:"Bodoni Moda",Georgia,serif;font-weight:700;color:#fff;
  font-size:clamp(22px,2.6vw,30px);line-height:1.05;letter-spacing:-.012em}
.ph.poster .nm.long{font-size:clamp(19px,2.05vw,24px);line-height:1.12}
section.dark .ph.poster{border-color:#333}
.card .tag{margin:14px 0 6px}
.card p:not(.tag){font-size:15px;color:var(--muted);margin:0;max-width:none}
.clients.text{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;margin-top:26px}
.clients.text span{font-family:"Josefin Sans",sans-serif;font-size:12.5px;letter-spacing:.18em;
  text-transform:uppercase;color:#8e8e8e;text-align:center;white-space:nowrap}