/* ============================================================
   MIDNIGHT EMPIRE: adamyoung.com design system
   Obsidian ground · champagne gold · Didot-class serif caps ·
   neutral grotesk body · mono flight-deck labels · slow light.
   ============================================================ */

@font-face{
  font-family:"Bodoni Moda";
  src:url("../fonts/BodoniModa-var-latin.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cinzel";
  src:url("../fonts/Cinzel-var-latin.woff2") format("woff2");
  font-weight:400 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Hanken Grotesk";
  src:url("../fonts/HankenGrotesk-var-latin.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --obsidian:#0A0A0C;
  --charcoal:#14161A;
  --charcoal-2:#101216;
  --night-teal:#0E1B21;
  --bone:#F2EFE9;
  --steel:#A8ACB3;
  --slate:#7E838C;
  --gold:#C9A26B;
  --gold-dim:#8A7440;
  --gold-faint:rgba(201,162,107,.28);
  --hair:rgba(242,239,233,.08);
  --hair-2:rgba(242,239,233,.16);
  --serif:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;
  --sans:"Hanken Grotesk","Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;
  --ease-lux:cubic-bezier(.16,1,.3,1);
  --pagew:1180px;
  color-scheme:dark;
}

/* rave mode: the whole system swings on these tokens */
:root.rave{
  --obsidian:#070310;
  --charcoal:#120A24;
  --charcoal-2:#0D0619;
  --night-teal:#1B0A2E;
  --bone:#F4F0FF;
  --steel:#B9A8E8;
  --slate:#8A7BB8;
  --gold:#29E5FF;
  --gold-dim:#FF3DAE;
  --gold-faint:rgba(41,229,255,.3);
  --hair:rgba(244,240,255,.1);
  --hair-2:rgba(244,240,255,.2);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0; background:var(--obsidian); color:var(--bone);
  font-family:var(--sans); font-weight:400; font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:var(--gold); color:var(--obsidian);}
a{color:var(--gold); text-decoration:none;}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;}
img{max-width:100%; height:auto;}
.wrap{max-width:var(--pagew); margin:0 auto; padding-inline:clamp(20px,4vw,44px);}
.sr{position:absolute!important; width:1px;height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
a.sr:focus{position:fixed!important; top:12px; left:12px; width:auto; height:auto; margin:0; clip:auto; white-space:normal; padding:10px 16px; background:var(--obsidian); color:var(--gold); border:1px solid var(--gold); border-radius:2px; z-index:100; font-family:var(--mono); font-size:11px; letter-spacing:.2em;}

/* ---------- typography ---------- */
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--gold); font-weight:400;
}
.display{
  font-family:var(--serif); font-weight:400; letter-spacing:.18em;
  text-transform:uppercase; line-height:1.16; text-wrap:balance;
}
h2.display{font-size:clamp(24px,3.4vw,40px); margin:0;}
h3.display,.display.small{font-size:clamp(17px,2vw,22px); letter-spacing:.22em; margin:0;}
.lede{color:var(--steel); max-width:62ch;}
.monoline{font-family:var(--mono); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--steel);}
.monoline i{font-style:normal; color:var(--gold); padding-inline:.35em;}
.serif-quote{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(21px,2.8vw,30px); line-height:1.5; letter-spacing:.01em;
  color:var(--bone); text-wrap:balance;
}

/* ---------- gold light ---------- */
.rule{height:1px; background:linear-gradient(90deg,transparent,var(--gold-faint) 18%,var(--gold-faint) 82%,transparent); border:0; margin:0;}
.js .rule-draw{transform-origin:left center; transform:scaleX(0); transition:transform 1.1s var(--ease-lux) .15s;}
.lit .rule-draw,.rule-draw.lit{transform:scaleX(1);}

