/* Layout: woodland clearing. Asymmetric hero with a fanned stack of covers,
   then a bookshelf where each book flies onto the page as you scroll. */
:root{
  --paper:#eef2e7;        /* fern-tinted page */
  --paper-2:#e2e9d8;      /* deeper moss band */
  --ink:#1c2a22;          /* forest-floor ink */
  --ink-soft:#4d5e53;     /* bark grey-green */
  --foxglove:#b8306f;     /* accent: foxglove pink */
  --firefly:#e6b23a;      /* glow / highlight */
  --card:#fbfcf8;
  --line:#cdd8c4;
  --shadow:28 42 34;
  --on-accent:#fff;

  --f-display:"Caprasimo", "Cooper Black", Georgia, serif;
  --f-body:"Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-hand:"Caveat", "Segoe Print", "Bradley Hand", cursive;

  --step--1:clamp(.85rem,.82rem + .15vw,.95rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.125rem);
  --step-1:clamp(1.25rem,1.1rem + .6vw,1.6rem);
  --step-2:clamp(1.6rem,1.3rem + 1.3vw,2.4rem);
  --step-3:clamp(2.4rem,1.6rem + 3.6vw,4.6rem);
  --gutter:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#111a15; --paper-2:#17231c; --ink:#e7eee2; --ink-soft:#a8b8ab;
    --foxglove:#ef6fa8; --firefly:#f2c656; --card:#1b2920; --line:#2c3d32;
    --shadow:0 0 0; --on-accent:#1a0b12; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#111a15; --paper-2:#17231c; --ink:#e7eee2; --ink-soft:#a8b8ab;
  --foxglove:#ef6fa8; --firefly:#f2c656; --card:#1b2920; --line:#2c3d32;
  --shadow:0 0 0; --on-accent:#1a0b12; color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:var(--step-0); line-height:1.65;
  overflow-x:hidden;
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--paper)}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--foxglove);outline-offset:3px;border-radius:6px}
.wrap{max-width:1160px;margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.hand{font-family:var(--f-hand);font-weight:700;color:var(--foxglove);font-size:1.5em;line-height:1}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.8rem}
.brand{font-family:var(--f-display);font-size:1.35rem;text-decoration:none;white-space:nowrap}
.brand span{color:var(--foxglove)}
.nav ul{display:flex;flex-wrap:wrap;gap:.25rem 1.4rem;list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;font-weight:700;font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding:.3rem 0;position:relative}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--foxglove);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.nav ul a:hover{color:var(--ink)}
.nav ul a:hover::after{transform:scaleX(1)}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding-block:clamp(3rem,7vw,6rem) clamp(3rem,6vw,5rem)}
.hero-text{min-width:0;display:grid;gap:1.25rem}
.hero-text .hand{font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem)}
.hero h1{font-size:var(--step-3);letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--foxglove)}
.hero-lede{color:var(--ink-soft);max-width:34em;font-size:var(--step-1);line-height:1.45}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.5rem}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.5rem;border-radius:999px;
  font-weight:700;text-decoration:none;font-size:var(--step--1);letter-spacing:.04em;
  border:2px solid var(--ink);transition:transform .25s cubic-bezier(.3,1.6,.5,1),background .2s,color .2s;
}
.btn:hover{transform:translateY(-3px) rotate(-1deg)}
.btn-solid{background:var(--foxglove);border-color:var(--foxglove);color:var(--on-accent)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}

.author{display:flex;align-items:center;gap:1rem;margin-top:1rem}
.author-photo{width:84px;height:84px;border-radius:50%;object-fit:cover;border:4px solid var(--firefly);background:var(--paper-2);flex:none}
.author p{font-size:var(--step--1);color:var(--ink-soft);max-width:22em}
.author strong{color:var(--ink)}

