@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;1,700&family=DM+Sans:wght@400;500;600&display=swap');

:root { --ink:#07090c; --panel:#0d1116; --line:#242a31; --text:#f2f1ed; --muted:#9da3aa; --blue:#9dc9e7; --red:#b64343; --lime:#b8ef6a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; color:var(--text); background:var(--ink); font-family:"DM Sans",sans-serif; font-size:16px; line-height:1.6; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button,input,textarea { font:inherit; }
main { overflow:hidden; }

.site-header { height:88px; padding:0 clamp(24px,5vw,76px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.09); position:absolute; z-index:10; width:100%; }
.wordmark { font:800 19px/1 "Barlow Condensed",sans-serif; letter-spacing:.12em; }
.wordmark span { color:var(--blue); }
.site-header nav { display:flex; gap:32px; }
.site-header nav a, footer a { font-size:13px; color:#c7cbd0; letter-spacing:.08em; text-transform:uppercase; }
.site-header nav a:hover,footer a:hover { color:white; }

.hero { min-height:860px; padding:150px clamp(24px,5vw,76px) 76px; display:grid; grid-template-columns:1fr minmax(340px,520px) minmax(270px,340px); gap:clamp(30px,4vw,72px); align-items:center; position:relative; background:radial-gradient(circle at 64% 45%,#193246 0,rgba(13,25,35,.7) 19%,transparent 45%),linear-gradient(135deg,#090b0e 55%,#0f171e 100%); }
.hero::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.2; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:38px 38px; mask-image:linear-gradient(to bottom,transparent,black 30%,black); }
.hero > * { position:relative; z-index:1; }
.kicker { margin:0 0 20px; color:#c6cbd0; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; display:flex; align-items:center; gap:10px; }
.kicker span { width:26px; height:1px; background:var(--red); }
.hero h1,.section h2,.contact-section h2 { margin:0; font:800 clamp(84px,10vw,160px)/.75 "Barlow Condensed",sans-serif; letter-spacing:-.045em; }
.hero h1 { text-shadow:0 0 60px rgba(119,184,225,.12); }
.hero-quote { margin:36px 0 20px; font:italic 700 clamp(27px,3vw,42px)/1.04 "Barlow Condensed",sans-serif; color:#d9e8f1; }
.hero-text { max-width:500px; color:var(--muted); }
.hero-actions { display:flex; align-items:center; gap:28px; margin-top:34px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; border:0; padding:15px 20px; min-height:52px; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.button-primary { background:var(--text); color:#090b0d; }
.button-primary:hover { background:var(--blue); }
.button:disabled { opacity:.6; cursor:wait; }
.text-link { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid #57606a; padding-bottom:4px; }
.hero-art { transform:rotate(1.5deg); }
.cover-frame { padding:10px; background:#11161b; box-shadow:0 40px 90px #000; border:1px solid #2b353e; }
.hero-art p { font-size:10px; color:#89929a; letter-spacing:.25em; text-align:right; }
.hero-player { align-self:end; padding-bottom:35px; }
.hero-player > p { color:var(--muted); font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.hero-player iframe { border:0; border-radius:12px; background:#111; }

.marquee { min-height:66px; display:flex; gap:34px; align-items:center; justify-content:center; background:#e8e7e2; color:#101214; overflow:hidden; font:700 15px/1 "Barlow Condensed",sans-serif; letter-spacing:.12em; white-space:nowrap; }
.marquee i { width:5px; height:5px; border-radius:50%; background:var(--red); }
.section { padding:clamp(86px,10vw,150px) clamp(24px,6vw,92px); }
.section-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,470px); gap:60px; align-items:end; margin-bottom:60px; }
.section h2 { font-size:clamp(60px,7vw,110px); }
.section-head > p { color:var(--muted); margin:0; max-width:480px; }

.music-section { background:#0a0d10; }
.release-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.release-card { display:block; }
.release-image { position:relative; aspect-ratio:1; background:#15191e; overflow:hidden; }
.release-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease,filter .5s ease; }
.release-image b { position:absolute; right:16px; bottom:16px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.72); opacity:0; transition:opacity .25s; }
.release-card:hover img { transform:scale(1.025); filter:brightness(1.08); }
.release-card:hover .release-image b { opacity:1; }
.release-card h3 { margin:18px 0 2px; font:700 28px/1 "Barlow Condensed",sans-serif; text-transform:uppercase; }
.release-card p { margin:0; color:var(--muted); font-size:13px; text-transform:capitalize; }
.album-embed-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.album-embed-grid iframe,.single-embed-grid iframe { border:0; border-radius:12px; background:#111; }
.platform-row { margin-top:60px; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); }
.platform-row a { padding:23px 0; border-right:1px solid var(--line); display:flex; justify-content:space-between; font-size:13px; text-transform:uppercase; letter-spacing:.1em; }
.platform-row a:not(:first-child) { padding-left:24px; }
.platform-row a:last-child { border:0; }
.platform-row span { margin-right:24px; color:var(--muted); }

.next-section { background:#101317; }
.single-embed-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }

.about-section { display:grid; grid-template-columns:minmax(300px,.8fr) 1.2fr; gap:clamp(44px,8vw,130px); align-items:center; background:linear-gradient(110deg,#0c1115,#11171c); }
.portrait-wrap { position:relative; }
.portrait-wrap::before { content:""; position:absolute; inset:-14px 14px 14px -14px; border:1px solid #34404a; }
.portrait-wrap img { position:relative; filter:saturate(.72) contrast(1.05); }
.about-copy h2 { max-width:770px; }
.about-copy > p { color:var(--muted); max-width:720px; }
.about-copy .about-lead { margin-top:34px; color:#e4e5e3; font-size:clamp(20px,2vw,28px); line-height:1.35; }
.about-copy dl { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; border-top:1px solid var(--line); margin:42px 0 0; padding-top:28px; }
.about-copy dl div { display:flex; flex-direction:column; }
.about-copy dt { color:#747d85; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.about-copy dd { margin:5px 0 0; font:600 18px/1.2 "Barlow Condensed",sans-serif; }

.voices-section { background:#090b0e; }
.voices-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:34px; }
.voices-grid blockquote { margin:0; padding:28px; border:1px solid var(--line); background:#0e1216; }
.voices-grid p { margin:0 0 22px; color:#d8d9d7; }
.voices-grid cite { color:#777f87; font-size:12px; font-style:normal; text-transform:uppercase; }
.feedback-panel { border:1px solid #2e3841; background:linear-gradient(130deg,#111a21,#0b0e11); padding:clamp(28px,5vw,72px); display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(40px,8vw,110px); }
.feedback-panel > div > span { color:var(--blue); font-size:11px; letter-spacing:.2em; }
.feedback-panel h3 { margin:16px 0; font:700 clamp(42px,5vw,72px)/.9 "Barlow Condensed",sans-serif; text-transform:uppercase; }
.feedback-panel > div > p { color:var(--muted); max-width:330px; }
.feedback-form { display:grid; gap:22px; }
.feedback-form label { display:grid; gap:8px; color:#c7ccd0; font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.feedback-form small { color:#69727a; text-transform:none; letter-spacing:0; }
.feedback-form input,.feedback-form textarea { width:100%; color:white; background:#080b0e; border:1px solid #303942; padding:14px 16px; outline:0; resize:vertical; text-transform:none; letter-spacing:0; }
.feedback-form input:focus,.feedback-form textarea:focus { border-color:#8bbad8; }
.feedback-form-foot { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.feedback-form-foot p,.form-error { margin:0; color:#858e96; font-size:12px; }
.form-error { color:#ee8e8e; }
.honeypot { position:absolute!important; left:-9999px!important; }
.feedback-success { border:1px solid #36444d; padding:34px; background:#0a0e11; align-self:center; }
.feedback-success span { color:var(--lime); font:700 38px/1 "Barlow Condensed",sans-serif; text-transform:uppercase; }
.feedback-success p { color:var(--muted); }
.feedback-success button { color:white; background:none; border:0; padding:0; border-bottom:1px solid #66717a; cursor:pointer; }

.contact-section { padding:clamp(100px,12vw,180px) clamp(24px,6vw,92px); text-align:center; background:radial-gradient(circle at 50% 50%,#182c3a 0,transparent 45%),#080a0c; }
.contact-section .kicker { justify-content:center; }
.contact-section h2 { font-size:clamp(80px,11vw,170px); }
.contact-section h2 em { color:transparent; -webkit-text-stroke:1px #65717a; }
.mail-link { display:inline-flex; gap:20px; margin:48px 0 38px; padding-bottom:7px; border-bottom:1px solid #82909a; font-size:clamp(18px,2vw,28px); }
.social-links { display:flex; justify-content:center; gap:28px; flex-wrap:wrap; }
.social-links a { color:#a8afb5; font-size:13px; text-transform:uppercase; letter-spacing:.1em; }
.social-links a:hover { color:white; }
footer { min-height:110px; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:25px clamp(24px,5vw,76px); border-top:1px solid var(--line); }
footer p { color:#666e75; font-size:12px; }
footer > div { display:flex; gap:20px; }

.studio-page,.legal-page { min-height:100vh; background:#090b0e; padding:70px clamp(22px,6vw,90px); }
.studio-top,.legal-top { display:flex; align-items:center; justify-content:space-between; gap:30px; border-bottom:1px solid var(--line); padding-bottom:28px; }
.studio-page h1,.legal-page h1 { font:800 clamp(54px,7vw,96px)/.9 "Barlow Condensed",sans-serif; text-transform:uppercase; margin:60px 0 18px; }
.studio-sub,.legal-page > p { color:var(--muted); max-width:720px; }
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:48px 0; }
.stat-card { padding:26px; border:1px solid var(--line); background:#0d1115; }
.stat-card span { color:#737d85; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.stat-card strong { display:block; font:700 42px/1 "Barlow Condensed",sans-serif; margin-top:10px; }
.studio-section { margin-top:70px; }
.studio-section h2 { font:700 38px/1 "Barlow Condensed",sans-serif; text-transform:uppercase; }
.bars { display:grid; grid-template-columns:repeat(30,1fr); min-height:180px; gap:4px; align-items:end; border-bottom:1px solid var(--line); padding-top:25px; }
.bar { min-height:3px; background:var(--blue); position:relative; }
.bar:hover::after { content:attr(data-label); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:#eee; color:#111; padding:4px 6px; white-space:nowrap; font-size:10px; }
.feedback-admin-list { display:grid; gap:12px; }
.feedback-admin-item { border:1px solid var(--line); padding:20px; display:grid; grid-template-columns:1fr auto; gap:20px; }
.feedback-admin-item p { margin:6px 0; }
.feedback-admin-item small { color:var(--muted); }
.feedback-actions { display:flex; gap:8px; align-items:center; }
.feedback-actions button { border:1px solid #3d474f; background:#151a1f; color:white; padding:8px 11px; cursor:pointer; }
.feedback-actions button[name="action"][value="approve"] { color:var(--lime); }
.feedback-actions button[name="action"][value="delete"] { color:#ee8e8e; }
.legal-page article { max-width:820px; margin:52px auto; }
.legal-page h2 { margin-top:40px; font:700 30px/1.1 "Barlow Condensed",sans-serif; text-transform:uppercase; }
.legal-page p,.legal-page li { color:#b8bdc2; }
.studio-login { display:grid; gap:22px; max-width:560px; margin-top:42px; }
.studio-login label { display:grid; gap:8px; color:#c7ccd0; font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.studio-login input { width:100%; color:white; background:#080b0e; border:1px solid #303942; padding:14px 16px; outline:0; text-transform:none; letter-spacing:0; }
.studio-login input:focus { border-color:#8bbad8; }

@media (max-width:1080px) {
  .hero { grid-template-columns:1fr 1fr; }
  .hero-player { grid-column:1/-1; padding:0; }
  .hero-player iframe { height:152px; }
  .release-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:760px) {
  .site-header { height:72px; }
  .site-header nav { gap:14px; }
  .site-header nav a:nth-child(2),.site-header nav a:nth-child(3) { display:none; }
  .hero { min-height:auto; padding-top:120px; grid-template-columns:1fr; }
  .hero h1 { font-size:100px; }
  .hero-art { max-width:520px; }
  .hero-player { grid-column:auto; }
  .section-head { grid-template-columns:1fr; gap:20px; }
  .release-grid { grid-template-columns:1fr 1fr; gap:20px; }
  .album-embed-grid { grid-template-columns:1fr; }
  .single-embed-grid,.about-section,.feedback-panel { grid-template-columns:1fr; }
  .about-copy dl { grid-template-columns:1fr; }
  .voices-grid { grid-template-columns:1fr; }
  .feedback-form-foot { align-items:flex-start; flex-direction:column; }
  .platform-row { grid-template-columns:1fr; }
  .platform-row a,.platform-row a:not(:first-child) { padding:18px 0; border-right:0; border-bottom:1px solid var(--line); }
  footer { align-items:flex-start; flex-direction:column; }
  .stat-grid { grid-template-columns:1fr; }
  .feedback-admin-item { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .release-grid { grid-template-columns:1fr; }
  .marquee { justify-content:flex-start; padding-left:20px; }
  .section { padding-left:20px; padding-right:20px; }
}
