@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');
/* ===========================================================
   The Picky Reader — shared design system
   Forest green (#3d4b3b) · Cream (#f4f1e9)
   =========================================================== */
:root{
  --ink:#26291f; --muted:#6f7161; --line:#e2dccb; --bg:#f4efe4;
  --card:#fffdf7; --navy:#3d4b3b; --navy-deep:#2c362b; --gold:#3d4b3b;
  --gold-soft:#d8d3c6; --cream:#f4f1e9; --slate:#a7b0a0; --chip:#eae3d3;
  --maxw:1080px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:Georgia,'Times New Roman',serif;color:var(--ink);
  background:var(--bg);line-height:1.6;}
a{color:var(--navy);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}
.sans{font-family:'Open Sans',Helvetica,Arial,sans-serif;}
h1,h2,h3,.hero h1,.section-head h2,.post h1,.post h2,.card h3,.cta-band h2,.site-foot .name{font-family:'Fraunces',Georgia,serif;font-weight:600;}
.nav,.btn,.eyebrow,.section-head .more,.card .by,.tags,.breadcrumb,.site-foot .col h4,.hero .kicker,.buy{font-family:'Open Sans',Helvetica,Arial,sans-serif;}

/* ---------- Header / nav ---------- */
.site-head{background:var(--cream);border-bottom:1px solid var(--line);}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:16px 22px;max-width:var(--maxw);margin:0 auto;flex-wrap:wrap;}
.brand{display:flex;flex-direction:row;align-items:center;gap:12px;text-decoration:none;}
.brand:hover{text-decoration:none;}
.brandmark{height:64px;width:auto;display:block;}
.brand-text{display:flex;flex-direction:column;gap:2px;}
.brand .name{font-family:'Open Sans',Helvetica,Arial,sans-serif;font-weight:700;font-size:19px;color:var(--navy);letter-spacing:2px;line-height:1;}
.brand .name .amp{color:var(--navy);font-style:normal;}
.brand .tag{font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:10.5px;letter-spacing:2px;
  text-transform:uppercase;color:var(--muted);background:none;padding:0;margin-top:2px;
  border:0;border-radius:0;}
.nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  font-family:Helvetica,Arial,sans-serif;font-size:13px;text-transform:uppercase;
  letter-spacing:1px;}
.nav a{color:var(--ink);opacity:.82;}
.nav a:hover,.nav a.active{color:var(--navy);opacity:1;text-decoration:none;}
.nav .search-link{border:1px solid var(--line);border-radius:20px;padding:6px 14px;color:var(--navy);opacity:1;}
.nav .search-link:hover{border-color:var(--navy);color:var(--navy);}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);color:var(--cream);
  padding:60px 22px 66px;text-align:center;border-bottom:1px solid var(--navy-deep);}
.hero .kicker{font-family:Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:3px;
  text-transform:uppercase;color:var(--gold-soft);margin-bottom:14px;}
