* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: #fff; }
body { width: 100%; color: #151515; font-family: Seravek, "Avenir Next", Arial, sans-serif; }
main { width: 100%; max-width: 886px; margin: 0 auto; padding: 52px 18px 82px; }
nav { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.page-arrows { position: absolute; top: -34px; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; }
.page-arrows > :first-child { position: absolute; left: 17.5%; }
.page-arrows > :last-child { position: absolute; left: 82.5%; white-space: nowrap; }
nav a, nav span { color: #777; font-family: Georgia, "Times New Roman", serif; font-size: 16px; font-weight: 400; font-stretch: normal; line-height: 1; letter-spacing: 0; text-decoration: none; }
nav a { pointer-events: auto; }
nav a:hover { text-decoration: underline; }
.nav-arrow { display: inline-block; font-size: .78em; line-height: 1; transform: scaleX(.62); }
.page-number { position: absolute; right: 0; bottom: -65px; left: 0; display: flex; justify-content: center; font-variant-numeric: tabular-nums; }
.disabled { color: #aaa; }
.page-shell { position: relative; container-type: inline-size; width: 100%; max-width: 850px; aspect-ratio: 8.5 / 11; margin: 0 auto; overflow: visible; background: #fff; }
body[data-page="3"] .page-shell { aspect-ratio: 612 / 907.506; }
.page-shell img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.text-layer { position: absolute; inset: 0; overflow: hidden; line-height: 1; text-align: initial; transform-origin: 0 0; forced-color-adjust: none; }
.text-layer span, .text-layer br { position: absolute; color: transparent; white-space: pre; cursor: text; transform-origin: 0 0; user-select: text; }
.text-layer ::selection { background: rgba(0, 110, 255, .28); }
.cover-orange-extension { position: absolute; z-index: 1; top: 53.75%; right: 0; bottom: 0; left: 57.098039%; background: rgb(240, 63, 30); }
.cover-name { position: absolute; z-index: 2; top: 39.1%; left: 22.5%; width: 34.35%; height: 3.2%; display: flex; align-items: center; overflow: hidden; background: #fff; color: #242122; font-family: "Avenir Next", Avenir, Arial, sans-serif; font-size: clamp(20px, 3.1vw, 31px); font-weight: 700; line-height: 1; white-space: nowrap; }
.cover-year { position: absolute; z-index: 2; top: 42.25%; left: 22.5%; width: 34.35%; height: 3.2%; display: flex; align-items: center; overflow: hidden; background: #fff; color: #242122; font-family: "Avenir Next", Avenir, Arial, sans-serif; font-size: clamp(20px, 3.1vw, 31px); font-weight: 700; line-height: 1; white-space: nowrap; }
body[data-page="1"] .page-shell > img,
body[data-page="1"] .cover-orange-extension,
body[data-page="1"] .cover-name,
body[data-page="1"] .cover-year { transform: translateX(-7cqw); }
body[data-page="2"] .page-shell > img,
body[data-page="2"] .toc-hotspots { transform: translateX(3cqw); }
.toc-hotspots { position: absolute; z-index: 2; top: 10%; right: 17.5%; bottom: 10%; left: 17.5%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4.6cqw; padding: 3cqw 2cqw; background: #fff; font-family: "Avenir Next", Avenir, Arial, sans-serif; text-align: center; }
.toc-hotspots h1 { margin: 0; color: #f13b1f; font: inherit; font-size: 5.1cqw; font-weight: 700; line-height: 1; }
.toc-hotspots a { display: flex; align-items: center; justify-content: center; color: #151515; font-size: 4.15cqw; font-weight: 700; line-height: 1.08; text-decoration: none; cursor: pointer; }
.toc-hotspots a:hover { color: #f13b1f; }
.toc-hotspots a:focus-visible { outline: 2px solid #f13b1f; outline-offset: 4px; }
@media (max-width: 520px) { main { padding: 45px 0 54px; } .page-arrows { top: -30px; } }