/* ---------- reveals (JS adds .js to <html>) ---------- */
.reveal{opacity:1; transform:none;}
.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-lux),transform .8s var(--ease-lux);}
.js .reveal.lit{opacity:1; transform:none;}
.js .reveal.d1{transition-delay:.08s;} .js .reveal.d2{transition-delay:.18s;}
.js .reveal.d3{transition-delay:.28s;} .js .reveal.d4{transition-delay:.38s;}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1; transform:none; transition:none;}
  .js .rule-draw{transform:none; transition:none;}
}

/* ---------- header ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,3.4vw,40px);
  transition:background .45s ease,border-color .45s ease,padding .45s ease;
  border-bottom:1px solid transparent;
}
.hdr.scrolled{background:rgba(10,10,12,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-color:var(--hair); padding-block:12px;}
.hdr .mark img{height:46px; width:auto; display:block; opacity:.96; filter:drop-shadow(0 1px 8px rgba(0,0,0,.5));}
.hdr nav{display:flex; gap:clamp(14px,2.4vw,30px); align-items:center;}
.hdr nav a{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--bone); position:relative; padding-block:4px;
}
.hdr nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .4s var(--ease-lux);
}
.hdr nav a:hover::after,.hdr nav a[aria-current="page"]::after{right:0;}
.hdr nav a[aria-current="page"]{color:var(--gold);}
.hdr .navtoggle{display:none;}

@media (max-width:820px){
  .hdr nav{flex-wrap:wrap; justify-content:flex-end; gap:10px 16px; max-width:70vw;}
  .js .hdr nav{
    position:fixed; inset:0; background:rgba(10,10,12,.97);
    flex-direction:column; justify-content:center; gap:30px; max-width:none;
    transform:translateY(-102%); transition:transform .55s var(--ease-lux);
  }
  .js .hdr nav.open{transform:none;}
  .js .hdr nav a{font-size:13px;}
  .js .hdr .navtoggle{
    display:block; z-index:60; background:none; border:1px solid var(--hair-2);
    color:var(--bone); font-family:var(--mono); font-size:10px; letter-spacing:.28em;
    padding:9px 14px; border-radius:2px; cursor:pointer; text-transform:uppercase;
  }
}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  overflow:hidden; padding:110px 20px 90px;
}
.hero-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; filter:saturate(.8) contrast(1.02) brightness(.62);}
.js .hero-photo{animation:kenburns 30s var(--ease-lux) infinite alternate;}
@media (prefers-reduced-motion:reduce){.js .hero-photo{animation:none;}}
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 85% at 76% 6%, rgba(201,162,107,.1) 0%, transparent 46%),
    linear-gradient(rgba(10,10,12,.42) 0%, rgba(10,10,12,.22) 42%, rgba(7,7,9,.9) 100%);
}
@keyframes kenburns{from{transform:scale(1) translateY(0);}to{transform:scale(1.06) translateY(-1.2%);}}
@media (prefers-reduced-motion:reduce){.js .hero-bg{animation:none;}}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.hero .inner{position:relative; display:flex; flex-direction:column; align-items:center; gap:0;}
.hero .sig{width:min(520px,82vw); margin:26px 0 0; filter:drop-shadow(0 10px 44px rgba(0,0,0,.55));}
.hero h1{margin:0;}
.hero .roles{
  font-family:var(--serif); font-weight:400; font-size:clamp(15px,2.3vw,25px);
  letter-spacing:.34em; text-transform:uppercase; color:var(--bone); margin-top:40px;
  padding-left:.34em; /* optically recenters tracked caps */
}
.hero .roles.big{
  font-family:"Cinzel",Didot,Georgia,serif; font-weight:600;
  font-size:clamp(28px,5vw,58px); letter-spacing:.14em; line-height:1.3; margin-top:30vh;
  padding-left:.14em; text-shadow:0 2px 34px rgba(0,0,0,.65); text-wrap:balance;
}
.hero .idline{margin-top:22px;}
.hero .cta{
  display:inline-block; margin-top:44px;
  font-family:var(--mono); font-size:11px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold-faint); border-radius:2px;
  padding:15px 34px 14px 40px; transition:background .4s ease,border-color .4s ease;
}
.hero .cta:hover{background:rgba(201,162,107,.08); border-color:var(--gold);}
.scrollcue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:9px; letter-spacing:.34em; color:var(--slate); text-transform:uppercase;
}
.js .scrollcue::after{
  content:""; display:block; width:1px; height:34px; margin:10px auto 0;
  background:linear-gradient(var(--gold),transparent); animation:cue 2.4s ease infinite;
}
@keyframes cue{0%{transform:scaleY(0); transform-origin:top}55%{transform:scaleY(1); transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){.js .scrollcue::after{animation:none;}}

/* ---------- shot placeholder frames (pre-photography) ---------- */
.shotframe{
  position:relative; display:flex; align-items:flex-end; overflow:hidden;
  background:
    radial-gradient(100% 80% at 80% 10%, rgba(201,162,107,.1) 0%, transparent 50%),
    linear-gradient(165deg,var(--charcoal) 0%, var(--charcoal-2) 60%, #0B0D10 100%);
  border:1px solid var(--hair);
}
.shotframe .tag{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--slate); padding:10px 14px;
}
.shotframe::before{
  content:""; position:absolute; inset:14px; border:1px dashed rgba(242,239,233,.1); pointer-events:none;
}

/* ---------- sections ---------- */
.section{padding:clamp(72px,9vw,120px) 0;}
.section-head{display:flex; flex-direction:column; gap:14px; margin-bottom:clamp(34px,4.5vw,56px);}
.alt{background:var(--charcoal-2);}

/* ---------- stats ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px; background:var(--hair); border-block:1px solid var(--hair);}
.stat{background:var(--obsidian); padding:38px 26px; text-align:center;}
.stat b{
  display:block; font-family:var(--serif); font-weight:400; font-size:clamp(34px,4vw,52px);
  letter-spacing:.04em; color:var(--bone); font-variant-numeric:tabular-nums;
}
.stat span{display:block; margin-top:10px; font-family:var(--mono); font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--slate);}

/* ---------- empire tiles ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px;}
.tile{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:300px; padding:24px 26px; overflow:hidden; border:1px solid var(--hair);
  background:linear-gradient(168deg,var(--charcoal) 0%, var(--charcoal-2) 70%);
  transition:border-color .5s ease,transform .5s var(--ease-lux);
}
.tile:hover{border-color:var(--gold-faint); transform:translateY(-3px);}
.tile .t-art{position:absolute; inset:0; opacity:.55; transition:opacity .6s ease,transform 1.2s var(--ease-lux);}
.tile:hover .t-art{opacity:.75; transform:scale(1.03);}
.t-art img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.8) contrast(1.05) brightness(.9);}
.tile .t-art.photo{opacity:.85;}
.tile:hover .t-art.photo{opacity:1;}
.tile .t-scrim{position:absolute; inset:auto 0 0 0; height:84%; background:linear-gradient(transparent,rgba(7,7,9,.55) 45%,rgba(7,7,9,.96) 80%);}
.tile .t-k,.tile .t-name,.tile .t-line{text-shadow:0 1px 14px rgba(0,0,0,.65);}
.tile .t-k{position:relative; font-family:var(--mono); font-size:9px; letter-spacing:.3em; color:var(--gold); text-transform:uppercase;}
.tile .t-name{position:relative; font-family:var(--serif); font-weight:400; font-size:clamp(21px,2.2vw,27px); letter-spacing:.16em; text-transform:uppercase; margin:10px 0 8px; color:var(--bone);}
.tile .t-line{position:relative; color:var(--steel); font-size:14px; max-width:42ch;}
.tile .t-go{
  position:absolute; top:20px; right:22px; font-family:var(--mono); font-size:12px; color:var(--gold);
  opacity:0; transform:translateX(-8px); transition:opacity .4s ease,transform .4s var(--ease-lux);
}
.tile:hover .t-go{opacity:1; transform:none;}
.tile:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

/* ---------- acts ---------- */
.acts{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(22px,3vw,40px);}
.act{border-top:1px solid var(--gold-dim); padding-top:20px;}
.act .a-k{font-family:var(--mono); font-size:9.5px; letter-spacing:.3em; color:var(--gold); text-transform:uppercase;}
.act h3,.act .small{margin:12px 0 10px;}
.act p{margin:0; color:var(--steel); font-size:15px;}
.quoteblock{margin:clamp(46px,6vw,72px) auto 0; max-width:820px; text-align:center;}
.quoteblock .attr{margin-top:18px;}

/* ---------- transmissions ---------- */
.trans{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px;}
.card{
  border:1px solid var(--hair); background:linear-gradient(170deg,var(--charcoal) 0%, var(--charcoal-2) 80%);
  padding:26px 26px 24px; display:flex; flex-direction:column; gap:12px;
  transition:border-color .5s ease;
}
.card:hover{border-color:var(--gold-faint);}
.card .c-k{font-family:var(--mono); font-size:9px; letter-spacing:.3em; color:var(--gold); text-transform:uppercase;}
.card h3,.card .small{margin:0; color:var(--bone); font-size:clamp(17px,2vw,22px); letter-spacing:.22em;}
.card p{margin:0; color:var(--steel); font-size:14.5px; flex:1;}
.card .c-go{font-family:var(--mono); font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold);}
.pills{display:flex; flex-wrap:wrap; gap:8px;}
.pill{
  font-family:var(--mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--steel); border:1px solid var(--hair-2); border-radius:999px; padding:7px 14px;
  transition:color .3s ease,border-color .3s ease;
}
.pill:hover{color:var(--gold); border-color:var(--gold-faint);}
.pill.dim{opacity:.55; pointer-events:none;}

