:root {
  --paper:#f2e3c4;
  --ink:#17333e;
  --hero:#edddba;
  --hero-ink:#17333e;
  --hero-line:#17333e30;
  --nav:#edddba;
  --nav-ink:#17333e;
  --nav-line:#17333e25;
  --button:#17333e;
  --button-ink:#f2e3c4;
  --line:#17333e30;
  --accent:#e6b882;
  --focus:#a93153;
  --listen:#17333e;
  --listen-ink:#f2e3c4;
  --listen-muted:#b9cccd;
  --listen-line:#b9cccd35;
  --player:#102c37;
  --player-button-ink:#17333e;
  --chapter-hover:#ffffff07;
  --next:#b84d2c;
  --next-ink:#f5e7cc;
}

.luna .hero-copy h1 em {
  color:#af3e50;
}

.luna .hero-art {
  max-width:440px;
  padding:18px 18px 0;
}

.luna .hero-art .cover-mat {
  transform:rotate(-2deg);
  box-shadow:12px 14px 0 #17333e,20px 25px 28px #17333e25;
}

.luna .art-orbit {
  position:absolute;
  width:70%;
  aspect-ratio:1;
  left:-16%;
  top:-3%;
  border-radius:50%;
  background:#de6a26;
}

.luna .hero-art:after {
  content:'';
  position:absolute;
  width:100px;
  height:150px;
  background:#ae3d56;
  right:-30px;
  bottom:55px;
  z-index:0;
  transform:rotate(7deg);
}

.luna .hero-art figcaption {
  margin-top:30px;
  font-size:6px;
}

.luna .hero-dek {
  max-width:355px;
}

.luna .hero-rating strong {
  color:#af3e50;
}

.luna .editorial h2 em {
  color:#af3e50;
}

.luna .night-note {
  color:#af3e50;
}

.luna .night-note p {
  color:#17333e;
}

.luna .player-section:after {
  content:'';
  position:absolute;
  inset:6px;
  border-radius:50%;
  box-shadow:inset 12px -7px 0 #e6b88212;
  pointer-events:none;
}

.luna .hero-copy {
  z-index:2;
}

@media(max-width:650px) {
  .luna .hero-art {
    width:87%;
    margin-top:12px;
  }
  .luna .hero-art:after {
    right:-14px;
    width:60px;
    height:100px;
  }
  .luna .hero-art figcaption {
    font-size:6px;
  }
  .luna .art-orbit {
    left:-12%;
  }
}