:root{
  --ink:#1A1225;
  --purple:#2D1B4E;
  --plum:#4A2E6B;
  --cream:#F5F0E8;
  --gold:#C9A84C;
  --gold-soft:#E4CE8F;
  --white:#FFFDF9;
  --shadow:0 12px 30px rgba(26,18,37,0.15);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Inter',sans-serif;
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
h1,h2,h3,.display{font-family:'Playfair Display',serif;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

/* ===== HEADER / NAV ===== */
header{
  position:sticky; top:0; z-index:50;
  background:var(--purple); color:var(--cream);
  padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  box-shadow:0 4px 16px rgba(0,0,0,0.15);
}
.logo-mark{display:flex; align-items:center; gap:8px;}
.logo-mark svg{width:34px; height:34px; flex-shrink:0;}
.logo-mark .word{font-family:'Playfair Display',serif; font-weight:800; font-size:20px; letter-spacing:0.3px;}
.logo-mark .word span{color:var(--gold-soft);}
nav.main-nav{display:flex; gap:18px; font-size:13px; font-weight:600;}
nav.main-nav a{opacity:0.85;}
nav.main-nav a:hover{opacity:1;}

/* ===== HERO ===== */
.hero{
  padding:52px 20px 40px; text-align:center;
  background:linear-gradient(180deg, var(--purple) 0%, var(--plum) 65%, var(--cream) 100%);
  color:var(--cream);
}
.hero .eyebrow{font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-soft); margin-bottom:10px; font-weight:600;}
.hero h1{font-size:34px; line-height:1.15; margin-bottom:12px;}
.hero p{font-size:15px; opacity:0.85; max-width:480px; margin:0 auto 22px;}
.hero-cta{display:inline-block; background:var(--gold); color:var(--purple); font-weight:700; font-size:14px; padding:12px 28px; border-radius:999px;}

@media(min-width:640px){ .hero h1{font-size:44px;} }

/* ===== SECTIONS / SHELVES ===== */
main{padding:8px 0 20px;}
.section{max-width:1100px; margin:0 auto; padding:34px 20px 6px;}
.section-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px;}
.section-head h2{font-size:22px; color:var(--purple);}
.section-head .count{font-size:12px; font-weight:600; color:var(--plum); opacity:0.7;}
.book-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:16px;}

.book-card{background:var(--white); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;}
.cover{height:170px; display:flex; align-items:center; justify-content:center; padding:16px; text-align:center; position:relative;}
.cover::after{content:''; position:absolute; left:0; top:0; bottom:0; width:8px; background:rgba(0,0,0,0.18);}
.cover .t{font-family:'Playfair Display',serif; font-weight:700; font-size:14px; color:var(--cream); line-height:1.25; z-index:1;}
.cover .badge-tag{position:absolute; top:8px; right:8px; background:var(--gold); color:var(--purple); font-size:9px; font-weight:800; padding:3px 7px; border-radius:5px; letter-spacing:0.5px;}
.book-info{padding:12px 14px 14px; display:flex; flex-direction:column; gap:4px; flex:1;}
.book-info .title{font-size:13.5px; font-weight:700; color:var(--ink);}
.book-info .sub{font-size:11.5px; color:var(--plum); opacity:0.75;}
.book-info .desc{font-size:12px; color:var(--ink); opacity:0.75; margin:4px 0 6px; line-height:1.4;}
.book-info .price-row{display:flex; align-items:center; justify-content:space-between; margin-top:auto;}
.book-info .price{font-size:13.5px; font-weight:800; color:var(--purple);}
.buy-btn{background:var(--gold); color:var(--purple); font-weight:700; font-size:12px; padding:8px 14px; border:none; border-radius:8px; cursor:pointer;}
.buy-btn:active{opacity:0.85;}

/* ===== NEWSLETTER ===== */
.newsletter{background:var(--plum); color:var(--cream); text-align:center; padding:44px 20px; margin-top:30px;}
.newsletter h2{font-size:22px; margin-bottom:8px;}
.newsletter p{font-size:14px; opacity:0.85; max-width:440px; margin:0 auto 20px;}
.newsletter-embed{max-width:540px; margin:0 auto;}

/* ===== FOOTER ===== */
footer{text-align:center; padding:26px 20px; font-size:12px; color:var(--plum); opacity:0.7; background:var(--cream);}
footer a{text-decoration:underline;}

/* ===== BLOG LISTING ===== */
.blog-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:20px; max-width:1000px; margin:0 auto; padding:0 20px;}
.blog-card{background:var(--white); border-radius:14px; box-shadow:var(--shadow); overflow:hidden;}
.blog-card .blog-cover{height:120px; background:linear-gradient(135deg,var(--purple),var(--plum)); display:flex; align-items:center; justify-content:center; color:var(--gold-soft); font-family:'Playfair Display',serif; font-size:15px; text-align:center; padding:14px;}
.blog-card .blog-body{padding:16px;}
.blog-card h3{font-size:16px; color:var(--purple); margin-bottom:6px;}
.blog-card p{font-size:12.5px; color:var(--ink); opacity:0.75; margin-bottom:10px;}
.blog-card .read-more{font-size:12px; font-weight:700; color:var(--gold); opacity:1;}

/* ===== BLOG ARTICLE ===== */
.article{max-width:700px; margin:0 auto; padding:40px 20px 60px;}
.article .kicker{font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:10px;}
.article h1{font-size:30px; color:var(--purple); margin-bottom:14px; line-height:1.2;}
.article .meta{font-size:12.5px; color:var(--plum); opacity:0.7; margin-bottom:28px;}
.article h2{font-size:20px; color:var(--purple); margin:28px 0 12px;}
.article p{font-size:15px; margin-bottom:16px; color:var(--ink);}
.article ul{margin:0 0 16px 20px;}
.article li{font-size:15px; margin-bottom:8px;}
.article .cta-box{background:var(--cream); border:1px solid rgba(45,27,78,0.12); border-radius:14px; padding:20px; text-align:center; margin:30px 0;}
.article .cta-box a{display:inline-block; background:var(--purple); color:var(--cream); font-weight:700; font-size:14px; padding:12px 26px; border-radius:999px; margin-top:10px;}

/* ===== TOAST ===== */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--purple); color:var(--cream); padding:12px 22px;
  border-radius:999px; font-size:13px; font-weight:600; box-shadow:var(--shadow); z-index:200;
  opacity:0; pointer-events:none; transition:opacity 0.25s, transform 0.25s;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-6px);}