@font-face{font-family:"Grandstander";src:url(/fonts/grandstander-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Fredoka";src:url(/fonts/fredoka-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Fredoka";src:url(/fonts/fredoka-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --pink:#FF5FA2;--yellow:#FFC928;--turquoise:#1FC2D6;--orange:#FF8C2E;--mint:#6FD66B;
  --pink-d:#D93A7E;--yellow-d:#D9A200;--turquoise-d:#119AAB;--orange-d:#D96A10;--mint-d:#45AE41;
  --pink-l:#FFE3EF;--yellow-l:#FFF1C2;--turquoise-l:#D9F5F8;--orange-l:#FFE6D1;--mint-l:#E0F7DE;
  --cream:#FFF6E8;--paper:#FFFCF6;--ink:#3A2B22;--ink-soft:#6B5546;--cocoa:#4A3428;
  --radius:24px;--shadow:0 10px 30px rgba(58,43,34,.10);
  --head:"Grandstander","Fredoka",ui-rounded,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"Fredoka",ui-rounded,"Segoe UI",system-ui,-apple-system,sans-serif;font-weight:600;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--turquoise-d)}
h1,h2,h3{font-family:var(--head);font-weight:800;line-height:1.1;margin:0 0 .5em;letter-spacing:.2px}
h1{font-size:clamp(2.1rem,7vw,3.6rem)}
h2{font-size:clamp(1.6rem,4.6vw,2.3rem)}
h3{font-size:1.12rem}
p{margin:0 0 1em}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
.center{text-align:center}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 14px;border-radius:12px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--turquoise-d);outline-offset:3px;border-radius:8px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,246,232,.92);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:2px solid rgba(58,43,34,.06)}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{width:46px;height:46px;border-radius:50%;border:3px solid #fff;box-shadow:0 3px 0 rgba(255,95,162,.35)}
.brand-name{font-family:var(--head);font-weight:800;font-size:1.45rem;line-height:1;white-space:nowrap}
.books-word{color:var(--ink)}
.c1{color:var(--pink)}.c2{color:var(--turquoise)}.c3{color:var(--orange)}.c4{color:var(--mint-d)}.c5{color:var(--yellow-d)}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.site-nav a{display:block;padding:10px 18px;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:700;font-size:1.05rem}
.site-nav a:hover{background:#fff}
.site-nav a[aria-current="page"]{background:var(--yellow);box-shadow:0 3px 0 var(--yellow-d)}
.menu-btn{display:none}
@media (max-width:819px){
  .js .menu-btn{display:flex;flex-direction:column;justify-content:center;gap:5px;width:48px;height:48px;padding:0 12px;border:0;border-radius:16px;background:#fff;box-shadow:0 3px 0 rgba(58,43,34,.12);cursor:pointer}
  .menu-btn span{display:block;height:3px;border-radius:3px;background:var(--ink);transition:transform .2s,opacity .2s}
  .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .js .site-nav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:3px solid var(--pink-l);box-shadow:0 18px 30px rgba(58,43,34,.12);display:none}
  .js .site-nav.open{display:block}
  .js .site-nav ul{flex-direction:column;padding:10px 16px 18px;gap:4px}
  .js .site-nav a{font-size:1.3rem;padding:14px 18px;font-family:var(--head)}
  .site-nav ul{flex-wrap:wrap}
  .brand-name{font-size:1.3rem}
  .brand img{width:42px;height:42px}
}

/* ---------- buttons ---------- */
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 14px}
.cta.stack{flex-direction:column;align-items:stretch;max-width:420px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:12px 26px;border-radius:999px;text-decoration:none;font-weight:700;font-size:1.1rem;color:var(--ink);background:#fff;box-shadow:0 5px 0 rgba(58,43,34,.18);border:3px solid var(--ink);transition:transform .12s,box-shadow .12s;text-align:center}
.btn svg{width:22px;height:22px;flex:0 0 22px}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(58,43,34,.18)}
.btn.primary{background:var(--orange);border-color:var(--orange);box-shadow:0 5px 0 var(--orange-d)}
.btn.small{min-height:44px;padding:8px 18px;font-size:1rem;border-width:2px}
.textlink{font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:3px;text-underline-offset:5px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem;color:var(--ink-soft);margin-bottom:10px}
.eyebrow .dot{width:12px;height:12px;border-radius:50%;background:var(--pink);box-shadow:16px 0 0 var(--turquoise),32px 0 0 var(--yellow);margin-right:34px}
.lede{font-size:1.15rem;color:var(--ink-soft);max-width:36em}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--turquoise-l)}
.hero-art{width:100%;height:auto;aspect-ratio:900/844;object-fit:cover}
.hero-inner{position:relative}
.hero-card{position:relative;margin:-64px 0 0;background:var(--paper);border-radius:var(--radius);padding:26px 22px 22px;box-shadow:var(--shadow);border:3px solid #fff}
.hero-card h1{font-size:clamp(2.2rem,9vw,3.6rem)}
.hero-cover{display:none}
.hero + .strip{margin-top:0}
.hero{padding-bottom:28px}
@media (min-width:760px){
  .hero{padding:0;min-height:560px;height:min(78vh,680px);overflow:hidden}
  .hero picture{position:absolute;inset:0}
  .hero-art{height:100%;aspect-ratio:auto}
  .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,246,232,.92) 0,rgba(255,246,232,.55) 38%,rgba(255,246,232,0) 62%);pointer-events:none}
  .hero-inner{z-index:2;height:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:40px}
  .hero-card{margin:0;max-width:540px;padding:34px 34px 28px;background:rgba(255,252,246,.94)}
  .hero-cover{display:block;justify-self:center;width:min(360px,80%);transform:rotate(4deg);border-radius:18px;border:8px solid #fff;box-shadow:0 24px 50px rgba(58,43,34,.28);transition:transform .2s}
  .hero-cover:hover{transform:rotate(1deg) scale(1.02)}
  .hero-cover img{border-radius:10px}
}

