/* ═══════════════════════════════════════════════════════════
   Leafwright Press — MVP landing page
   Palette: paper cream · deep leaf green · terracotta accent
   ═══════════════════════════════════════════════════════════ */

:root{
  --cream:        #FDF9F2;
  --cream-deep:   #F6EEE1;
  --paper:        #FFFFFF;

  --leaf:         #1F4D36;
  --leaf-mid:     #2E6B4C;
  --leaf-soft:    #7BA98F;
  --leaf-wash:    #E8F1EA;

  --clay:         #D9764A;
  --clay-soft:    #F5D9C9;
  --butter:       #F2C14E;

  --ink:          #22302A;
  --ink-soft:     #5A6B62;
  --line:         #E6DFD2;

  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;

  --shadow-sm: 0 2px 8px rgba(34,48,42,.06);
  --shadow:    0 12px 32px rgba(34,48,42,.10);
  --shadow-lg: 0 28px 60px rgba(34,48,42,.16);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1160px;
  --pad:  clamp(20px, 5vw, 40px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 .5em;
  color:var(--leaf);
}
h1{ font-size:clamp(2.4rem, 6vw, 4.1rem); }
h2{ font-size:clamp(1.9rem, 4vw, 2.9rem); }
h3{ font-size:1.16rem; font-weight:600; }
p{ margin:0 0 1.1em; }
a{ color:var(--leaf-mid); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.eyebrow{
  font-size:.76rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--clay); margin:0 0 .8em;
}
.eyebrow-light{ color:var(--butter); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--leaf); color:var(--cream);
  padding:12px 20px; border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--clay); outline-offset:3px; border-radius:4px; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--sans); font-weight:700; font-size:.97rem;
  padding:.85em 1.7em; border-radius:100px;
  text-decoration:none; border:2px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  cursor:pointer; white-space:nowrap;
}
.btn-sm{ padding:.7em 1.4em; font-size:.9rem; }

.btn-primary{ background:var(--leaf); color:var(--cream); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--leaf-mid); transform:translateY(-2px); box-shadow:var(--shadow); }

.btn-ghost{ background:transparent; color:var(--leaf); border-color:var(--leaf-soft); }
.btn-ghost:hover{ background:var(--leaf-wash); border-color:var(--leaf-mid); transform:translateY(-2px); }

.btn-cream{ background:var(--cream); color:var(--leaf); box-shadow:var(--shadow); }
.btn-cream:hover{ background:var(--paper); transform:translateY(-2px); }

.btn-outline-cream{ background:transparent; color:var(--cream); border-color:rgba(253,249,242,.45); }
.btn-outline-cream:hover{ background:rgba(253,249,242,.12); border-color:var(--cream); transform:translateY(-2px); }

.ig-icon{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; }
.ig-icon .ig-dot{ fill:currentColor; stroke:none; }

/* ── Header ──────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(253,249,242,.86);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.site-header.scrolled{ border-bottom-color:var(--line); box-shadow:var(--shadow-sm); }

.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:76px; }

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand picture{ display:block; flex:none; line-height:0; }
.brand-mark{
  display:block; width:38px; height:auto; flex:none;
  transition:transform .25s ease;
}
.brand:hover .brand-mark{ transform:rotate(-4deg) scale(1.05); }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-family:var(--serif); font-size:1.24rem; font-weight:700; color:var(--leaf); }
.brand-sub{
  font-size:.62rem; font-weight:700; letter-spacing:.3em;
  text-transform:uppercase; color:var(--leaf-soft); margin-top:3px;
}

.site-nav{ display:flex; align-items:center; gap:6px; }
.site-nav a{
  padding:.5em .95em; border-radius:100px; text-decoration:none;
  font-weight:600; font-size:.94rem; color:var(--ink-soft);
  transition:color .18s ease, background .18s ease;
}
.site-nav a:hover{ color:var(--leaf); background:var(--leaf-wash); }
.site-nav .nav-cta{
  background:var(--leaf); color:var(--cream); margin-left:8px; padding:.55em 1.3em;
}
.site-nav .nav-cta:hover{ background:var(--leaf-mid); color:var(--cream); }

/* ── Hero ────────────────────────────────────────────────── */
.hero{ position:relative; padding:clamp(56px,9vw,104px) 0 clamp(90px,12vw,140px); overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(760px 460px at 12% 0%, var(--leaf-wash) 0%, transparent 62%),
    radial-gradient(620px 420px at 92% 18%, #FCEFE4 0%, transparent 60%);
}
.hero-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(32px,5vw,72px); align-items:center;
}
.hero h1{ margin-bottom:.35em; }
.hero h1 em{
  font-style:italic; color:var(--clay); position:relative; white-space:nowrap;
}
.hero h1 em::after{
  content:""; position:absolute; left:2%; right:2%; bottom:.06em; height:.16em;
  background:var(--butter); opacity:.45; border-radius:100px; z-index:-1;
}
.lede{ font-size:clamp(1.04rem,1.7vw,1.19rem); color:var(--ink-soft); max-width:47ch; }