/* ---------- track rows (music) ---------- */
.tracks{border-top:1px solid var(--hair);}
.trackrow{
  display:flex; align-items:center; gap:18px; padding:16px 6px; border-bottom:1px solid var(--hair);
  transition:background .35s ease;
}
.trackrow:hover{background:rgba(242,239,233,.02);}
.trackrow .no{font-family:var(--mono); font-size:10.5px; color:var(--slate); width:34px; flex:none; font-variant-numeric:tabular-nums;}
.trackrow .name{flex:1; font-family:var(--serif); font-weight:400; letter-spacing:.14em; text-transform:uppercase; font-size:15px;}
.trackrow .name small{font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--slate); margin-left:12px;}
.trackrow.dim{opacity:.62;}
.trackrow.dim .name small{color:var(--gold-dim);}

/* ---------- music: album + track pages ---------- */
.pagehero.photohero{padding:230px 0 90px;}
.pagehero.photohero .bg{background:none;}
.pagehero.photohero .bgimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; filter:saturate(.85) brightness(.72);}
.pagehero.photohero .scrim{position:absolute; inset:0; background:linear-gradient(rgba(10,10,12,.5) 0%, rgba(10,10,12,.18) 40%, var(--obsidian) 96%);}
.mrow-art{width:52px; height:52px; flex:none; object-fit:cover; border-radius:2px; border:1px solid var(--hair);}
.mrow-art-blank{width:52px; height:52px; flex:none; border-radius:2px; border:1px solid var(--hair); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px; color:var(--slate); background:var(--charcoal-2);}
.trackrow{text-decoration:none;}
.trackhero .t-cover{width:100%; max-width:440px; height:auto; border:1px solid var(--hair-2); box-shadow:0 30px 80px rgba(0,0,0,.55);}
.t-cover-blank{aspect-ratio:1/1; max-width:440px; display:flex; align-items:center; justify-content:center; background:linear-gradient(165deg,var(--charcoal),var(--charcoal-2)); border:1px solid var(--hair);}
.t-cover-blank span{font-family:var(--serif); font-size:64px; color:var(--gold-dim); letter-spacing:.1em;}
.trackhero h1 small{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.28em; color:var(--steel); margin-top:14px; text-transform:uppercase;}
.lyrics{max-width:560px; margin:0 auto; text-align:center;}
.lyr{font-size:18.5px; line-height:1.9; color:var(--bone); margin:0 0 34px;}
.sealed{text-align:center; padding:60px 20px; border:1px dashed var(--hair-2); border-radius:4px; max-width:560px; margin:0 auto;}
.tracknav{display:flex; justify-content:space-between; gap:18px; margin-top:70px; padding-top:22px; border-top:1px solid var(--hair); font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;}
.tracknav a{color:var(--steel);} .tracknav a:hover{color:var(--gold);}

