/* The Ascensial Blues Band — NIGHTSET.
   The site is a night at one of their gigs: full-bleed photography in the dark,
   the cursor is the spotlight, the type is wood-slab poster shout.
   Display: Alfa Slab One · Meta: Special Elite · Body: Libre Franklin · Scrawl: Permanent Marker */

:root{
  --coal:#0d0f13; --smoke:#151922; --panel:#1b202b;
  --bone:#e9e2d2; --dim:#95755c; --dim2:#8b93a3;
  --tung:#a62c39; --tung-hi:#c44b55; --haze:#6b8bab;
  --line:rgba(233,226,210,.14)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--coal);color:var(--bone);font-family:'Libre Franklin',system-ui,sans-serif;
  font-weight:300;font-size:17px;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,.disp{font-family:'Alfa Slab One',serif;font-weight:400;line-height:.96;letter-spacing:.01em;
  text-transform:uppercase}
.wrap{width:min(1280px,92vw);margin-inline:auto}

/* film grain, always on top */
body::after{content:"";position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* type helpers */
.tag{font-family:'Special Elite',monospace;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tung)}
.mark{font-family:'Permanent Marker',cursive;color:var(--tung);line-height:1.25}
.outline{color:transparent;-webkit-text-stroke:2px var(--bone)}
.chip{display:inline-flex;align-items:center;gap:.7em;font-family:'Special Elite',monospace;
  font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;padding:.85rem 1.5rem;
  border:1px solid var(--line);color:var(--bone);background:rgba(13,15,19,.55);backdrop-filter:blur(4px);
  transition:border-color .25s,background .25s,color .25s;cursor:pointer}
.chip:hover{border-color:var(--tung);color:var(--tung-hi);background:rgba(13,15,19,.8)}
.chip.hot{background:var(--tung);border-color:var(--tung);color:var(--bone);font-weight:400}
.chip.hot:hover{background:var(--tung-hi);border-color:var(--tung-hi);color:var(--bone)}
.chip .dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}

/* header: just the logo and two words */
header.site{position:fixed;top:0;left:0;right:0;z-index:60;padding:1.1rem 0;transition:background .35s}
header.site.solid{background:rgba(13,15,19,.88);backdrop-filter:blur(8px)}
header.site .bar{display:flex;align-items:center;justify-content:space-between}
header.site .lg{width:82px;transition:transform .3s}
header.site .lg:hover{transform:rotate(-2deg) scale(1.04)}
header.site nav{display:flex;gap:2rem}
header.site nav a{font-family:'Special Elite',monospace;font-size:.85rem;letter-spacing:.16em;
  text-transform:uppercase;transition:color .25s}
header.site nav a:hover{color:var(--tung)}
header.site nav a[aria-current]{color:var(--tung)}

/* ============ hero: the spotlight ============ */
.hero{position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:flex-end}
.hero .ph{position:absolute;inset:0}
.hero .ph img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero .cold img{filter:grayscale(.9) brightness(.34) contrast(1.1)}
.hero .warmlayer{position:absolute;inset:0;
  -webkit-mask-image:radial-gradient(circle 300px at var(--mx,72%) var(--my,38%),#000 0 38%,transparent 75%);
  mask-image:radial-gradient(circle 300px at var(--mx,72%) var(--my,38%),#000 0 38%,transparent 75%)}
.hero .warmlayer img{filter:saturate(1.12) contrast(1.05) brightness(1.02)}
.hero .fade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(13,15,19,.55) 0%,transparent 26%,transparent 55%,rgba(13,15,19,.94) 92%)}
.hero .content{position:relative;z-index:2;width:min(1280px,92vw);margin:0 auto;padding:0 0 5.5rem}
.hero .kicker{margin-bottom:1.2rem;display:block}
.hero h1{font-size:clamp(3.4rem,10.5vw,9rem);margin-left:-.05em}
.hero h1 .l2{display:block;color:transparent;-webkit-text-stroke:2.5px var(--bone)}
.hero h1 .l3{display:block;color:var(--tung)}
.hero .under{display:flex;align-items:center;gap:1.6rem;margin-top:2.2rem;flex-wrap:wrap}
.hero .under .mark{font-size:1.35rem;transform:rotate(-1.5deg)}
.hero .hint{position:absolute;right:max(4vw,1.2rem);bottom:2rem;z-index:2;display:flex;align-items:center;gap:.8rem;
  font-family:'Special Elite',monospace;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim2)}
