@import url('../fonts/open-sans.css');

:root {
  color-scheme: light;
  --unit: min(.0854700855vw, 1px);
  --green: #c7d540;
  --pink: #b4458d;
  --blue: #034991;
  --ice: #dff2f9;
  font-family: 'Open Sans', sans-serif;
  color: #000;
  background: #f1f1f1;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body, h1, h2, p, ul, ol { margin: 0; }
img { display: block; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.page { width: 100%; max-width: 1170px; margin-inline: auto; background: white; overflow: clip; }
.hero img { width: 100%; }
.intro-title { margin-top: calc(4 * var(--unit)); }
.intro-title img { width: calc(833 * var(--unit)); margin-inline: auto; }
.intro-copy {
  width: calc(970 * var(--unit));
  margin: calc(18 * var(--unit)) auto 0;
  font-size: max(16px, calc(26 * var(--unit)));
  font-weight: 400;
  font-stretch: 87.5%;
  line-height: calc(36 * var(--unit));
  text-align: justify;
}
.intro-copy p + p { margin-top: calc(15 * var(--unit)); }

.details { position: relative; margin-top: calc(58.5 * var(--unit)); padding-bottom: calc(30 * var(--unit)); }
.family { position: absolute; top: calc(94 * var(--unit)); right: calc(33 * var(--unit)); width: calc(541 * var(--unit)); }
.family img { width: 100%; }
.facts {
  position: relative;
  list-style: none;
  padding: 0 calc(47 * var(--unit));
  font-size: calc(34 * var(--unit));
  font-weight: 500;
  font-stretch: 75%;
  line-height: 1.2;
  color: var(--blue);
}
.facts li { position: relative; padding-left: calc(52 * var(--unit)); }
.facts li + li { margin-top: calc(15 * var(--unit)); }
.facts li::before {
  position: absolute;
  content: '';
  top: calc(2 * var(--unit));
  left: 0;
  width: calc(36 * var(--unit));
  height: calc(35 * var(--unit));
  background: url('../images/bullet-puddle.png') center / contain no-repeat;
}
.facts a { color: var(--pink); font-style: italic; }
.facts .nowrap { white-space: nowrap; }

.collection { padding-top: calc(34 * var(--unit)); padding-bottom: calc(25 * var(--unit)); background: var(--ice); }
.books-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  row-gap: calc(15 * var(--unit));
  width: calc(1027 * var(--unit));
  margin-left: calc(52 * var(--unit));
  padding: 0;
  list-style: none;
}
.book { text-align: center; }
.book-cover { width: calc(247 * var(--unit)); max-width: none; aspect-ratio: 247 / 203; }
.book-number {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(38 * var(--unit));
  height: calc(38 * var(--unit));
  margin: calc(-18 * var(--unit)) auto 0;
  transform: translateX(calc(6 * var(--unit)));
  border-radius: 50%;
  background: var(--pink);
  color: white;
  font-size: calc(20 * var(--unit));
  font-weight: 700;
  line-height: 1;
}
.book time {
  display: block;
  transform: translateX(calc(6 * var(--unit)));
  font-size: calc(22 * var(--unit));
  font-weight: 700;
  font-stretch: 75%;
  line-height: calc(26 * var(--unit));
  white-space: nowrap;
}

.footer { position: relative; height: calc(222 * var(--unit)); background: var(--green); }
.distributor { position: absolute; left: calc(69 * var(--unit)); top: calc(76 * var(--unit)); width: calc(268 * var(--unit)); text-align: center; }
.distributor-label { display: block; margin-bottom: calc(5 * var(--unit)); font-size: calc(21.35 * var(--unit)); font-stretch: 75%; font-weight: 700; line-height: calc(29 * var(--unit)); }
.distributor img { width: 100%; }
.publisher { position: absolute; left: calc(912 * var(--unit)); top: calc(19 * var(--unit)); width: calc(185 * var(--unit)); text-align: center; }
.publisher img { width: calc(152 * var(--unit)); margin-inline: auto; }
.publisher span { display: block; margin-top: calc(7 * var(--unit)); font-size: calc(24 * var(--unit)); font-weight: 500; font-stretch: 75%; line-height: calc(31 * var(--unit)); letter-spacing: .02em; }

@media (max-width: 767px) {
  :root { --unit: .1851851852vw; }
  .intro-title { margin-top: calc(10 * var(--unit)); }
  .intro-title img { width: calc(372 * var(--unit)); }
  .intro-copy { width: calc(476 * var(--unit)); margin-top: calc(18 * var(--unit)); line-height: max(23px, calc(36 * var(--unit))); }
  .details { display: flex; flex-direction: column; margin-top: calc(14 * var(--unit)); padding-bottom: calc(27.25 * var(--unit)); }
  .family { position: static; width: calc(451 * var(--unit)); margin: 0 0 calc(16 * var(--unit)) calc(50 * var(--unit)); }
  .facts { padding-inline: calc(32 * var(--unit)); font-size: max(16px, calc(24 * var(--unit))); }
  .facts li { padding-left: calc(41 * var(--unit)); }
  .facts li::before { top: 0; width: calc(29 * var(--unit)); height: calc(28 * var(--unit)); }
  .desktop-break { display: none; }
  .collection { padding-top: calc(32 * var(--unit)); padding-bottom: calc(18 * var(--unit)); }
  .books-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: calc(24 * var(--unit)); width: calc(500 * var(--unit)); margin-left: calc(16 * var(--unit)); }
  .book-cover { width: calc(276 * var(--unit)); aspect-ratio: 276 / 228; }
  .book-number { width: calc(43 * var(--unit)); height: calc(43 * var(--unit)); margin-top: calc(-20 * var(--unit)); transform: none; font-size: calc(22.44 * var(--unit)); }
  .book time { transform: none; font-size: calc(24.68 * var(--unit)); line-height: calc(29.6 * var(--unit)); }
  .footer { height: calc(191 * var(--unit)); }
  .distributor { left: calc(36 * var(--unit)); top: calc(69 * var(--unit)); width: calc(211 * var(--unit)); }
  .distributor-label { margin-bottom: calc(3 * var(--unit)); font-size: calc(16.82 * var(--unit)); line-height: calc(24 * var(--unit)); }
  .publisher { left: calc(350 * var(--unit)); top: calc(25 * var(--unit)); width: calc(146 * var(--unit)); }
  .publisher img { width: calc(120 * var(--unit)); }
  .publisher span { margin-top: calc(5 * var(--unit)); font-size: calc(18.91 * var(--unit)); line-height: calc(25 * var(--unit)); }
}