/* =====================================================================
   THE HERBAL ALCHEMIST — bespoke series microsite
   Botanical apothecary: warm parchment & cream, sage/forest green, gold
   and copper, vintage serif. Earthy, hand-crafted, light — distinct from
   every other series. Showcases the guide's illustrated plant pages.
   ===================================================================== */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/fraunces-400.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/fraunces-600.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/fraunces-400-italic.woff2') format('woff2');}

body[data-page="herbal"]{
  --paper:#efe7d0; --paper-2:#e6dbbe; --card:#f6efdc; --ink:#2c2718; --muted:#6a5f44; --line:rgba(74,103,65,.24);
  --green:#48623d; --green-2:#5f7d4e; --gold:#b8923f; --copper:#a4673a;
  --serif:'Fraunces',Georgia,serif; --sans:'Archivo',system-ui,sans-serif;
  background:var(--paper); color:var(--ink); padding-top:var(--nav-h); font-family:var(--sans);
  line-height:1.7; overflow-x:hidden;
}
.hb{max-width:1140px;margin-inline:auto;padding-inline:clamp(18px,4vw,44px)}
.hb-narrow{max-width:720px}
body[data-page="herbal"] h1,body[data-page="herbal"] h2,body[data-page="herbal"] h3{font-family:var(--serif);font-weight:600;line-height:1.1}
.hb-kicker{font-family:var(--sans);text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;color:var(--green);font-weight:700}
.hb-rule{display:flex;align-items:center;gap:.8rem;color:var(--gold);justify-content:center}
.hb-rule::before,.hb-rule::after{content:"❧";font-size:.9rem}
.hb-rule span{height:1px;width:50px;background:linear-gradient(90deg,transparent,var(--gold))}
.hb-em{color:var(--copper);font-style:italic}

/* ---- HERO ---------------------------------------------------------- */
.hb-hero{position:relative;min-height:min(82vh,720px);display:flex;align-items:flex-end;overflow:hidden}
.hb-hero .bg{position:absolute;inset:0;z-index:-1}
.hb-hero .bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hb-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,16,8,.82) 4%,rgba(20,16,8,.35) 45%,transparent 80%)}
.hb-hero .inner{position:relative;z-index:1;padding-block:clamp(34px,6vw,70px);color:#f6efdc;max-width:680px}
.hb-hero .crumb a{color:#e8cf8f;font-weight:600;font-size:.85rem}
.hb-hero .hb-kicker{color:#cdd9ac}
.hb-hero h1{font-size:clamp(2.4rem,6.4vw,4.8rem);margin:.4rem 0 .4rem;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.hb-hero p.tag{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2.4vw,1.7rem);color:#e8cf8f}
.hb-hero .cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
.btn-leaf{display:inline-flex;align-items:center;gap:.5em;background:linear-gradient(180deg,var(--green-2),var(--green));color:#f6efdc;font-weight:700;
  padding:.95em 1.7em;border-radius:6px;box-shadow:0 14px 40px -16px rgba(72,98,61,.8);transition:transform .18s,box-shadow .18s}
.btn-leaf:hover{transform:translateY(-2px)}
.btn-bark{display:inline-flex;align-items:center;gap:.5em;border:1.5px solid rgba(255,255,255,.45);color:#f6efdc;font-weight:600;padding:.95em 1.6em;border-radius:6px;transition:.18s}
.btn-bark:hover{border-color:var(--gold);color:#e8cf8f}

/* ---- PREMISE ------------------------------------------------------- */
.hb-premise{padding:clamp(52px,7vw,104px) 0;text-align:center}
.hb-premise h2{font-size:clamp(1.9rem,4.4vw,3rem);margin:1rem auto;max-width:22ch}
.hb-premise p{color:var(--muted);max-width:60ch;margin:0 auto;font-size:1.1rem}

/* ---- WHAT'S INSIDE (sections) -------------------------------------- */
.hb-inside{padding:clamp(52px,7vw,104px) 0;background:linear-gradient(180deg,var(--paper-2),var(--paper))}
.hb-head{text-align:center;max-width:680px;margin:0 auto clamp(28px,4vw,48px)}
.hb-head h2{font-size:clamp(2rem,4.4vw,3.2rem);margin:.6rem 0}
.hb-head p{color:var(--muted)}
.sect-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.8vw,18px)}
@media(max-width:860px){.sect-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.sect-grid{grid-template-columns:1fr}}
.sect{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:clamp(18px,2.2vw,24px);transition:transform .25s,box-shadow .25s}
.sect:hover{transform:translateY(-4px);box-shadow:0 16px 36px -24px rgba(44,39,24,.5)}
.sect .ico{font-size:1.5rem;margin-bottom:.5rem}
.sect h3{font-size:1.05rem;margin-bottom:.25rem}
.sect p{color:var(--muted);font-size:.84rem}

/* ---- PEEK INSIDE (plant pages) ------------------------------------- */
.hb-peek{padding:clamp(52px,7vw,104px) 0}
.peek-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px)}
@media(max-width:820px){.peek-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.peek-grid{grid-template-columns:1fr;max-width:340px;margin-inline:auto}}
.peek{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 16px 40px -26px rgba(44,39,24,.6);transition:transform .3s}
.peek:hover{transform:translateY(-5px) rotate(-.5deg)}
.peek img{width:100%;display:block}
.peek figcaption{padding:.7rem .9rem;font-family:var(--serif);font-style:italic;color:var(--green);text-align:center;border-top:1px solid var(--line)}

/* ---- VOLUMES ------------------------------------------------------- */
.hb-vols{padding:clamp(52px,7vw,104px) 0;background:linear-gradient(180deg,var(--paper-2),var(--paper))}
.vol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
@media(max-width:760px){.vol-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}
.vol{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;text-align:center;transition:transform .3s,box-shadow .3s}
.vol:hover{transform:translateY(-5px);box-shadow:0 20px 44px -26px rgba(44,39,24,.6)}
.vol .cv{overflow:hidden;aspect-ratio:540/820}
.vol .cv img{width:100%;height:100%;object-fit:cover}
.vol .v-body{padding:18px 20px 22px}
.vol .num{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold);font-weight:700}
.vol h3{font-size:1.2rem;margin:.2rem 0 .5rem}
.vol .badge{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.3em .7em;border-radius:999px;border:1px solid var(--copper);color:var(--copper)}

/* ---- CTA ----------------------------------------------------------- */
.hb-cta{padding:clamp(56px,8vw,120px) 0;text-align:center}
.hb-cta h2{font-size:clamp(2rem,5vw,3.2rem);margin:1rem 0}
.hb-cta p{color:var(--muted);max-width:50ch;margin:0 auto 2rem}
.hb-cta .cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}