/* fanned stack of covers */
.stack{position:relative;height:clamp(320px,38vw,470px);perspective:1400px}
.stack .cover{position:absolute;top:50%;left:50%;width:auto;height:min(clamp(255px,28.5vw,375px), calc(clamp(170px,19vw,250px) * 1.2 / var(--ar,.667)));aspect-ratio:var(--ar,2/3)}
.stack .cover:nth-child(1){--r:-14deg;--x:-95%;--y:-46%;--from:-160vw;z-index:1}
.stack .cover:nth-child(2){--r:3deg;--x:-50%;--y:-54%;--from:0vw;z-index:3}
.stack .cover:nth-child(3){--r:15deg;--x:-6%;--y:-44%;--from:160vw;z-index:2}
.stack .cover{transform:translate(var(--x),var(--y)) rotate(var(--r));animation:stackIn 1.3s cubic-bezier(.2,.9,.25,1.15) both}
.stack .cover:nth-child(1){animation-delay:.15s}
.stack .cover:nth-child(2){animation-delay:.35s}
.stack .cover:nth-child(3){animation-delay:.55s}
@keyframes stackIn{
  from{opacity:0;transform:translate(calc(var(--x) + var(--from)),calc(var(--y) + 40vh)) rotate(calc(var(--r) * -4)) scale(.6)}
  to{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r))}
}
.stack .cover:hover{z-index:5}
.stack .cover img{width:100%;height:100%}
.stack-note{position:absolute;right:2%;bottom:0;transform:rotate(-6deg);font-size:1.6rem;z-index:6}

/* ---------- BOOK COVER (shared) ---------- */
.cover{
  aspect-ratio:2/3;max-width:100%;border-radius:4px 12px 12px 4px;position:relative;
  box-shadow:0 1px 0 rgb(var(--shadow)/.1),0 18px 40px -12px rgb(var(--shadow)/.45),0 40px 70px -30px rgb(var(--shadow)/.35);
  background:var(--paper-2);overflow:hidden;
}
.cover img{width:100%;height:100%;object-fit:cover}
.cover::after{ /* spine crease + sheen */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgb(0 0 0/.28) 0,rgb(255 255 255/.18) 2.5%,rgb(0 0 0/.08) 5%,transparent 9%),
             linear-gradient(115deg,transparent 40%,rgb(255 255 255/.16) 50%,transparent 60%);
}
/* placeholder shown when an image file hasn't been added yet */
.cover.placeholder{display:grid;place-items:center;padding:1.2rem;text-align:center;
  background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--firefly) 45%,transparent),transparent 55%),
             linear-gradient(160deg,color-mix(in srgb,var(--foxglove) 75%,var(--ink)),color-mix(in srgb,var(--ink) 85%,var(--foxglove)));
}
.cover.placeholder span{font-family:var(--f-display);color:#fff7ec;font-size:clamp(1rem,.9rem + .6vw,1.5rem);line-height:1.15;text-shadow:0 2px 10px rgb(0 0 0/.35)}
.cover.placeholder small{display:block;margin-top:.6rem;font-family:var(--f-hand);font-size:1.2rem;color:var(--firefly)}

/* ---------- SECTION HEADS ---------- */
section{scroll-margin-top:70px}
.band{padding-block:clamp(4rem,9vw,7rem);overflow-x:clip}
.band-alt{background:var(--paper-2)}
.head{display:grid;gap:.6rem;margin-bottom:clamp(2.5rem,5vw,4rem);max-width:40rem}
.head h2{font-size:var(--step-2)}
.head p{color:var(--ink-soft)}

/* ---------- BOOKSHELF ---------- */
/* Books share a height like books on a shelf: each one's width follows its cover's shape (--ar = width / height) */
.shelf{display:flex;flex-wrap:wrap;gap:clamp(2.5rem,5vw,4rem) clamp(1.5rem,3vw,2.5rem);perspective:1600px}
.shelf-fill{flex:1000 1 0;height:0}
.shelf-break{display:none}
.shelf-head{flex:0 0 100%;display:flex;align-items:center;gap:1rem;font-family:var(--f-hand);font-weight:700;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);color:var(--foxglove);line-height:1;margin-bottom:-1rem}
.shelf-head::after{content:"";flex:1;height:2px;background:var(--line);border-radius:2px}
.shelf-head:not(:first-child){margin-top:1rem}
.book{flex:calc(var(--ar,.667) * 100) 1 calc(var(--ar,.667) * 300px)}
.book{display:flex;flex-direction:column;gap:1.1rem;min-width:0}
.book .cover{aspect-ratio:var(--ar,2/3)}
.book.wide .cover{border-radius:6px 12px 12px 6px}
.book .cover{transition:transform .5s cubic-bezier(.2,.9,.3,1.2)}
@media (hover:hover){.book:hover .cover{transform:translateY(-10px) rotateY(var(--tilt-y,-14deg)) rotateX(var(--tilt-x,4deg))}}
.book h3{font-size:var(--step-1)}
.book p{color:var(--ink-soft)}
.book .buy{align-self:flex-start;margin-top:auto}
.book-meta{font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--foxglove)}