/* ---------- episode archive rows ---------- */
.eprow .ep-name{flex:1; font-family:var(--sans); font-size:14.5px; letter-spacing:.01em; text-transform:none; color:var(--bone);}
.eprow .ep-meta{font-family:var(--mono); font-size:9px; letter-spacing:.18em; color:var(--slate); text-transform:uppercase; flex:none;}
@media (max-width:640px){.eprow .ep-meta{display:none;}}

/* ---------- galleries ---------- */
.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px;}
.gallery figure{margin:0; position:relative; overflow:hidden; border:1px solid var(--hair); aspect-ratio:4/3;}
.gallery figure.tall{aspect-ratio:3/4;}
.gallery img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.85) contrast(1.04) brightness(.92); transition:transform 1.2s var(--ease-lux);}
.gallery figure:hover img{transform:scale(1.04);}
.gallery figcaption{position:absolute; inset:auto 0 0 0; padding:26px 14px 10px; font-family:var(--mono); font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel); background:linear-gradient(transparent,rgba(7,7,9,.85));}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--hair); background:var(--charcoal-2); padding:clamp(52px,6vw,76px) 0 42px;}
.f-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:clamp(26px,4vw,50px);}
@media (max-width:820px){.f-grid{grid-template-columns:1fr 1fr;}}
.f-brand img{width:200px; opacity:.92;}
.f-brand p{color:var(--slate); font-size:13px; max-width:34ch; margin:18px 0 0;}
.f-col h4,.f-col .f-h{font-family:var(--mono); font-size:9.5px; letter-spacing:.3em; color:var(--gold); text-transform:uppercase; font-weight:400; margin:0 0 16px;}
.f-col a{display:block; color:var(--steel); font-size:13.5px; padding:5px 0; transition:color .3s ease;}
.f-col a:hover{color:var(--bone);}
.f-base{
  margin-top:clamp(40px,5vw,60px); padding-top:22px; border-top:1px solid var(--hair);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-family:var(--mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--slate);
}
.f-base a{color:var(--slate);} .f-base a:hover{color:var(--gold);}
.f-social{display:flex; gap:18px; margin-top:22px; align-items:center;}
.f-social a{color:var(--steel); display:block; transition:color .3s ease, transform .3s var(--ease-lux);}
.f-social a:hover{color:var(--gold); transform:translateY(-2px);}
.f-social svg{width:17px; height:17px; fill:currentColor; display:block;}