.hero h1{font-size:44px;line-height:1.12;margin:0 auto 14px;max-width:16ch;}
.hero p{font-size:19px;color:#e2ddcf;max-width:60ch;margin:0 auto 26px;}
.btn{display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:14px;
  letter-spacing:.5px;padding:12px 26px;border-radius:7px;cursor:pointer;border:1px solid transparent;}
.btn-gold{background:var(--cream);color:var(--navy);font-weight:bold;}
.btn-gold:hover{background:#fff;text-decoration:none;}
.btn-ghost{border-color:var(--slate);color:var(--cream);margin-left:8px;}
.btn-ghost:hover{border-color:var(--cream);color:var(--cream);text-decoration:none;}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{background:var(--navy-deep);text-decoration:none;}

/* ---------- Section headings ---------- */
.section{padding:48px 0 8px;}
.section-head{display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:2px solid var(--line);padding-bottom:8px;margin-bottom:22px;flex-wrap:wrap;gap:8px;}
.section-head h2{font-size:27px;margin:0;}
.section-head .more{font-family:Helvetica,Arial,sans-serif;font-size:12px;text-transform:uppercase;
  letter-spacing:1px;color:var(--navy);}
.eyebrow{font-family:Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:2px;
  text-transform:uppercase;color:var(--navy);margin-bottom:6px;}

/* ---------- Cards grid ---------- */
.grid{display:grid;gap:20px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-5{grid-template-columns:repeat(5,1fr);gap:16px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  transition:transform .15s ease,box-shadow .15s ease;}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(38,41,31,.12);}
.card a{text-decoration:none;color:inherit;}
.card .body{padding:16px 18px 18px;}
.card h3{font-size:19px;margin:0 0 4px;line-height:1.25;}
.card .by{font-family:Helvetica,Arial,sans-serif;font-size:12.5px;color:var(--muted);margin:0 0 8px;}
.card p{font-size:14.5px;margin:0 0 10px;}
.tags{font-family:Helvetica,Arial,sans-serif;font-size:11px;display:flex;gap:6px;flex-wrap:wrap;}
.tag{background:var(--chip);border-radius:4px;padding:3px 9px;color:#4a423a;}
.tag.date{background:#eef0e7;color:var(--navy);border:1px solid #dfe3d5;}
.stars{color:var(--navy);letter-spacing:2px;}

/* book cover block */
.cover{aspect-ratio:2/3;background:linear-gradient(135deg,#efe9df,#ded4c6);
  display:flex;align-items:center;justify-content:center;overflow:hidden;}
.cover svg,.cover img{width:100%;height:100%;object-fit:cover;}
.cover .ph{font-family:Helvetica,Arial,sans-serif;font-size:12px;color:#9a8f80;padding:8px;text-align:center;}

/* ---------- Email CTA band ---------- */
.cta-band{background:var(--navy);color:var(--cream);border-radius:12px;padding:34px 30px;
  text-align:center;margin:40px 0;}
.cta-band h2{font-size:26px;margin:0 0 8px;}
.cta-band h2 .amp{color:var(--gold-soft);font-style:italic;}
.cta-band p{color:#e2ddcf;max-width:52ch;margin:0 auto 18px;}

/* ---------- Article (review/list posts) ---------- */
.post{max-width:760px;margin:0 auto;padding:38px 22px 20px;}
.post .eyebrow{margin-bottom:10px;}
.post h1{font-size:34px;line-height:1.2;margin:0 0 6px;}
.post .meta{font-family:Helvetica,Arial,sans-serif;font-size:13px;color:var(--muted);margin-bottom:22px;}
.post .lead{font-size:19px;color:#33302b;margin:0 0 22px;}
.post p{font-size:17px;margin:0 0 18px;}
.post h2{font-size:23px;margin:30px 0 8px;}
.post blockquote{border-left:3px solid var(--navy);margin:22px 0;padding:4px 0 4px 18px;
  font-style:italic;color:#463f37;}
.post .bookbox{display:flex;gap:18px;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:18px;margin:24px 0;}
.post .bookbox .cover{width:100px;flex:0 0 100px;border-radius:4px;border:1px solid var(--line);}
.breadcrumb{font-family:Helvetica,Arial,sans-serif;font-size:12px;color:var(--muted);
  text-transform:uppercase;letter-spacing:1px;}
.breadcrumb a{color:var(--navy);}

/* buy buttons */
.buy{display:flex;gap:8px;flex-wrap:wrap;font-family:Helvetica,Arial,sans-serif;font-size:13px;margin-top:6px;}
.buy a{padding:7px 14px;border-radius:6px;}
.buy a.amz{background:var(--navy);color:#fff;}
.buy a.alt{border:1px solid var(--navy);color:var(--navy);}
.buy a:hover{text-decoration:none;opacity:.9;}

/* ---------- Footer ---------- */
.site-foot{background:var(--navy);color:var(--slate);border-top:1px solid var(--navy-deep);margin-top:56px;}
.site-foot .cols{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:34px 22px 12px;
  max-width:var(--maxw);margin:0 auto;}
.site-foot .name{font-family:Georgia,serif;font-size:22px;color:var(--cream);}
.site-foot .name .amp{color:var(--gold-soft);font-style:italic;}
.site-foot .col h4{font-family:Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--gold-soft);margin:0 0 10px;}
.site-foot .col a{display:block;color:var(--slate);font-family:Helvetica,Arial,sans-serif;font-size:13px;
  margin:5px 0;}
.site-foot .col a:hover{color:var(--cream);text-decoration:none;}
.site-foot .legal{border-top:1px solid #35402f;padding:14px 22px;max-width:var(--maxw);margin:0 auto;
  font-family:Helvetica,Arial,sans-serif;font-size:11px;color:#93a08b;text-align:center;}

/* ---------- utilities ---------- */
.center{text-align:center;}
.muted{color:var(--muted);}
@media(max-width:1100px){
  .grid-5{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:820px){
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .grid-5{grid-template-columns:repeat(2,1fr);}
  .hero h1{font-size:34px;}
}
@media(max-width:560px){
  .grid-3,.grid-2,.grid-5{grid-template-columns:1fr;}
  .hero h1{font-size:29px;}
  .nav{gap:12px;font-size:12px;}
  .post .bookbox{flex-direction:column;}
}