.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin:1.9em 0 1.5em; }

.hero-note{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.88rem; font-weight:600; color:var(--ink-soft); margin:0;
}
.pulse{
  width:8px; height:8px; border-radius:50%; background:var(--clay); flex:none;
  box-shadow:0 0 0 0 rgba(217,118,74,.55); animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(217,118,74,.5); }
  70%{ box-shadow:0 0 0 11px rgba(217,118,74,0); }
  100%{ box-shadow:0 0 0 0 rgba(217,118,74,0); }
}

/* Hero art — CSS book stack */
.hero-art{ position:relative; display:grid; place-items:center; min-height:380px; }

.blob{ position:absolute; border-radius:50%; filter:blur(46px); z-index:0; }
.blob-1{ width:290px; height:290px; background:rgba(123,169,143,.36); top:2%; left:2%; }
.blob-2{ width:230px; height:230px; background:rgba(242,193,78,.34); bottom:4%; right:4%; }

.book-stack{ position:relative; z-index:1; width:min(300px,74vw); aspect-ratio:3/4; }

.book{
  position:absolute; inset:0; border-radius:6px 12px 12px 6px;
  box-shadow:var(--shadow-lg);
}
.book-back{
  background:var(--leaf-soft);
  transform:rotate(-8deg) translate(-24px,10px) scale(.955);
  opacity:.55;
}
.book-mid{
  background:var(--clay-soft);
  transform:rotate(-4deg) translate(-11px,5px) scale(.98);
  opacity:.8;
}
.book-front{
  background:var(--paper);
  transform:rotate(2.5deg);
  animation:float 7s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform:rotate(2.5deg) translateY(0); }
  50%{ transform:rotate(2.5deg) translateY(-13px); }
}

.book-front picture{ display:block; position:absolute; inset:0; }
.book-img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  border-radius:6px 12px 12px 6px;
  border-left:9px solid var(--leaf);
}

.hero-wave{
  position:absolute; bottom:-1px; left:0; right:0; height:70px; z-index:1;
  background:var(--paper);
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70V26c180-24 340 12 520 18s340-30 520-24 260 34 400 26v24z' fill='%23000'/%3E%3C/svg%3E");
  mask-size:100% 100%; mask-repeat:no-repeat;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70V26c180-24 340 12 520 18s340-30 520-24 260 34 400 26v24z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%; -webkit-mask-repeat:no-repeat;
}

/* ── Values ──────────────────────────────────────────────── */
.values{ background:var(--paper); padding:clamp(24px,4vw,40px) 0 clamp(56px,7vw,80px); }
.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,36px); }
.value{
  background:var(--cream); border:1px solid var(--line);
  border-radius:var(--radius); padding:30px 28px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.value:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--leaf-soft); }
.value-icon{
  width:52px; height:52px; border-radius:14px; background:var(--leaf-wash);
  display:grid; place-items:center; font-size:1.5rem; margin-bottom:16px;
}
.value h3{ margin-bottom:.4em; }
.value p{ margin:0; font-size:.96rem; color:var(--ink-soft); }

/* ── Section heads ───────────────────────────────────────── */
.section-head{ max-width:60ch; margin-bottom:clamp(32px,5vw,52px); }
.section-sub{ color:var(--ink-soft); font-size:1.04rem; margin:0; }

/* ── Books ───────────────────────────────────────────────── */
.books{ padding:clamp(64px,9vw,104px) 0; }
.book-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,32px); align-items:stretch;
}

.card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }

.card-featured{ grid-column:1 / -1; display:grid; grid-template-columns:.85fr 1.15fr; }
.card-featured .card-cover{ border-radius:0; }

