﻿:root{
  --ink:#0E0709;
  --ink-2:#160C11;
  --ink-3:#1E1016;
  --oxblood:#4C0F1E;
  --neon:#FF3C6A;
  --neon-pale:#FFE3EC;
  --brass:#D9A44B;
  --ivory:#F3EAE0;
  --smoke:#B39AA2;
  --rule:rgba(217,164,75,.22);
  --shell:min(1240px, 90vw);
  --navh:76px;
  --neon-glow:
    0 0 2px rgba(255,255,255,.95),
    0 0 10px var(--neon),
    0 0 24px var(--neon),
    0 0 52px rgba(255,60,106,.65),
    0 0 96px rgba(255,60,106,.4);
}

*{box-sizing:border-box;margin:0;padding:0}
:root{color-scheme:dark}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--ivory);
  font-family:"Jost",system-ui,sans-serif;
  font-weight:300;
  font-size:clamp(1rem,.96rem + .25vw,1.09rem);
  line-height:1.7;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:4px;border-radius:2px}

/* ---------- typography primitives ---------- */
.display{
  font-family:"Bodoni Moda",Georgia,serif;
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.012em;
}
.eyebrow{
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--brass);
}
.eyebrow--rose{color:var(--neon)}
.lede{
  font-size:clamp(1.08rem,1rem + .55vw,1.4rem);
  line-height:1.6;
  color:#E7D9DE;
  font-weight:300;
}
.muted{color:var(--smoke)}

/* ---------- shell / sections ---------- */
.shell{width:var(--shell);margin-inline:auto}
.band{padding-block:clamp(5rem,10vw,9rem);position:relative}
.band--tight{padding-block:clamp(4rem,7vw,6.5rem)}
.hairline{height:1px;background:linear-gradient(90deg,transparent,var(--rule) 15%,var(--rule) 85%,transparent)}

.sechead{display:flex;flex-direction:column;gap:1.1rem;max-width:46ch}
.sechead h2{font-size:clamp(2.1rem,1.4rem + 3.2vw,4rem)}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(14,7,9,.9);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--rule);
}
.nav__in{
  width:var(--shell);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:1.15rem;
}
.mark{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:1.36rem;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;
}
.mark::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--neon);box-shadow:0 0 8px var(--neon),0 0 18px rgba(255,60,106,.7);
}
.nav__links{display:flex;align-items:center;gap:2rem;list-style:none}
.nav__links a{
  text-decoration:none;font-size:.845rem;letter-spacing:.2em;text-transform:uppercase;
  color:#D8C6CC;position:relative;padding-block:.35rem;transition:color .25s ease;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--neon);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after{transform:scaleX(1)}
/* the one filled action in the bar, matching the hero's Watch Demo Reel */
.nav__links a.nav__cta{
  background:var(--neon);color:#22040C;font-weight:500;
  padding:.72rem 1.2rem;border-radius:2px;
  box-shadow:0 10px 26px rgba(255,60,106,.24);
  transition:box-shadow .3s ease,transform .25s ease,background .3s ease;
}
.nav__links a.nav__cta::after{display:none}
.nav__links a.nav__cta:hover{
  color:#22040C;transform:translateY(-1px);
  box-shadow:0 0 22px rgba(255,60,106,.55),0 12px 30px rgba(255,60,106,.3);
}
.nav__toggle{
  display:none;background:none;border:1px solid var(--rule);color:var(--ivory);
  font:inherit;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.55rem .9rem;cursor:pointer;border-radius:2px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  font-family:"Jost",sans-serif;font-size:.78rem;font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;text-decoration:none;
  padding:1.05rem 1.9rem;border:1px solid transparent;border-radius:2px;
  cursor:pointer;transition:transform .25s ease,box-shadow .3s ease,background .3s ease,color .3s ease,border-color .3s ease;
}
.btn--neon{
  background:var(--neon);color:#22040C;
  box-shadow:0 0 0 rgba(255,60,106,0),0 14px 40px rgba(255,60,106,.28);
}
.btn--neon:hover{transform:translateY(-2px);box-shadow:0 0 26px rgba(255,60,106,.55),0 18px 50px rgba(255,60,106,.34)}
.btn--ghost{border-color:rgba(243,234,224,.32);color:var(--ivory);background:transparent}
.btn--ghost:hover{border-color:var(--brass);color:var(--brass);transform:translateY(-2px)}
.btn--dark{background:var(--ink);color:var(--ivory)}
.btn--dark:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(14,7,9,.28)}
.btn__play{
  width:9px;height:11px;flex:none;
  clip-path:polygon(0 0,100% 50%,0 100%);background:currentColor;
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-block:7.5rem 3.5rem;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:64% 22%}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,var(--ink) 4%,rgba(14,7,9,.55) 38%,rgba(14,7,9,.1) 70%),
    linear-gradient(100deg,var(--ink) 8%,rgba(14,7,9,.9) 34%,rgba(14,7,9,.42) 58%,rgba(14,7,9,.05) 82%);
}
.hero__in{position:relative;width:var(--shell);margin-inline:auto;max-width:100%}
.hero__copy{max-width:min(58ch,100%)}
.hero h1{
  font-size:clamp(2.7rem,1.4rem + 5.1vw,5.35rem);
  margin-block:1.25rem 1.35rem;
}
.hero h1 .row{display:block}
.hero__copy p{max-width:54ch;color:#EADCE1}
.pause{color:var(--ivory);letter-spacing:.02em;margin-left:.06em}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}
.hero__foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 2.4rem;
  margin-top:2.9rem;padding-top:1.6rem;border-top:1px solid var(--rule);
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke);
  max-width:min(780px,100%);
}
.hero__foot span{display:inline-flex;align-items:center;gap:.85rem}
.hero__foot span::before{content:"";width:4px;height:4px;flex:none;border-radius:50%;background:var(--brass)}

