/* Landing page for Story Books. Self-contained; does not touch the shared
   reading engine (story/book.css). Edit content in _data/landing.yml. */

:root{
  --ink:#1d1a16;
  --ink-soft:#5b5247;
  --paper:#faf6ef;
  --paper-2:#f3ece0;
  --line:#e4dac9;
  --bugs:#b4471f;     /* Book 1 accent (warm rust) */
  --romance:#b03a63;  /* Book 3 accent (warm rose) */
  --gold:#c98a2b;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Spectral", Georgia, serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, #fff5e6 0%, rgba(255,245,230,0) 60%),
    var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }

/* ── Top bar ───────────────────────────────────────────────── */
.lp-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(18px,5vw,56px);
  max-width:1100px; margin:0 auto;
}
.lp-brand{
  display:inline-flex; flex-direction:column; gap:2px;
  text-decoration:none; line-height:1.1;
}
.lp-logo{
  font-family:"Zilla Slab", sans-serif; font-weight:700;
  font-size:1.8rem; letter-spacing:-.01em; color:var(--ink);
}
.lp-logo-accent{ color:var(--bugs); }
.lp-logo-sub{
  font-family:"Zilla Slab", sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.15em;
  font-size:.66rem; color:var(--ink-soft);
}

/* ── Layout ────────────────────────────────────────────────── */
.lp{ max-width:1100px; margin:0 auto; padding:0 clamp(18px,5vw,56px); }

/* ── Hero ──────────────────────────────────────────────────── */
.lp-hero{ text-align:center; padding:clamp(36px,7vw,84px) 0 clamp(28px,5vw,56px); }
.lp-eyebrow{
  font-family:"Zilla Slab", sans-serif; text-transform:uppercase;
  letter-spacing:.22em; font-size:.78rem; font-weight:600;
  color:var(--gold); margin:0 0 14px;
}
.lp-title{
  font-family:"Zilla Slab", sans-serif; font-weight:700;
  font-size:clamp(2.1rem,6vw,3.6rem); line-height:1.05; margin:0 0 16px;
}
.lp-tagline{
  font-size:clamp(1.05rem,2.4vw,1.3rem); color:var(--ink-soft);
  max-width:34ch; margin:0 auto 36px;
}