.card-cover{
  position:relative; display:grid; place-items:center;
  padding:34px 26px; min-height:250px;
  background:linear-gradient(150deg,var(--leaf-wash) 0%,#FCEFE4 100%);
}
.card-cover picture{ display:block; width:min(200px,62%); }
.cover-img{
  display:block; width:100%; height:auto;
  border-radius:5px 10px 10px 5px; border-left:8px solid var(--leaf);
  box-shadow:var(--shadow); transform:rotate(-2.5deg);
  transition:transform .28s ease;
}
.card:hover .cover-img{ transform:rotate(0deg) scale(1.035); }


.badge{
  position:absolute; top:16px; right:16px;
  font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:.42em 1em; border-radius:100px;
}
.badge-new{ background:var(--clay); color:#fff; }

.card-body{ padding:28px 26px 30px; display:flex; flex-direction:column; }
.card-featured .card-body{ padding:clamp(28px,3.4vw,44px); justify-content:center; }

.card-series{
  font-size:.74rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--leaf-soft); margin:0 0 .7em;
}
.card h3{ font-size:1.24rem; margin-bottom:.55em; }
.card-featured h3{ font-size:clamp(1.4rem,2.4vw,1.85rem); }
.card-desc{ color:var(--ink-soft); font-size:.97rem; margin-bottom:1.2em; }

.card-meta{
  list-style:none; display:flex; flex-wrap:wrap; gap:8px;
  padding:0; margin:0 0 1.7em;
}
.card-meta li{
  font-size:.79rem; font-weight:700; color:var(--leaf-mid);
  background:var(--leaf-wash); padding:.4em 1em; border-radius:100px;
}
.card-featured .btn{ align-self:flex-start; }

.card-soon{ display:flex; flex-direction:column; }

/* ── "Coming Soon" ghost covers ───────────────────────────
   A blurred, abstract impression of a cover — soft color blobs and
   two title bars behind heavy blur, so the shape reads as "a book
   we haven't shown you yet" rather than a broken image.            */
.soon-cover{
  position:relative; flex:1 1 auto;
  display:grid; place-items:center;
  min-height:250px; padding:34px 26px;
  background:linear-gradient(150deg,var(--leaf-wash) 0%,#FCEFE4 100%);
  overflow:hidden;
}

.soon-ghost{
  position:relative;
  width:min(200px,62%); aspect-ratio:3/4;
  border-radius:5px 10px 10px 5px;
  background:var(--paper);
  border-left:8px solid var(--leaf-soft);
  box-shadow:var(--shadow);
  transform:rotate(-2.5deg);
  filter:blur(7px) saturate(.92);
  opacity:.85;
  overflow:hidden;
  transition:transform .3s ease, filter .3s ease;
}
.card-soon:hover .soon-ghost{ transform:rotate(0deg) scale(1.03); filter:blur(5.5px) saturate(1); }

/* stand-in title bars */
.ghost-bar{
  position:absolute; left:14%; height:9%; border-radius:100px;
  background:var(--leaf-soft); opacity:.5;
}
.ghost-bar-1{ top:15%; width:62%; }
.ghost-bar-2{ top:29%; width:42%; opacity:.34; }

/* soft fruit-ish colour blobs */
.ghost-blob{ position:absolute; border-radius:50%; }
.ghost-blob-a{ width:38%; aspect-ratio:1; bottom:14%; left:9%;   background:var(--clay);      opacity:.45; }
.ghost-blob-b{ width:30%; aspect-ratio:1; bottom:30%; right:10%;  background:var(--butter);    opacity:.5;  }
.ghost-blob-c{ width:26%; aspect-ratio:1; bottom:10%; right:28%;  background:var(--leaf-soft); opacity:.45; }

/* per-card variation so the three don't look cloned */
.soon-ghost-b{ transform:rotate(1.8deg); }
.soon-ghost-b .ghost-blob-a{ background:var(--leaf-soft); left:14%; width:34%; bottom:16%; }
.soon-ghost-b .ghost-blob-b{ background:var(--clay);      width:26%; bottom:22%; }
.soon-ghost-b .ghost-blob-c{ background:var(--butter);    right:16%; bottom:36%; }
.card-soon:hover .soon-ghost-b{ transform:rotate(0deg) scale(1.03); }

.soon-ghost-c{ transform:rotate(-1.2deg); }
.soon-ghost-c .ghost-blob-a{ background:var(--butter);    width:32%; left:12%;  bottom:18%; }
.soon-ghost-c .ghost-blob-b{ background:var(--leaf-soft); width:28%; right:12%; bottom:13%; }
.soon-ghost-c .ghost-blob-c{ background:var(--clay-soft); width:30%; right:30%; bottom:32%; opacity:.6; }
.card-soon:hover .soon-ghost-c{ transform:rotate(0deg) scale(1.03); }

/* frosted label sitting over the blur */
.soon-label{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:.74rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--leaf);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(6px) saturate(160%);
  -webkit-backdrop-filter:blur(6px) saturate(160%);
  padding:.62em 1.25em; border-radius:100px;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 6px 18px rgba(34,48,42,.14);
  white-space:nowrap;
}

/* ── About ───────────────────────────────────────────────── */
.about{ background:var(--paper); padding:clamp(64px,9vw,104px) 0; }
.about-inner{
  display:grid; grid-template-columns:.8fr 1.2fr;
  gap:clamp(32px,5vw,72px); align-items:center;
}
.about-art{
  position:relative;
  display:grid; place-items:center;
  padding:clamp(28px,5vw,52px);
}
.about-art picture{ display:block; position:relative; z-index:1; line-height:0; }
.about-logo{
  display:block; width:100%; max-width:250px; height:auto;
}

/* Dashed ring echoing the old placeholder, sized to clear the logo's
   diagonal so nothing crosses the circle. */
.about-ring{
  position:absolute; z-index:0;
  width:min(380px,100%); aspect-ratio:1;
  border:2px dashed var(--clay-soft);
  border-radius:50%;
}

.about-copy p{ color:var(--ink-soft); }
.about-copy strong{ color:var(--leaf); font-weight:700; }

.about-stats{
  display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,48px);
  margin-top:2.2em; padding-top:1.8em; border-top:1px solid var(--line);
}
.stat{ display:flex; flex-direction:column; }
.stat-num{ font-family:var(--serif); font-size:1.9rem; font-weight:700; color:var(--leaf); line-height:1; }
.stat-label{
  font-size:.75rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--leaf-soft); margin-top:.6em;
}