/* ---------- page hero (interior pages) ---------- */
.pagehero{padding:190px 0 70px; position:relative; overflow:hidden;}
.pagehero .bg{position:absolute; inset:0; background:
  radial-gradient(110% 70% at 82% 0%, rgba(201,162,107,.1) 0%, transparent 48%),
  linear-gradient(178deg,#101216 0%, var(--obsidian) 72%);}
.pagehero .wrap{position:relative;}
.pagehero h1{font-family:var(--serif); font-weight:400; font-size:clamp(34px,5.4vw,62px); letter-spacing:.16em; text-transform:uppercase; margin:18px 0 16px; line-height:1.12; text-wrap:balance;}
.pagehero .lede{font-size:17px;}

/* ---------- forms ---------- */
.form{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:720px;}
.form .full{grid-column:1/-1;}
.form label{display:block;}
.form .lab{font-family:var(--mono); font-size:9.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--steel); margin-bottom:8px; display:block;}
.form input,.form textarea{
  width:100%; background:rgba(242,239,233,.03); border:1px solid var(--hair-2); border-radius:2px;
  color:var(--bone); font-family:var(--sans); font-size:15px; padding:13px 15px;
  transition:border-color .3s ease,background .3s ease;
}
.form input:focus,.form textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); background:rgba(201,162,107,.05);}
.form textarea{min-height:150px; resize:vertical;}
.form button{
  grid-column:1/-1; justify-self:start; cursor:pointer;
  background:none; color:var(--gold); border:1px solid var(--gold-faint); border-radius:2px;
  font-family:var(--mono); font-size:11px; letter-spacing:.4em; text-transform:uppercase;
  padding:15px 36px 14px 42px; transition:background .4s ease,border-color .4s ease;
}
.form button:hover{background:rgba(201,162,107,.08); border-color:var(--gold);}
@media (max-width:640px){.form{grid-template-columns:1fr;}}