/* the signature: the neon word */
.neon{
  font-style:italic;font-weight:500;
  color:var(--neon-pale);
  text-shadow:var(--neon-glow);
}
.js .neon{animation:ignite 2.1s steps(1,end) .55s both}
@keyframes ignite{
  0%{color:#4A2831;text-shadow:none}
  26%{color:var(--neon-pale);text-shadow:var(--neon-glow)}
  31%{color:#4A2831;text-shadow:none}
  38%{color:var(--neon-pale);text-shadow:var(--neon-glow)}
  41%{color:#4A2831;text-shadow:none}
  46%{color:#8C4152;text-shadow:0 0 8px rgba(255,60,106,.5)}
  52%{color:#4A2831;text-shadow:none}
  60%,100%{color:var(--neon-pale);text-shadow:var(--neon-glow)}
}

/* staged entrance */
.js .rise{opacity:0;transform:translateY(22px)}
.js .hero .rise{animation:rise .95s cubic-bezier(.2,.7,.25,1) both}
.hero__copy > .rise:nth-child(1){animation-delay:.05s}
.hero__copy > .rise:nth-child(2){animation-delay:.16s}
.hero__copy > .rise:nth-child(3){animation-delay:.3s}
.hero__copy > .rise:nth-child(4){animation-delay:.42s}
.js .hero .hero__foot{animation-delay:.62s}
@keyframes rise{to{opacity:1;transform:none}}

/* scroll reveals */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.25,1)}
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- reel ---------- */
.reel{background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%)}
.reel__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(2.5rem,5vw,5rem);align-items:center}
.reel__line{
  font-size:clamp(1.45rem,1.1rem + 1.5vw,2.15rem);
  line-height:1.26;margin-top:1.3rem;max-width:24ch;
}
.player{
  position:relative;aspect-ratio:16/9;border:1px solid var(--rule);border-radius:3px;overflow:hidden;
  background:var(--ink-3);width:100%;
  box-shadow:0 40px 90px rgba(0,0,0,.55);
}
.player__hit{
  position:absolute;inset:0;z-index:3;
  background:none;border:0;padding:0;cursor:pointer;
  font-size:0;color:transparent;
}
.player img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.55) contrast(1.05) brightness(.62);
  transition:filter .5s ease,transform .8s cubic-bezier(.2,.7,.25,1);
}
.player::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(76,15,30,.5),rgba(14,7,9,.35));
  transition:opacity .5s ease;
}
.player:hover img{filter:saturate(.9) contrast(1) brightness(.8);transform:scale(1.02)}
.player:hover::after{opacity:.55}
.player__btn{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  width:clamp(74px,9vw,108px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(14,7,9,.45);border:1px solid rgba(255,227,236,.55);
  backdrop-filter:blur(3px);
  box-shadow:0 0 0 rgba(255,60,106,0);
  transition:background .35s ease,box-shadow .4s ease,border-color .35s ease;
}
.player__btn::before{
  content:"";width:0;height:0;margin-left:5px;
  border-left:19px solid var(--neon-pale);
  border-top:12px solid transparent;border-bottom:12px solid transparent;
}
.player:hover .player__btn,.player__hit:focus-visible ~ .player__btn{background:var(--neon);border-color:var(--neon);box-shadow:0 0 34px rgba(255,60,106,.6)}
.player:hover .player__btn::before,.player__hit:focus-visible ~ .player__btn::before{border-left-color:#22040C}
.player__len{
  position:absolute;right:1rem;bottom:1rem;z-index:2;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--neon-pale);
  background:rgba(14,7,9,.6);border:1px solid var(--rule);padding:.35rem .7rem;border-radius:2px;
}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player.is-live::after,.player.is-live .player__btn,.player.is-live .player__len{display:none}

/* ---------- photographs ---------- */
.wall2{columns:3;column-gap:clamp(1rem,1.8vw,1.6rem)}
@media (max-width:900px){.wall2{columns:2}}
@media (max-width:560px){.wall2{columns:1}}
.shot{break-inside:avoid;margin:0 0 clamp(1rem,1.8vw,1.6rem)}
.shot__hit{
  display:block;width:100%;padding:0;border:1px solid var(--rule);border-radius:2px;
  background:var(--ink-3);cursor:zoom-in;overflow:hidden;position:relative;
  transition:border-color .35s ease,box-shadow .4s ease,transform .4s cubic-bezier(.2,.7,.25,1);
}
.shot__hit img{
  width:100%;height:auto;display:block;
  filter:saturate(.9) brightness(.88);
  transition:filter .45s ease,transform .7s cubic-bezier(.2,.7,.25,1);
}
.shot__hit:hover{border-color:rgba(255,60,106,.5);box-shadow:0 18px 44px rgba(0,0,0,.5);transform:translateY(-2px)}
.shot__hit:hover img{filter:none;transform:scale(1.02)}
.shot figcaption{
  margin-top:.6rem;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--smoke);
}

