:root { --ink:#11110f; --paper:#eeece5; --acid:#c9ff3f; --line:rgba(17,17,15,.2); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; } a { color:inherit; text-decoration:none; }
body { background:#d9d9d6; } main > :not(.hero) { width:min(100%,2000px); margin-inline:auto; } .music { background:var(--paper); }
@media(min-width:901px) { main > :not(.hero) { width:min(92%,2000px); } }
.hero { min-height:100svh; color:#f4f2eb; background:#10100f url('/assets/studio-hero.png') center center/cover no-repeat; position:relative; overflow:hidden; display:flex; flex-direction:column; isolation:isolate; }
.hero::before { content:''; position:absolute; inset:0; z-index:0; background:linear-gradient(90deg,rgba(8,8,8,.93) 0%,rgba(9,9,9,.66) 28%,rgba(9,9,9,.12) 58%,rgba(9,9,9,.08) 100%),linear-gradient(0deg,rgba(7,7,7,.46),transparent 48%); }
.nav { padding:26px 4.5vw; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:3; }.logo { letter-spacing:-.08em; font-size:1.5rem; font-weight:900; }.logo span { color:var(--acid); font-size:.45em; vertical-align:top; margin-left:3px; }.nav-logo { color:#fff; font-size:5rem; line-height:1; letter-spacing:-.07em; }
.nav-links { display:flex; gap:28px; font-size:1.6rem; letter-spacing:.1em; text-transform:uppercase; }.nav-links a:hover,.text-link:hover { color:var(--acid); }.menu-button { display:none; color:#fff; background:transparent; border:0; font:inherit; text-transform:uppercase; letter-spacing:.1em; }
.hero-content { margin:auto 4.5vw 13vh; position:relative; z-index:2; max-width:1080px; }.eyebrow { margin:0 0 18px; color:inherit; opacity:.67; font-size:1.2rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1,h2 { letter-spacing:-.075em; line-height:.82; font-weight:900; } h1 { font-size:clamp(4.8rem,13vw,12.5rem); margin:0; } h1 em,h2 i { font-family:Georgia,serif; font-weight:400; letter-spacing:-.1em; }
.hero-copy { margin:32px 0; max-width:400px; line-height:1.5; font-size:.95rem; }.hero-actions { display:flex; align-items:center; gap:30px; }.button { display:inline-flex; gap:38px; align-items:center; padding:15px 18px; text-transform:uppercase; font-size:.9rem; letter-spacing:.11em; font-weight:bold; }.primary { color:#12120f; background:var(--acid); }.primary span,.text-link span,.mail span { font-size:1.25rem; }.text-link { font-size:.9rem; text-transform:uppercase; letter-spacing:.1em; font-weight:bold; }.hero-footer { position:absolute; z-index:2; bottom:26px; left:4.5vw; right:4.5vw; display:flex; justify-content:space-between; font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; opacity:.8; }
.hero-glow { position:absolute; z-index:1; border-radius:50%; filter:blur(18px); opacity:.24; }.glow-one { width:65vw; height:65vw; right:-15vw; top:-13vw; background:radial-gradient(circle,#e95bff 0%,#5034c8 30%,transparent 70%); }.glow-two { width:55vw; height:48vw; bottom:-20vw; left:15vw; background:radial-gradient(ellipse,#baff35 0%,#346936 19%,transparent 65%); mix-blend-mode:screen; }.grain { position:absolute; z-index:1; inset:0; opacity:.14; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); mix-blend-mode:overlay; }
.section { padding:140px 4.5vw; }.section-heading { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:60px; }.section-heading h2,.manifesto h2,footer h2 { font-size:clamp(3.5rem,8vw,8rem); margin:0; }.section-heading .eyebrow { margin-top:12px; color:#63635e; }.music .section-heading { flex-direction:column; align-items:center; gap:18px; text-align:center; }.music .section-heading .eyebrow { margin:0; }
.release-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; width:60%; margin:0 auto; }.release-card { min-height:300px; padding:14px; color:#fff; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; position:relative; }.release-card.violet { background:radial-gradient(circle at 50% 30%,#b677ff,#2b1169 39%,#160628 75%); }.release-card.lime { color:#171710; background:radial-gradient(circle at 50% 38%,#ecff89,#a2ce25 30%,#456217 72%); }.release-card.blue { background:radial-gradient(circle at 50% 35%,#65bde1,#195390 35%,#0c1c45 78%); }.soundcloud-frame { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }.track-artwork { flex:1; min-height:147px; display:grid; place-items:center; overflow:hidden; background:rgba(0,0,0,.12); }.track-artwork>img { width:100%; height:100%; object-fit:cover; }.record { width:min(55%,200px); aspect-ratio:1; background:repeating-radial-gradient(circle,#090909 0 2px,#1c1c1d 3px 5px); border-radius:50%; align-self:center; display:grid; place-items:center; box-shadow:0 18px 40px #0006; }.record-label { width:42%; aspect-ratio:1; display:grid; place-items:center; text-align:center; border-radius:50%; background:var(--acid); color:#151510; font-size:.55rem; line-height:1.15; font-weight:bold; letter-spacing:.06em; }.track-progress { display:flex; align-items:center; gap:7px; padding-top:9px; font-size:.48rem; letter-spacing:.03em; white-space:nowrap; opacity:.9; }.progress-track { flex:1; height:4px; padding:0; border:0; background:rgba(255,255,255,.28); cursor:pointer; }.lime .progress-track { background:rgba(0,0,0,.24); }.progress-track span { display:block; height:100%; width:0; background:var(--acid); }.lime .progress-track span { background:#171710; }.card-footer { display:flex; align-items:end; justify-content:space-between; gap:10px; padding-top:12px; }.card-footer p { font-size:.5rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:5px; }.card-footer h3 { margin:0; font-size:1rem; letter-spacing:-.05em; }.track-actions { display:flex; align-items:center; gap:7px; }.track-actions>a:not(.buy-button) { font-size:.85rem; }.buy-button { width:30px; height:30px; display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; font-size:.75rem; line-height:1; }.play { flex:0 0 auto; background:transparent; border:1px solid currentColor; border-radius:50%; color:inherit; height:30px; width:30px; cursor:pointer; }.all-link { clear:both; display:block; width:max-content; margin:30px 0 0 auto; font-size:.7rem; font-weight:bold; letter-spacing:.1em; text-transform:uppercase; }.all-link span { font-size:1.2rem; }
.manifesto { min-height:720px; background:#fff; color:#111; display:grid; grid-template-columns:2fr 1fr; align-items:stretch; position:relative; overflow:hidden; }.manifesto-copy { padding:clamp(65px,8vw,130px) 10vw; display:flex; flex-direction:column; justify-content:center; }.manifesto-copy .eyebrow { color:#111; opacity:.62; }.manifesto-copy h2 { font-size:clamp(3rem,6vw,6.8rem); }.bio-text { max-width:570px; margin-top:38px; }.bio-text p { margin:0 0 18px; line-height:1.6; font-size:clamp(.91rem,1.2vw,1.05rem); }.portrait-wrap { background:#111; width:100%; min-height:720px; overflow:hidden; }.portrait-wrap img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; filter:grayscale(1) contrast(1.12); }
.instagram { background:#171715; color:#f2f1eb; overflow:hidden; }.instagram .section-heading .eyebrow { color:#aaa9a1; }.instagram-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; width:40%; margin:0 auto; }.instagram-post,.instagram-placeholder { aspect-ratio:1; border:0; overflow:hidden; position:relative; background:#242420; color:#fff; }.instagram-post { padding:0; cursor:pointer; }.instagram-post img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .4s ease,filter .4s ease; }.instagram-post span { position:absolute; inset:0; display:grid; place-items:center; background:rgba(17,17,15,.68); font-size:.7rem; font-weight:bold; letter-spacing:.12em; text-transform:uppercase; opacity:0; transition:opacity .25s ease; }.instagram-post:hover img { transform:scale(1.05); filter:brightness(.68); }.instagram-post:hover span { opacity:1; }.instagram-placeholder { display:grid; place-content:center; gap:8px; background:linear-gradient(135deg,#171715,#38382f); text-align:center; }.instagram-placeholder::before { content:''; width:32%; aspect-ratio:1; justify-self:center; border:1px solid var(--acid); border-radius:50%; opacity:.8; }.instagram-placeholder span { color:var(--acid); font-weight:900; font-size:clamp(1rem,2.3vw,2rem); letter-spacing:-.07em; }.instagram-placeholder small { opacity:.6; text-transform:uppercase; letter-spacing:.14em; font-size:.52rem; }.instagram-modal { position:fixed; z-index:20; inset:0; padding:5vw; display:grid; place-items:center; background:rgba(10,10,9,.83); }.instagram-modal[hidden] { display:none; }.instagram-modal-card { position:relative; width:min(100%,900px); max-height:90svh; display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.72fr); background:var(--paper); color:var(--ink); overflow:auto; }.instagram-modal-card>img { width:100%; height:100%; max-height:80svh; object-fit:contain; background:#111; }.instagram-modal-copy { padding:48px 38px; align-self:center; }.instagram-modal-copy>p:not(.eyebrow) { line-height:1.6; font-size:.95rem; white-space:pre-line; }.instagram-modal-copy a { display:inline-block; margin-top:10px; border-bottom:1px solid var(--ink); padding-bottom:4px; text-transform:uppercase; font-size:.7rem; font-weight:bold; letter-spacing:.1em; }.modal-close { position:absolute; z-index:1; top:12px; right:12px; width:34px; height:34px; border:0; border-radius:50%; background:var(--acid); color:var(--ink); font-size:1.6rem; line-height:1; cursor:pointer; }
footer { padding:120px 4.5vw 28px; background:var(--paper); } footer h2 { margin:0 0 36px; }.contact-area { display:grid; grid-template-columns:1fr 1fr; gap:10vw; align-items:start; }.contact-intro { max-width:340px; line-height:1.55; font-size:.9rem; }.mail { display:inline-block; font-size:clamp(1.2rem,2.5vw,2.35rem); letter-spacing:-.055em; border-bottom:2px solid var(--ink); padding-bottom:9px; }.contact-form { display:grid; gap:18px; }.contact-form label { color:#595954; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; font-weight:bold; }.contact-form input,.contact-form textarea { display:block; width:100%; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--ink); border-radius:0; outline:0; padding:10px 0; margin-top:4px; font:inherit; font-size:1rem; letter-spacing:0; text-transform:none; }.contact-form input:focus,.contact-form textarea:focus { border-color:#657f00; }.contact-form textarea { resize:vertical; }.form-submit { width:max-content; border:0; padding:15px 18px; background:var(--ink); color:var(--acid); font-size:.65rem; letter-spacing:.11em; font-weight:bold; text-transform:uppercase; cursor:pointer; }.form-submit span { font-size:1.15rem; margin-left:26px; }.form-confirmation { margin:0; color:#4c6200; font-size:.75rem; line-height:1.5; }.footer-bottom { border-top:1px solid var(--line); margin-top:130px; padding-top:20px; display:flex; align-items:center; justify-content:space-between; gap:18px; }.footer-bottom p,.footer-bottom a:not(.logo) { font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; }.footer-bottom div { display:flex; gap:16px; }
@media(max-width:900px) { .nav { padding:22px 6vw; }.nav-logo { width:auto; font-size:2rem; }.menu-button { display:block; position:relative; z-index:4; }.nav-links { display:none; position:absolute; z-index:3; top:0; right:0; left:auto; width:min(290px,82vw); padding:84px 6vw 28px; background:#151512; box-shadow:-16px 16px 34px #0005; flex-direction:column; align-items:flex-start; gap:18px; font-size:1rem; }.nav-links.open { display:flex; }.hero { min-height:116svh; background-position:center center; }.hero-content { margin:auto 6vw 18vh; }.hero-footer { left:6vw; right:6vw; }.section { padding:90px 6vw; }.section-heading { display:block; }.music .section-heading { display:flex; align-items:center; text-align:center; }.section-heading h2 { font-size:clamp(3.8rem,16vw,6rem); }.release-grid { grid-template-columns:1fr; width:100%; }.release-card { min-height:330px; }.manifesto { grid-template-columns:1fr; gap:45px; padding:80px 6vw; min-height:0; }.manifesto-copy { padding:0; }.manifesto-copy h2 { font-size:clamp(3.5rem,15vw,5.6rem); }.portrait-wrap { width:min(72vw,320px); min-height:0; justify-self:center; }.portrait-wrap img { object-position:center top; }.instagram-grid { grid-template-columns:repeat(3,1fr); width:100%; }.instagram-modal { padding:18px; }.instagram-modal-card { display:block; }.instagram-modal-card>img { max-height:62svh; }.instagram-modal-copy { padding:30px 24px; }.contact-area { grid-template-columns:1fr; gap:45px; }.footer-bottom { margin-top:90px; display:grid; }.footer-bottom div { flex-wrap:wrap; }.hero-actions { gap:17px; } }
@media(max-width:900px) { .menu-button,.nav-links { display:none !important; }.nav { justify-content:flex-start; } }
@media(max-width:900px) { h1 { font-size:clamp(3.25rem,15vw,5rem); }.section-heading h2,footer h2 { font-size:clamp(3rem,13vw,4.4rem); }.manifesto-copy h2 { font-size:clamp(3rem,13vw,4.2rem); } }
@media(min-width:901px) { .manifesto { grid-template-columns:minmax(0,1.1fr) minmax(480px,.9fr); }.manifesto-copy { padding:clamp(65px,7vw,130px) clamp(45px,5vw,100px); }.portrait-wrap img { object-position:right center; } }
.platform-links{display:flex;align-items:center}.music-platform-links{width:max-content;margin:38px auto 0;gap:18px}.music-platform-links a{display:grid;place-items:center;width:46px;height:46px;border:1px solid #b9b8ae;border-radius:50%;transition:transform .2s ease,border-color .2s ease,background .2s ease}.music-platform-links img{width:30px;height:30px;display:block}.music-platform-links a:hover{transform:translateY(-3px);border-color:var(--ink);background:#fff}.music .all-link{float:none;display:block;width:max-content;margin:17px auto 0}.instagram-grid{grid-template-columns:repeat(8,minmax(0,1fr));width:100%}@media(max-width:900px){.music-platform-links{margin-top:30px;gap:15px}.music-platform-links a{width:42px;height:42px}.music-platform-links img{width:27px;height:27px}.instagram-grid{display:flex;width:calc(100% + 12vw);margin-left:-6vw;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.instagram-grid::-webkit-scrollbar{display:none}.instagram-post,.instagram-placeholder{flex:0 0 42vw;scroll-snap-align:start}}@media(min-width:901px){.instagram-grid{grid-template-columns:repeat(4,minmax(0,1fr));width:70%}}@media(max-width:900px){.instagram-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;margin-left:0;overflow:visible}.instagram-post,.instagram-placeholder{flex:none}}