:root {
  --cream: #fff8ef;
  --brown: #654b3c;
  --coral: #d87873;
  --gold: #d8b48b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--brown);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
main { max-width: 720px; margin: 0 auto; background: #fffaf3; box-shadow: 0 0 30px rgba(116, 76, 48, .08); }
.hero { position: relative; line-height: 0; }
.hero img, .image-section img { display: block; width: 100%; height: auto; }
.hero-button { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); }
.fiction-banner {
  padding: 14px 18px; text-align: center; color: #fff; background: var(--coral);
  font-size: clamp(12px, 3.2vw, 15px); line-height: 1.6; letter-spacing: .03em;
}
.image-section { line-height: 0; scroll-margin-top: 12px; }
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 0 24px; border: 2px solid #fff; border-radius: 999px; background: var(--coral);
  color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; letter-spacing: .04em;
  box-shadow: 0 5px 12px rgba(115, 65, 45, .2); transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.button:hover { background: #c76561; box-shadow: 0 7px 16px rgba(115, 65, 45, .25); }
.button:active { transform: translateY(2px); box-shadow: 0 2px 6px rgba(115, 65, 45, .2); }
.hero-button:active { transform: translateX(-50%) translateY(2px); }
.bottom-nav { display: flex; gap: 12px; justify-content: center; padding: 26px 18px 30px; background: #fff4e8; }
.bottom-nav .button { border-color: var(--coral); font-size: 13px; min-height: 44px; padding: 0 16px; }
.secondary { background: transparent; color: var(--coral) !important; }
footer { padding: 18px; text-align: center; background: #fff4e8; color: #9f8170; font-size: 12px; }
@media (min-width: 721px) { .hero-button { bottom: 28px; } }