@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@400;500;600&display=swap');

:root{
  --ink:#f3dfb7; --muted:#c4aa7d; --dark:#130c08; --glass:rgba(18,10,5,.72);
  --line:rgba(243,223,183,.25); --accent:#d59b50;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#0b0705;color:var(--ink);font-family:"DM Sans",sans-serif}
.room{min-height:100vh;position:relative;overflow:hidden;background:#0b0705}
.room:before{content:"";position:fixed;inset:0;background:url("landscape.jpg") center/cover no-repeat;filter:saturate(.82) contrast(1.04);z-index:0}
.shade{position:fixed;inset:0;background:linear-gradient(180deg,rgba(9,5,3,.38),rgba(9,5,3,.75) 70%,#0b0705 100%);z-index:1;pointer-events:none}
.topbar,.hero,.library,footer{position:relative;z-index:2}
.topbar{height:78px;padding:22px 5vw;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(12,7,4,.25);backdrop-filter:blur(8px)}
.brand{font-size:12px;letter-spacing:.22em;font-weight:600}.subtitle{font-size:10px;letter-spacing:.2em;color:var(--muted)}
.hero{min-height:calc(100vh - 78px);display:flex;align-items:center;padding:8vh 7vw}
.hero-card{max-width:620px}
.eyebrow{font-size:10px;letter-spacing:.3em;color:var(--muted);margin:0 0 18px}
h1,h2,h3{font-family:"Cormorant Garamond",serif}
h1{font-size:clamp(55px,8vw,105px);line-height:.82;margin:0 0 28px;font-weight:600;text-shadow:0 8px 35px #000}
h1 span{font-style:italic;color:#e7bc79}
.intro{max-width:460px;font-size:15px;line-height:1.7;color:#dfcba7}
.scroll-btn{display:inline-block;margin-top:25px;padding:13px 20px;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:10px;letter-spacing:.2em;background:rgba(12,7,4,.42);backdrop-filter:blur(8px)}
.library{margin:0 auto;padding:90px 7vw 70px;max-width:1050px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px}
h2{font-size:48px;line-height:1;margin:0}.sound-btn,.filter{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--line);padding:10px 13px;font-size:9px;letter-spacing:.18em}.sound-btn{white-space:nowrap}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 18px}.filter.active{background:rgba(213,155,80,.2);border-color:var(--accent)}
.songs{border-top:1px solid var(--line)}
.song{display:grid;grid-template-columns:48px 1fr 45px;align-items:center;gap:15px;padding:18px 0;border-bottom:1px solid rgba(243,223,183,.13);transition:.25s}.song:hover{padding-left:8px;background:rgba(255,255,255,.025)}
.number{font-size:10px;color:var(--muted)}.song h3{margin:0;font-size:25px;font-weight:500}.song p{margin:3px 0 0;font-size:10px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.play{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);text-decoration:none;font-size:11px}
.player{position:sticky;bottom:14px;margin-top:35px;padding:14px 17px;border:1px solid var(--line);background:rgba(15,8,4,.86);backdrop-filter:blur(15px);display:flex;align-items:center;gap:15px;box-shadow:0 20px 60px #0008}
.disc{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#2a1710;border:1px solid var(--line)}.now{display:grid;gap:3px;flex:1}.now span{font-size:8px;letter-spacing:.2em;color:var(--muted)}.now strong{font-family:"Cormorant Garamond";font-size:20px}.player-actions{display:flex;gap:7px}.player-actions button{width:35px;height:35px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:50%}.player-actions .main-play{background:var(--ink);color:#1a0d07}
footer{text-align:center;padding:75px 20px 35px;border-top:1px solid rgba(255,255,255,.08);background:#0b0705}.footer-title{font-family:"Cormorant Garamond";font-size:28px}.credit{margin-top:18px;font-size:11px;letter-spacing:.12em;color:var(--muted)}.credit span{color:#d95f52}.note{margin-top:10px;font-size:9px;color:#806c51}

@media (orientation:portrait){
  .room:before{background-image:url("portrait.jpg");background-position:center top}
}
@media (max-width:650px){
  .topbar{height:64px;padding:18px 18px}.brand{font-size:9px;letter-spacing:.15em}.subtitle{display:none}
  .hero{min-height:78vh;padding:80px 24px 55px;align-items:end}
  h1{font-size:64px}.intro{font-size:13px}.library{padding:70px 20px 45px}.section-heading{align-items:start;flex-direction:column}h2{font-size:43px}
  .song{grid-template-columns:34px 1fr 40px}.song h3{font-size:22px}.player{bottom:8px}.now strong{font-size:17px}
}