:root{
  --bg: #0b0a09;
  --surface: #16130f;
  --surface-2: #201a14;
  --accent: #c4341d;
  --accent-dim: #7a2313;
  --ink: #ede4d6;
  --ink-dim: #9c9184;
  --line: #332c24;
  --transport-h: 84px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Space Mono', monospace;
  font-size:15px;
  line-height:1.6;
  padding-bottom:var(--transport-h);
  position:relative;
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3{font-family:'Anton', sans-serif; font-weight:400; letter-spacing:0.02em; margin:0; text-transform:uppercase;}
a{color:inherit;}
.wrap{max-width:1200px; margin:0 auto; padding:0 28px;}
.eyebrow{font-size:11px; letter-spacing:0.25em; text-transform:uppercase; color:var(--accent);}
::selection{background:var(--accent); color:var(--bg);}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
button{font-family:inherit;}

/* NAV */
nav{position:sticky; top:0; z-index:10; background:rgba(11,10,9,0.9); backdrop-filter:blur(6px); border-bottom:1px solid var(--line);}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px;}
.brand{font-family:'Anton',sans-serif; font-size:19px; letter-spacing:0.03em; white-space:nowrap;}
.brand span{color:var(--accent);}
.navlinks{display:flex; gap:26px; font-size:12px; letter-spacing:0.12em; text-transform:uppercase;}
.navlinks a{text-decoration:none; color:var(--ink-dim); transition:color .15s;}
.navlinks a:hover{color:var(--ink);}

/* HERO */
.hero{position:relative; padding:100px 0 70px; border-bottom:1px solid var(--line); overflow:hidden;}
.hero .tape-index{font-size:12px; color:var(--ink-dim); letter-spacing:0.15em; margin-bottom:22px;}
.hero h1{font-size:clamp(44px, 8vw, 96px); line-height:0.9; color:var(--ink);}
.hero h1 em{font-style:normal; color:var(--accent);}
.hero .sub{max-width:520px; margin-top:22px; color:var(--ink-dim); font-size:14px;}
.hero .hero-meta{display:flex; gap:36px; margin-top:40px; flex-wrap:wrap;}
.hero-meta div{font-size:12px; color:var(--ink-dim); letter-spacing:0.08em;}
.hero-meta strong{display:block; color:var(--ink); font-family:'Anton',sans-serif; font-size:24px; letter-spacing:0; margin-top:4px;}
.rec-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); margin-right:8px; animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.25;}}

section{padding:64px 0;}
section + section{border-top:1px solid var(--line);}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:36px; flex-wrap:wrap; gap:14px;}
.section-head h2{font-size:clamp(26px,4vw,38px);}
.count-tag{font-size:12px; color:var(--ink-dim); letter-spacing:0.1em;}

/* TOOLBAR (search/filter) */
.toolbar{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:30px;}
.toolbar input[type=search], .toolbar select{
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
  font-family:'Space Mono',monospace; font-size:13px; padding:10px 12px; border-radius:2px;
}
.toolbar input[type=search]{flex:1; min-width:180px;}
.toolbar select option{background:var(--surface);}

/* SHOWCASE GRID */
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
.card{background:var(--bg); padding:20px; display:flex; flex-direction:column; gap:14px; cursor:pointer; transition:background .15s;}
.card:hover{background:var(--surface);}
.card.active{background:var(--surface-2);}
.card-top{display:flex; align-items:center; justify-content:space-between;}
.idx{font-size:11px; color:var(--ink-dim);}
.card.active .idx{color:var(--accent);}
.playbtn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; transition:border-color .15s,color .15s;
}
.card:hover .playbtn, .card.active .playbtn{border-color:var(--accent); color:var(--accent);}
.card .title{font-family:'Anton',sans-serif; font-size:18px; text-transform:none; letter-spacing:0.01em;}
.wave{display:flex; align-items:flex-end; gap:2px; height:26px;}
.wave span{width:3px; background:var(--line); display:inline-block; border-radius:1px;}
.card.active .wave span{background:var(--accent);}
.card-meta{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-dim);}
.tags{display:flex; gap:6px; flex-wrap:wrap;}
.tag{font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-dim); border:1px solid var(--line); border-radius:2px; padding:3px 7px;}
.load-more{display:block; margin:36px auto 0; background:transparent; border:1px solid var(--line); color:var(--ink); padding:13px 34px; font-family:'Anton',sans-serif; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; transition:border-color .15s,color .15s;}
.load-more:hover{border-color:var(--accent); color:var(--accent);}
.empty{color:var(--ink-dim); font-size:13px; padding:40px 0; text-align:center; border:1px dashed var(--line);}

