/* Two-column responsive layout (image left, text right) */
.two-col { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; } */
.two-col .col-left, .two-col .col-right { padding: 0; }
.two-col .col-left img { width: 100%; max-width: 520px; display:block; margin:0 auto; }

@media (min-width: 768px) {
  .two-col { grid-template-columns: 42% 58%; }
  .two-col .col-left { text-align: left; }
  .two-col .col-right { text-align: left; padding-left: 18px; }
  /* product card becomes row */
  .product-card { display: flex; flex-direction: row; gap: 18px; align-items: flex-start; }
  .product-card .book-cover { width: 220px; max-width: 40%; margin: 0; }
  .product-card .product-info { text-align: left; }
}


/* Soft Minimal Author Site — mobile-first responsive CSS */

/* Reset + base */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: Inter, system-ui, -apple-system, Roboto, Arial, sans-serif; color: #222; background: #fff; line-height: 1.5; }
.container { max-width: 1100px; margin: 0 auto; padding: 12px; }

/* Header */
.site-header { position: sticky; top: 0; background: #fff; z-index: 50; border-bottom: 1px solid #eee; }
.nav { display: flex; gap: 12px; justify-content: center; align-items: center; padding: 10px 0; }
.nav-link { text-decoration: none; color: #222; font-weight: 600; padding: 6px 10px; border-radius: 6px; }
.nav-link:hover { background: rgba(107,60,145,0.06); }

/* Hero */
.hero { padding-top: 8px; padding-bottom: 8px; text-align: center; }
.hero-image { width: 90%; max-width: 720px; display: block; margin: 0 auto; }

/* Images classes */
.hearthouse { width: 100%; max-width: 720px; display: block; margin: 0 auto; }
.victory { width:  90%; max-width: 520px; display: block; margin: 10px auto; }
.book-cover { width: 70%; max-width: 360px; display: block; margin: 12px auto; }

/* Content */
.content { padding: 18px 0; }
.content h2 { margin-bottom: 12px; }
.product-card { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.product-info { max-width: 520px; text-align: center; }
/* /* btn removed */

/* Footer */
.site-footer { text-align: center; padding: 18px 0; border-top: 1px solid #eee; margin-top: 20px; }

/* Mobile first, desktop adjustments */
@media (min-width: 768px) {
  .hero-image { width: 65%; }
  .hearthouse { width: 65%; }
  .victory { width:  90%; }
  .product-card { flex-direction: row; gap: 24px; align-items: flex-start; }
  .product-info { text-align: left; }
  .container { padding: 24px; }
}

/* Gentle helpers to avoid top gap */
h1, h2 { margin-top: 0; }
.header + main, .site-header + main { padding-top: 0; }