/* fly-in: each book is tossed onto the shelf from alternating sides, once, when it scrolls into view */
@keyframes flyIn{
  from{opacity:0;transform:translate3d(var(--fx),70px,0) rotate(var(--fr)) scale(.85)}
  to{opacity:1;transform:none}
}
.book:nth-child(odd){--fx:-110px;--fr:-9deg}
.book:nth-child(even){--fx:110px;--fr:8deg}
.book.pre{opacity:0}
.book.go{animation:flyIn .85s cubic-bezier(.2,.8,.25,1.12) both;animation-delay:var(--d,0s)}
.book h3 a{text-decoration:none}
.book h3 a:hover{color:var(--foxglove)}
a.cover{display:block;cursor:pointer}

.pen{font-family:var(--f-hand);font-size:1.3rem;color:var(--ink);line-height:1}
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin:-1.5rem 0 clamp(2rem,4vw,3rem)}
.filters button{font:inherit;font-weight:700;font-size:var(--step--1);cursor:pointer;border-radius:999px;padding:.55rem 1.1rem;border:2px solid var(--line);background:var(--card);color:var(--ink);display:inline-flex;gap:.5rem;align-items:center;transition:transform .2s,border-color .2s}
.filters button span{font-variant-numeric:tabular-nums;color:var(--ink-soft);font-weight:500}
.filters button:hover{border-color:var(--ink);transform:translateY(-2px)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.filters button[aria-pressed="true"] span{color:var(--firefly)}
.cover.placeholder[data-cat="chapter"]{background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--firefly) 45%,transparent),transparent 55%),linear-gradient(160deg,#6c4bb3,#2a1d4f)}
.cover.placeholder[data-cat="ya"]{background:radial-gradient(circle at 70% 20%,rgb(255 255 255/.18),transparent 50%),linear-gradient(160deg,#2f6b62,#0f2723)}
.cover.placeholder[data-cat="adult"]{background:radial-gradient(circle at 30% 20%,rgb(255 255 255/.15),transparent 55%),linear-gradient(160deg,#7a5432,#2b1c10)}

/* ---------- ILLUSTRATION ---------- */
.illus .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.illus-art{position:relative;min-width:0}
.collage{--g:5px;background:#16201a;padding:var(--g);border-radius:14px;display:grid;gap:var(--g);
  transform:rotate(-1.5deg);box-shadow:0 30px 60px -30px rgb(var(--shadow)/.6);min-height:120px}
.c-row{display:flex;gap:var(--g)}
.c-item{flex:var(--ar) 1 0;min-width:0;overflow:hidden;border-radius:3px;display:block;position:relative}
.c-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease,filter .4s}
.c-item:hover img{transform:scale(1.08);filter:brightness(1.08)}
.c-item:focus-visible{outline-offset:-3px}
.illus-art img,.illus-art .art-ph{border-radius:14px;width:100%;box-shadow:0 30px 60px -30px rgb(var(--shadow)/.5);transform:rotate(-1.5deg)}
.art-ph{aspect-ratio:4/3;display:grid;place-items:center;text-align:center;padding:1.5rem;
  background:repeating-linear-gradient(-45deg,var(--card) 0 14px,color-mix(in srgb,var(--card) 70%,var(--line)) 14px 28px);
  border:2px dashed var(--line);color:var(--ink-soft)}
.illus-art .tape{position:absolute;top:-14px;left:50%;width:120px;height:30px;transform:translateX(-50%) rotate(-4deg);
  background:color-mix(in srgb,var(--firefly) 55%,transparent);border-radius:2px}
.illus-text{display:grid;gap:1.2rem;min-width:0}
.illus-text h2{font-size:var(--step-2)}
.illus-text p{color:var(--ink-soft);max-width:34em}
.illus-text .hand{font-size:1.9rem}

/* ---------- ABOUT ---------- */
.about .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.about-side{display:grid;gap:1.5rem;position:sticky;top:110px}
.about-photo{border-radius:50% 50% 14px 14px;aspect-ratio:4/5;object-fit:cover;width:100%;max-width:360px;background:var(--paper-2);border:6px solid var(--card);box-shadow:0 24px 50px -24px rgb(var(--shadow)/.5)}
.awards{display:grid;gap:.9rem;padding:0;margin:0;list-style:none}
.awards li{display:flex;gap:.9rem;align-items:baseline}
.awards b{font-family:var(--f-display);font-weight:400;font-size:2.2rem;line-height:1;color:var(--foxglove);min-width:1.4ch}
.awards span{color:var(--ink-soft);font-size:var(--step--1)}
.about-copy{display:grid;gap:1.4rem;max-width:38em}
.about-copy h2{font-size:var(--step-2)}
.about-copy p{color:var(--ink-soft)}
.about-copy p:first-of-type{font-size:var(--step-1);line-height:1.5;color:var(--ink)}

/* ---------- CONTACT ---------- */
.contact{text-align:center}
.contact .wrap{display:grid;justify-items:center;gap:1.2rem}
.contact h2{font-size:var(--step-3)}
.contact p{color:var(--ink-soft);max-width:32em}
.email-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;align-items:center;margin-top:.6rem}
.email{font-family:var(--f-display);font-size:var(--step-1);user-select:all;word-break:break-all;color:var(--ink);text-decoration:none;border-bottom:3px solid var(--firefly)}
.copy{font:inherit;font-size:var(--step--1);font-weight:700;cursor:pointer;border-radius:999px;padding:.55rem 1.1rem;border:2px solid var(--line);background:var(--card);color:var(--ink)}
.copy:hover{border-color:var(--ink)}
.or{color:var(--ink-soft);font-size:var(--step--1);width:100%}
.contact-form{width:100%;max-width:40rem;display:grid;gap:1.1rem;text-align:left;margin-top:1rem;
  background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(1.25rem,4vw,2.25rem);
  box-shadow:0 30px 60px -40px rgb(var(--shadow)/.45)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:grid;gap:.4rem;min-width:0}
.field label{font-weight:700;font-size:var(--step--1)}
.field input,.field select,.field textarea{
  font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:2px solid var(--line);
  border-radius:12px;padding:.75rem .9rem;width:100%;transition:border-color .2s,box-shadow .2s}
.field textarea{resize:vertical;min-height:9rem;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--foxglove);box-shadow:0 0 0 4px color-mix(in srgb,var(--foxglove) 18%,transparent)}
.field.bad input,.field.bad textarea{border-color:#c0392b}
.field .err{color:#c0392b;font-size:.85rem;font-weight:700}
.trap{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.form-note{font-size:var(--step--1);margin:0}
.send{cursor:pointer;font-size:var(--step-0)}
.send[disabled]{opacity:.6;cursor:wait;transform:none}
.form-status{margin:0;padding:.9rem 1.1rem;border-radius:12px;font-weight:700;max-width:none!important}
.form-status.ok{background:color-mix(in srgb,#2e8b57 16%,var(--card));color:var(--ink)}
.form-status.fail{background:color-mix(in srgb,#c0392b 14%,var(--card));color:var(--ink)}
@media (max-width:560px){.field-row{grid-template-columns:1fr}.send{width:100%;justify-content:center}}

footer{border-top:1px solid var(--line);padding-block:2rem;color:var(--ink-soft);font-size:var(--step--1)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .hero .wrap,.illus .wrap,.about .wrap{grid-template-columns:1fr}
  .stack{height:clamp(300px,80vw,420px);order:-1}
  .stack .cover{height:min(clamp(210px,60vw,315px), calc(clamp(140px,40vw,210px) * 1.2 / var(--ar,.667)))}
  .about-side{position:static;justify-items:center}
  .awards{justify-items:start}
}
@media (max-width:560px){
  /* phones: two books per row, a book left over on its own is centred */
  .shelf{gap:2.2rem 1rem;justify-content:center}
  .book{flex:0 0 calc((100% - 1rem) / 2);max-width:calc((100% - 1rem) / 2)}
  .shelf-fill{display:none}
  .shelf-break{display:block;flex:0 0 100%;height:0;margin-top:-2.2rem}
  .shelf-head{font-size:1.45rem;margin-bottom:-.8rem}
  .book{gap:.7rem}
  .book h3{font-size:1.1rem}
  .book p{font-size:.92rem;line-height:1.5}
  .book-meta{font-size:.72rem}
  .pen{font-size:1.1rem}
  .book .buy{padding:.6rem .9rem;font-size:.78rem;align-self:stretch;justify-content:center}
  .book:nth-child(odd){--fx:-40px;--fr:-5deg}
  .book:nth-child(even){--fx:40px;--fr:5deg}
  .filters{flex-wrap:nowrap;overflow-x:auto;margin-right:calc(-1 * var(--gutter-r));padding-right:var(--gutter-r);padding-bottom:.4rem;scrollbar-width:none}
  .filters button{flex:none}
  .hero .wrap{padding-block:2rem 3rem}
  .author{flex-direction:row;text-align:left}
  .nav .wrap{flex-direction:column;gap:.4rem}
  .nav ul{justify-content:center;gap:.2rem 1rem}
  .stack-note{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}