/* ---------- CSS: thoughtful, modern, accessible ---------- */
:root{
  --bg: #0f1115;
  --bg-soft: #141821;
  --text: #e6e6e6;
  --muted: #a8b3cf;
  --accent: #8a9cff;
  --accent-2: #59e1c7;
  --card: #0d0f14;
  --border: #23283a;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

:root.light{
  --bg: #ffffff;
  --bg-soft: #f6f7fb;
  --text: #1a1a1a;
  --muted: #5b6170;
  --accent: #384bff;
  --accent-2: #12a38c;
  --card: #ffffff;
  --border: #e6e8f0;
  --shadow: 0 10px 25px rgba(0,0,0,.08);
}

*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at -10% -10%, rgba(56,75,255,.18), transparent 60%),
              radial-gradient(900px 500px at 110% 0%, rgba(18,163,140,.12), transparent 60%),
              var(--bg);
  line-height:1.6;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Header */
.site-header{
  position: sticky; top:0; z-index: 10;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px clamp(16px, 4vw, 40px);
  background: linear-gradient(to bottom, rgba(0,0,0,.45), transparent);
  backdrop-filter: blur(6px);
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; color:var(--text); text-decoration:none; letter-spacing:.3px; }
.brand .accent{ color: var(--accent); }
.nav-toggle{ display:none; }
.site-nav{ display:flex; align-items:center; gap:18px; }
.site-nav a{ color:var(--text); opacity:.9; }
.theme-toggle{ border:1px solid var(--border); background:transparent; padding:6px 10px; border-radius:10px; cursor:pointer; }

/* Hero */
.hero{
  display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(24px, 6vw, 56px);
  padding: clamp(32px, 6vw, 80px) clamp(16px, 5vw, 48px);
  align-items:center;
}
.hero__copy h1{
  font-size: clamp(28px, 5vw, 56px);
  line-height:1.1;
  margin:0 0 14px;
}
.accent{ color: var(--accent); }
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:18px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background: transparent; color: var(--text);
  padding: 12px 18px; border-radius:12px; text-decoration:none; font-weight:600;
  box-shadow: var(--shadow); transition: transform .08s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-1px); text-decoration:none; }
.btn-primary{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border: none; }
.btn-outline{ background: var(--bg-soft); }
.btn-amazon{ background: #ffd814; color:#111; border: none; }

.hero__card{
  position:relative; display:grid; grid-template-columns: 18px 1fr; align-items:stretch;
  background: var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden;
  min-height: 230px;
}
.book-spine{ background: linear-gradient(#13192b, #0a0d16); }
.book-cover{ padding: 18px; display:flex; flex-direction:column; gap:8px; }
.book-cover .book-kicker{ display:inline-block; font-size:12px; letter-spacing:.8px; text-transform:uppercase; opacity:.8; }
.book-cover h3{ font-family: "Source Serif 4", Georgia, serif; font-size: clamp(20px, 2.6vw, 30px); margin:0; }
.book-cover p{ margin:0; color: var(--muted); }

/* Book section */
.book{ padding: 24px clamp(16px,5vw,48px) 64px; }
.book__grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(18px,5vw,40px); align-items:center; }

.book__cover .cover-art{
  position:relative; aspect-ratio: 2/3; border-radius: 14px; border:1px solid var(--border);
  background: radial-gradient(400px 300px at 20% 10%, rgba(138,156,255,.4), transparent 55%),
              radial-gradient(300px 300px at 90% 90%, rgba(89,225,199,.25), transparent 55%),
              #0b0f1a;
  display:flex; align-items:center; justify-content:center;
  padding:16px; overflow:hidden;
  box-shadow: var(--shadow);
}

/* --- FIX: Book cover image scaling --- */
.book__cover .cover-art img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;   /* keeps proportions */
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.cover-art .shine{ position:absolute; inset:0; background: linear-gradient(120deg, transparent, rgba(255,255,255,.18), transparent); transform: translateX(-100%); animation: shine 4s linear infinite; }
@keyframes shine{ 0%{ transform: translateX(-100%);} 60%{ transform: translateX(100%);} 100%{ transform: translateX(100%);} }
.cover-art span{ color:#fff; font-family: "Source Serif 4", Georgia, serif; font-weight:700; font-size: clamp(18px, 2.2vw, 26px); text-align:center; }

.book__details h2{ margin:.2rem 0 10px; font-size: clamp(22px, 3.5vw, 36px); }
.book__details p{ color: var(--muted); }
.book__bullets{ margin:14px 0 18px; padding-left: 20px; color: var(--muted); }
.rating-strip{
  margin-top: 18px; padding: 10px 14px; border:1px dashed var(--border); border-radius: 12px; color:var(--muted);
}

/* Blog */
.blog{ padding: 40px clamp(16px,5vw,48px); }
.section-heading{ display:flex; align-items:baseline; justify-content:space-between; gap: 16px; margin-bottom: 12px; }
.view-all{ font-size: 14px; color: var(--muted); }
.blog__grid{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px;
}
.card{
  background: var(--card); border:1px solid var(--border); border-radius: 14px; padding: 16px; display:flex; flex-direction:column; gap:10px;
  transition: transform .1s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.card .kicker{ font-size: 12px; text-transform: uppercase; letter-spacing:.8px; color: var(--muted); }
.card h3{ margin:2px 0 0; font-size: 18px; }
.card p{ margin:0; color: var(--muted); }
.card a{ align-self:flex-start; }

/* Footer */
.site-footer{
  border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap: 16px;
  padding: 20px clamp(16px,5vw,48px) 40px;
  color: var(--muted);
}
.site-footer .social{ display:flex; gap: 14px; }
.site-footer .social a{ color: var(--muted); }

/* Utilities */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Responsive */
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
  .book__grid{ grid-template-columns: 1fr; }
  .blog__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .site-nav{ display:none; }
  .nav-toggle{ display:inline-flex; border:1px solid var(--border); background:transparent; color:var(--text); padding:6px 10px; border-radius:10px; }
  .site-header.open .site-nav{ display:flex; position:absolute; top:60px; right:16px; background: var(--bg-soft); border:1px solid var(--border); border-radius:12px; padding:12px; flex-direction:column; gap:8px; }
}
@media (max-width: 640px){
  .blog__grid{ grid-template-columns: 1fr; }
}