@font-face {
  font-family: "Mangaba";
  src: url("../fonts/Mangaba.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #111;
  --teal: #009e95;
  --orange: #f56600;
  --collection: #cbebe9;
  --footer: #b2dcde;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #fff; font-family: "Open Sans", sans-serif; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; text-underline-offset: .15em; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 2px; }
strong { font-weight: 800; }
h1, h2, p, figure { margin: 0; }
.page { max-width: 1170px; margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; z-index: 2; left: 16px; top: -100px; padding: 12px 20px; background: #fff; color: #111; }
.skip-link:focus { top: 16px; }

.hero img { width: 100%; }
.intro-title { width: 75.641%; margin: 30px auto 0; }
.intro-title img { width: 100%; }
.intro-copy {
  width: 82.906%;
  margin: 32px auto 0;
  font-size: clamp(18px, 2.0513vw, 24px);
  font-stretch: 80%;
  font-weight: 400;
  line-height: 1.416667;
  text-align: left;
}
.intro-copy p + p { margin-top: 10.5px; }
.details {
  display: grid;
  grid-template-columns: 645fr 468fr;
  align-items: start;
  margin: -12px .5983% 6px 4.2735%;
}
.characters { grid-column: 2; grid-row: 1; }
.characters img { width: 100%; }
.purchase-list {
  grid-column: 1;
  grid-row: 1;
  list-style: none;
  padding: 0 28px 0 51px;
  margin: 36px 0 0;
  color: var(--teal);
  font-size: clamp(23px, 2.906vw, 34px);
  font-stretch: 75%;
  font-weight: 500;
  line-height: 1.2;
}
.purchase-list li { position: relative; }
.purchase-list li + li { margin-top: 15px; }
.purchase-list li::before { content: ""; position: absolute; left: -51px; top: 10px; width: 27px; height: 28px; background: url("../images/bullet-star.png") center / contain no-repeat; }
.purchase-list a { color: var(--orange); font-style: italic; text-decoration: none; }
.purchase-list a:hover { text-decoration: underline; }
.price { white-space: nowrap; }

.collection { position: relative; background: var(--collection); padding-top: 40px; }
/* Match the PSD's visible glyph bounds while retaining editable heading text. */
.collection-title { width: 85%; margin-inline: auto; padding-top: .166667em; margin-bottom: -.166667em; font-family: "Mangaba", "Open Sans", sans-serif; font-size: clamp(36px, 5.1282vw, 60px); font-weight: 400; line-height: .866667; letter-spacing: .01em; text-align: center; text-transform: uppercase; }
.promotion { position: absolute; top: 56px; left: 2.9915%; width: 8.4615%; z-index: 1; }
.books-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 20px; width: 87.7137%; margin: 41px 0 0 6.2393%; padding: 0; list-style: none; }
.book { min-width: 0; }
/* The PSD cover layers include transparent space around each book and shadow.
   Let that space overlap adjacent cells, while the visible covers stay apart. */
.book-cover { position: relative; width: 120.341%; max-width: none; margin-left: -10.232%; }
.book-meta { position: relative; display: flex; align-items: center; gap: 10px; padding-left: 9.744%; margin-top: -14px; font-stretch: 75%; font-weight: 700; font-size: clamp(14px, 1.8803vw, 22px); line-height: 1; white-space: nowrap; }
.book-number { display: grid; place-items: center; flex: 0 0 auto; width: clamp(26px, 3.2479vw, 38px); height: clamp(26px, 3.2479vw, 38px); border-radius: 50%; background: var(--badge); color: #fff; font-stretch: 100%; font-size: .91em; }
.copyright { margin: 24px 7.094% 0; padding-bottom: 8.5px; font-size: 14px; font-weight: 500; line-height: 1.2; }
.copyright span { display: block; }
.site-footer { display: flex; justify-content: space-between; align-items: flex-start; min-height: 181px; padding: 12px 5.47% 25.5px 6.496%; background: var(--footer); font-stretch: 75%; }
.distributor { display: flex; flex-direction: column; align-items: center; margin-top: 30px; }
.distributor p { margin: 0 0 12px 28px; font-size: 21.35px; font-weight: 700; }
.distributor img { width: 163px; }
.publisher { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; }
.publisher img { width: 121px; }
.publisher span { font-size: 24px; font-weight: 500; letter-spacing: .02em; }

@media (min-width: 768px) and (max-width: 1000px) {
  .details { margin-top: 20px; margin-bottom: 26px; }
  .purchase-list { padding-left: 38px; padding-right: 12px; margin-top: 0; }
  .purchase-list li::before { left: -38px; top: 5px; width: 23px; height: 24px; }
  .book-meta { gap: 6px; margin-top: -10px; }
  .copyright { font-size: 12px; }
}

@media (max-width: 767px) {
  /* The mobile hero slice includes this lettering and the glow behind it.
     Keep the semantic heading text; avoid rendering the artwork twice. */
  .intro-title { margin: 0; }
  .intro-title picture { display: none; }
  .intro-copy { width: 83.889%; margin: 3.8889vw 10% 0 6.111%; font-size: clamp(16px, 4.4444vw, 28px); font-stretch: 87.5%; line-height: 1.416667; }
  .intro-copy p + p { margin-top: 1.9444vw; }
  .details { display: flex; flex-direction: column; margin: 7.2222vw 0 5.0185vw; }
  .characters { width: 90.9259%; max-width: 565px; margin-inline: auto; }
  .purchase-list { width: 100%; margin-top: 5.5556vw; padding: 0 6.6667% 0 12.7778%; font-size: clamp(18px, 4.8153vw, 30px); }
  .purchase-list li + li { margin-top: 2.7778vw; }
  .purchase-list li::before { left: -7.5926vw; top: 1.1111vw; width: 5vw; height: 5.1852vw; }
  .collection { padding-top: 5.5556vw; background: #caebe9; }
  .collection-title { width: 92%; padding-top: .080645em; margin-bottom: -.2580645em; font-size: 11.4815vw; line-height: 1.032258; }
  .collection-title span { display: block; }
  .promotion { top: 29.8148vw; left: 2.7778%; width: 18.3333%; max-width: 124px; }
  .books-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 82.5926%; margin: 16.4815vw 0 0 12.4074%; row-gap: 3.7037vw; }
  .book-cover { width: 110.7623%; margin-left: -9.417%; }
  .book-meta { padding-left: 8.9686%; gap: 1.85185vw; margin-top: -2.5926vw; font-size: 4.0741vw; }
  .book-number { width: 7.037vw; height: 7.037vw; }
  .copyright { margin: 2.5926vw 8.7037% 0; padding-bottom: 1.963vw; font-size: clamp(10px, 2.5926vw, 16px); }
  .copyright .copyright-attribution { max-width: 370px; }
  .site-footer { min-height: 27.2222vw; padding: 1.6667vw 6.8519% 3.8889vw 8.5185%; }
  .distributor { margin-top: 4.8148vw; }
  .distributor p { margin: 0 0 1.6667vw 5.1852vw; font-size: 3.125vw; }
  .distributor img { width: 27.2222vw; }
  .publisher { gap: .9259vw; }
  .publisher img { width: 18.7037vw; }
  .publisher span { font-size: 3.5185vw; }
}