.hero .hint .lightline{width:70px;height:1px;background:var(--line);position:relative;overflow:hidden}
.hero .hint .lightline::after{content:"";position:absolute;inset:0;background:var(--tung);
  transform:translateX(-100%);animation:sweep 2.8s ease-in-out infinite}
@keyframes sweep{45%,55%{transform:translateX(0)}100%{transform:translateX(102%)}}

/* ============ now playing bar ============ */
.playbar{position:fixed;left:0;right:0;bottom:0;z-index:65;background:rgba(13,15,19,.94);
  border-top:1px solid var(--line);backdrop-filter:blur(10px);
  transform:translateY(110%);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.playbar.on{transform:translateY(0)}
.playbar .inner{width:min(1280px,94vw);margin:0 auto;display:flex;align-items:center;gap:1.4rem;padding:.8rem 0}
.playbar iframe{width:150px;height:84px;border:0;flex:none;background:#000}
.playbar .meta{min-width:0}
.playbar .meta .t{font-family:'Alfa Slab One',serif;font-size:1rem;letter-spacing:.04em;text-transform:uppercase}
.playbar .meta .s{font-family:'Special Elite',monospace;font-size:.72rem;letter-spacing:.18em;color:var(--dim2);text-transform:uppercase}
.vu{display:flex;align-items:flex-end;gap:4px;height:30px;margin-left:auto}
.vu i{width:5px;height:100%;background:var(--tung);transform-origin:bottom;animation:vu 1.1s ease-in-out infinite}
.vu i:nth-child(1){animation-delay:0s}.vu i:nth-child(2){animation-delay:.18s}
.vu i:nth-child(3){animation-delay:.36s}.vu i:nth-child(4){animation-delay:.09s}
.vu i:nth-child(5){animation-delay:.27s}.vu i:nth-child(6){animation-delay:.45s}
@keyframes vu{0%,100%{transform:scaleY(.22)}30%{transform:scaleY(.95)}60%{transform:scaleY(.45)}80%{transform:scaleY(.75)}}
.playbar .close{flex:none;font-family:'Special Elite',monospace;font-size:.8rem;letter-spacing:.14em;
  color:var(--dim2);cursor:pointer;border:0;background:none;padding:.6rem;text-transform:uppercase}
.playbar .close:hover{color:var(--bone)}

/* ============ the story filmstrip ============ */
.storyintro{padding:7.5rem 0 4rem}
.storyintro .tag{display:block;margin-bottom:1.2rem}
.storyintro h2{font-size:clamp(2.4rem,6vw,4.6rem);max-width:14ch}
.storyintro h2 em{font-style:normal;color:var(--tung)}
.storyintro p{max-width:52ch;color:var(--dim2);margin-top:1.4rem;font-size:1.05rem}

.strip{position:relative}
.rail{display:flex}
.panel{flex:0 0 100vw;min-height:100svh;position:relative;display:flex;align-items:center;overflow:hidden}
.panel .bg{position:absolute;inset:0}
.panel .bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(.85)}
.panel .bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(13,15,19,.92) 0%,rgba(13,15,19,.55) 46%,rgba(13,15,19,.2) 100%)}
.panel .word{position:absolute;top:50%;right:-2vw;transform:translateY(-50%);z-index:1;
  font-family:'Alfa Slab One',serif;font-size:clamp(6rem,17vw,15rem);text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1.5px rgba(233,226,210,.22);white-space:nowrap;line-height:1;pointer-events:none}