/* BIO */
.bio-grid{display:grid; grid-template-columns:220px 1fr; gap:50px; align-items:start;}
.bio-portrait{aspect-ratio:3/4; background:var(--surface); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-dim); font-size:12px; text-align:center; padding:16px;}
.bio-copy p{color:var(--ink-dim); max-width:560px;}
.bio-copy p strong{color:var(--ink); font-weight:400;}
.credits-list{margin-top:26px; display:flex; flex-wrap:wrap; gap:10px 22px; font-size:12px; color:var(--ink-dim);}
@media (max-width:680px){.bio-grid{grid-template-columns:1fr;} .bio-portrait{max-width:220px;}}

/* LICENSING */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.tier{background:var(--bg); padding:34px 26px; display:flex; flex-direction:column; gap:16px;}
.tier.featured{background:var(--surface-2);}
.tier .tier-name{font-family:'Anton',sans-serif; font-size:20px;}
.tier .price{font-family:'Anton',sans-serif; font-size:34px; color:var(--accent);}
.tier .price sup{font-size:14px; color:var(--ink-dim); font-family:'Space Mono',monospace;}
.tier ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; color:var(--ink-dim); font-size:13px;}
.tier li::before{content:"— "; color:var(--accent);}
.tier .cta{margin-top:auto; text-align:center; padding:11px; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; border:1px solid var(--line); text-decoration:none; color:var(--ink); transition:all .15s;}
.tier .cta:hover{border-color:var(--accent); color:var(--accent);}
@media (max-width:780px){.tiers{grid-template-columns:1fr;}}

/* BOOKING */
.slip{border:1px dashed var(--line); padding:40px; background:var(--surface); position:relative;}
.slip::before, .slip::after{content:""; position:absolute; width:16px; height:16px; border-radius:50%; background:var(--bg); top:50%; transform:translateY(-50%);}
.slip::before{left:-9px;} .slip::after{right:-9px;}
form{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
form .full{grid-column:1/-1;}
label{display:block; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:8px;}
input, select, textarea{width:100%; background:transparent; border:none; border-bottom:1px solid var(--line); color:var(--ink); font-family:'Space Mono',monospace; font-size:14px; padding:8px 2px;}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--accent);}
textarea{resize:vertical; min-height:80px;}
.submit-btn{grid-column:1/-1; justify-self:start; background:var(--accent); color:var(--bg); border:none; padding:13px 30px; font-family:'Anton',sans-serif; font-size:14px; letter-spacing:0.04em; text-transform:uppercase; cursor:pointer; margin-top:6px; transition:background .15s;}
.submit-btn:hover{background:#e04327;}
@media (max-width:600px){form{grid-template-columns:1fr;}}

footer{padding:40px 0 calc(40px + var(--transport-h)); border-top:1px solid var(--line);}
footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
.social{display:flex; gap:18px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim);}
.social a{text-decoration:none; transition:color .15s;}
.social a:hover{color:var(--accent);}
.fine{font-size:11px; color:var(--ink-dim);}

/* TRANSPORT BAR */
.transport{position:fixed; left:0; right:0; bottom:0; z-index:20; height:var(--transport-h); background:var(--surface); border-top:1px solid var(--line); display:flex; align-items:center; padding:0 20px; gap:18px;}
.t-playbtn{width:46px; height:46px; flex:none; border-radius:50%; background:var(--accent); border:none; color:var(--bg); display:flex; align-items:center; justify-content:center; cursor:pointer;}
.t-navbtn{width:34px; height:34px; flex:none; border-radius:50%; background:transparent; border:1px solid var(--line); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer;}
.t-navbtn:hover{border-color:var(--accent); color:var(--accent);}
.t-info{min-width:0; flex:0 0 auto; width:180px;}
.t-info .t-title{font-family:'Anton',sans-serif; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.t-info .t-sub{font-size:11px; color:var(--ink-dim);}
.t-progress{flex:1; display:flex; align-items:center; gap:10px; min-width:0;}
.t-time{font-size:11px; color:var(--ink-dim); width:38px; flex:none;}
.t-bar{flex:1; height:3px; background:var(--line); position:relative; cursor:pointer; border-radius:2px;}
.t-bar-fill{position:absolute; left:0; top:0; height:100%; background:var(--accent); width:0%; border-radius:2px;}
.t-vol{display:flex; align-items:center; gap:8px; flex:none;}
.t-vol input[type=range]{-webkit-appearance:none; width:70px; height:3px; background:var(--line); border-radius:2px;}
.t-vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:10px; height:10px; background:var(--accent); border-radius:50%; cursor:pointer;}
@media (max-width:680px){.t-info{width:auto; max-width:90px;} .t-vol{display:none;} .t-navbtn{display:none;}}