.lightbox{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(8,4,6,.94);backdrop-filter:blur(6px);padding:clamp(1rem,4vw,3rem);
}
.lightbox[hidden]{display:none}
.lightbox__fig{display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:100%;max-height:100%}
.lightbox__fig img{
  max-width:min(1200px,92vw);max-height:78vh;width:auto;height:auto;
  border:1px solid var(--rule);border-radius:2px;box-shadow:0 40px 90px rgba(0,0,0,.7);
}
.lightbox__fig figcaption{
  font-family:"Bodoni Moda",Georgia,serif;font-style:italic;
  font-size:clamp(1rem,.9rem + .5vw,1.25rem);color:#E7D9DE;text-align:center;
}
.lightbox__close{
  position:absolute;top:clamp(.8rem,2vw,1.6rem);right:clamp(.8rem,2vw,1.6rem);
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  background:rgba(243,234,224,.06);border:1px solid var(--rule);color:var(--ivory);
  font-size:1.7rem;line-height:1;display:grid;place-items:center;
  transition:background .3s ease,border-color .3s ease;
}
.lightbox__close:hover{background:var(--neon);border-color:var(--neon);color:#22040C}
.lightbox__nav{
  position:absolute;top:50%;translate:0 -50%;
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  background:rgba(243,234,224,.06);border:1px solid var(--rule);
  display:grid;place-items:center;
  transition:background .3s ease,border-color .3s ease;
}
.lightbox__nav::before{
  content:"";width:11px;height:11px;border-top:2px solid var(--ivory);border-right:2px solid var(--ivory);
}
.lightbox__nav--prev{left:clamp(.6rem,2.5vw,2rem)}
.lightbox__nav--prev::before{rotate:-135deg;margin-left:4px}
.lightbox__nav--next{right:clamp(.6rem,2.5vw,2rem)}
.lightbox__nav--next::before{rotate:45deg;margin-right:4px}
.lightbox__nav:hover{background:var(--neon);border-color:var(--neon)}
.lightbox__nav:hover::before{border-color:#22040C}
body.lb-open{overflow:hidden}

/* ---------- the listening room ---------- */

/* Start Here — the one prominent block on the page */
.start{
  position:relative;border:1px solid rgba(255,60,106,.3);border-radius:3px;
  background:
    radial-gradient(120% 120% at 8% 0%,rgba(255,60,106,.09),transparent 58%),
    rgba(255,60,106,.03);
  padding:clamp(1.7rem,4vw,3.2rem) clamp(1.2rem,3.5vw,3rem) clamp(1rem,2.5vw,2rem);
}
.start__head{margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.start__head h2{
  font-size:clamp(1.6rem,1.2rem + 1.9vw,2.6rem);margin-top:1rem;max-width:22ch;
}
.start__list{border-top:1px solid rgba(255,60,106,.22)}
.start__list .song{border-bottom-color:rgba(255,60,106,.22)}
.start__list .song:last-child{border-bottom:0}
.song--start .song__play{border-color:rgba(255,60,106,.55)}
.song--start:hover{background:rgba(255,60,106,.05)}

/* filters */
.filters{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem 2rem;margin-top:clamp(2rem,4vw,3rem);
}
.tabs{display:flex;flex-wrap:wrap;gap:.55rem}
.tab{
  font-family:"Jost",sans-serif;font-size:.72rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:#D8C6CC;
  background:transparent;border:1px solid var(--rule);border-radius:2px;
  padding:.6rem 1.05rem;cursor:pointer;
  transition:color .3s ease,border-color .3s ease,background .3s ease;
}
.tab:hover{color:var(--neon-pale);border-color:rgba(255,60,106,.5)}
.tab.is-on{background:var(--neon);border-color:var(--neon);color:#22040C;font-weight:500}
.search{position:relative;flex:1 1 240px;max-width:340px}
.search input{
  width:100%;font-family:"Jost",sans-serif;font-size:.95rem;font-weight:300;color:var(--ivory);
  background:rgba(243,234,224,.04);border:1px solid var(--rule);border-radius:2px;
  padding:.72rem 1rem;transition:border-color .3s ease,background .3s ease;
}
.search input::placeholder{color:#7C6870}
.search input:focus{outline:none;border-color:var(--neon);background:rgba(255,60,106,.05)}
.filters__count{
  margin-top:1.1rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);
}
.noresults{margin-top:2rem;color:var(--smoke)}
.linkish{
  background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--neon-pale);
  border-bottom:1px solid rgba(255,60,106,.5);
}
.song[hidden]{display:none}

.songs{border-top:1px solid var(--rule)}
.song{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr);
  grid-template-areas:"play meta bar" ". note note";
  align-items:center;gap:.35rem clamp(1rem,2.5vw,2rem);
  padding-block:clamp(1.3rem,2.2vw,1.75rem);
  border-bottom:1px solid var(--rule);
  position:relative;transition:background .35s ease;
}
.song:hover{background:rgba(243,234,224,.025)}
.song.is-playing{background:rgba(255,60,106,.05)}

.song__play{
  grid-area:play;width:52px;height:52px;flex:none;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid var(--rule);
  display:grid;place-items:center;
  transition:background .3s ease,border-color .3s ease,box-shadow .35s ease;
}
.song__play::before{
  content:"";width:0;height:0;margin-left:3px;
  border-left:13px solid var(--neon-pale);
  border-top:8px solid transparent;border-bottom:8px solid transparent;
  transition:border-color .3s ease;
}
.song__play:hover{border-color:var(--neon);background:rgba(255,60,106,.12);box-shadow:0 0 20px rgba(255,60,106,.28)}
.song.is-playing .song__play{background:var(--neon);border-color:var(--neon)}
.song.is-playing .song__play::before{
  width:12px;height:14px;margin-left:0;border:0;background:#22040C;
  clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0);
}

.song__meta{grid-area:meta;min-width:0}
.song__meta h3{
  font-family:"Bodoni Moda",Georgia,serif;font-weight:500;
  font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem);line-height:1.2;
}
.song--start .song__meta h3{font-size:clamp(1.3rem,1.1rem + .85vw,1.8rem)}
.song__by{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-top:.3rem}
.song__with{font-family:"Bodoni Moda",Georgia,serif;font-style:italic;font-size:.98rem;color:var(--smoke);margin-top:.2rem}

