/* ============================================================
   Why Are We Born? — weekend-read micro-site
   Native to Chill & Shine: tokens/components mirror
   public_html/assets/css/base.css (rose + sage on warm cream,
   DM Serif Display + DM Sans). Self-contained & offline:
   fonts are named first with system fallbacks (no CDN), so the
   pages match the live site where the fonts exist and degrade
   gracefully otherwise. Never a dark page background.
   ============================================================ */

:root{
  --cream:#FDFBF8; --cream-dark:#F1EDE9; --white:#FFFFFF;
  --gold:#A8615A; --gold-deep:#934F49; --gold-light:#EAE4DD; --gold-glow:rgba(168,97,90,0.20);
  --rose-tint:rgba(168,97,90,0.10);
  --dark:#2E2A26; --warm-gray:#5C554E; --warm-gray-light:#9A9189;
  --soft-green:#6E8466; --sage-tint:rgba(110,132,102,0.13);
  --teal:#5E8C86; --teal-tint:rgba(94,140,134,0.12);
  --lav:#8C82A8; --lav-tint:rgba(140,130,168,0.14);
  --shadow-sm:0 1px 3px rgba(46,42,38,.05); --shadow-md:0 4px 12px rgba(46,42,38,.08);
  --shadow-gold:0 4px 20px rgba(168,97,90,.15);
  --radius:12px; --radius-sm:8px; --transition:.3s cubic-bezier(.4,0,.2,1);
  --font-display:'DM Serif Display',Georgia,'Times New Roman',serif;
  --font-body:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --measure:68ch;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--cream);color:var(--warm-gray);font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.25;color:var(--dark);font-weight:400;}
a{color:var(--gold);text-decoration:none;transition:color var(--transition);}
a:hover{color:var(--gold-deep);}
strong{color:var(--dark);font-weight:600;}
em{font-style:italic;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:12px;top:10px;background:var(--white);padding:8px 14px;border-radius:8px;z-index:200;box-shadow:var(--shadow-md);}
.wrap{max-width:760px;margin:0 auto;padding:0 24px;}
.prose{max-width:var(--measure);}

/* ── Site nav (mirrors the live header) ── */
.nav{position:sticky;top:0;z-index:100;background:rgba(253,251,248,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--gold-light);}
.nav-inner{max-width:1100px;margin:0 auto;padding:0 24px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.nav-logo{font-family:var(--font-display);font-size:1.5rem;color:var(--dark);display:flex;align-items:center;gap:10px;}
.nav-logo:hover{color:var(--dark);}
.nav-logo .logo-icon{width:36px;height:36px;border-radius:50%;overflow:hidden;box-shadow:var(--shadow-gold);flex:0 0 auto;}
.nav-crumbs{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--warm-gray-light);flex-wrap:wrap;justify-content:flex-end;}
.nav-crumbs a{font-weight:500;color:var(--warm-gray);}
.nav-crumbs a:hover{color:var(--gold);}
.nav-crumbs .sep{color:var(--gold-light);}

/* ── Hero / covers ── */
.hero{padding:64px 0 34px;text-align:center;background:linear-gradient(180deg,var(--cream) 0%,var(--cream-dark) 100%);border-bottom:1px solid var(--gold-light);}
.eyebrow{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;}
.hero h1{font-size:2.7rem;line-height:1.12;margin-bottom:14px;}
.hero .thai{font-family:var(--font-body);color:var(--gold);font-weight:500;font-size:1.02rem;margin-bottom:14px;}
.hero .lead{color:var(--warm-gray);font-size:1.12rem;font-weight:300;max-width:600px;margin:0 auto;}
.hero .meta{margin-top:22px;font-size:.85rem;color:var(--warm-gray-light);}
.hero .meta strong{color:var(--dark);}

/* ── Chapter header ── */
.chead{padding:46px 0 6px;}
.chead .kicker{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);background:var(--rose-tint);padding:5px 12px;border-radius:100px;margin-bottom:14px;}
.chead h1{font-size:2.15rem;line-height:1.15;margin-bottom:6px;}
.chead .thai{font-family:var(--font-body);font-style:italic;color:var(--warm-gray-light);font-size:.98rem;}

/* ── Prose ── */
.prose{padding:6px 0 10px;font-size:1.06rem;line-height:1.8;color:var(--dark);}
.prose p{margin-bottom:20px;}
.prose h2{font-size:1.5rem;margin:36px 0 12px;}
.prose h3{font-size:1.2rem;margin:28px 0 10px;color:var(--gold-deep);}
.prose ul,.prose ol{margin:0 0 20px 24px;}
.prose li{margin-bottom:8px;}
.prose .pali{font-style:italic;}
.muted{color:var(--warm-gray-light);font-size:.92rem;}

/* ── The teacher's own verse (source quote) ── */
.verse{border-left:4px solid var(--gold);background:var(--white);padding:18px 24px;margin:28px 0;border-radius:0 var(--radius-sm) var(--radius-sm) 0;box-shadow:var(--shadow-sm);}
.verse p{font-family:var(--font-display);font-size:1.16rem;line-height:1.5;color:var(--dark);margin:0;}
.verse .src{display:block;font-family:var(--font-body);font-size:.78rem;color:var(--warm-gray-light);margin-top:10px;}

/* =========================================================
   EDITORIAL OVERLAY — the adapter's voice. Always tinted +
   labelled so it's never mistaken for the source teaching.
   ========================================================= */
