:root{--black:#0A0A0A;--washed:#161616;--bone:#F3F0E8;--stone:#B7AEA1;--orange:#F16623;--orange2:#FF8A50;--border:rgba(243,240,232,.16);--glass:rgba(10,10,10,.58)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--bone);font-family:Inter,Arial,Helvetica,sans-serif;background:#0A0A0A;overflow-x:hidden}
.bg-art{position:fixed;inset:0;background-size:min(1780px,128vw) auto;background-repeat:no-repeat;background-position:center 40%;filter:blur(18px) saturate(1.12);transform:scale(1.018);opacity:.58;z-index:-3}
.bg-wash{position:fixed;inset:0;background:radial-gradient(circle at top,rgba(241,102,35,.20),transparent 28%),linear-gradient(180deg,rgba(10,10,10,.35),rgba(10,10,10,.92) 70%,#0A0A0A);z-index:-2}
.page{width:min(920px,100%);margin:0 auto;padding:34px 18px 28px;min-height:100vh;display:flex;align-items:center;justify-content:center}
.shell{width:100%;display:grid;gap:18px}
.hero{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:center;padding:22px;border:1px solid var(--border);border-radius:30px;background:linear-gradient(145deg,rgba(22,22,22,.72),rgba(10,10,10,.58));box-shadow:0 28px 90px rgba(0,0,0,.55);backdrop-filter:blur(18px)}
.cover-wrap{position:relative}
.cover-tile{width:220px;height:220px;object-fit:cover;border-radius:24px;border:1px solid rgba(243,240,232,.18);box-shadow:0 20px 60px rgba(0,0,0,.48)}
.cover-placeholder{display:flex;align-items:center;justify-content:center;font-size:56px;background:#161616}
.kicker,.section-kicker{margin:0 0 10px;color:var(--orange);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:950}
h1{margin:0;font-size:clamp(40px,8vw,78px);line-height:.88;letter-spacing:-.055em}
.artist{margin:14px 0 0;color:var(--stone);font-size:20px;font-weight:800}
.date{margin:8px 0 0;color:rgba(243,240,232,.62);font-size:14px}
.content-grid{display:grid;grid-template-columns:1fr;gap:16px}
.preview-panel,.links-panel,.capture-panel{border:1px solid var(--border);border-radius:24px;background:var(--glass);backdrop-filter:blur(16px);box-shadow:0 18px 55px rgba(0,0,0,.36)}
.preview-panel{padding:18px;display:grid;gap:14px}
audio{width:100%;height:42px}
.small{margin:0;color:var(--stone);font-size:13px;line-height:1.45}
.preview-pulse{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(241,102,35,.36);background:rgba(241,102,35,.12);border-radius:999px;color:var(--bone);font-weight:900;padding:11px 14px;font-size:13px}
.custom-preview-panel{gap:16px}
.amp-player{display:grid;grid-template-columns:58px minmax(0,1fr);gap:14px;align-items:center;padding:14px;border-radius:20px;border:1px solid rgba(241,102,35,.34);background:linear-gradient(135deg,rgba(241,102,35,.18),rgba(243,240,232,.055));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 44px rgba(0,0,0,.28)}
.amp-player audio{display:none}
.amp-play-btn{width:58px;height:58px;border-radius:18px;border:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--orange),var(--orange2));color:#fff;cursor:pointer;box-shadow:0 14px 32px rgba(241,102,35,.28);padding:0}
.amp-play-btn:hover{transform:translateY(-1px)}
.amp-play-icon{font-size:22px;line-height:1;margin-left:3px;font-weight:950}
.amp-player.is-playing .amp-play-icon{font-size:20px;margin-left:0}
.amp-player-main{display:grid;gap:10px}
.amp-player-topline{display:flex;align-items:center;justify-content:space-between;gap:10px}
.amp-player-topline strong{font-size:16px;color:var(--bone)}
.amp-player-time{font-size:12px;color:var(--stone);font-weight:900}
.amp-progress-track{height:9px;border-radius:999px;background:rgba(243,240,232,.13);overflow:hidden;border:1px solid rgba(243,240,232,.08)}
.amp-progress-fill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--orange),var(--orange2));box-shadow:0 0 18px rgba(241,102,35,.45)}
.links-panel{padding:18px}
.platform-stack{display:grid;gap:12px}
.platform-card{position:relative;display:grid;grid-template-columns:50px minmax(0,1fr) 34px;align-items:center;gap:12px;text-decoration:none;color:var(--bone);padding:15px 16px;border-radius:18px;border:1px solid rgba(243,240,232,.15);background:linear-gradient(135deg,rgba(243,240,232,.10),rgba(243,240,232,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 30px rgba(0,0,0,.25);transition:transform .16s ease,border-color .16s ease,background .16s ease}
.platform-card:before{content:'';position:absolute;inset:0;border-radius:18px;background:linear-gradient(90deg,rgba(241,102,35,.22),transparent 42%);opacity:.7;pointer-events:none}
.platform-card:hover{transform:translateY(-2px);border-color:rgba(241,102,35,.70);background:linear-gradient(135deg,rgba(241,102,35,.22),rgba(243,240,232,.05))}
.platform-icon{width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.10);color:#fff;font-weight:950;box-shadow:0 10px 25px rgba(0,0,0,.26);z-index:1;border:1px solid rgba(255,255,255,.14);overflow:hidden}
.platform-logo{width:28px;height:28px;display:block;object-fit:contain}
.platform-fallback-icon{font-size:24px;font-weight:950;color:#fff}
.platform-icon.platform-spotify{background:#1DB954}
.platform-icon.platform-youtube{background:#FF0033}
.platform-icon.platform-apple,.platform-icon.platform-apple-music{background:linear-gradient(135deg,#FA243C,#FB5C74)}
.platform-icon.platform-tidal{background:#000;border-color:rgba(255,255,255,.30)}
.platform-icon.platform-amazon,.platform-icon.platform-amazon-music{background:#00A8E1}
.platform-icon.platform-deezer{background:linear-gradient(135deg,#A238FF,#FF2CDF)}
.platform-icon.platform-soundcloud{background:#FF5500}
.platform-icon.platform-audiomack{background:#FFA200}
.platform-icon.platform-bandcamp{background:#629AA9}
.platform-icon.platform-website{background:#374151}
.platform-icon.platform-merch{background:#F16623}
.platform-text{display:grid;gap:3px;z-index:1}
.platform-text strong{font-size:17px;letter-spacing:-.01em}
.platform-text small{color:var(--stone);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.platform-arrow{z-index:1;font-size:24px;color:var(--orange);font-weight:900}
.empty-links{padding:18px;border-radius:18px;border:1px dashed rgba(243,240,232,.18);background:rgba(10,10,10,.32);text-align:center;color:var(--stone)}
.empty-links p{margin:0}
.empty-links p+p{margin-top:8px}
.capture-panel{padding:18px}
.capture-panel h2{margin:0 0 12px;font-size:20px}
.capture-row{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:10px}
input{width:100%;background:rgba(10,10,10,.72);color:var(--bone);border:1px solid rgba(243,240,232,.16);border-radius:14px;padding:14px 15px;font-size:16px;outline:none}
input:focus{border-color:rgba(241,102,35,.75);box-shadow:0 0 0 3px rgba(241,102,35,.14)}
button{border:0;border-radius:14px;padding:14px 18px;background:linear-gradient(135deg,var(--orange),var(--orange2));color:white;font-weight:950;cursor:pointer;font-size:15px;box-shadow:0 12px 28px rgba(241,102,35,.20)}
.brand{text-align:center;color:rgba(243,240,232,.44);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

@media(max-width:760px){
  .page{padding:18px 12px 24px;align-items:flex-start}
  .hero{grid-template-columns:1fr;text-align:center;padding:18px;border-radius:24px}
  .cover-tile{width:min(74vw,260px);height:min(74vw,260px);margin:0 auto}
  h1{font-size:clamp(38px,13vw,70px)}
  .capture-row{grid-template-columns:1fr}
  .platform-card{grid-template-columns:46px minmax(0,1fr) 28px;padding:14px}
  .platform-icon{width:46px;height:46px}
  .amp-player{grid-template-columns:52px minmax(0,1fr);padding:12px}
  .amp-play-btn{width:52px;height:52px;border-radius:16px}
}

/* Release artist title-card chips */
.artist-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
  position: relative;
}

.artist-chip-menu {
  position: relative;
}

.artist-chip-menu summary {
  list-style: none;
}

.artist-chip-menu summary::-webkit-details-marker {
  display: none;
}

.artist-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--bone);
  background: rgba(243,240,232,.09);
  border: 1px solid rgba(243,240,232,.18);
  border-radius: 999px;
  padding: 0.5rem 0.78rem;
  font-size: 0.9rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.artist-chip:hover,
.artist-chip-menu[open] .artist-chip {
  transform: translateY(-1px);
  border-color: rgba(241,102,35,.68);
  background: rgba(241,102,35,.16);
}

.artist-chip em {
  color: var(--orange);
  font-style: normal;
  font-size: 0.67rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.artist-platform-popover {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 0;
  width: 220px;
  z-index: 10;
  border: 1px solid rgba(243,240,232,.18);
  border-radius: 18px;
  background: rgba(10,10,10,.94);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(16px);
  padding: 0.85rem;
}

.artist-platform-popover strong {
  display: block;
  color: var(--bone);
  margin-bottom: 0.55rem;
}

.artist-platform-popover p {
  margin: 0;
  color: var(--stone);
  font-size: 0.82rem;
  line-height: 1.35;
}

.artist-platform-links {
  display: grid;
  gap: 0.45rem;
}

.artist-platform-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--bone);
  text-decoration: none;
  border: 1px solid rgba(243,240,232,.12);
  background: rgba(243,240,232,.06);
  border-radius: 12px;
  padding: 0.58rem 0.68rem;
  font-size: 0.86rem;
  font-weight: 900;
}

.artist-platform-links a::after {
  content: "↗";
  color: var(--orange);
}

.artist-platform-links a:hover {
  border-color: rgba(241,102,35,.55);
  background: rgba(241,102,35,.12);
}

@media(max-width:760px) {
  .artist-chip-row {
    justify-content: center;
  }

  .artist-platform-popover {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Final artist billing/menu fix */
.hero {
  position: relative;
  z-index: 30;
  overflow: visible;
}

.content-grid {
  position: relative;
  z-index: 1;
}

.artist-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-top: 0.85rem;
  position: relative;
  z-index: 100;
}

.artist-chip-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.artist-chip-menu:not(:last-child)::after {
  content: "·";
  color: var(--stone);
  opacity: 0.75;
  margin: 0 0.48rem;
  font-weight: 900;
}

.artist-chip-menu summary {
  list-style: none;
}

.artist-chip-menu summary::-webkit-details-marker {
  display: none;
}

.artist-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: var(--stone);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.3;
  cursor: pointer;
  text-decoration: none;
  text-underline-offset: 4px;
}

.artist-chip:hover,
.artist-chip-menu[open] .artist-chip {
  transform: none !important;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--bone);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
}

.artist-chip em {
  margin-left: 0.25rem;
  color: var(--orange);
  font-style: normal;
  font-size: 0.67rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.artist-platform-popover {
  position: absolute;
  top: calc(100% + 0.65rem);
  left: 0;
  width: 220px;
  z-index: 9999;
  border: 1px solid rgba(243,240,232,.18);
  border-radius: 18px;
  background: rgba(10,10,10,.96);
  box-shadow: 0 28px 80px rgba(0,0,0,.62);
  backdrop-filter: blur(18px);
  padding: 0.85rem;
}

.artist-platform-popover strong {
  display: block;
  color: var(--bone);
  margin-bottom: 0.55rem;
}

.artist-platform-popover p {
  margin: 0;
  color: var(--stone);
  font-size: 0.82rem;
  line-height: 1.35;
}

.artist-platform-links {
  display: grid;
  gap: 0.45rem;
}

.artist-platform-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--bone);
  text-decoration: none;
  border: 1px solid rgba(243,240,232,.12);
  background: rgba(243,240,232,.06);
  border-radius: 12px;
  padding: 0.58rem 0.68rem;
  font-size: 0.86rem;
  font-weight: 900;
}

.artist-platform-links a::after {
  content: "↗";
  color: var(--orange);
}

.artist-platform-links a:hover {
  border-color: rgba(241,102,35,.55);
  background: rgba(241,102,35,.12);
}

@media(max-width:760px) {
  .artist-chip-row {
    justify-content: center;
    row-gap: 0.35rem;
  }

  .artist-chip {
    font-size: 1rem;
  }

  .artist-platform-popover {
    left: 50%;
    transform: translateX(-50%);
  }
}