* { box-sizing: border-box; }
body { margin: 0; background: #d9c9a8; font-family: 'Karla', sans-serif; }
a { color: #8a4b2a; } a:hover { color: #6e3a20; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes chapterIn { from { opacity: 0.15; transform: translateY(46px); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: translateY(0); } 50% { transform: translateY(-8px); } to { transform: translateY(0); } }
input, textarea { font-family: 'Karla', sans-serif; }
img { max-width: 100%; }

/* ---- Responsive: phones and narrow preview panes ---- */
@media (max-width: 780px) {
  .site-header {
    padding: 12px 16px !important;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .site-logo { font-size: 17px !important; }
  .site-nav { gap: 12px !important; font-size: 12px !important; }

  .section-pad { padding-left: 16px !important; padding-right: 16px !important; }

  .hero-grid {
    grid-template-columns: 1fr !important;
    padding: 24px 16px !important;
    gap: 18px !important;
  }
  .hero-title { font-size: 30px !important; }

  .grid-3 { grid-template-columns: 1fr !important; }

  .detail-hero-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .detail-title { font-size: 28px !important; }

  .journey-title { font-size: 23px !important; }
  .chapter-grid { grid-template-columns: 1fr !important; }

  .maker-grid { grid-template-columns: 1fr !important; }

  .act4-grid { grid-template-columns: 1fr !important; }

  .page-title { font-size: 25px !important; }

  .buy-bar {
    padding: 10px 16px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .buy-bar-controls { flex-wrap: wrap !important; justify-content: flex-start !important; }

  .cart-row { flex-wrap: wrap !important; }

  .video-overlay { padding: 16px !important; }
  .video-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 420px) {
  .site-nav { gap: 8px !important; font-size: 11px !important; }
  .hero-title { font-size: 26px !important; }
  .detail-title { font-size: 24px !important; }
  .page-title { font-size: 22px !important; }
}