/* Editorial magazine jackets used throughout the library. */
.editorial-cover--magazine.book-cover {
  position: relative;
  display: block;
  container-type: inline-size;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  border: 8px solid #6e50dd;
  border-radius: 2px;
  background: #110d24;
  box-shadow: inset 0 0 0 1px #e9ddff9c, 0 24px 38px #0a061b87;
  color: #fff;
}

.magazine-cover__image,
.magazine-cover__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.magazine-cover__image {
  display: block;
  object-fit: cover;
  object-position: center;
}

.magazine-cover__shade {
  background: linear-gradient(180deg, #0c091ab0 0%, #0c091a85 24%, #0c091a24 49%, transparent 68%, #0c091a85 100%);
}

.magazine-cover__masthead,
.magazine-cover__copy,
.magazine-cover__foot {
  position: absolute;
  z-index: 1;
  left: 5%;
  right: 5%;
}

.magazine-cover__masthead {
  top: 2.5%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px;
  padding-bottom: 2%;
  border-bottom: 1px solid #f9f5ff8c;
}

.magazine-cover__masthead > span:first-child {
  font: 900 17cqw/.85 Archivo, Arial, sans-serif;
  letter-spacing: -.09em;
}

.magazine-cover__spark {
  margin-left: 2px;
  color: #f1d95f;
  font-size: .55em;
  vertical-align: top;
}

.magazine-cover__masthead > span:last-child,
.magazine-cover__kicker,
.magazine-cover__foot {
  font: 800 clamp(6px, 3.4cqw, 12px)/1.05 BlurryDisplay, Arial, sans-serif;
  letter-spacing: .065em;
}

.magazine-cover__masthead > span:last-child {
  padding-top: 2px;
  text-align: right;
}

.magazine-cover__copy {
  top: 24%;
  display: grid;
  gap: 2.4cqw;
}

.magazine-cover__kicker { color: #f1d95f; }

.magazine-cover__title {
  display: block;
  max-width: 96%;
  font: 900 clamp(15px, 10.3cqw, 36px)/.91 Archivo, Arial, sans-serif;
  letter-spacing: -.065em;
  text-wrap: balance;
  text-shadow: 0 2px 9px #080516a6;
}

.magazine-cover--long .magazine-cover__title { font-size: clamp(14px, 8.8cqw, 31px); }
.magazine-cover--extra-long .magazine-cover__title { font-size: clamp(13px, 7.7cqw, 28px); }

.magazine-cover__foot {
  bottom: 2.7%;
  display: flex;
  justify-content: space-between;
  gap: 4px;
  padding-top: 2%;
  border-top: 1px solid #f9f5ff8c;
  color: #fff;
}

.article-hero--magazine .article-hero__book {
  width: clamp(260px, 23vw, 350px);
  transform: rotate(2deg) perspective(700px) rotateY(-4deg);
}

.article-hero--magazine .editorial-cover--magazine.book-cover { border-width: 10px; }
.shelf .editorial-cover--magazine.book-cover,
.related-card .editorial-cover--magazine.book-cover { border-width: 5px; }
.guide-card__open .editorial-cover--magazine.book-cover { border-width: 7px; }

.article-hero--magazine .article-hero__visual { min-height: 570px; }

@media (max-width: 800px) {
  .article-hero--magazine .article-hero__book { width: 260px; }
  .article-hero--magazine .article-hero__visual { min-height: 430px; }
}

@media (max-width: 590px) {
  .article-hero--magazine .article-hero__book {
    width: min(62vw, 235px);
    transform: rotate(1deg);
  }
  .article-hero--magazine .article-hero__visual { min-height: 390px; }
  .article-hero--magazine .article-hero__halo { opacity: .4; }
}