/* ---------- strip ---------- */
.strip{background:var(--paper);border-top:2px dashed var(--pink-l);border-bottom:2px dashed var(--pink-l)}
.strip-inner{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;padding-top:14px;padding-bottom:14px}
.strip-inner p{margin:0;color:var(--ink-soft)}
.also{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);background:#fff;border-radius:18px;padding:6px 16px 6px 6px;box-shadow:0 3px 0 var(--mint-d);border:2px solid var(--mint)}
.also img{width:54px;height:54px;border-radius:12px}
.also b{display:block;font-family:var(--head);font-weight:800}
.also small{color:var(--mint-d);font-weight:700;font-size:.9rem}

/* ---------- sections ---------- */
.section{padding:56px 0}
.sec-head{text-align:center;max-width:720px;margin:0 auto 30px}
.sec-head p{color:var(--ink-soft);font-size:1.08rem}
.page-head{padding:48px 0 40px;position:relative;overflow:hidden}
.page-head h1{margin-bottom:.3em}
.pink-wash{background:radial-gradient(circle at 92% 20%,var(--yellow-l) 0 90px,transparent 91px),radial-gradient(circle at 80% 90%,var(--turquoise-l) 0 60px,transparent 61px),var(--pink-l)}
.yellow-wash{background:radial-gradient(circle at 90% 25%,var(--pink-l) 0 90px,transparent 91px),radial-gradient(circle at 78% 85%,var(--mint-l) 0 60px,transparent 61px),var(--yellow-l)}
.orange-wash{background:radial-gradient(circle at 90% 25%,var(--yellow-l) 0 90px,transparent 91px),radial-gradient(circle at 78% 85%,var(--pink-l) 0 60px,transparent 61px),var(--orange-l)}
.mint-wash{background:radial-gradient(circle at 90% 25%,var(--yellow-l) 0 90px,transparent 91px),radial-gradient(circle at 78% 85%,var(--turquoise-l) 0 60px,transparent 61px),var(--mint-l)}