/* Stats — a refined, contained panel with hairline dividers */
.lp-stats{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
  width:max-content; max-width:100%;
  gap:clamp(24px,6vw,60px);
  margin:0 auto 40px; padding:22px clamp(28px,5vw,52px);
  background:linear-gradient(180deg,#fffdf9 0%, #fbf6ee 100%);
  border:1px solid var(--line); border-radius:18px;
  box-shadow:0 1px 2px rgba(0,0,0,.03), 0 14px 34px rgba(60,40,20,.06);
}
.lp-stat{
  display:flex; flex-direction:column; align-items:center; position:relative;
  padding:2px 0; min-width:64px;
}
/* hairline divider between stats */
.lp-stat + .lp-stat::before{
  content:""; position:absolute; left:clamp(-12px,-3vw,-30px); top:8px; bottom:8px;
  width:1px; background:linear-gradient(180deg,transparent,var(--line) 22%,var(--line) 78%,transparent);
}
.lp-stat-n{
  font-family:"Zilla Slab", sans-serif; font-weight:700;
  font-size:clamp(2rem,5vw,2.9rem); line-height:1; color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.01em;
}
.lp-stat-n .lp-plus{ color:var(--gold); font-weight:600; margin-left:.02em; }
.lp-stat-l{
  font-family:"Zilla Slab", sans-serif; text-transform:uppercase;
  letter-spacing:.16em; font-size:.7rem; font-weight:600;
  color:var(--ink-soft); margin-top:10px;
}
@media (max-width:480px){
  .lp-stats{ gap:18px 26px; padding:18px 22px; }
  .lp-stat + .lp-stat::before{ left:-13px; }
}

.lp-cta{
  display:inline-block; font-family:"Zilla Slab", sans-serif; font-weight:600;
  text-decoration:none; color:var(--ink);
  border:1.5px solid var(--line); border-radius:999px;
  padding:11px 26px; transition:border-color .2s, transform .2s;
}
.lp-cta:hover{ border-color:var(--bugs); transform:translateY(-1px); }

/* ── Book cards ────────────────────────────────────────────── */
.lp-section-title{
  font-family:"Zilla Slab", sans-serif; font-weight:700;
  font-size:1.5rem; text-align:center;
  margin:clamp(24px,5vw,48px) 0 28px; position:relative;
}
.lp-section-title::after{
  content:""; display:block; width:52px; height:3px; border-radius:3px;
  background:var(--gold); margin:14px auto 0;
}
.lp-grid{
  display:grid; gap:clamp(16px,2.4vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(236px,282px));
  justify-content:center;
  padding-bottom:64px;
}
.lp-card{
  position:relative;
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.lp-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(60,40,20,.16);
}
.lp-card.accent-bugs:hover{ border-color:var(--bugs); }
.lp-card.accent-romance:hover{ border-color:var(--romance); }

/* Locked / "launching soon" teaser — no link, calmer hover */
.lp-card.is-locked{ cursor:default; }
.lp-card.is-locked:hover{
  transform:none; border-color:var(--line);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.lp-card.is-locked .lp-cover{ filter:saturate(.92) brightness(.99); }
.lp-soon{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Zilla Slab", sans-serif; font-weight:600; font-size:.95rem;
  color:var(--romance); background:rgba(176,58,99,.08);
  border:1px solid rgba(176,58,99,.25); border-radius:999px;
  padding:10px 18px;
}

.lp-cover-wrap{
  position:relative; background:var(--paper-2);
  display:flex; align-items:center; justify-content:center;
  padding:20px 20px 0;
}
.lp-cover{
  width:auto; max-width:62%; height:auto; border-radius:6px;
  box-shadow:0 8px 20px rgba(40,25,10,.26); display:block;
}
.lp-badge{
  position:absolute; top:14px; right:14px;
  font-family:"Zilla Slab", sans-serif; font-weight:600; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.08em;
  background:var(--romance); color:#fff; padding:4px 10px; border-radius:999px;
}

.lp-card-body{ padding:16px 18px 20px; display:flex; flex-direction:column; flex:1; }

/* genre / type tags */
.lp-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:11px; }
.lp-tag{
  font-family:"Zilla Slab", sans-serif; font-weight:600; font-size:.64rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft);
  background:var(--paper-2); border:1px solid var(--line);
  padding:3px 9px; border-radius:999px; line-height:1.5;
}

.lp-book-title{ font-family:"Zilla Slab", sans-serif; font-weight:700; font-size:1.18rem; line-height:1.15; margin:0 0 3px; }
.accent-bugs .lp-book-title{ color:var(--bugs); }
.accent-romance .lp-book-title{ color:var(--romance); }
.lp-book-sub{ font-style:italic; font-size:.92rem; color:var(--ink-soft); margin:0 0 5px; }
.lp-book-author{
  font-family:"Zilla Slab", sans-serif; text-transform:uppercase;
  letter-spacing:.1em; font-size:.68rem; color:var(--ink-soft); margin:0 0 11px;
}
.lp-book-blurb{
  margin:0 0 16px; font-size:.9rem; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* actions row — primary read button + optional buy link */
.lp-actions{ margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.lp-read{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-family:"Zilla Slab", sans-serif; font-weight:600; font-size:.9rem;
  color:#fff; background:var(--ink); border-radius:999px;
  padding:9px 16px; transition:background .2s, gap .2s;
}
.accent-bugs .lp-read{ background:var(--bugs); }
.accent-romance .lp-read{ background:var(--romance); }
.lp-card:hover .lp-read{ gap:10px; }
/* the primary Read link covers the whole card (no nested anchors) */
.lp-stretch::after{ content:""; position:absolute; inset:0; z-index:1; }
.lp-buy{
  position:relative; z-index:2;       /* sits above the stretched read link */
  display:inline-flex; align-items:center;
  font-family:"Zilla Slab", sans-serif; font-weight:600; font-size:.85rem;
  color:var(--ink); text-decoration:none;
  background:#fff; border:1.5px solid var(--line); border-radius:999px;
  padding:8px 15px; transition:border-color .2s, color .2s;
}
.lp-buy:hover{ border-color:var(--gold); color:var(--gold); }

/* ── Footer ────────────────────────────────────────────────── */
.lp-foot{
  border-top:1px solid var(--line); text-align:center;
  padding:28px 18px; color:var(--ink-soft); font-size:.9rem;
}
.lp-foot a{ color:var(--ink-soft); }
.lp-foot a:hover{ color:var(--bugs); }

@media (max-width:520px){
  .lp-cover{ max-width:58%; }
}