.song__bar{grid-area:bar;display:flex;align-items:center;gap:.8rem;min-width:0}
.song__t{
  font-size:.74rem;letter-spacing:.06em;color:var(--smoke);
  font-variant-numeric:tabular-nums;min-width:3.2rem;
}
.song__t--dur{text-align:right}
.song__seek{
  -webkit-appearance:none;appearance:none;flex:1;min-width:0;
  height:3px;border-radius:2px;background:rgba(243,234,224,.16);
  cursor:pointer;outline-offset:6px;padding:0;border:0;
}
.song__seek::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;
  background:var(--neon-pale);border:0;box-shadow:0 0 8px rgba(255,60,106,.7);
}
.song__seek::-moz-range-thumb{
  width:12px;height:12px;border-radius:50%;
  background:var(--neon-pale);border:0;box-shadow:0 0 8px rgba(255,60,106,.7);
}
.song__note{
  grid-area:note;font-size:.72rem;letter-spacing:.04em;color:#7C6870;margin-top:.15rem;
}

@media (max-width:820px){
  .song{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"play meta" "bar bar" "note note";
    gap:.55rem 1.1rem;
  }
  .song__bar{margin-top:.5rem}
}

/* ---------- testimonials ---------- */
.quotes{display:grid;gap:1px;background:var(--rule);border-block:1px solid var(--rule)}
.quote{
  background:var(--ink);padding:clamp(1.9rem,4vw,3rem) 0;
  display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);
  gap:clamp(1rem,3vw,3rem);align-items:start;
}
.stars{color:var(--brass);font-size:1rem;letter-spacing:.32em;line-height:1}
.quote blockquote{
  font-family:"Bodoni Moda",Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.16rem,1rem + 1.05vw,1.72rem);line-height:1.42;
  color:#EADCE1;max-width:46ch;
}
.quote blockquote::before{content:"\201C"}
.quote blockquote::after{content:"\201D"}
.quote figcaption{grid-column:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1rem;margin-top:1.3rem}
.quote__who{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory)}
.quote__what{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}
@media (max-width:760px){
  .quote{grid-template-columns:1fr;gap:1rem}
  .quote figcaption{grid-column:1}
}

