/* Fonts: Bree Serif (headings), Inter (body) */
:root{--forest:#0C3B2E; --honey:#E4A936; --cream:#F6F1E7; --charcoal:#2B2B2B; --brick:#A9472C;}
*{box-sizing:border-box}
body{margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--charcoal); background:#fff;}
h1,h2,h3{font-family:"Bree Serif", Georgia, serif; margin:0 0 .5rem}
.section{padding:64px 20px}
.section.alt{background:var(--cream)}
.wrap{max-width:980px;margin:0 auto}
.hero{position:relative; min-height:68vh; display:grid; place-items:center; color:#fff;}
.hero__image{position:absolute; inset:0; background:url('assets/img/cover.jpg') center/cover no-repeat; filter:brightness(.55)}
.hero__content{position:relative; text-align:center; padding:40px}
.hero h1{font-size:48px; line-height:1.1}
.hero .vol{font-size:22px; display:block; opacity:.85}
.hero .tag{font-size:20px; margin:.5rem 0 1rem}
.cta{display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
.btn{background:var(--forest); color:#fff; padding:12px 18px; border-radius:8px; text-decoration:none; border:2px solid transparent; font-weight:600}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background-color:transparent; border-color:#fff}
.btn.amazon{background:#FF9900; color:#111}
.btn.bn{background:#2A5934}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.card{background:#fff; border:1px solid #eee; border-radius:12px; padding:16px; box-shadow:0 2px 8px #0000000d}
blockquote{background:#faf7ef; border-left:6px solid var(--honey); padding:16px; border-radius:8px}
pre.prelude{white-space:pre-wrap; background:#fff; border:1px dashed #ddd; border-radius:8px; padding:16px}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
label{display:block; font-weight:600; margin:4px 0}
input,textarea{width:100%; padding:10px 12px; border:1px solid #ccc; border-radius:8px; font:inherit}
.hidden{display:none}
.footer{background:#111; color:#ddd; padding:24px 20px}
.footer a{color:#fff}
.small{font-size:.9rem; color:#555}
@media (max-width:640px){ .grid{grid-template-columns:1fr} .hero h1{font-size:36px}}