:root{
  --void:#04070A;
  --stone:#0B1116;
  --dust:#7FD4D8;
  --ash:#5C6B70;
  --pale:#E4EDEE;
  --line:rgba(127,212,216,.18);
  --display:Georgia,'Times New Roman',Times,serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#04070A}
body{color:var(--pale);font-family:var(--display);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.label{font-family:var(--mono);font-size:11px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ash)}
.wrap{position:relative;z-index:3;max-width:620px;margin:0 auto;padding:0 26px}
section{min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;padding:90px 0;position:relative}

/* hero */
.hero{justify-content:flex-end;min-height:100vh;padding:0 0 64px;overflow:hidden}
.heroImg{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;
  background-image:url(hero.jpg);background-size:cover;background-position:center top}
.heroFade{position:absolute;left:0;right:0;bottom:0;height:62%;z-index:1;
  background:linear-gradient(to bottom,rgba(4,7,10,0) 0%,
    rgba(4,7,10,.72) 46%,rgba(4,7,10,.97) 88%,#04070A 100%)}
.mark{margin-bottom:34px}
.mark svg{width:46px;height:40px;display:block}
h1{font-size:104px;font-weight:400;line-height:.9;
  letter-spacing:.13em;margin-bottom:28px}
.utter{font-size:26px;line-height:1.5;font-style:italic;
  color:var(--dust);max-width:18em;opacity:.9}
.cue{margin-top:44px;display:flex;align-items:center;gap:12px}
.cue .rule{width:40px;height:1px;background:var(--line)}

/* player */
.eyebrow{margin-bottom:36px;display:block}
.player{border-top:1px solid var(--line);padding-top:30px}
.row{display:flex;align-items:center;gap:20px}
.vbtn{background:none;border:none;cursor:pointer;padding:12px 8px;flex-shrink:0}
.vbtn svg{display:block;width:36px;height:32px}
.vbtn.on svg{animation:breathe 4s ease-in-out infinite}
.vbtn:focus-visible{outline:1px solid var(--dust);outline-offset:6px}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.4}}
.meta{flex:1;min-width:0}
.tname{font-size:28px;line-height:1.3;margin-bottom:8px}
.track{position:relative;height:1px;background:var(--line);margin-top:20px;cursor:pointer}
.track::before{content:'';position:absolute;top:-12px;left:0;right:0;height:26px}
.played{position:absolute;top:0;left:0;height:1px;width:0;background:var(--dust)}
.times{display:flex;justify-content:space-between;margin-top:11px}

/* fragments */
.frags{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:32px}
.frag{position:relative;overflow:hidden;background:var(--stone);padding-bottom:133%}
.frag img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.frag i{position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(202deg,rgba(127,212,216,.16),rgba(4,7,10,0) 52%)}
.frag span{position:absolute;left:11px;bottom:10px;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  color:var(--dust);opacity:.5}

/* gates */
.gate{border-top:1px solid var(--line);padding:34px 0}
.gate:last-of-type{border-bottom:1px solid var(--line)}
.gname{font-size:30px;margin-bottom:8px}
.gdesc{font-size:18px;color:var(--ash);line-height:1.6;margin-bottom:22px}
.price{font-size:56px;letter-spacing:.04em;margin-bottom:22px;display:block}
.enter{display:inline-flex;align-items:center;gap:16px;
  border:1px solid var(--line);background:none;cursor:pointer;
  padding:20px 30px;color:var(--pale);font-family:var(--mono);
  font-size:12px;letter-spacing:.32em;text-transform:uppercase;
  text-decoration:none;transition:border-color .4s,color .4s}
.enter:hover{border-color:var(--dust);color:var(--dust)}
.enter svg{width:13px;height:11px}

/* footer */
footer{border-top:1px solid var(--line);padding:48px 0 56px;margin-top:80px}
footer p{margin-bottom:14px}
.flinks{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:26px}
.flinks a{text-decoration:none}
.flinks a:hover{color:var(--dust)}
.legal{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:#3D4A4E;line-height:1.9;text-transform:none}

/* legal pages */
.doc{max-width:640px;margin:0 auto;padding:70px 26px 90px}
.doc h1{font-size:44px;letter-spacing:.04em;margin-bottom:12px}
.doc h2{font-size:24px;font-weight:400;margin:44px 0 14px;color:var(--dust)}
.doc p,.doc li{font-size:17px;line-height:1.75;color:#9FAFB2;margin-bottom:14px}
.doc ul{padding-left:20px;margin-bottom:14px}
.doc a{color:var(--dust)}
.back{display:inline-block;margin-bottom:44px;text-decoration:none}
.back:hover{color:var(--dust)}
.updated{margin-top:56px;padding-top:22px;border-top:1px solid var(--line)}

@media (max-width:420px){
  h1{font-size:80px}
  .utter{font-size:23px}
  .price{font-size:48px}
  .doc h1{font-size:36px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* copy blocks */
.lead{font-size:27px;line-height:1.45;margin-bottom:26px;color:var(--pale)}
.body{font-size:18px;line-height:1.75;color:#9FAFB2;margin-bottom:18px}
.body.quiet{color:var(--ash);font-size:16px}
.body a{color:var(--dust)}

/* recording list */
.rec{border-top:1px solid var(--line);padding:26px 0}
.rec:last-of-type{border-bottom:1px solid var(--line)}
.rnum{display:block;margin-bottom:9px;opacity:.7}
.rtitle{font-size:26px;line-height:1.25;margin-bottom:7px}
.rdesc{font-size:17px;line-height:1.65;color:#8A9A9E}

/* faq */
.qa{border-top:1px solid var(--line);padding:24px 0}
.qa:last-of-type{border-bottom:1px solid var(--line)}
.q{font-size:20px;margin-bottom:8px;color:var(--pale)}
.a{font-size:16px;line-height:1.7;color:#8A9A9E}
.a a{color:var(--dust)}

.gate .price{display:block;margin-bottom:22px}

/* price currency tag */
.price em{font-family:var(--mono);font-size:15px;font-style:normal;
  letter-spacing:.2em;color:var(--ash);margin-left:8px;vertical-align:middle}

/* cookie bar */
.cbar[hidden]{display:none!important}
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:#080D11;border-top:1px solid var(--line);
  padding:18px 22px;display:flex;flex-wrap:wrap;align-items:center;
  gap:14px;justify-content:space-between}
.cbar p{font-family:var(--mono);font-size:11px;line-height:1.7;
  color:#8A9A9E;max-width:52ch;margin:0}
.cbar a{color:var(--dust)}
.cbtns{display:flex;gap:10px;flex-shrink:0}
.cbtn{background:none;border:1px solid var(--line);color:#8A9A9E;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;padding:12px 18px;cursor:pointer}
.cbtn.yes{border-color:var(--dust);color:var(--dust)}
.cbtn:hover{color:var(--pale)}
@media (max-width:560px){
  .cbar{flex-direction:column;align-items:flex-start;padding:16px 20px}
  .cbtns{width:100%}
  .cbtn{flex:1}
}

/* footer inside doc pages */
.doc footer{margin-top:70px}

.player[hidden]{display:none!important}