/* ---------- videos ---------- */
.jump{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:clamp(2rem,4vw,3rem);position:relative}
.jump a{
  text-decoration:none;border:1px solid var(--rule);border-radius:2px;
  padding:.55rem 1rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:#D8C6CC;transition:color .3s ease,border-color .3s ease,background .3s ease;
}
.jump a:hover{color:var(--neon-pale);border-color:var(--neon);background:rgba(255,60,106,.08)}

.vids + .vids{padding-top:0}
.vidhead{display:flex;flex-direction:column;gap:.7rem;padding-bottom:1.6rem;border-bottom:1px solid var(--rule);margin-bottom:clamp(2rem,3.5vw,2.8rem)}
.vidhead h2{font-size:clamp(1.6rem,1.2rem + 1.8vw,2.5rem)}
.vidhead__n{
  display:inline-block;margin-left:.5rem;color:var(--brass);
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
}
/* the talk show gets its own billing */
.vids--show{
  background:
    radial-gradient(90% 70% at 12% 0%,rgba(255,60,106,.1),transparent 60%),
    var(--ink-2);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.showhead{margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.showhead h2{font-size:clamp(1.9rem,1.2rem + 2.9vw,3.5rem);max-width:16ch}
.showhead__tag{
  margin-top:.9rem;font-family:"Bodoni Moda",Georgia,serif;font-style:italic;
  font-size:clamp(1.1rem,.95rem + .8vw,1.5rem);color:var(--neon);
}
.showhead__body{
  margin-top:clamp(1.6rem,3vw,2.4rem);
  columns:2;column-gap:clamp(2rem,4vw,3.5rem);
  color:var(--smoke);max-width:100%;
}
.showhead__body p{break-inside:avoid;margin-bottom:1.1rem;font-size:.99rem;line-height:1.72}
.showhead__body em{color:var(--ivory);font-style:italic}
.showhead__kicker{
  margin-top:1.4rem;padding-top:1.5rem;border-top:1px solid var(--rule);
  font-family:"Bodoni Moda",Georgia,serif;font-size:clamp(1.05rem,.95rem + .5vw,1.28rem);color:var(--ivory);
}
@media (max-width:820px){.showhead__body{columns:1}}

.vidgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:clamp(1.6rem,2.5vw,2.4rem)}
.vid{display:flex;flex-direction:column;gap:.85rem}
.vid h3{font-family:"Bodoni Moda",Georgia,serif;font-weight:500;font-size:1.24rem;line-height:1.25;margin-top:.25rem}
.vid p{font-size:.9rem;color:var(--smoke);line-height:1.62}
.player--sm{box-shadow:0 18px 40px rgba(0,0,0,.4)}
.player--sm img{filter:saturate(.85) contrast(1.02) brightness(.86)}
.player--sm::after{opacity:.4}
.player--sm:hover img{filter:none}
.player--sm .player__btn{width:58px;border-width:1px}
.player--sm .player__btn::before{border-left-width:14px;border-top-width:9px;border-bottom-width:9px;margin-left:4px}

/* ---------- difference ---------- */
/* house lights up — the light counterpart to the dark rooms around it */
.diff{background:var(--ivory);color:#1A0E13}
.diff .eyebrow{color:#9A2740}
.diff .btn--ghost{border-color:rgba(26,14,19,.3);color:#1A0E13}
.diff .btn--ghost:hover{border-color:#9A2740;color:#9A2740}
.diff__head{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,4.5rem);align-items:end;margin-top:1.4rem;
}
.diff__head h2{font-size:clamp(2.1rem,1.4rem + 2.9vw,3.7rem)}
.diff__lead{
  font-family:"Bodoni Moda",Georgia,serif;font-weight:400;font-style:italic;
  font-size:clamp(1.25rem,.95rem + 1.4vw,1.85rem);line-height:1.36;
  color:#4A3640;max-width:30ch;
}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:clamp(3rem,6vw,4.5rem);background:rgba(26,14,19,.2)}
.card{background:var(--ivory);padding:clamp(1.9rem,3vw,2.7rem);display:flex;flex-direction:column;gap:1rem;transition:background .4s ease}
.card:hover{background:#EBE0D4}
.card h3{font-family:"Bodoni Moda",Georgia,serif;font-weight:500;font-size:1.55rem;line-height:1.2}
.card p{font-size:.97rem;color:#5C4650;line-height:1.75}
.card__no{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:#9A2740}

.pull{
  margin-top:clamp(3.5rem,6vw,5.5rem);padding:clamp(2rem,4vw,3rem) 0;
  border-top:1px solid rgba(26,14,19,.2);
  font-family:"Bodoni Moda",Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.35rem,1rem + 1.9vw,2.35rem);line-height:1.34;
  text-align:center;max-width:26ch;margin-inline:auto;
}

/* ---------- interior page header ---------- */
.pagehead{
  position:relative;background:var(--ink);
  padding-block:clamp(8rem,13vw,11.5rem) clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid var(--rule);
}
.pagehead::before{
  content:"";position:absolute;left:0;top:0;right:0;height:min(62vh,520px);pointer-events:none;
  background:radial-gradient(120% 100% at 12% 0%,rgba(255,60,106,.14),transparent 62%);
}
.pagehead h1{font-size:clamp(2.4rem,1.5rem + 3.4vw,4.2rem)}
.pagehead__grid{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;position:relative}
.pagehead__copy h1{margin-block:1.2rem 1.9rem}
.pagehead .about__intro{max-width:58ch}
/* two text columns: a long headline needs a wider measure and a smaller size */
.pagehead__grid--split{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);align-items:end}
.pagehead__grid--split .pagehead__copy h1{margin-bottom:0}
.h1--long{font-size:clamp(2rem,1.25rem + 2.5vw,3.35rem);max-width:19ch}

.about__more{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.about__more h2{font-size:clamp(1.9rem,1.3rem + 2.4vw,3.1rem);margin-top:1.1rem;max-width:24ch}
.portrait{max-width:100%;position:relative}
.portrait::before{
  content:"";position:absolute;left:-10%;top:-6%;width:70%;aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(255,60,106,.16),transparent 68%);
}
.portrait img{
  position:relative;width:100%;height:auto;border-radius:2px;
  border:1px solid var(--rule);
  filter:contrast(1.04);
}

/* ---------- about / timeline ---------- */
.about{background:var(--ink)}
.about__top{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,5rem);align-items:end}
.about__top h2{font-size:clamp(2.1rem,1.4rem + 3.2vw,4rem)}
.about__intro{display:flex;flex-direction:column;gap:1.15rem;color:var(--smoke);font-size:1.03rem}
.about__intro strong{color:var(--ivory);font-weight:400}

.track{border-top:1px solid var(--rule)}
.about__top + .track{margin-top:clamp(3.5rem,7vw,6rem)}
.stop{
  display:grid;grid-template-columns:minmax(140px,210px) minmax(0,1fr);
  gap:clamp(1rem,3vw,3rem);
  padding-block:clamp(1.8rem,3.2vw,2.7rem);
  border-bottom:1px solid var(--rule);
  position:relative;
}
.stop::before{
  content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--neon);
  box-shadow:0 0 10px var(--neon);transition:width .7s cubic-bezier(.2,.7,.25,1);
}
.stop:hover::before{width:100%}
.stop__when{
  font-family:"Bodoni Moda",Georgia,serif;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.3rem);
  line-height:1.05;color:var(--brass);
}
.stop__what h3{font-family:"Bodoni Moda",Georgia,serif;font-weight:500;font-size:clamp(1.15rem,1rem + .7vw,1.6rem);line-height:1.25;margin-bottom:.6rem}
.stop__what p{color:var(--smoke);font-size:.99rem;max-width:62ch}
.stop__what p + p{margin-top:.9rem}
.say{
  margin-top:1.4rem;padding-left:1.25rem;border-left:2px solid var(--brass);
  font-family:"Bodoni Moda",Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.08rem,.98rem + .62vw,1.34rem);line-height:1.44;
  color:#E7D9DE;max-width:50ch;
}
.say::before{content:"\201C"}
.say::after{content:"\201D"}

