/* ===============================
   FIREPROOF COMMENTARIES — THEME
   =============================== */

/* Brand tokens (adjust if desired) */
:root{
  --bg:#0f172a;          /* page background (slate) */
  --ink:#e5e7eb;         /* main text (light) */
  --muted:#c8b68a;       /* muted text (warm parchment) */
  --brand:#d4af37;       /* gold accent */
  --card:#111827;        /* card background */
  --line:#2a3446;        /* borders/lines */
  --max:1100px;
  --radius:16px;
  --shadow:0 8px 30px rgba(0,0,0,.35);
}

/* Base reset / layout */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 Verdana, Geneva, Tahoma, sans-serif;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--max);margin:0 auto;padding:24px}

/* Header + brand */
header{padding:24px 0;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:96px;height:96px}
.title{margin:0;font-weight:700;font-size:clamp(22px,3.5vw,32px)}
.tag{color:var(--muted)}

/* Simple top nav */
nav{margin-top:12px}
nav a{color:var(--ink);opacity:.9;margin-right:10px}
nav a:last-child{margin-right:0}
nav a:hover{opacity:1;text-decoration:underline}

/* Cards / sections */
.card,.sub-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
}

/* Buttons */
.btn{
  display:inline-block;background:var(--brand);color:#111827;
  padding:10px 14px;border-radius:10px;font-weight:700;border:0;
}
.btn.outline{background:transparent;color:var(--ink);border:1px solid var(--line)}

/* Hero banner */
.hero{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-img{width:100%;height:100%;object-fit:cover;display:block}
.hero-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;background:rgba(0,0,0,.35);color:var(--ink)
}
.hero-overlay h1{margin:0;font-size:clamp(2rem,4vw,3rem);font-weight:700}
.hero-overlay p{margin:.5rem 0 0;font-size:clamp(1rem,2vw,1.25rem);color:var(--muted)}

/* Sticky subscribe bar (site-wide) */
.subscribe-bar{
  position:fixed;left:0;bottom:0;width:100%;z-index:9999;
  background:var(--brand);color:#111827;text-align:center;
  padding:10px 14px;box-shadow:0 -2px 10px rgba(0,0,0,.25);
  display:flex;justify-content:center;align-items:center;gap:8px;
  font-weight:600;font-size:15px;
}
.sub-btn{background:#111827;color:var(--brand);padding:6px 12px;border-radius:8px;font-weight:700}
body{padding-bottom:56px}

/* Footer */
footer{margin:34px 0 10px;color:var(--muted);font-size:14px}

/* MailerLite form (scoped) */
.ml-scope *{box-sizing:border-box}
.ml-scope .ml-form-embedWrapper.embedForm{
  max-width:520px;width:100%;margin:0 auto;background:#f6f6f6;border:1px solid #e5e7eb;border-radius:12px
}
.ml-scope .ml-form-embedBody,.ml-scope .ml-form-successBody{padding:20px}
.ml-scope .ml-form-embedContent h4{margin:0 0 6px;color:#000;font:600 24px/1.3 system-ui,-apple-system,Segoe UI,Roboto}
.ml-scope .ml-form-embedContent p{margin:0 0 10px;color:#000}
.ml-scope .ml-field-group input{
  background:#fff !important;color:#111 !important;border:1px solid #ccc;border-radius:8px !important;padding:12px !important;
  font-size:16px !important
}
.ml-scope .ml-form-embedSubmit button.primary{
  background:#000 !important;color:#fff !important;border-radius:10px !important;padding:12px 14px !important;font-weight:700;width:100%
}

/* YOUR EXISTING BOOK GRID */
.book-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.25rem; margin:1.25rem 0 2rem; padding:0; list-style:none; }
.book-item figure{margin:0}
.book-link{display:block;text-decoration:none;color:inherit}
.book-item img{width:100%;height:auto;border-radius:.75rem;box-shadow:0 6px 20px rgba(0,0,0,.12);transition:transform .2s ease, box-shadow .2s ease}
.book-item img:hover,.book-item img:focus{transform:translateY(-4px);box-shadow:0 10px 28px rgba(0,0,0,.16)}
.book-item figcaption{text-align:center;margin-top:.5rem;font-weight:600}