/* ---------- book grid ---------- */
.bgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (min-width:640px){.bgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}}
@media (min-width:1000px){.bgrid{grid-template-columns:repeat(5,minmax(0,1fr))}.bgrid.small{grid-template-columns:repeat(4,minmax(0,1fr))}}
.bcard{--bg:var(--turquoise);--sh:var(--turquoise-d)}
.bcard > a,.bcard.soon{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:22px;padding:10px 10px 14px;text-decoration:none;color:var(--ink);box-shadow:0 6px 0 var(--sh);border:3px solid var(--bg);transition:transform .15s}
.bcard > a:hover{transform:translateY(-4px) rotate(-.6deg)}
.bcover{position:relative;border-radius:14px;overflow:hidden;background:var(--cream);aspect-ratio:1}
.bcover img{width:100%;height:100%;object-fit:cover}
.chip{position:absolute;left:8px;top:8px;background:var(--yellow);color:var(--ink);font-weight:700;font-size:.8rem;line-height:1;padding:7px 10px;border-radius:999px;box-shadow:0 2px 0 var(--yellow-d)}
.chip.live{background:var(--mint);box-shadow:0 2px 0 var(--mint-d)}
.bnum{margin:10px 4px 2px;font-size:.82rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.bcard h3{margin:0 4px 8px;font-size:clamp(1rem,3.6vw,1.15rem)}
.bmore{margin:auto 4px 0;font-weight:700;color:var(--sh);font-size:.95rem}
.bmore.muted{color:var(--ink-soft)}
.bcard.soon .bcover img{filter:saturate(.85)}
.bcover.ph{display:grid;place-items:center;background:var(--turquoise-l);font-size:4rem;color:var(--turquoise-d)}
.pink{--bg:var(--pink);--sh:var(--pink-d)}.yellow{--bg:var(--yellow);--sh:var(--yellow-d)}.turquoise{--bg:var(--turquoise);--sh:var(--turquoise-d)}.orange{--bg:var(--orange);--sh:var(--orange-d)}.mint{--bg:var(--mint);--sh:var(--mint-d)}
.music-grid{max-width:640px;margin:0 auto;grid-template-columns:repeat(2,minmax(0,1fr))!important}
.note{color:var(--ink-soft);margin-top:24px}

/* ---------- about band ---------- */
.about-band{background:var(--turquoise-l)}
.about-inner{display:grid;gap:28px;align-items:center}
.about-img{border-radius:var(--radius);border:6px solid #fff;box-shadow:var(--shadow);width:100%}
.about-inner p{color:var(--ink-soft);font-size:1.08rem}
@media (min-width:860px){.about-inner{grid-template-columns:1.1fr 1fr;gap:48px}}

/* ---------- promos ---------- */
.duo{display:grid;gap:22px}
@media (min-width:860px){.duo{grid-template-columns:1fr 1fr}}
.promo{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:20px;border-radius:var(--radius);text-decoration:none;color:var(--ink);transition:transform .15s}
.promo:hover{transform:translateY(-3px)}
.promo h2{font-size:1.6rem;margin-bottom:.25em}
.promo p{color:var(--ink-soft);margin-bottom:.8em}
.shop-promo{background:var(--yellow-l);border:3px solid var(--yellow);box-shadow:0 6px 0 var(--yellow-d)}
.music-promo{background:var(--orange-l);border:3px solid var(--orange);box-shadow:0 6px 0 var(--orange-d)}
.music-promo img{width:130px;height:130px;border-radius:16px;object-fit:cover;border:4px solid #fff}
.merch-mini{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,62px);gap:6px}
.merch-mini img{width:62px;height:62px;object-fit:contain;background:#fff;border-radius:12px;padding:4px}
@media (max-width:420px){.promo{grid-template-columns:1fr}.merch-mini{grid-template-columns:repeat(4,1fr)}.merch-mini img{width:100%;height:auto;aspect-ratio:1}.music-promo img{width:100%;height:auto;max-height:220px}}

/* ---------- social ---------- */
.social{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.social a{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:10px 22px;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:700;background:#fff;box-shadow:0 4px 0 var(--sh);border:3px solid var(--bg)}
.social svg{width:24px;height:24px}
.social .youtube{--bg:var(--pink);--sh:var(--pink-d)}.social .tiktok{--bg:var(--turquoise);--sh:var(--turquoise-d)}.social .instagram{--bg:var(--orange);--sh:var(--orange-d)}.social .pinterest{--bg:var(--mint);--sh:var(--mint-d)}
.about-inner .social{justify-content:flex-start}
.follow{background:var(--paper)}

/* ---------- book page ---------- */
.crumbs{padding-top:14px;padding-bottom:4px;font-size:.92rem;color:var(--ink-soft)}
.crumbs a{color:var(--ink-soft)}
.book-hero{background:var(--paper);padding:20px 0 40px}
.book-hero.turquoise{background:linear-gradient(180deg,var(--cream),var(--turquoise-l))}
.book-hero.mint{background:linear-gradient(180deg,var(--cream),var(--mint-l))}
.book-hero.yellow{background:linear-gradient(180deg,var(--cream),var(--yellow-l))}
.bh-inner{display:grid;gap:26px;align-items:center}
.bh-cover{max-width:440px;width:86%;margin:0 auto}
.bh-cover img{border-radius:16px;border:7px solid #fff;box-shadow:0 22px 44px rgba(58,43,34,.22),0 6px 0 var(--sh)}
.facts{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.facts li{background:#fff;border:2px solid var(--bg);border-radius:999px;padding:5px 14px;font-size:.95rem}
.fine{font-size:.92rem;color:var(--ink-soft);margin:0}
.soon-note{margin:0 0 8px;font-weight:700;color:var(--ink-soft)}
.soon-note::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--yellow);margin-right:8px;vertical-align:1px}
@media (min-width:860px){.bh-inner{grid-template-columns:1fr 1.05fr;gap:56px}.bh-cover{width:100%}.book-hero{padding:30px 0 64px}}
.ticks{padding:0;list-style:none;margin:0 0 24px}
.ticks li{padding-left:34px;position:relative;margin:8px 0}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--mint);color:#fff;display:grid;place-items:center;font-size:.85rem}
.peek{background:var(--paper)}
.gallery{list-style:none;margin:0 -20px;padding:4px 20px 18px;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.gallery li{flex:0 0 82%;scroll-snap-align:center}
.gallery figure{margin:0}
.gallery img{border-radius:18px;border:5px solid #fff;box-shadow:var(--shadow);width:100%;aspect-ratio:1;object-fit:cover}
.gallery figcaption{text-align:center;margin-top:10px;color:var(--ink-soft);font-size:.98rem}
@media (min-width:760px){.gallery{display:grid;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:0}.swipe-hint{display:none}}

/* ---------- shop ---------- */
.shop-embed{min-height:200px;background:#fff;border-radius:var(--radius);padding:8px;box-shadow:var(--shadow)}
.shop-embed:empty{display:none}
.shop-loading{display:flex;align-items:center;justify-content:center;gap:12px;min-height:200px;margin:0;color:var(--ink-soft)}
.spinner{width:26px;height:26px;border-radius:50%;border:4px solid var(--pink-l);border-top-color:var(--pink);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.shop-fallback{margin-top:10px}
.merch-grid{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (min-width:760px){.merch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.merch-grid a{display:flex;flex-direction:column;gap:8px;background:#fff;border-radius:20px;padding:12px;text-decoration:none;color:var(--ink);font-weight:700;text-align:center;box-shadow:0 5px 0 var(--yellow-d);border:3px solid var(--yellow)}
.merch-grid img{aspect-ratio:1;object-fit:contain;width:100%}
.shop-embed.loaded{padding:0;background:transparent;box-shadow:none}

/* ---------- footer ---------- */
.site-footer{background:var(--cocoa);color:#F6E9D8;padding:48px 0 24px;margin-top:0}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.fcols{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px}
.fbrand{grid-column:1/-1}
.fbrand .brand{color:#fff}
.fbrand .books-word{color:#fff}
.fbrand p{color:#E7D5C0;margin-top:12px;max-width:26em}
.fcol h2{font-size:1.15rem;color:var(--yellow);margin-bottom:.7em}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol li{margin:0 0 10px}
.fcol a{overflow-wrap:anywhere}
.fsocial a{display:inline-flex;align-items:center;gap:8px}
.fsocial svg{width:20px;height:20px}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;border-top:1px solid rgba(255,255,255,.15);margin-top:30px;padding-top:18px;font-size:.9rem;color:#D9C5AE}
.legal p{margin:0}
@media (min-width:860px){.fcols{grid-template-columns:1.4fr 1fr 1fr 1fr}.fbrand{grid-column:auto}}

/* fixes pass 2 */
.chip{top:auto;bottom:8px}
.when{margin:auto 4px 0;align-self:flex-start;background:var(--yellow-l);border:2px solid var(--yellow);color:var(--ink);font-weight:700;font-size:.88rem;padding:4px 12px;border-radius:999px}
.fsoc{grid-column:1/-1}
.fsocial{display:flex;flex-wrap:wrap;gap:10px 22px}
@media (min-width:860px){.fsoc{grid-column:auto}.fsocial{display:block}}

/* shop pass 3 */
.merch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.merch-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.merch-grid a{text-align:left;padding:10px 10px 14px;gap:4px}
.merch-grid .pimg{border-radius:14px;overflow:hidden;background:#fff;aspect-ratio:1;margin-bottom:6px}
.merch-grid .pimg img{width:100%;height:100%;object-fit:contain}
.merch-grid h3{margin:0;font-size:1.02rem}
.ptype{font-size:.82rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em}
.pbuy{margin-top:auto;padding-top:6px;color:var(--orange-d);font-weight:700;font-size:.95rem}
.merch-grid li:nth-child(4n+2) a{border-color:var(--turquoise);box-shadow:0 5px 0 var(--turquoise-d)}
.merch-grid li:nth-child(4n+3) a{border-color:var(--pink);box-shadow:0 5px 0 var(--pink-d)}
.merch-grid li:nth-child(4n+4) a{border-color:var(--mint);box-shadow:0 5px 0 var(--mint-d)}
.shop-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:var(--paper);border:2px dashed var(--yellow);border-radius:var(--radius);padding:20px 22px}
.shop-note p{margin:0;max-width:40em;color:var(--ink-soft)}