/* ---------- utilities ---------- */
.center{text-align:center;}
.mt-0{margin-top:0;} .goldtext{color:var(--gold);}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center;}
@media (max-width:820px){.grid-2{grid-template-columns:1fr;}}
.inprod{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--slate); border:1px dashed var(--hair-2); border-radius:2px; padding:12px 18px; display:inline-block;
}

.form-status{grid-column:1/-1; color:var(--gold); font-size:10px; letter-spacing:.22em; margin:4px 0 0;}

/* ---------- book chapter guides ---------- */
.chlist{border-top:1px solid var(--hair); max-width:860px;}
.ch{display:grid; grid-template-columns:64px 1fr; gap:8px 22px; padding:26px 4px; border-bottom:1px solid var(--hair);}
.ch .no{font-family:var(--serif); font-size:26px; color:var(--gold-dim); letter-spacing:.06em; line-height:1;}
.ch h3{grid-column:2; font-family:var(--serif); font-weight:400; font-size:17px; letter-spacing:.16em; text-transform:uppercase; margin:0; color:var(--bone);}
.ch p{grid-column:2; margin:6px 0 0; color:var(--steel); font-size:14.5px; max-width:64ch;}
@media (max-width:560px){.ch{grid-template-columns:1fr;} .ch h3,.ch p{grid-column:1;}}

/* ---------- transcripts ---------- */
.transcript{max-width:780px; border:1px solid var(--hair); border-radius:4px; background:var(--charcoal-2);}
.transcript summary{cursor:pointer; list-style:none; padding:18px 24px; font-family:var(--mono); font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); transition:background .3s ease;}
.transcript summary:hover{background:rgba(201,162,107,.05);}
.transcript summary::-webkit-details-marker{display:none;}
.transcript summary::after{content:"+"; float:right; font-size:14px;}
.transcript[open] summary::after{content:"\2212";}
.transcript[open] summary{border-bottom:1px solid var(--hair);}
.tr-body{padding:10px 26px 30px; max-height:none;}
.tr-body p{color:var(--steel); font-size:15px; line-height:1.75; margin:0 0 14px; max-width:66ch;}
.tr-body .tr-sp{font-family:var(--mono); font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin:26px 0 10px;}
.tr-body .tr-sp span{color:var(--slate); letter-spacing:.14em;}
.tr-body .tr-note{font-family:var(--mono); font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--slate); margin:16px 0 4px;}
.gallery video{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.9) contrast(1.03) brightness(.95);}
.gallery figure.native{aspect-ratio:auto;}
.gallery figure.native video{width:100%; height:auto; object-fit:unset;}
.gallery figure{position:relative;}
.sndbtn{position:absolute; top:10px; right:10px; z-index:2; width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:rgba(10,10,12,.62); border:1px solid var(--hair-2); border-radius:999px; color:var(--steel); cursor:pointer; transition:color .3s ease, border-color .3s ease; padding:0;}
.sndbtn:hover{color:var(--gold); border-color:var(--gold-faint);}
.sndbtn.on{color:var(--gold); border-color:var(--gold-faint);}
.rave-heart{background:none; border:none; padding:0; font:inherit; color:var(--gold); cursor:pointer; display:inline-block; transition:transform .3s var(--ease-lux);}
.rave-heart:hover{transform:scale(1.4);}
:root.rave .rave-heart{animation:heartbeat 1s ease infinite;}
@keyframes heartbeat{0%,100%{transform:scale(1);}25%{transform:scale(1.3);}45%{transform:scale(1);}65%{transform:scale(1.25);}}
@media (prefers-reduced-motion:reduce){:root.rave .rave-heart{animation:none;}}

