:root{
  --ink:#0a0e0f;
  --ink-2:#12181a;
  --ink-3:#1a2224;
  --paper:#ede6d6;
  --paper-dim:#a39c8f;
  --brass:#d4a84b;
  --brass-dim:#8f7638;
  --tape-red:#b8453f;
  --vu-green:#7fa66b;
  --line: rgba(237,230,214,0.12);
  --radius: 3px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:2; opacity:.05; mix-blend-mode:overlay;
  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");
}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brass);
  margin:0 0 .9rem;
}

h1,h2{
  font-family:'Oswald', sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.01em;
  margin:0;
  color:var(--paper);
}
em{font-style:normal; font-weight:700; color:var(--brass);}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 2rem;
  background:rgba(18,24,26,0.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.mark{
  display:flex; align-items:center; gap:.6rem;
  color:var(--paper); text-decoration:none;
  font-family:'IBM Plex Mono', monospace; font-weight:500; letter-spacing:.08em; font-size:.85rem;
}
.mark-bars{display:inline-flex; align-items:flex-end; gap:2px; height:14px;}
.mark-bars i{width:3px; background:var(--brass); display:inline-block; border-radius:1px; animation:barpulse 1.2s ease-in-out infinite;}
.mark-bars i:nth-child(1){height:40%; animation-delay:0s;}
.mark-bars i:nth-child(2){height:100%; animation-delay:.15s;}
.mark-bars i:nth-child(3){height:65%; animation-delay:.3s;}
.mark-bars i:nth-child(4){height:85%; animation-delay:.45s;}
@keyframes barpulse{0%,100%{transform:scaleY(.4);} 50%{transform:scaleY(1);}}

.topnav a{
  color:var(--paper-dim); text-decoration:none; margin-left:1.8rem;
  font-size:.9rem; font-weight:500;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.topnav a:hover{color:var(--brass); border-color:var(--brass);}

/* Hero */
.hero{
  position:relative;
  min-height:88vh;
  display:flex; align-items:center;
  padding:0 2rem;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-wave{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.35;
}
.hero-inner{position:relative; z-index:1; max-width:760px; margin:0 auto;}
.hero-title{
  font-size:clamp(2.2rem, 5.6vw, 3.8rem);
  line-height:1.08;
  letter-spacing:.005em;
  margin-bottom:1.2rem;
}
.hero-sub{
  max-width:52ch;
  color:var(--paper-dim);
  font-size:1.08rem;
  margin-bottom:2.2rem;
}
.hero-actions{display:flex; gap:1rem; flex-wrap:wrap;}

.btn{
  font-family:'Inter', sans-serif;
  font-weight:600; font-size:.92rem;
  padding:.85rem 1.5rem;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:.5rem;
  text-decoration:none;
  transition:transform .15s ease, background .2s, border-color .2s, color .2s;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--brass); color:var(--ink);}
.btn-primary:hover{background:#e2b95c;}
.btn-ghost{background:transparent; color:var(--paper); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--brass); color:var(--brass);}
.btn-icon{font-size:.7rem;}

/* Sections */
section{padding:6rem 2rem;}
.section-head{max-width:760px; margin:0 auto 3rem;}
.section-head h2{font-size:clamp(1.7rem, 3.4vw, 2.4rem);}

/* Player */
.reel{background:var(--ink-2); border-bottom:1px solid var(--line);}
.player{
  max-width:760px; margin:0 auto;
  display:flex; gap:1.5rem; align-items:center;
  background:var(--ink-3);
  border:1px solid var(--line);
  border-radius:8px;
  padding:1.6rem;
}
.player-toggle{
  flex:0 0 auto;
  width:56px; height:56px; border-radius:50%;
  background:var(--brass); color:var(--ink);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.player-toggle .icon-pause{display:none;}
.player.playing .icon-play{display:none;}
.player.playing .icon-pause{display:inline;}

.player-body{flex:1; min-width:0;}
.player-meta{display:flex; justify-content:space-between; font-family:'IBM Plex Mono', monospace; font-size:.78rem; color:var(--paper-dim); margin-bottom:.6rem;}
.player-title{color:var(--paper); font-weight:500;}
.wave-canvas{width:100%; height:60px; display:block; margin-bottom:.5rem;}
.scrub{
  width:100%; accent-color:var(--brass); cursor:pointer;
  background:transparent;
}
.reel-note{max-width:760px; margin:1.2rem auto 0; font-family:'IBM Plex Mono', monospace; font-size:.78rem; color:var(--paper-dim);}
.reel-note code{color:var(--brass);}

/* Book / contact */
.book-grid{
  max-width:960px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1.3fr; gap:3rem;
}
.book-card{border:1px solid var(--line); border-radius:8px; padding:1.6rem; background:var(--ink-2);}
.headshot{width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px; margin-bottom:1.2rem; filter:grayscale(.15);}
.slip div{display:flex; justify-content:space-between; padding:.5rem 0; border-top:1px solid var(--line); gap:1rem;}
.slip div:first-child{border-top:none;}
.slip dt{font-family:'IBM Plex Mono', monospace; font-size:.72rem; color:var(--paper-dim); text-transform:uppercase; letter-spacing:.06em;}
.slip dd{margin:0; text-align:right; font-size:.88rem;}

.book-form{display:flex; flex-direction:column; gap:1.1rem;}
.field{display:flex; flex-direction:column; gap:.4rem; font-size:.85rem; color:var(--paper-dim);}
.field input, .field textarea{
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius);
  color:var(--paper); font-family:'Inter', sans-serif; font-size:.95rem; padding:.7rem .8rem;
  resize:vertical;
}
.field input:focus, .field textarea:focus{outline:2px solid var(--brass); outline-offset:1px;}
.hp-field{position:absolute; left:-9999px;}
.book-form .btn{align-self:flex-start;}

@media (max-width: 720px){
  .book-grid{grid-template-columns:1fr;}
  .topnav a{margin-left:1rem;}
  section{padding:4rem 1.2rem;}
  .player{flex-direction:column; align-items:stretch;}
}

@media (prefers-reduced-motion: reduce){
  .mark-bars i{animation:none;}
}