/* Elegant, conversion‑focused theme */
:root{
  --ink:#0f172a; --muted:#64748b; --bg:#f6f7fb; --card:#ffffff;
  --brand:#0ea5e9; --brand-600:#0284c7; --accent:#0b3954; --accent-2:#bfd7ea;
  --ring: 0 10px 30px rgba(2,132,199,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{overflow-x:hidden;}

body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}

/* Header */
.site{
  position:sticky; top:0; z-index:20;
  background:var(--accent); color:var(--accent-2);
  box-shadow:0 2px 0 rgba(0,0,0,.05);
}
.site .wrap{max-width:1200px;margin:0 auto;padding:.9rem 1rem;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;letter-spacing:.2px}
nav a{color:var(--accent-2);text-decoration:none;margin-left:1rem;opacity:.9}
nav a:hover{opacity:1}
main{max-width:1200px;margin:0 auto;padding:1.5rem 1rem}

/* HERO (clean, consolidated) */
.hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;   /* text left, image right */
  gap: 2rem;
  align-items: start;                  /* top-align columns */
  background: var(--card);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: var(--ring);
}

.hero h1{ font-size: 2.2rem; line-height: 1.15; margin: .2rem 0 .4rem }
.hero p{ margin: .25rem 0 }
.hero .note{ font-size: .9rem; color: var(--muted) }

/* Let grid children shrink (prevents text/image squish) */
.hero > * { min-width: 0; }

/* Hero image (no crop, no stretch) */
.hero .hero-art {
  display: block;
  width: 100%;               /* NEW: lets margin:auto center the image */
  max-width: 100%;
  height: auto;              /* never stretches */
  object-fit: contain;       /* never crops */
  object-position: center;
  border-radius: 16px;
  max-height: 440px;         /* adjust to taste (e.g., 420–520px) */
}

/* Mobile: stack & center the image */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }

  /* Center the <picture> grid item horizontally */
  .hero picture { justify-self: center; max-width: 100%; }

  /* Keep the image centered and capped in width */
  .hero .hero-art {
    width: 100%;
    max-width: 520px;
    margin: 12px auto 0;     /* centers within the picture */
    object-position: center;
  }
}


/* Prevent tiny horizontal overflow on small screens */
.hero{ overflow-x:hidden; }
.hero picture{ display:block; max-width:100%; }


/* Section heading */
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin:1.75rem 0 .75rem}
.section-head h2{margin:0;font-size:1.5rem}
.section-head .hint{color:var(--muted);font-size:.95rem}

/* Card grid */
.grid{display:grid; gap:1.1rem}
.grid-3{grid-template-columns: repeat(3, 1fr)}
@media (max-width: 1024px){ .grid-3{grid-template-columns: repeat(2,1fr)} }
@media (max-width: 640px){
  .grid-3 { grid-template-columns: 1fr; }
}


.card{
  background:var(--card); border-radius:16px; padding:1rem; box-shadow:var(--ring);
  display:flex; flex-direction:column; gap:.5rem; transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(2,132,199,.15) }
/* Base (mobile-first) */
.cover{
  width:100%;
  height:auto;
  aspect-ratio: 5 / 8;   /* 938:1500 = 5:8 */
  object-fit: cover;
}