/* rave mode: a disco ball drops into the header and never stops spinning */
.disco{display:none; position:absolute; left:50%; top:50%; margin-top:-15px; transform:translateX(-50%); line-height:1;}
:root.rave .disco{display:block; animation:discodrop .7s cubic-bezier(.34,1.56,.64,1) both;}
.disco-ball{display:inline-block; font-size:24px; animation:discospin 1.9s linear infinite, discoglow 2.6s ease-in-out infinite;}
@keyframes discodrop{from{transform:translate(-50%,-56px); opacity:0;} to{transform:translate(-50%,0); opacity:1;}}
@keyframes discospin{from{transform:rotateY(0);} to{transform:rotateY(360deg);}}
@keyframes discoglow{0%,100%{filter:drop-shadow(0 0 7px rgba(41,229,255,.95));} 50%{filter:drop-shadow(0 0 12px rgba(255,61,174,.95));}}

/* rave activation: the laser show. No strobes, just sweeps; overlay removes itself. */
.lasershow{position:fixed; inset:0; z-index:1999; pointer-events:none; overflow:hidden; animation:lasersout 3s ease both;}
.lasershow i{
  position:absolute; bottom:-2px; left:0; width:250vmax; height:2px; border-radius:2px;
  transform-origin:0 50%; mix-blend-mode:screen; opacity:.9;
  background:linear-gradient(90deg, currentColor 0%, currentColor 45%, transparent 100%);
  box-shadow:0 0 16px 2px currentColor;
  animation:sweepL 1.5s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
.lasershow i:nth-child(even){left:100%; animation-name:sweepR;}
.lasershow i:nth-child(1){color:#29E5FF; animation-delay:-.1s;}
.lasershow i:nth-child(2){color:#FF3DAE; animation-delay:-.45s;}
.lasershow i:nth-child(3){color:#C9A26B; animation-delay:-.8s; animation-duration:1.8s;}
.lasershow i:nth-child(4){color:#29E5FF; animation-delay:-1.15s; animation-duration:1.7s;}
.lasershow i:nth-child(5){color:#FF3DAE; animation-delay:-.6s; animation-duration:1.3s;}
.lasershow i:nth-child(6){color:#7CFF6B; animation-delay:-.9s; animation-duration:1.6s;}
.lasershow i:nth-child(7){color:#7CFF6B; animation-delay:-1.3s; animation-duration:1.4s;}
.lasershow i:nth-child(8){color:#C9A26B; animation-delay:-.25s; animation-duration:1.9s;}
@keyframes sweepL{from{transform:rotate(-86deg);} to{transform:rotate(-8deg);}}
@keyframes sweepR{from{transform:rotate(-94deg);} to{transform:rotate(-172deg);}}
@keyframes lasersout{0%{opacity:0;} 8%{opacity:1;} 75%{opacity:1;} 100%{opacity:0;}}
@media (prefers-reduced-motion:reduce){
  :root.rave .disco{animation:none;}
  :root.rave .disco-ball{animation:none; filter:none;}
  .lasershow{display:none;}
}