/* ── For parents ─────────────────────────────────────────── */
.parents{ padding:clamp(64px,9vw,104px) 0; }
.parent-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(22px,3.4vw,40px); }
.parent-item{ padding-left:22px; border-left:3px solid var(--leaf-wash); }
.parent-num{
  font-family:var(--serif); font-size:.9rem; font-weight:700;
  color:var(--clay); letter-spacing:.08em;
}
.parent-item h3{ margin:.35em 0 .45em; }
.parent-item p{ margin:0; color:var(--ink-soft); font-size:.97rem; }

/* ── Contact ─────────────────────────────────────────────── */
.contact{
  position:relative; overflow:hidden;
  background:var(--leaf); color:var(--cream);
  padding:clamp(64px,9vw,104px) 0;
}
.contact::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(560px 340px at 84% 12%, rgba(242,193,78,.15) 0%, transparent 62%),
    radial-gradient(520px 340px at 8% 88%, rgba(217,118,74,.16) 0%, transparent 60%);
}
.contact-inner{ position:relative; text-align:center; max-width:660px; }
.contact h2{ color:var(--cream); }
.contact-sub{ color:rgba(253,249,242,.82); font-size:1.06rem; margin-bottom:2em; }
.contact-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer{ background:var(--paper); border-top:1px solid var(--line); padding:44px 0 38px; }
.footer-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
}
.footer-brand{ display:flex; align-items:center; }
.footer-brand picture{ display:block; line-height:0; }
.footer-logo{ display:block; width:132px; height:auto; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:6px 20px; }
.footer-nav a{
  text-decoration:none; font-size:.92rem; font-weight:600; color:var(--ink-soft);
  transition:color .18s ease;
}
.footer-nav a:hover{ color:var(--leaf); }
.footer-legal{ font-size:.84rem; color:var(--leaf-soft); margin:0; }

/* ── Reveal on scroll ────────────────────────────────────── */
/* Hidden only once JS confirms it can animate (html.js-reveal), so the
   page stays fully readable if JS fails, errors, or is disabled. */
.js-reveal .reveal{ opacity:0; transform:translateY(22px); transition:opacity .65s ease, transform .65s ease; }
.js-reveal .reveal.visible{ opacity:1; transform:none; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:980px){
  .hero-inner{ grid-template-columns:1fr; text-align:center; }
  .hero-copy{ order:1; }
  .hero-art{ order:2; min-height:330px; }
  .lede{ margin-inline:auto; }
  .hero-actions,.hero-note{ justify-content:center; }
  .hero-actions{ justify-content:center; }

  .value-grid{ grid-template-columns:1fr; }
  .book-grid{ grid-template-columns:repeat(2,1fr); }
  .card-featured{ grid-template-columns:1fr; }
  .about-inner{ grid-template-columns:1fr; }
  .about-art{ justify-self:center; }
  .parent-grid{ grid-template-columns:1fr; }
}

@media (max-width:720px){
  body{ font-size:16px; }
  .book-grid{ grid-template-columns:1fr; }
  .site-nav a:not(.nav-cta){ display:none; }
  .site-nav .nav-cta{ margin-left:0; }
  .about-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .footer-inner{ flex-direction:column; text-align:center; }
  .footer-nav{ justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .site-header,.hero-art,.blob{ display:none; }
  body{ background:#fff; }
}