.panel .plate{position:relative;z-index:2;width:min(1280px,92vw);margin:0 auto;padding:7rem 0 4rem}
.panel .plate .inner{max-width:560px}
.panel .plate .tag{display:block;margin-bottom:1rem}
.panel h3{font-size:clamp(1.9rem,3.6vw,3rem);margin-bottom:1.2rem}
.panel p{color:rgba(233,226,210,.82);margin-bottom:.9rem;font-size:1.02rem}
.panel .q{font-family:'Special Elite',monospace;font-size:clamp(1.05rem,1.7vw,1.35rem);color:var(--tung);
  line-height:1.5;margin:1.4rem 0;max-width:34ch}
.panel .q::before{content:"\201C"}.panel .q::after{content:"\201D"}
.panel .cap{position:absolute;right:max(3vw,1rem);bottom:1.6rem;z-index:2;
  font-family:'Permanent Marker',cursive;color:rgba(233,226,210,.5);font-size:1rem;transform:rotate(-1deg)}

/* ============ the sound ============ */
.sound{position:relative;padding:8rem 0;text-align:center;overflow:hidden;background:var(--smoke)}
.sound .tag{display:block;margin-bottom:1.4rem}
.sound h2{font-size:clamp(2.6rem,7vw,5.4rem);max-width:16ch;margin:0 auto}
.sound h2 .outline{-webkit-text-stroke-width:2px}
.sound p{max-width:56ch;margin:1.8rem auto 0;color:var(--dim2);font-size:1.05rem}
.sound .type{font-family:'Special Elite',monospace;color:var(--tung);letter-spacing:.08em;
  display:block;margin:2rem auto .6rem;font-size:.95rem}
.sound .act{margin-top:2.4rem;display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}

/* ============ gigs: the poster wall ============ */
.gigwall{padding:7.5rem 0 8rem;position:relative}
.gigwall .lead{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:1.5rem;margin-bottom:3.2rem}
.gigwall h2{font-size:clamp(2.6rem,6.5vw,5rem)}
.gigwall h2 span{color:var(--tung)}
.posters{display:flex;flex-wrap:wrap;gap:2.6rem;align-items:flex-start}
.poster{background:var(--bone);color:#181410;width:min(340px,100%);padding:1.9rem 1.7rem 1.6rem;
  position:relative;transform:rotate(-1.6deg);transition:transform .35s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 24px 48px -20px rgba(0,0,0,.85)}
.poster:nth-child(2n){transform:rotate(1.4deg)}
.poster:nth-child(3n){transform:rotate(-.6deg)}
.poster:hover{transform:rotate(0) translateY(-6px)}
.poster::before,.poster::after{content:"";position:absolute;top:9px;width:16px;height:5px;
  background:#9a938a;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.poster::before{left:18px;transform:rotate(40deg)}
.poster::after{right:18px;transform:rotate(-42deg)}
.poster .pd{font-family:'Special Elite',monospace;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:#8c2130}
.poster .pv{font-family:'Alfa Slab One',serif;font-size:1.55rem;line-height:1.05;text-transform:uppercase;margin:.7rem 0 .5rem}
.poster .pt{font-family:'Libre Franklin',sans-serif;font-weight:400;font-size:.95rem;color:#4a4238}
.poster .pl{display:inline-block;margin-top:1.1rem;font-family:'Special Elite',monospace;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;color:#8c2130;border-bottom:2px solid #8c2130;padding-bottom:.15rem}
.poster.blank{background:var(--panel);color:var(--bone);border:1px dashed var(--line);box-shadow:none}
.poster.blank .mark{font-size:1.6rem;display:block;margin-bottom:1.2rem}
.gigwall .played{margin-top:3.5rem}
.gigrow{display:grid;grid-template-columns:150px 1fr auto;gap:1.4rem;align-items:baseline;
  padding:1rem .2rem;border-bottom:1px solid var(--line)}
.gigrow:first-child{border-top:1px solid var(--line)}
.gigrow .date{font-family:'Special Elite',monospace;font-size:.82rem;letter-spacing:.1em;color:var(--tung)}
.gigrow .venue{font-family:'Alfa Slab One',serif;font-size:1.1rem;text-transform:uppercase;letter-spacing:.03em}
.gigrow .venue small{display:block;font-family:'Libre Franklin',sans-serif;font-weight:300;
  text-transform:none;letter-spacing:0;font-size:.92rem;color:var(--dim2);margin-top:.2rem}

/* ============ photos: full bleed ============ */
.photos{padding:0 0 1px}
.phrow{position:relative;overflow:hidden}
.phrow.full{height:88svh}
.phrow.full img{width:100%;height:118%;object-fit:cover;filter:saturate(1.05)}
.phrow .cap{position:absolute;left:max(4vw,1.2rem);bottom:1.8rem;z-index:2}
.phrow .cap span{font-family:'Special Elite',monospace;font-size:.78rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bone);background:rgba(13,15,19,.72);padding:.5rem .9rem}
.phpair{display:grid;grid-template-columns:1fr 1fr}
.phpair .cell{position:relative;overflow:hidden;height:72svh}
.phpair .cell img{width:100%;height:115%;object-fit:cover}

/* ============ book ============ */
.book{position:relative;min-height:92svh;display:flex;align-items:center;overflow:hidden}
.book .bg{position:absolute;inset:0}
.book .bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.36) saturate(.9)}
.book .bg::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 45%,transparent 30%,rgba(13,15,19,.88) 100%)}
.book .content{position:relative;z-index:2;width:min(1280px,92vw);margin:0 auto;text-align:center;padding:7rem 0}
.book h2{font-size:clamp(2.4rem,6.5vw,5rem);max-width:17ch;margin:1.2rem auto 0}
.book h2 em{font-style:normal;color:var(--tung)}
.book .mark{display:block;margin-top:1.4rem;font-size:1.3rem}
.book .act{margin-top:2.6rem;display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}