.title{font-size:1.05rem; margin:.15rem 0}
.sub{color:var(--muted); font-size:.92rem; margin-top:-.25rem}
.meta{display:flex; gap:.4rem; flex-wrap:wrap; margin:.15rem 0 .1rem}
.badge{background:#e0f2fe;color:#0c4a6e;border-radius:999px;padding:.25rem .55rem;font-size:.75rem}
.actions{margin-top:auto; display:flex; gap:.5rem; flex-wrap:wrap}
.btn{display:inline-block; padding:.62rem 1rem; border-radius:999px; text-decoration:none; background:var(--brand); color:#fff; font-weight:600}
.btn:hover{background:var(--brand-600)}
.btn.secondary{background:transparent; border:1px solid #e2e8f0; color:#0f172a}
.btn.secondary:hover{border-color:#cbd5e1}

/* Breadcrumbs & details page layout */
.breadcrumbs{font-size:.9rem;color:var(--muted);margin: .25rem 0 1rem}
.detail{display:grid; grid-template-columns: 1fr 1.6fr; gap:1.25rem}
@media (max-width: 900px){ .detail{grid-template-columns:1fr} }

/* Details page: show full image, no cropping */
.detail .cover{
  aspect-ratio: 2/3;      /* or 5 / 8 if you want even taller */
  object-fit: contain;       /* no cropping */
  background:#fff;           /* subtle letterbox if ratios vary */
  padding:8px;               /* optional frame */
}
.feature-list{padding-left:1.15rem}
.hr{height:1px;background:#e5e7eb;margin:1rem 0}
.bottom-nav{display:flex;gap:.5rem;flex-wrap:wrap}

/* Footer */
footer{margin:2rem 0 1rem; text-align:center; color:var(--muted)}

/* About series */
.about-series{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:1.25rem;
}
@media (max-width: 900px){ .about-series{grid-template-columns:1fr} }
.about-col p{margin:.3rem 0 .6rem}
.stats{display:flex; gap:1rem; flex-wrap:wrap; margin:.8rem 0}
.stat{background:#f1f5f9;border-radius:12px;padding:.6rem .8rem;min-width:110px;text-align:center}
.stat-val{font-weight:800; font-size:1.2rem}
.stat-key{color:var(--muted); font-size:.8rem}

.covers-col .covers-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.covers-col img{
  width:100%; border-radius:12px; object-fit:cover; aspect-ratio: 2/3;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}

/* Author band */
.author-band{
  display:grid; grid-template-columns: .9fr 1.1fr; gap:1.25rem; align-items:center;
}
@media (max-width: 900px){ .author-band{grid-template-columns:1fr} }
.author-media img{width:100%; border-radius:16px; display:block; box-shadow:var(--ring)}
.author-body p{margin:.3rem 0 .6rem}

/* Testimonials */
.testimonials .quotes,
.inside .quotes{
  display:grid; gap:.8rem; grid-template-columns: repeat(3,1fr);
}
@media (max-width: 900px){ .testimonials .quotes, .inside .quotes{grid-template-columns:1fr} }
.quotes blockquote{
  margin:0; padding:1rem; background:#f8fafc; border-radius:12px; border:1px solid #e2e8f0;
}
.quotes footer{color:var(--muted); font-size:.85rem; margin-top:.4rem}
.quotes.compact{grid-template-columns: repeat(2,1fr)}
@media (max-width: 900px){ .quotes.compact{grid-template-columns:1fr} }

/* FAQ */
.faq details{border:1px solid #e2e8f0; border-radius:12px; padding:.75rem 1rem; background:#fff}
.faq details + details{margin-top:.6rem}
.faq summary{cursor:pointer; font-weight:600}
.faq p{margin:.6rem 0 0}

/* Detail-page interior section styling */
.card.inside{
  background: var(--card);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: var(--ring);
  margin: 1rem 0;
}
.quotes.compact{
  display:grid;
  gap:.75rem;
}
.quotes.compact blockquote{
  margin:0;
  padding:.75rem 1rem;
  border-left:4px solid var(--brand);
  background:#f8fafc;
  border-radius:8px;
}
.quotes.compact footer{
  font-size:.85rem;
  color:var(--muted);
  margin-top:.25rem;
}

/* ===== EXPERIMENT: Option A (start) ===== */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 1rem;                 /* reduce white edge */
  }

  .hero picture { justify-self: center; max-width: 100%; }

  .hero .hero-art {
    width: 100%;
    max-width: 640px;              /* was 520px; try 600–680 */
    margin: 12px auto 0;           /* centered */
    max-height: 560px;             /* optional: taller */
    object-position: center;
  }
}

/* ===== EXPERIMENT: Option A (end) ===== */

/* === FAQ accordion (global) === */
.card.faq details {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
  background: #fff;
}

.card.faq details[open] {
  background: #f9fafb;
}

.card.faq summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.card.faq summary::-webkit-details-marker { display: none; }

/* Chevron indicator */
.card.faq summary::after {
  content: "▸";
  float: right;
  transition: transform 0.2s ease;
}
.card.faq details[open] summary::after {
  transform: rotate(90deg);
}

.card.faq p { margin-top: 0.5rem; }

/* FAQ icon: + that rotates on open */
.card.faq summary::-webkit-details-marker { display: none; }

.card.faq summary::after {
  content: "+";
  display: inline-block;
  width: 1em;
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  margin-left: .5rem;
  transition: transform .25s ease;
}

.card.faq details[open] summary::after {
  transform: rotate(360deg);
}

/* Book detail H1 (match old size) */
.card.detail h1.title{
  font-size: 1.6rem;
  line-height: 1.35;
  margin: .15rem 0 .35rem;
}


/* Compact spacing inside the “What’s inside / Who it’s for / What readers say” panel */
.card.detail .inside { padding: 1rem 1rem; }

.card.detail .inside h2{
  margin: .75rem 0 .4rem;
}

/* lists under each heading */
.card.detail .inside .feature-list{ margin: 0 0 .55rem; }
.card.detail .inside .feature-list li{ margin: .2rem 0; }

/* the divider line */
.card.detail .inside .hr,
.card.detail .inside hr{
  margin: .5rem 0;                 /* tighten the band */
}

/* prevent double spacing after a divider (hr + next h2) */
.card.detail .inside .hr + h2,
.card.detail .inside hr + h2{
  margin-top: .35rem;
}

/* quotes block */
.card.detail .inside .quotes{ margin: .6rem 0; }
.card.detail .inside blockquote{ margin: .4rem 0; }


/* Profile extras */
.profile-extras h2{ margin: .6rem 0 .4rem; }

/* icon buttons row */
.social-links{
  display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 .8rem;
}
.icon-btn{
  display: inline-flex; align-items: center; gap: .45rem;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 999px;
  padding: .45rem .75rem; font-weight: 600; text-decoration: none; color: #0f172a;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.icon-btn:hover{ transform: translateY(-1px); box-shadow: 0 4px 10px rgba(2,6,23,.08); }

/* education badges row */
.edu-row{
  list-style: none; padding: 0; margin: .4rem 0 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.edu-badge{
  display: inline-flex; align-items: center; gap: .4rem;
  background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: .4rem .6rem; font-weight: 600;
}

/* ===== Profile extras (About page) ===== */
.card.profile-extras { padding-top: 1.25rem; }

.profile-extras .social-links{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem .8rem;
  margin: .25rem 0 1rem;
}

.profile-extras .icon-btn{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .68rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  text-decoration: none;
  color: inherit; /* use site text color */
  line-height: 1;
  transition: box-shadow .2s ease, transform .05s ease;
}
.profile-extras .icon-btn:hover{
  box-shadow: 0 4px 10px rgba(2,6,23,.08);
  transform: translateY(-1px);
}
.profile-extras .icon-btn svg{
  display: block; 
  opacity: .9;
}

/* divider inside card */
.profile-extras .hr{
  height:1px; background:#e5e7eb; margin: 1rem 0 1.1rem;
}

/* Education row */
.profile-extras .edu-row{
  display:flex; flex-wrap:wrap; gap:.6rem .7rem;
  list-style:none; margin:.4rem 0 0; padding:0;
}
.profile-extras .edu-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.42rem .68rem;
  border:1px solid #e5e7eb; border-radius:999px;
  background:#fff; white-space:nowrap;
}
.profile-extras .edu-badge svg{ opacity:.85; }