*{box-sizing:border-box}html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;color:#0e0e0e;background:#fff}

.wrap{max-width:75%;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;background:#ffffffcc;backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid #eee;z-index:10}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.brand{display:flex;gap:10px;align-items:center;color:inherit;text-decoration:none;font-weight:600}
.brand img{width:28px;height:42px;object-fit:cover;border-radius:2px}
.site-header nav a{margin-left:18px;text-decoration:none;color:#222}
.site-header nav a:hover{text-decoration:underline}

.hero{padding:48px 0 24px}
/*.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}*/
.hero-grid {display: grid;grid-template-columns: 0.7fr 1.3fr; /* text 65%, image 35% */gap: 36px; /* optional, adds breathing space */align-items: center;}
/*.hero-copy h1{font-size:clamp(28px,3.2vw,40px);margin:0;color:#fff;text-shadow: 2px 3px 6px rgba(0, 0, 0, 0.35)}*/
.hero-copy h1 {
  font-size: clamp(28px, 3.2vw, 40px); /* restores original responsive sizing */
  font-weight: 700;                    /* bold enough to carry the shadow */
  line-height: 1.1;
  color: #fff;                         /* your white text */
  margin: 0;
  text-shadow:
    2px 3px 6px rgba(0, 0, 0, 0.6),
    0 0 8px rgba(0, 0, 0, 0.5);}
.hero img,
.book-cover img,
img.cover {
  width: 100%;
  height: auto;
  max-width: 400px; /* optional limit if you don't want it to blow up on large screens */
  display: block;
  margin: 0 auto;}
.hero-media img {border: 3px solid #fff;box-shadow: 6px 8px 18px rgba(0,0,0,0.5);border-radius: 3px;transform: rotate(0deg);}
.tagline{font-size:1.1rem;color:#fff}
.cta-row{display:flex;gap:12px;margin:14px 0 10px}
.bullets{margin:10px 0 0 0;padding-left:18px;color:#fff}

.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #111;border-radius:6px;padding:10px 14px;font-weight:600;text-decoration:none;color:#111;cursor:pointer}
.btn.primary{background:#111;color:#fff;border-color:#111}
.btn.primary:hover{opacity:.9}
.btn.ghost{background:#fff;color:#000;border-color:#fff}
.btn.stretch{width:100%}

/* Disabled state */
.btn.disabled{pointer-events:none;opacity:.45;filter:grayscale(.7);cursor:not-allowed}
.btn.disabled:hover{opacity:.45}

.purchase{padding:28px 0}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{border:1px solid #eaeaea;border-radius:10px;padding:16px;background:#fafafa}
.card h3{margin-top:0}
.availability{margin-top:8px;font-size:.85rem}
.availability.ok{color:#116611}
.availability.soon{color:#555}

.signed{padding:28px 0;background:#f6f6f6;border-top:1px solid #eee;border-bottom:1px solid #eee}
.signed .aside{font-size:.9rem;color:#444}
.fineprint{font-size:.85rem;color:#666}

.about,.faq{padding:28px 0}
blockquote{border-left:4px solid #ddd;padding-left:12px;color:#333}

.site-footer{padding:18px 0;border-top:1px solid #eee;background:#fff}
.foot-grid{display:flex;align-items:center;justify-content:space-between}
.site-footer nav a{margin-left:14px;text-decoration:none;color:#222}
.site-footer nav a:hover{text-decoration:underline}

.newsletter{padding:18px 0;border-top:1px solid #eee;border-bottom:1px solid #eee;background:#fbfbfb}
.newsletter .nl-grid{display:grid;grid-template-columns:1fr auto;gap:10px;max-width:520px}
.newsletter input{border:1px solid #ccc;border-radius:6px;padding:10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .cards{grid-template-columns:1fr}
}
@media (max-width: 480px) {
  .hero img,
  .book-cover img {
    max-width: 90%;}
}

/* Optional background image hooks.
   To enable a full-bleed background, drop a file at assets/hero-bg.jpg and uncomment the background rules. */
body.has-bg { background:#0b0b0b; color:#f5f5f5 }
body.has-bg .site-header{background:#111111cc;border-bottom-color:#222}
body.has-bg .card{background:#111;border-color:#222}
body.has-bg .btn{border-color:#eee;color:#eee}
body.has-bg .btn.primary{background:#eee;color:#111;border-color:#eee}
.hero.bg {
  background: url('assets/hero-bg.jpg') center/cover no-repeat;
  position: relative;
  isolation: isolate;
  opacity: 0.85; /* adjust between 0.6 (very faint) and 1 (normal) */
}
.hero.bg::after{
  content:"";
  position:absolute; inset:0;
  /* Overlay to improve contrast on busy images */
  background: radial-gradient(ellipse at 20% 10%, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.5) 100%);
  z-index:-1;
}

.hidden {position: absolute;left: -9999px;
}

.nl-success {margin-top: 1rem;padding: 0.75rem 1rem;background: #1f9d55;color: #fff;border-radius: 6px;
}

.nl-error {margin-top: 1rem;padding: 0.75rem 1rem;background: #d64545;color: #fff;border-radius: 6px;
}

/* MailerLite CSS */
/* keep it centered and in one line */
.newsletter .newsletter-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.newsletter .newsletter-row .form-control {
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  min-width: 240px;
  font-size: 0.95rem;
}

.newsletter .btn.primary,
.ml-form-embedContainer .btn.primary {
  background: #000;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
}

.newsletter .btn.primary:hover {
  background: #222;
}

.nl-optin {
  display: flex;
  justify-content: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #555;
  margin-bottom: 6px;
}

/* success box style */
.ml-form-successBody {
  text-align: center;
  background: #e8fff1;
  border: 1px solid #3fbf7f;
  color: #125233;
  padding: 12px 14px;
  border-radius: 6px;
}

/* Left align only MailerLite form fields and labels */
.ml-form-embedBody,
.ml-form-embedBody * {
  text-align: left !important;
  justify-content: flex-start !important;
}
/* 🔧 Override MailerLite default centering */
.ml-form-embedContainer,
.ml-form-embedContainer .ml-form-embedWrapper,
.ml-form-embedContainer .ml-form-embedBody,
.ml-form-embedContainer .ml-form-embedContent,
.ml-form-embedContainer form,
.ml-form-embedContainer p,
.ml-form-embedContainer h4 {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  justify-content: flex-start !important;
}

/* ensure email field + button sit left */
.ml-form-embedContainer .newsletter-row {
  justify-content: flex-start !important;
}
.ml-form-embedContainer .newsletter-row input,
.ml-form-embedContainer .newsletter-row button {
  display: inline-block !important;
  margin-right: 8px;
}