/* footer */
footer{border-top:1px solid var(--line);padding:2.2rem 0}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap}
footer .lg{width:64px}
footer nav{display:flex;gap:1.8rem;font-family:'Special Elite',monospace;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase}
footer nav a:hover{color:var(--tung)}
footer .credit{font-size:.85rem;color:var(--dim2)}
footer .credit a{text-decoration:underline;text-underline-offset:3px}

.rv{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .hero .warmlayer{-webkit-mask-image:none;mask-image:none}
}

@media (max-width: 900px){
  .rail{display:block}
  .panel{min-height:0;padding:0}
  .panel .plate{padding:4.5rem 0 5rem}
  .panel .word{font-size:clamp(4rem,22vw,8rem);top:auto;bottom:4%;right:-4vw;transform:none}
  .panel .cap{display:none}
  .hero h1{font-size:clamp(3rem,15vw,5.2rem)}
  .hero .warmlayer{-webkit-mask-image:radial-gradient(circle 210px at var(--mx,64%) var(--my,34%),#000 0 38%,transparent 75%);
    mask-image:radial-gradient(circle 210px at var(--mx,64%) var(--my,34%),#000 0 38%,transparent 75%)}
  .phrow.full{height:56svh}
  .phpair{grid-template-columns:1fr}
  .phpair .cell{height:52svh}
  .playbar iframe{width:112px;height:63px}
  .vu{display:none}
  header.site nav{gap:1.2rem}
}

/* ============ the opening beat ============ */
#curtain{position:fixed;inset:0;z-index:80;background:#0a0c10;display:flex;align-items:center;
  justify-content:center;transition:opacity .45s ease .1s}
#curtain.lift{opacity:0;pointer-events:none}
#curtain .slate{font-family:'Special Elite',monospace;font-size:clamp(.85rem,1.6vw,1.05rem);
  letter-spacing:.28em;text-transform:uppercase;color:var(--bone);text-align:center;padding:0 1rem}
#curtain .slate .c2{display:block;margin-top:.9rem;color:var(--tung)}

/* ============ the little light you carry ============ */
#torch{position:fixed;z-index:75;width:14px;height:14px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(212,105,114,.95) 0%,rgba(166,44,57,.38) 55%,transparent 75%);
  transform:translate(-50%,-50%);transition:width .25s,height .25s,opacity .3s;opacity:0;
  mix-blend-mode:screen;box-shadow:0 0 24px 6px rgba(166,44,57,.3)}