/* ---------- venues ---------- */
.venues{background:linear-gradient(180deg,var(--ink) 0%,#150A10 55%,var(--ink) 100%);border-top:1px solid var(--rule)}
.wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(2.5rem,4vw,3.5rem);margin-top:clamp(3rem,6vw,4.5rem)}
.wall h3{
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--brass);
  font-family:"Jost",sans-serif;font-weight:500;
  padding-bottom:.9rem;border-bottom:1px solid var(--rule);margin-bottom:.4rem;
}
.wall ul{list-style:none}
.wall li{
  font-family:"Bodoni Moda",Georgia,serif;font-weight:400;
  font-size:clamp(1.02rem,.95rem + .45vw,1.3rem);line-height:1.3;
  padding-block:.72rem;border-bottom:1px solid rgba(217,164,75,.1);
  color:#E3D2D8;transition:color .3s ease,padding-left .35s ease;
}
.wall li:hover{color:var(--neon-pale);padding-left:.5rem}
.venues__note{
  margin-top:clamp(2.8rem,5vw,4rem);padding-top:2rem;border-top:1px solid var(--rule);
  color:var(--smoke);max-width:64ch;font-size:1rem;
}
.venues__note em{color:var(--ivory);font-style:normal}

/* ---------- repertoire (house lights up) ---------- */
.rep{background:var(--ivory);color:#1A0E13}
.rep .eyebrow{color:#9A2740}
.rep__line{
  font-family:"Bodoni Moda",Georgia,serif;font-weight:400;
  font-size:clamp(1.7rem,1rem + 3.4vw,3.5rem);line-height:1.26;
  max-width:20ch;margin-top:1.6rem;
}
.rep__line b{font-weight:600;font-size:1.2em;letter-spacing:-.02em;line-height:.95}
.rep__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,5vw,5rem);align-items:start}
.rep__body{color:#5C4650;display:flex;flex-direction:column;gap:1.2rem;padding-top:.6rem}
.genres{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.7rem}
.genres span{
  border:1px solid rgba(26,14,19,.22);border-radius:2px;
  padding:.5rem .95rem;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:#1A0E13;transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.genres span:hover{background:#1A0E13;color:var(--ivory);border-color:#1A0E13}
/* ---------- creed ---------- */
.creed{background:var(--ink);text-align:center}
.creed__q{
  font-family:"Bodoni Moda",Georgia,serif;font-weight:400;
  font-size:clamp(1.5rem,1rem + 2.6vw,3rem);line-height:1.3;max-width:22ch;margin-inline:auto;
}
.creed__q .off{display:block;color:var(--smoke);font-size:.62em;font-style:italic;line-height:1.5;margin-bottom:1.1rem}
.creed__by{margin-top:2rem;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--brass)}

/* ---------- booking ---------- */
.booking{background:linear-gradient(180deg,var(--ink) 0%,#1A0A12 100%);border-top:1px solid var(--rule)}
.book__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,5vw,5rem);align-items:start}
.book__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2rem;margin-top:2.5rem}
.book__cols h3{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--brass);font-weight:500;margin-bottom:1rem}
.book__cols ul{list-style:none;display:flex;flex-direction:column;gap:.55rem;color:var(--smoke);font-size:.96rem}
form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.5rem}
.field--wide{grid-column:1/-1}
label{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
input,select,textarea{
  font-family:"Jost",sans-serif;font-size:1rem;font-weight:300;color:var(--ivory);
  background:rgba(243,234,224,.04);border:1px solid var(--rule);border-radius:2px;
  padding:.85rem .95rem;transition:border-color .3s ease,background .3s ease;
}
input:hover,select:hover,textarea:hover{border-color:rgba(217,164,75,.4)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--neon);background:rgba(255,60,106,.05)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),linear-gradient(135deg,var(--brass) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
select option{background:var(--ink-2);color:var(--ivory)}
textarea{resize:vertical;min-height:110px}
.form__note{grid-column:1/-1;font-size:.82rem;color:var(--smoke);line-height:1.6}
.form__status{
  grid-column:1/-1;font-size:.92rem;line-height:1.6;
  padding:.9rem 1.05rem;border-radius:2px;border:1px solid var(--rule);
}
.form__status a{color:inherit}
.form__status--wait{color:var(--smoke)}
.form__status--good{
  color:var(--neon-pale);border-color:rgba(255,60,106,.45);background:rgba(255,60,106,.08);
}
.form__status--good strong{color:#fff;font-weight:500}
.form__status--bad{
  color:#F6D9DF;border-color:rgba(255,60,106,.55);background:rgba(255,60,106,.1);
}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);padding-block:clamp(3rem,5vw,4.4rem);background:var(--ink);text-align:center}
.foot__in{display:flex;flex-direction:column;align-items:center;gap:1rem}
.foot__role{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--smoke)}
.foot__actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:.5rem}
.foot__actions .btn{padding:.85rem 1.7rem}
.foot__detail{display:flex;flex-wrap:wrap;gap:.35rem .9rem;justify-content:center;font-size:.86rem;color:var(--smoke)}
.foot__detail a{text-decoration:none;border-bottom:1px solid rgba(217,164,75,.32);transition:color .3s ease,border-color .3s ease}
.foot__detail a:hover{color:var(--neon-pale);border-color:var(--neon)}
.foot__social{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;justify-content:center;margin-top:.3rem}
.foot__social a{
  text-decoration:none;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:#D8C6CC;transition:color .3s ease;
}
.foot__social a:hover{color:var(--neon)}
.foot__base{
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;justify-content:center;align-items:center;
  width:100%;margin-top:1.5rem;padding-top:1.7rem;border-top:1px solid var(--rule);
}
.foot__tag{font-family:"Bodoni Moda",Georgia,serif;font-style:italic;color:var(--smoke);font-size:1rem}
.foot small{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#6E5A62}

/* direct contact block in the booking section */
.direct{margin-top:clamp(2.2rem,4vw,3rem);padding-top:1.8rem;border-top:1px solid var(--rule)}
.direct h3{
  font-family:"Bodoni Moda",Georgia,serif;font-weight:500;color:var(--ivory);
  font-size:clamp(1.15rem,1rem + .6vw,1.45rem);margin-bottom:1.1rem;
}
.direct p{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .9rem;margin-bottom:.65rem}
.direct .lbl{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);min-width:4.4rem;text-align:left}
.direct a{
  font-size:1.06rem;text-decoration:none;color:var(--neon-pale);
  border-bottom:1px solid rgba(255,60,106,.4);transition:border-color .3s ease,color .3s ease;
}
.direct a:hover{border-color:var(--neon);color:#fff}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .reel__grid,.about__top,.rep__grid,.book__grid,.diff__head,.about__more,.pagehead__grid{grid-template-columns:1fr}
  .portrait--head{order:-1;max-width:320px;margin-bottom:.5rem}
  .diff__lead{max-width:46ch}
  .cards{grid-template-columns:1fr}
  .about__top{align-items:start}
  .rep__line{max-width:none}
}
/* collapse the menu before the wordmark and links can crowd each other */
@media (max-width:960px){
  .nav__links{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:flex-start;gap:0;
    background:rgba(14,7,9,.97);backdrop-filter:blur(14px);
    border-block:1px solid var(--rule);
    padding:.5rem 6vw 1.4rem;display:none;
  }
  .nav__links.is-open{display:flex}
  .nav__links li{width:100%;border-bottom:1px solid rgba(217,164,75,.12)}
  .nav__links li:last-child{border-bottom:0}
  .nav__links a{display:block;padding-block:1rem;font-size:.9rem}
  .nav__links a.nav__cta{margin-top:1rem;text-align:center;padding-block:.95rem}
  .nav__toggle{display:inline-block}
  .nav{background:rgba(14,7,9,.82);backdrop-filter:blur(12px)}
}
@media (max-width:760px){
  :root{--shell:min(1240px,88vw)}
  .mark{font-size:1.16rem}
  /* stack the photo above the type so the headline never sits on his face.
     the photo starts below the fixed nav so his head keeps its headroom. */
  .hero{display:block;min-height:0;padding-block:var(--navh) 3.2rem}
  .hero__media{position:relative;z-index:0;height:min(44svh,330px)}
  .hero__media img{object-position:52% 0}
  .hero__scrim{
    position:absolute;top:var(--navh);left:0;right:0;bottom:auto;z-index:1;
    height:min(44svh,330px);
    background:linear-gradient(to top,var(--ink) 0%,rgba(14,7,9,.6) 20%,rgba(14,7,9,.12) 56%,rgba(14,7,9,0) 84%);
  }
  .hero__in{position:relative;z-index:2;padding-top:1.9rem}
  .hero__foot{gap:.4rem 1rem;font-size:.66rem}
  .stop{grid-template-columns:1fr;gap:.5rem}
  form{grid-template-columns:1fr}
  .btn{width:100%}
  .hero__cta .btn{width:auto;flex:1 1 auto}
}
@media (max-width:430px){
  :root{--navh:76px}
  .mark{font-size:.95rem;letter-spacing:.1em}
  .mark::before{width:6px;height:6px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important}
  .js .rise,.js .reveal{opacity:1;transform:none}
  .neon{color:var(--neon-pale);text-shadow:var(--neon-glow)}
}