.box{border-radius:var(--radius);padding:18px 22px;margin:26px 0;border:1px solid transparent;border-left-width:4px;font-size:1rem;line-height:1.7;}
.box .lab{display:flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;margin-bottom:9px;}
.box .lab::before{content:"";width:9px;height:9px;border-radius:50%;}
.box p{margin-bottom:12px;color:var(--warm-gray);}
.box p:last-child{margin-bottom:0;}
.box strong{color:var(--dark);}
.box.takeaway{background:var(--sage-tint);border-left-color:var(--soft-green);}
.box.takeaway .lab{color:#4f7a52;} .box.takeaway .lab::before{background:var(--soft-green);}
.box.lens{background:var(--teal-tint);border-left-color:var(--teal);}
.box.lens .lab{color:#3f6f69;} .box.lens .lab::before{background:var(--teal);}
.box.gloss{background:var(--lav-tint);border-left-color:var(--lav);}
.box.gloss .lab{color:#5f5484;} .box.gloss .lab::before{background:var(--lav);}

/* ── Prev/next + boundary nav ── */
.pager{display:flex;gap:12px;margin:40px 0 6px;}
.pager a,.pager span{flex:1;display:flex;flex-direction:column;gap:3px;padding:14px 18px;border:1px solid var(--gold-light);border-radius:var(--radius-sm);background:var(--white);}
.pager a{transition:all var(--transition);}
.pager a:hover{border-color:var(--gold);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.pager .dir{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--warm-gray-light);}
.pager .ttl{font-family:var(--font-display);font-size:1rem;color:var(--dark);}
.pager .next{text-align:right;align-items:flex-end;}
.pager .cross{border-style:dashed;}
.pager .disabled{opacity:.45;}
.subnav{margin:18px 0 0;text-align:center;font-size:.85rem;color:var(--warm-gray-light);}
.subnav a{font-weight:600;}
.subnav .sep{margin:0 8px;color:var(--gold-light);}

/* ── Table of contents (book & series) ── */
.toc{list-style:none;counter-reset:c;margin:8px 0;padding:0;}
.toc li{counter-increment:c;}
.toc a{display:flex;gap:15px;align-items:baseline;padding:14px 6px;border-top:1px solid var(--gold-light);color:var(--dark);}
.toc li:first-child a{border-top:0;}
.toc a:hover{color:var(--gold);}
.toc a .n{font-family:var(--font-display);font-size:1.05rem;color:var(--gold);min-width:24px;}
.toc a .t{font-weight:500;}
.toc a .d{display:block;color:var(--warm-gray-light);font-size:.88rem;font-weight:400;margin-top:1px;}

/* ── Book cards (series index) ── */
.books{display:grid;gap:20px;margin:14px 0;}
.bookcard{display:block;background:var(--white);border:1px solid var(--gold-light);border-radius:var(--radius);padding:22px 24px;transition:all var(--transition);}
.bookcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--gold);text-decoration:none;}
.bookcard .vol{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);}
.bookcard h3{font-size:1.35rem;margin:5px 0 6px;}
.bookcard p{color:var(--warm-gray);font-size:.98rem;margin:0;}

/* ── Cards / callouts on index ── */
.card{background:var(--white);border:1px solid var(--gold-light);border-radius:var(--radius);padding:24px 26px;margin:22px 0;box-shadow:var(--shadow-sm);}
.card h2{font-size:1.35rem;margin-bottom:10px;}
.card h3{font-family:var(--font-body);font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:16px 0 8px;}
.card p{margin-bottom:12px;} .card p:last-child{margin-bottom:0;}
.legend{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px;}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;color:var(--dark);background:var(--cream);border:1px solid var(--gold-light);border-radius:100px;padding:6px 13px;}
.chip .dot{width:10px;height:10px;border-radius:50%;}
.chip.t .dot{background:var(--soft-green);} .chip.l .dot{background:var(--teal);}
.chip.g .dot{background:var(--lav);} .chip.v .dot{background:var(--gold);}
.glossary{list-style:none;margin:6px 0 0;padding:0;}
.glossary li{padding:10px 0;border-top:1px solid var(--gold-light);}
.glossary li:first-child{border-top:0;}
.glossary .term{font-weight:700;color:var(--dark);}
.src-dl dt{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-top:15px;}
.src-dl dd{margin:3px 0 0;color:var(--dark);}

/* ── Footer (mirrors the live dark bookend) ── */
.footer{background:#2A2520;color:rgba(253,251,248,.7);padding:44px 0 34px;margin-top:52px;}
.footer-inner{max-width:760px;margin:0 auto;padding:0 24px;}
.footer h3{font-size:1.2rem;color:var(--gold);margin-bottom:10px;}
.footer p{font-size:.88rem;line-height:1.7;margin-bottom:8px;}
.footer a{color:var(--gold);}
.footer .links{margin:10px 0;display:flex;gap:18px;flex-wrap:wrap;font-size:.85rem;}
.footer .fine{font-size:.78rem;color:rgba(253,251,248,.5);margin-top:18px;padding-top:16px;border-top:1px solid rgba(253,251,248,.12);}

@media(max-width:640px){
  body{font-size:16px;}
  .hero h1{font-size:2.05rem;} .chead h1{font-size:1.7rem;}
  .nav-logo{font-size:1.25rem;} .nav-inner{height:64px;}
  .pager{flex-direction:column;} .pager .next{text-align:left;align-items:flex-start;}
}