:root { --container: 1080px; --ink:#ffffff; --muted: rgba(255,255,255,.78); --line: rgba(255,255,255,.18); }
*{box-sizing:border-box}
html, body { height:100%; }
body {
  font-family: Lato, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  margin:0;
  background: #000 url('/user/pages/images/photo-1432839318976-b5c5785ce43f.jpg') center/cover fixed no-repeat;
}
.container{ max-width: var(--container); margin: 0 auto; padding: 0 20px; }

.site-header { display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.brand { display:flex; gap:16px; align-items:center; }
.logo{ width:61px; height:auto; }
.tagline { font-size:12px; line-height:1.2; color:rgba(255,255,255,.85); }
.main-nav a { margin-left:16px; text-decoration:none; color:#fff; font-weight:600; }
.main-nav a:hover { text-decoration: underline; }

.social-row{ margin: 6px auto 18px; display:flex; justify-content:center; }
.social { display:flex; justify-content:center; gap:14px; padding:0; background: transparent; }
.social .ico{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; text-decoration:none; }
.social i[class*="fa"] {
  font-size:28px; color:#fff; border:1px solid rgba(255,255,255,.9);
  width:48px; height:48px; line-height:48px; text-align:center;
  border-radius:10%; transition: all .2s linear;
  background: transparent;
}
.social i[class*="fa"]:hover { color:#000; background:#fff; }

.site-footer { padding:24px 0; color:rgba(255,255,255,.85); }

.content { font-size:18px; line-height:1.6; background: transparent; padding: 0; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.content p { margin: 0 0 12px; }

.releases h2 { color:#fff; margin: 18px 0 10px; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.releases .grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:18px; margin: 12px 0 24px; }
.releases .tile { display:block; text-decoration:none; }
.releases .tile img.cover { width:100%; aspect-ratio: 1 / 1; object-fit: cover; display:block; border-radius: 4px; }
.releases .tile:hover img.cover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,.25); transition: .15s ease; }

/* Release */
.release{ margin: 8px 0 30px; }
.release__top{ display:grid; grid-template-columns: 360px 1fr; gap: 26px; align-items:start; }
@media (max-width: 860px){ .release__top{ grid-template-columns: 1fr; } }

.release__cover img{ width:100%; border-radius: 6px; display:block; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.release__cover--empty{ height:360px; display:flex; align-items:center; justify-content:center; border:1px dashed rgba(255,255,255,.5); border-radius:6px; color: var(--muted); }

.release__title{ margin:0 0 10px; line-height:1.1; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.release__artist{ display:block; font-size: 22px; color: var(--muted); font-weight: 600; }
.release__name{ display:block; font-size: 34px; font-weight: 800; }

.release__facts{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 18px; margin: 12px 0 16px; }
@media (max-width: 860px){ .release__facts{ grid-template-columns: 1fr; } }
.fact{ display:flex; justify-content:space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.fact .k{ color: var(--muted); }
.fact .v{ font-weight: 800; }

/* Description + Tracklist aligned under facts */
.release__textgrid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 22px; margin-top: 12px; }
@media (max-width: 860px){ .release__textgrid{ grid-template-columns: 1fr; } }

.release__description, .release__tracklist{ border-top: 1px solid var(--line); padding-top: 12px; }
.release__description h2, .release__tracklist h2{ margin: 0 0 10px; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.release__description{ font-size: 17px; line-height: 1.65; text-shadow: 0 1px 2px rgba(0,0,0,.45); }

.release__tracklist ol{ margin:0; padding-left: 18px; }
.release__tracklist li{ margin: 6px 0; }

.release__cta{ margin: 16px 0 0; }
.btn{ display:inline-flex; align-items:center; gap: 10px; padding:10px 14px; border-radius: 6px; text-decoration:none; font-weight:800; }
.btn--ghost{ border:1px solid rgba(255,255,255,.9); color:#fff; background: transparent; }
.btn--ghost:hover{ background:#fff; color:#000; }

.release__embeds{ display:grid; gap: 12px; margin-top: 14px; }
.embed iframe{ max-width:100%; border:0; }