/* Approved Packs typography: pixel interface and blackletter section headings. */
@font-face {
  font-family: "Not Jam Blackletter 13";
  src: url("./fonts/NotJamBlkltr13.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.packs-page {
  --packs-pixel: "Press Start 2P", monospace;
  --packs-blackletter: "Not Jam Blackletter 13", Uncial, Georgia, serif;
}

/* Navigation matches every other page: the approved pixel blackletter (site-approved-type.css). */
.packs-page .collection-header nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 400 clamp(18px, 1.5vw, 25px)/1.35 var(--packs-blackletter) !important;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.packs-page .eyebrow,
.packs-page .collection-intro > span,
.packs-page .collection-subhead > span:not(.heading-rule),
.packs-page .pack-card-action {
  font-family: var(--packs-pixel);
  font-size: 9px;
  line-height: 1.8;
  letter-spacing: 0;
}

.packs-page .collection-intro p,
.packs-page .release-copy > p:not(.eyebrow),
.packs-page .pack-card-copy > p:not(.eyebrow) {
  font: 400 10px/2.15 var(--packs-pixel) !important;
  letter-spacing: 0;
  overflow-wrap: break-word;
}

.packs-page .collection-intro p { max-width: 370px; }
.packs-page .release-copy ul { font: 400 9px/1.9 var(--packs-pixel); }
.packs-page .release-purchase .release-details,
.packs-page .catalogue-jump { font: 400 9px/1.8 var(--packs-pixel) !important; }

.packs-page .released-heading {
  margin-bottom: 30px;
  padding-bottom: 25px;
  border-bottom: 1px solid #5d4b69;
}

.packs-page .released-heading .eyebrow {
  margin: 0 0 12px;
  color: #c58bec;
}

.packs-page .released-heading h2,
.packs-page .collection-subhead h2 {
  color: #f4eaf0;
  font-family: var(--packs-blackletter);
  font-weight: 400;
  letter-spacing: 0;
  text-shadow: 4px 4px 0 #462456;
}

.packs-page .released-heading h2 {
  position: relative;
  margin: 0;
  font-size: 65px;
  line-height: 1.12;
}

.packs-page .released-heading h2::before {
  content: "";
  position: absolute;
  top: .1em;
  left: -11px;
  width: 5px;
  height: 5px;
  background: #b876dc;
  box-shadow: -6px 6px 0 #85499f, -2px 13px 0 #624077;
}

.packs-page .released-heading .heading-word {
  display: inline-block;
  white-space: nowrap;
}

.packs-page .released-heading .title-period {
  color: #c58bec;
  text-shadow: 4px 4px 0 #462456;
}

.packs-page .collection-subhead h2 {
  font-size: 39px;
  line-height: 1.17;
  white-space: normal;
}

@media (max-width: 700px) {
  .packs-page .collection-header nav a { font-size: 18px !important; }
  .packs-page .eyebrow,
  .packs-page .collection-intro > span,
  .packs-page .collection-subhead > span:not(.heading-rule),
  .packs-page .pack-card-action { font-size: 9px; }
  .packs-page .collection-intro p,
  .packs-page .release-copy > p:not(.eyebrow),
  .packs-page .pack-card-copy > p:not(.eyebrow) {
    font-size: 10px !important;
    line-height: 2.15 !important;
  }
  .packs-page .release-copy ul { font-size: 9px; }
  .packs-page .release-purchase .release-details,
  .packs-page .catalogue-jump { font-size: 9px !important; }
  .packs-page .released-heading { margin-bottom: 24px; padding-bottom: 20px; }
  .packs-page .released-heading h2 { font-size: 39px; line-height: 1.17; }
  .packs-page .released-heading h2::before { left: -8px; width: 4px; height: 4px; }
  .packs-page .collection-subhead h2 { font-size: 26px; }
}