:root{
  --bg:#000;
  --panel:#020203;
  --white:#f4efe7;
  --pink:#ff1493;
  --cyan:#00d9ff;
  --green:#00ff4a;
  --max:1100px;
}
a {
    color: #cc3333;
    text-decoration: none;
}

/* Mouse hovering over link */
a:hover {
    color: #ff6666;
    text-decoration: underline;
}

/* Previously visited links */
a:visited {
    color: #f4efe7;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#000;color:var(--white)}
body{
  font-family:Georgia,"Times New Roman",serif;
  line-height:1.55;
}
.site{
  width:min(100%,var(--max));
  margin:0 auto;
  background:#000;
}
.shared-hero{
  position:relative;
  width:100%;
}
.shared-hero img{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
}
.hotspot{
  position:absolute;
  display:block;
  z-index:10;
  overflow:hidden;
  text-indent:-9999px;
  background:transparent;
}
.hotspot:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
}
.hero-home{left:34%;top:54%;width:7%;height:6%}
.hero-music{left:42%;top:54%;width:7%;height:6%}
.hero-merch{left:51%;top:54%;width:7%;height:6%}
.hero-links{left:59%;top:54%;width:7%;height:6%}
.hero-logo{left:30%;top:2%;width:39%;height:42%}

.content{
  background:#010102;
  padding:28px 52px 26px;
  border-left:1px solid rgba(255,20,147,.40);
  border-right:1px solid rgba(255,20,147,.40);
}
.page-intro{
  margin:0 0 22px;
}
.page-title{
  margin:0;
  font-size:clamp(2rem,4.4vw,3.5rem);
  letter-spacing:.06em;
  color:var(--white);
  text-align:center;
}
.divider{
  position:relative;
  width:100%;
  height:34px;
  margin:8px 0 28px;
}
.divider:before,
.divider:after{
  content:"";
  position:absolute;
  top:15px;
  height:2px;
  width:calc(50% - 30px);
  background:var(--pink);
}
.divider:before{left:0}
.divider:after{right:0}
.divider .notch{
  position:absolute;
  left:50%;
  top:4px;
  width:28px;
  height:28px;
  transform:translateX(-50%);
}
.divider .notch:before{
  content:"";
  position:absolute;
  inset:0;
  border-left:3px solid var(--pink);
  border-bottom:3px solid var(--pink);
  transform:rotate(-45deg) scale(.65);
}

.section{
  margin:0 0 30px;
}
.copy{
  max-width:820px;
  margin:0 auto;
  font-size:clamp(1rem,1.5vw,1.1rem);
  color:var(--white);
  text-align:center;
}
.copy p{margin:.85em 0}
.copy .credits{
  font-size:.95em;
}

.audio-grid{
  display:grid;
  grid-template-columns:3fr 3fr;
  gap:26px;
  margin-top:0px;
}
.audio-card{
  display:block;
	aspect-ratio: 1 / 1;
  border:1px solid var(--pink);
  background:#000;
}
.audio-card {
    width: 100%;
    max-width: 300px;
	max-height: 300px;
    box-sizing: border-box;
    margin: 0 auto;
}
.stream-card {
  display:block;
  
  background:#000;
}
.stream-card {
    width: 100%;
    max-width: 300px;
    box-sizing: border-box;
    margin: 0 auto;
}

.audio-card iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}
.merch-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  margin-top:10px;
}
.merch-slot{
	
	border: 3px solid var(--pink);
	background: #000;
	box-shadow: 0 0 0 1px rgba(255,20,147,.25) inset;
	align-content: center;
	max-width: 300px;
	max-height: 350px;
	text-align: center;
}
.merch-caption{
  margin-top:24px;
  text-align:center;
}
.merch-caption a{
  display:inline-block;
  padding:10px 22px;
  border:1px solid var(--pink);
  color:var(--white);
  text-decoration:none;
  letter-spacing:.14em;
}
.merch-caption a:hover{
  color:var(--cyan);
  border-color:var(--cyan);
}

.links-box{
	max-width: 760px;
	margin: 0 auto;
	padding: 22px 20px;
	border: 1px solid var(--pink);
	text-align: center;
	background: #040406;
	color: #000000;
}
.links-box p{
  margin:.55em 0;
}
.links-box a{
  color:var(--white);
}
.links-box a:hover{
  color:var(--cyan);
}

.footer{
  padding:18px 30px 28px;
  background:#000;
  border-left:1px solid rgba(255,20,147,.40);
  border-right:1px solid rgba(255,20,147,.40);
  border-bottom:1px solid rgba(255,20,147,.40);
}
.footer .footer-divider{
  position:relative;
  height:28px;
  margin:0 0 12px;
}
.footer .footer-divider:before,
.footer .footer-divider:after{
  content:"";
  position:absolute;
  top:12px;
  height:2px;
  width:calc(50% - 28px);
  background:var(--pink);
}
.footer .footer-divider:before{left:0}
.footer .footer-divider:after{right:0}
.footer .footer-divider .notch{
  position:absolute;
  left:50%;
  top:1px;
  width:24px;
  height:24px;
  transform:translateX(-50%);
}
.footer .footer-divider .notch:before{
  content:"";
  position:absolute;
  inset:0;
  border-left:3px solid var(--pink);
  border-bottom:3px solid var(--pink);
  transform:rotate(-45deg) scale(.62);
}
.footer-copy{
  text-align:center;
  color:var(--white);
  font-size:clamp(.8rem,1.25vw,.95rem);
}
.footer-copy span{
  display:inline-block;
  margin:2px 12px;
}
@media(max-width:860px){
  .content{padding:24px 22px 22px}
  .audio-grid,
  .merch-grid{grid-template-columns:1fr}
  .footer-copy span{display:block;margin:4px 0}
}