body.lit #torch{opacity:1}
#torch.big{width:44px;height:44px}
@media (hover: none){#torch{display:none}}

/* hero video layer (their own footage, cold-graded) + spotlight beam */
#heroVideo{opacity:0;transition:opacity 1.2s ease .3s}
#heroVideo.ready{opacity:1}
#heroVideo iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100vw,178svh);height:max(100svh,56.4vw);border:0;pointer-events:none;
  filter:grayscale(.55) brightness(.5) contrast(1.08) saturate(.9)}
.beam{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle 340px at var(--bx,72%) var(--by,35%),
    rgba(196,75,85,.32) 0%,rgba(166,44,57,.12) 45%,transparent 72%);
  animation:lampflicker 7s linear infinite}
@keyframes lampflicker{0%,93.8%,94.6%,96.2%,100%{opacity:1}94%,96%{opacity:.55}}
.hero h1 span{display:inline-block}

/* the runner: big blocky type rolling across the page */
.runner{overflow:hidden;padding:3.2rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rtrack{display:flex;width:max-content;white-space:nowrap}
.rtrack span{font-family:'Alfa Slab One',serif;font-size:clamp(2.6rem,6vw,4.6rem);text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1.5px rgba(233,226,210,.4);padding-right:1rem;line-height:1.1}

/* the crate */
.crate-grid{display:grid;grid-template-columns:1fr minmax(340px,460px);gap:4.5rem;align-items:center;text-align:left}
.sound .crate-grid h2,.sound .crate-grid p,.sound .crate-grid .type{margin-left:0;text-align:left}
.sound .crate-grid .act{justify-content:flex-start}
.crate{position:relative}
.stackzone{position:relative;height:430px}
.sleeve{position:absolute;inset:0;margin:auto;width:min(360px,100%);height:400px;border:0;cursor:pointer;
  background:linear-gradient(160deg,#211d18 0%,#171410 100%);color:var(--bone);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.9),inset 0 0 0 1px rgba(233,226,210,.08);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;
  font-family:inherit;transition:box-shadow .3s}
.sleeve.front:hover{box-shadow:0 36px 70px -24px rgba(0,0,0,.95),inset 0 0 0 1px rgba(196,75,85,.5)}
.sleeve .side{font-family:'Special Elite',monospace;font-size:.7rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--dim2)}
.sleeve .disc{position:relative;width:210px;height:210px;border-radius:50%;overflow:hidden;flex:none;
  background:#0a0a0a;box-shadow:0 0 0 8px #0c0c0c,0 0 0 9px rgba(233,226,210,.1);
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.sleeve .disc img{width:100%;height:100%;object-fit:cover;opacity:.85}
.sleeve .disc i{position:absolute;inset:0;border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 3px,rgba(0,0,0,.42) 3px 4px),
    radial-gradient(circle at 50% 50%,transparent 0 26px,rgba(0,0,0,.25) 27px 100%)}
.sleeve .disc::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;
  background:var(--coal);transform:translate(-50%,-50%);box-shadow:0 0 0 3px rgba(233,226,210,.25)}
.sleeve.front:hover .disc{transform:rotate(14deg)}
.sleeve .stitle{font-family:'Alfa Slab One',serif;font-size:1.25rem;text-transform:uppercase;
  letter-spacing:.02em;line-height:1.1;max-width:88%;text-align:center}
.sleeve .splay{font-family:'Special Elite',monospace;font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tung);opacity:0;transform:translateY(4px);transition:.3s}
.sleeve.front:hover .splay{opacity:1;transform:none}
.crate-controls{display:flex;align-items:center;justify-content:space-between;margin-top:1.6rem;gap:1rem}

@media (max-width: 900px){
  .crate-grid{grid-template-columns:1fr;gap:3rem}
  .stackzone{height:400px}
  .runner{padding:2.2rem 0}
}

/* mobile refinements */
@media (max-width: 900px){
  .hero h1{font-size:clamp(2.5rem,11vw,4.4rem);word-break:break-word}
  header.site nav{gap:1rem}
  header.site nav a{font-size:.7rem;letter-spacing:.1em;white-space:nowrap}
  header.site .lg{width:60px}
}
@media (hover: none){.hero .hint{display:none}}

