* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #0d171d; color: #f0dfc6; font-family: Georgia, 'Times New Roman', serif; }
.design { position: relative; width: min(100%, 1040px); margin-inline: auto; container-type: inline-size; }
.design-art { display: block; width: 100%; height: auto; }
.hotspot, .anchor, .buy-button { position: absolute; }
.hotspot { display: block; border-radius: 2px; }
.hotspot:hover { background: #f0dfc615; }
a:focus-visible, button:focus-visible { outline: 3px solid #ffcd87; outline-offset: 3px; }
.brand { left: 5%; top: .55%; width: 24%; height: 1.7%; }
.nav-story { left: 50.5%; top: .6%; width: 10.5%; height: 1.5%; }
.nav-book { left: 61%; top: .6%; width: 8.5%; height: 1.5%; }
.nav-author { left: 69.5%; top: .6%; width: 9%; height: 1.5%; }
.nav-social { left: 79%; top: .6%; width: 14.5%; height: 1.5%; }
.anchor { width: 1px; height: 1px; pointer-events: none; }
.story-anchor { top: 29%; }
.book-anchor { top: 47%; }
.author-anchor { top: 64.5%; }
.social-anchor { top: 82.5%; }
.buy-button { left: 49.5%; top: 51.8%; width: 31%; height: 2.65%; border: 0; border-radius: 1px; color: #f6e5cd; background: #943d2c; font-family: inherit; font-size: clamp(12px, 2.05cqw, 22px); cursor: pointer; }
.buy-button:hover { background: #793021; }
.read-more { position: absolute; height: 2.3%; border: 0; border-bottom: 1px solid currentColor; padding: 0; background: transparent; color: #622b20; font-family: inherit; font-size: clamp(12px, 2.1cqw, 22px); cursor: pointer; }
.read-more:hover { text-decoration: underline; }
.read-story { left: 7%; top: 38.5%; width: 27%; }
.read-book { left: 51%; top: 55.4%; width: 28%; }
.read-author { left: 36%; top: 69.1%; width: 28%; color: #f0dfc6; text-shadow: 0 1px 3px #071014; }
.instagram { left: 39%; top: 84.4%; width: 9%; height: 4%; border-radius: 50%; }
.tiktok { left: 51.2%; top: 84.4%; width: 9%; height: 4%; border-radius: 50%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 10; padding: 12px; color: #201e1b; background: #f0dfc6; }
.skip-link:focus { top: 12px; }
dialog { width: min(90vw, 450px); padding: 28px; border: 1px solid #c6aa81; border-radius: 4px; color: #201e1b; background: #efe0c9; }
dialog::backdrop { background: #071014bd; }
dialog h2 { margin-top: 0; font-weight: normal; font-size: 28px; }
.reading-dialog { width: min(92vw, 680px); max-height: 85dvh; overflow-y: auto; padding: clamp(22px, 5vw, 42px); font-size: 18px; line-height: 1.65; }
.reading-dialog h2 { font-size: 34px; }
.market-note { font-size: 15px; }
.edition { display: block; margin-block: 12px; padding: 14px; color: #f6e5cd; background: #943d2c; text-align: center; text-decoration: none; }
.edition:hover { background: #793021; }
.close-button { width: 100%; padding: 12px; border: 1px solid #943d2c; color: #793021; background: transparent; font: inherit; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }