:root {
  --pink: #e5c5ce;
  --ink: #000;
  --authors-background: #303030;
  --contact-background: #000;
  --button-background: #0010ff;
  --book-title-gap: 1.871625rem;
  --book-button-gap: 11.16px;
  font-size: max(3.2px, 1.44vh);
  color: var(--ink);
  background: var(--pink);
  font-family: Repro, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
body { margin: 0; font-size: 1.75rem; font-weight: 400; line-height: 1.15; letter-spacing: .001em; }
a { color: inherit; text-decoration: none; }
a:active { opacity: .7; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
.mobile-text { display: none; }
.site-header { position: fixed; z-index: 5; top: 0; left: 0; width: 100%; display: flex; justify-content: flex-end; padding: 1rem 2rem 0; font-size: 2rem; line-height: 1; letter-spacing: 0; }
.hero { position: relative; height: 34rem; overflow: hidden; }
.hero-frame { position: absolute; inset: 0; opacity: 0; transition: opacity var(--hero-duration, 0ms) linear; pointer-events: none; }
.hero-frame.is-active { opacity: 1; }
.hero-frame img { width: 100%; height: 100%; object-fit: contain; }
.book { padding: 5.6rem 2.6rem 2.6rem; text-align: center; }
.book-image { width: var(--desktop-media-scale); margin: 0 auto; }
.book-image img { width: 100%; height: auto; }
.book-title { margin: 0; font-weight: 400; font-size: 7rem; line-height: .85; letter-spacing: 0; }
.book-subtitle { margin: var(--book-title-gap) 0 0; }
.book-button { margin-top: var(--book-button-gap); display: inline-block; background: var(--button-background); color: #fff; border-radius: 999rem; font-size: 1.5rem; line-height: 1.5; letter-spacing: .03em; padding: .8rem 1.8rem; }
.authors { min-height: 100svh; display: flex; align-items: center; background: var(--authors-background); color: var(--pink); padding: 10rem 0 6rem; }
.authors-grid { width: 90%; margin: 0 auto; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 2rem; }
.author { margin: 0; display: grid; grid-template-rows: 30rem auto; gap: 0; }
.author-1 { grid-column: 2; }
.author-2 { grid-column: 3; }
.author-3 { grid-column: 4; }
.author-portrait { display: flex; align-items: end; }
.author-portrait img { width: 100%; max-height: 30rem; object-fit: contain; }
.author figcaption { margin: 0; text-align: center; }
.contact { position: relative; min-height: 100svh; background: var(--contact-background); color: var(--pink); padding: 10rem 0 2rem; text-align: center; }
.contact-content { width: 90%; margin: 0 auto; }
.contact-logo { width: 20%; margin: 0 auto; }
.contact-text { margin: 0; font-size: 2rem; line-height: 1; letter-spacing: 0; }
.contact-email { display: block; font-size: 8.61rem; line-height: .85; letter-spacing: 0; }
.credits { position: absolute; bottom: 1rem; left: 0; width: 100%; display: flex; justify-content: space-between; padding: 0 1rem; color: var(--pink); font-size: 2rem; line-height: 1; letter-spacing: 0; }
.credits a { pointer-events: auto; }
@media (width < 770px) {
  :root { font-size: calc(2.24vw * var(--mobile-scale,1)); --authors-background: #000; --contact-background: #303030; --book-button-gap: 1.871625rem; }
  .mobile-text { display: inline; }
  .desktop-text { display: none; }
  .site-header { position: absolute; padding: .6rem 1.26rem .84rem; font-size: 2.52rem; }
  .hero { height: 43.32rem; }
  .book { padding: 3.36rem 1.56rem 3.5725rem; }
  .book-image { width: var(--mobile-media-scale); margin-bottom: var(--book-title-gap); }
  .book-title { font-size: 4.25rem; line-height: .9; letter-spacing: -.014em; }
  .book-subtitle { margin-top: var(--book-title-gap); }
  .book-button { margin-top: var(--book-button-gap); }
  .authors { background: #000; padding: 4.025rem 0 8.05rem; }
  .authors-grid { display: block; }
  .author { display: block; }
  .author + .author { margin-top: 6.0375rem; }
  .author-portrait { width: 58.1%; margin: 0 auto; }
  .author-2 .author-portrait { width: 64.2%; }
  .author-3 .author-portrait { width: 61%; }
  .author-portrait img { max-height: none; }
  .contact { background: #303030; display: flex; align-items: center; padding: 4rem 0; }
  .contact-logo { width: 54.1%; }
  .contact-email { margin-top: 4.025rem; font-size: 6.375rem; line-height: .9; letter-spacing: -.014em; }
  .credits { bottom: 2rem; padding: 0 1.8rem; font-size: 1.1725rem; line-height: 1.15; }
  .credits > :last-child { font-size: 1.33rem; }
}
/* Both translations reserve the same space, including natural text wrapping. */
.shared-copy { display: grid; }
.shared-copy > .copy { grid-area: 1 / 1; min-width: 0; }
.shared-copy > .layout-peer { visibility: hidden; pointer-events: none; user-select: none; }
.book-image { aspect-ratio: var(--desktop-aspect); }
.book-image img { height: 100%; object-fit: contain; }
@media (width < 770px) { .book-image { aspect-ratio: var(--mobile-aspect); } }

/* Cargo uses separate portrait and caption rows, with a 2rem gutter. */
@media (width >= 770px) {
  .authors-grid { row-gap: 2rem; }
  .author { display: contents; }
  .author-1 > * { grid-column: 2; }
  .author-2 > * { grid-column: 3; }
  .author-3 > * { grid-column: 4; }
  .author-portrait { grid-row: 1; align-items: start; width: calc(100% + 1.6rem); }
  .author-1 .author-portrait { transform: translateX(-.4rem); }
  .author-2 .author-portrait { transform: translateX(-.8rem); }
  .author-3 .author-portrait { transform: translateX(-1.2rem); }
  .author figcaption { grid-row: 2; text-align: left; }
}

button { letter-spacing: .03em; }

.book-copy > .copy { align-self: start; }