:root { color-scheme: light; --paper: #eef3f7; --ink: #12202c; --gold: #ddb665; --gold-dark: #9a6d26; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--paper); }
body { color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
.page-shell { width: min(680px, calc(100% - 24px)); margin: 24px auto 26px; }
.hero-link { display: block; color: inherit; text-decoration: none; }
.hero-card { position: relative; isolation: isolate; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 16px; background: url("assets/miami-storm.webp") center / cover no-repeat; box-shadow: 0 17px 38px rgba(17, 25, 35, 0.19); }
.atmosphere { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(1, 5, 10, 0.72), transparent 44%), linear-gradient(90deg, rgba(1, 6, 12, 0.18), transparent 58%, rgba(1, 6, 12, 0.08)); }
.book-cover { position: absolute; top: 10%; left: 10%; display: block; width: 43%; height: auto; border: 1px solid rgba(243, 232, 211, 0.42); border-radius: 2px; filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.72)); transform: perspective(1300px) rotateY(3deg) rotateZ(-0.6deg); transition: transform 180ms ease, filter 180ms ease; }
.hero-link:hover .book-cover, .hero-link:focus-visible .book-cover { transform: perspective(1300px) rotateY(0deg) rotateZ(0deg) translateY(-2px); filter: drop-shadow(0 17px 24px rgba(0, 0, 0, 0.82)); }
.tagline-line { position: absolute; left: 50%; bottom: 7%; display: block; width: 94%; transform: translateX(-50%); color: #fff; font-size: clamp(1.3rem, 5vw, 2.3rem); font-weight: 900; line-height: 1.02; letter-spacing: 0.015em; text-align: center; text-shadow: 0 4px 15px #000, 0 2px 3px #000; }
.tagline-line span { display: block; }
.hero-link:focus-visible, .amazon-button:focus-visible, footer a:focus-visible { outline: 3px solid #1e6ba8; outline-offset: 4px; }
.amazon-button { display: flex; align-items: center; justify-content: center; min-height: 56px; margin: 16px 16px 0; padding: 14px 20px; border-radius: 0 0 8px 8px; border-bottom: 5px solid var(--gold-dark); background: var(--gold); box-shadow: 0 5px 14px rgba(17, 25, 35, 0.13); color: var(--ink); font-size: 1rem; font-weight: 800; text-align: center; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease; }
.amazon-button:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(17, 25, 35, 0.16); }
footer { padding: 20px 12px 0; color: #756d63; font-size: 0.75rem; text-align: center; }
footer a { color: inherit; }
@media (max-width: 600px) {
  .page-shell { width: min(100% - 20px, 680px); margin-top: 10px; }
  .hero-card { border-radius: 11px; }
  .amazon-button { min-height: 54px; margin: 14px 8px 0; padding: 13px 14px; border-bottom-width: 5px; font-size: 0.98rem; }
  footer { padding-top: 18px; font-size: 0.72rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; } }