/* headlines stay slab; each opens with an ornate initial in the logo's spirit */
.hero h1{font-size:clamp(2.8rem,7.4vw,6.4rem)}
.hero h1 .ol{font-style:normal;color:transparent;-webkit-text-stroke:2.2px var(--bone)}
.dcap{font-family:'Ewert',serif;font-weight:400;color:inherit;font-size:1.34em;
  line-height:0;display:inline-block;transform:translateY(.02em);margin-right:.035em}
.hero h1 .l2 .dcap,.outline .dcap{-webkit-text-stroke:0}
h2 .dcap,h1 .dcap{text-shadow:0 3px 16px rgba(0,0,0,.4)}
.kicker-orn{display:flex;align-items:center;gap:1rem;margin-bottom:1.3rem}
.kicker-orn .rule{height:1px;width:74px;background:linear-gradient(90deg,transparent,var(--tung));position:relative}
.kicker-orn .rule.r{background:linear-gradient(270deg,transparent,var(--tung))}
.kicker-orn .dia{color:var(--tung);font-size:.7rem;transform:rotate(45deg);line-height:1}

/* curtain logo reveal */
#curtain .slate .c2{margin-top:1.1rem}
#curtain .clogo{width:min(380px,64vw);margin:1.6rem auto 0;display:block;opacity:0}
#curtain.lift{transition:opacity .55s ease .45s}

/* language toggle */
.lang{display:flex;align-items:center;gap:.45rem;font-family:'Special Elite',monospace;
  font-size:.78rem;letter-spacing:.12em;margin-left:1.6rem}
.lang span{color:var(--dim2)}
.lang a{color:var(--dim2);transition:color .25s}
.lang a:hover{color:var(--tung)}
.lang a[aria-current]{color:var(--tung)}

/* playbar hosting the SoundCloud widget */
.playbar .sc{flex:1;min-width:0}
.playbar .sc iframe{width:100%;height:88px;border:0;display:block}
.playbar.mode-video .sc{display:none}
.playbar:not(.mode-video) #playerSlot{display:none}
.vu i{animation-play-state:paused;opacity:.35}
.vu.playing i{animation-play-state:running;opacity:1}

/* videos page */
.vidgrid{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;margin-top:3rem}
.vid{position:relative}
.vid .frame16{position:relative;aspect-ratio:16/9;background:#000;
  box-shadow:0 26px 52px -22px rgba(0,0,0,.85)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid .vt{font-family:'Alfa Slab One',serif;font-size:1.15rem;text-transform:uppercase;margin-top:1rem}
.vid .vs{font-family:'Special Elite',monospace;font-size:.76rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim2);margin-top:.2rem}
@media (max-width: 900px){.vidgrid{grid-template-columns:1fr}}

/* booking contact rows */
.book .ways{display:flex;gap:2.4rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}
.book .way{font-family:'Special Elite',monospace;font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim2)}
.book .way a{color:var(--bone);border-bottom:1px solid var(--tung);padding-bottom:.15rem;transition:color .25s}
.book .way a:hover{color:var(--tung)}

/* ============ the big ticket (gigs) ============ */
.btk{display:grid;grid-template-columns:minmax(280px,46%) 1fr 92px;background:var(--bone);color:#1c1712;
  box-shadow:0 34px 68px -28px rgba(0,0,0,.9);position:relative;margin-bottom:2.4rem}
.btk .shot{position:relative;overflow:hidden;min-height:360px}
.btk .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.95) brightness(.85)}
.btk .body{padding:3rem 3rem 2.6rem;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;gap:1.1rem}
.btk .flag{font-family:'Special Elite',monospace;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:#8c2130;border:1px solid #8c2130;padding:.35rem .7rem}
.btk .bt{font-family:'Alfa Slab One',serif;font-size:clamp(1.6rem,3vw,2.6rem);
  line-height:1.05;text-transform:uppercase;color:#1c1712}
.btk .bs{font-family:'Special Elite',monospace;font-size:.9rem;letter-spacing:.1em;color:#5d5347}
.btk .bcta{display:inline-flex;align-items:center;gap:1rem;margin-top:.6rem;
  background:var(--tung);color:var(--bone);font-family:'Special Elite',monospace;font-weight:400;
  font-size:.88rem;letter-spacing:.16em;text-transform:uppercase;padding:1.05rem 1.6rem;
  transition:background .25s,transform .25s}
.btk .bcta:hover{background:var(--tung-hi);transform:translateX(3px)}
.btk .bcta .arr{font-family:'Libre Franklin',sans-serif;font-weight:600}
.btk .stub{border-left:2px dashed rgba(28,23,18,.35);position:relative;display:flex;
  align-items:center;justify-content:center;gap:.7rem}
.btk .stub .code{width:34px;height:72%;
  background:repeating-linear-gradient(180deg,#1c1712 0 2px,transparent 2px 5px,#1c1712 5px 6px,transparent 6px 10px);
  opacity:.8}
.btk .stub .ser{font-family:'Special Elite',monospace;font-size:.6rem;letter-spacing:.3em;
  text-transform:uppercase;color:#5d5347;writing-mode:vertical-rl}
.btk::before,.btk::after{content:"";position:absolute;right:78px;width:20px;height:20px;
  border-radius:50%;background:var(--coal);z-index:1}
.btk::before{top:-10px}.btk::after{bottom:-10px}
@media (max-width: 900px){
  .btk{grid-template-columns:1fr}
  .btk .shot{min-height:220px}
  .btk .stub{display:none}
  .btk .body{padding:2rem 1.6rem}
}

/* the SoundCloud widget wears black: lightness inverted, hues restored.
   Collapsed to a slim strip until the bar is hovered (or tapped, on touch). */
.playbar .sc iframe{filter:invert(.94) hue-rotate(180deg) saturate(1.15);transition:opacity .3s}
.playbar .sc{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.7,.2,1)}
.playbar:hover .sc,.playbar:focus-within .sc,.playbar.expanded .sc{max-height:88px}
.playbar .inner{cursor:pointer}
.playbar .grab{font-family:'Special Elite',monospace;font-size:.62rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--dim2);flex:none}
.playbar:hover .grab{color:var(--tung)}

/* the hero headline is James's lettering artwork; a hidden h1 carries the words */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.h1art{width:min(680px,82vw);height:auto;display:block;margin-left:-.6rem;
  filter:drop-shadow(0 10px 34px rgba(0,0,0,.55))}
.h1art-fr{width:min(520px,72vw)}

/* initials always take their own word's colour, even inside accent spans */
.gigwall h2 .dcap,.gigshero h1 .dcap{color:var(--bone)}

/* ============ mobile navigation: the night menu ============ */
.burger{display:none}
@media (max-width: 900px){
  header.site{z-index:72}
  header.site .lg{width:56px;flex:none;position:relative;z-index:76}
  .burger{display:flex;flex-direction:column;gap:5px;background:none;border:0;
    padding:.7rem .2rem;cursor:pointer;position:relative;z-index:76}
  .burger span{width:26px;height:2px;background:var(--bone);transition:transform .3s,opacity .3s}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  header.site nav{position:fixed;inset:0;background:rgba(10,12,16,.97);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2rem;transform:translateY(-103%);transition:transform .5s cubic-bezier(.2,.7,.2,1);z-index:70}
  header.site nav.open{transform:none}
  header.site nav a{font-size:1.05rem;letter-spacing:.26em}
  header.site nav .lang{margin:1.2rem 0 0;font-size:1.05rem;letter-spacing:.2em;
    padding-top:1.8rem;border-top:1px solid var(--line)}
  header.site nav .lang a{font-size:1.05rem}
}

/* ============ instrument doodles: printed into the night ============ */
.doodle{position:absolute;opacity:.11;pointer-events:none;z-index:1;user-select:none}
.has-doodles{position:relative;overflow:hidden}
.has-doodles>.wrap,.has-doodles .content{position:relative;z-index:2}
@media (max-width: 760px){.doodle{display:none}}

/* notes off the torch */
.notep{position:fixed;pointer-events:none;z-index:74;line-height:1;user-select:none;
  mix-blend-mode:screen;will-change:transform,opacity;text-shadow:0 0 12px rgba(226,180,106,.35)}