:root { --ink:#100d12; --plum:#24161f; --rose:#b76e8a; --ivory:#f4eee9; --muted:#b9adb7; --line:rgba(244,238,233,.17); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:radial-gradient(ellipse 70% 40% at 78% 18%,#442235 0,transparent 72%),var(--ink); color:var(--ivory); font-family:"DM Sans",Arial,sans-serif; } a { color:inherit; text-decoration:none; }
.hero { height:100svh; min-height:670px; position:relative; overflow:hidden; } .hero-image,.hero-shade { position:absolute; inset:0; height:100%; width:100%; } .hero-image { object-fit:cover; object-position:56% center; filter:saturate(.88) contrast(1.04); } .hero-shade { background:linear-gradient(90deg,rgba(11,8,12,.67),rgba(11,8,12,.04) 75%),linear-gradient(0deg,var(--ink) 0%,rgba(16,13,18,.15) 35%,transparent 67%); }
nav,.hero-copy,.scroll-note { position:relative; z-index:1; } nav { display:flex; justify-content:space-between; padding:26px 4vw; font-size:12px; letter-spacing:.1em; text-transform:uppercase; } .wordmark { font-family:"DM Serif Display",serif; font-size:18px; letter-spacing:.02em; } .nav-links { display:flex; gap:22px; } .hero-copy { position:absolute; left:4vw; bottom:11vh; } .eyebrow { margin:0 0 14px; font:10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); } h1,h2 { margin:0; font-family:"DM Serif Display",Georgia,serif; font-weight:400; letter-spacing:-.045em; } h1 { font-size:clamp(78px,15vw,210px); line-height:.75; } .role { margin:19px 0 31px; font-size:13px; letter-spacing:.04em; } .role span { color:var(--rose); padding:0 5px; } .round-link { display:inline-flex; gap:20px; align-items:center; font-size:11px; text-transform:uppercase; letter-spacing:.12em; border:1px solid var(--line); border-radius:100px; padding:12px 15px 12px 18px; backdrop-filter:blur(12px); background:rgba(24,15,25,.28); } .round-link span { font-size:18px; line-height:0; } .scroll-note { position:absolute; right:4vw; bottom:29px; font:10px "DM Mono",monospace; color:var(--muted); text-transform:uppercase; writing-mode:vertical-rl; }
.intro { padding:150px 8vw 105px; display:grid; grid-template-columns:1fr 2fr 1fr; align-items:end; gap:30px; background:radial-gradient(ellipse 40% 90% at 12% 30%,rgba(132,55,89,.25),transparent 70%); } h2 { font-size:clamp(54px,8.7vw,142px); line-height:.86; } .intro-copy { font-size:16px; line-height:1.5; color:var(--muted); max-width:320px; margin:0; }
.platforms { display:grid; grid-template-columns:1fr 1fr; padding:0 4vw 105px; gap:5vw; background:linear-gradient(180deg,transparent,#1a1118 72%,transparent); } .platform { min-height:500px; padding:35px 0; position:relative; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; border-top:1px solid var(--line); } .platform:before { content:""; position:absolute; inset:0; z-index:0; opacity:.84; transition:transform .5s ease; } .platform:hover:before { transform:scale(1.04); } .platform>* { position:relative; z-index:1; } .baile:before { background:radial-gradient(ellipse 80% 65% at 10% 100%,#7b2548,transparent 74%),linear-gradient(145deg,#180c15,transparent 65%); } .better:before { background:radial-gradient(ellipse 75% 60% at 90% 18%,#796158,transparent 74%),linear-gradient(35deg,#181313,transparent 65%); } .platform h2 { font-size:clamp(48px,6vw,105px); } .arrow { align-self:flex-end; width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; font-size:21px; }
.listen { padding:120px 8vw 105px; background:radial-gradient(ellipse 55% 75% at 72% 30%,#3b2132,transparent 76%); } .listen-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:9vw; align-items:end; } h2 em { color:var(--rose); font-style:italic; } .glass-player { padding:28px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(69,42,61,.14); backdrop-filter:blur(14px); } .player-row { display:flex; gap:18px; align-items:center; } .play { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:var(--ivory); background:var(--rose); } .wave { flex:1; height:30px; opacity:.8; background:repeating-linear-gradient(90deg,transparent 0 3px,var(--rose) 3px 5px,transparent 5px 8px); mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent); } .player-actions { margin-top:27px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:14px; font:10px "DM Mono",monospace; text-transform:uppercase; } .mix-links { display:grid; grid-template-columns:1fr 1fr; gap:25px; margin:28px 0 0 auto; width:46%; } .mix-links a { display:flex; gap:12px; justify-content:space-between; padding:15px 0; border-top:1px solid var(--line); font-size:14px; } .mix-links span,.mix-links b { font:10px "DM Mono",monospace; font-weight:400; color:var(--rose); }
.ig-work { padding:105px 8vw; display:grid; grid-template-columns:1fr 2fr; gap:11vw; background:linear-gradient(115deg,#21131d,transparent 65%); } .ig-work>div { border-top:1px solid var(--line); } .ig-work a { display:flex; justify-content:space-between; padding:30px 0; border-bottom:1px solid var(--line); font-family:"DM Serif Display",serif; font-size:clamp(25px,3vw,48px); } .ig-work span { color:var(--rose); }
.about { padding:125px 8vw; display:grid; grid-template-columns:1fr 2fr; gap:11vw; background:radial-gradient(ellipse 70% 100% at 85% 50%,#392232,transparent 75%); } .about>p:last-child { font-family:"DM Serif Display",serif; font-size:clamp(30px,4.1vw,60px); line-height:1.04; margin:0; } footer { padding:135px 8vw 55px; min-height:76svh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; background:linear-gradient(180deg,transparent,var(--ink) 40%); } footer h2 { margin-bottom:40px; } .email { color:var(--rose); font-size:clamp(22px,3vw,43px); border-bottom:1px solid var(--rose); padding-bottom:6px; } .footer-bottom { margin-top:100px; width:100%; display:flex; justify-content:space-between; padding-top:17px; border-top:1px solid var(--line); font:10px "DM Mono",monospace; color:var(--muted); }
@media (max-width:700px) { nav { padding:20px 6vw; } .nav-links { gap:12px; } .hero-copy { left:6vw; } .intro,.about { padding:88px 6vw; display:block; } .intro h2 { margin:35px 0; } .platforms { grid-template-columns:1fr; min-height:0; padding:0 6vw 65px; gap:20px; } .platform { min-height:380px; } .listen { padding:88px 6vw; } .listen-grid { grid-template-columns:1fr; gap:50px; } .mix-links { width:100%; grid-template-columns:1fr; gap:0; } .ig-work { padding:72px 6vw; display:block; } .ig-work .eyebrow,.about .eyebrow { margin-bottom:32px; } footer { padding:88px 6vw; } .footer-bottom { margin-top:70px; gap:12px; } }