/* Book landing layout: hero split, pitch band, story split, ritual, look-inside carousel,
   grown-ups band, kit grid, feature card. Moved out of index.html's inline <style> on 2026-09-29
   so / , /fdos/ and /halloween/ share one layout. Shared tokens live in site.css. */
main img,section img,footer img{height:auto}  /* width/height attrs reserve space; CSS keeps ratio */
#hero{padding-top:118px;padding-bottom:64px;background:linear-gradient(var(--paper) 0%, var(--paper-deep) 100%)}
@media(max-width:760px){#hero{padding-top:150px}}   /* clear the wrapped nav + disclosure note */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero-copy h1{font-size:clamp(34px,4.6vw,56px);line-height:1.08;letter-spacing:-.01em}
.hero-copy .sub{margin-top:16px;max-width:46ch}
.hero-copy .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
/* --- hero cover: real product photo ---
   The .book / .b-* rules below built a CSS 3D hardcover and are no longer used by any
   markup, kept only so the fake book can be restored if the photo is ever pulled. */
.hero-cover{position:relative;justify-self:center;width:min(420px,82vw)}
.hero-cover{perspective:1200px}
.cover-shot{display:block;width:100%;height:auto;transform:rotateX(3deg) rotateY(-12deg);
  transition:transform .7s cubic-bezier(.22,1,.36,1)}
.hero-cover:hover .cover-shot{transform:rotateX(1deg) rotateY(-4deg) translateY(-6px)}
.book{position:relative;width:340px;height:352px;transform-style:preserve-3d;
  transform:rotateX(4deg) rotateY(-27deg);transition:transform .8s cubic-bezier(.22,1,.36,1)}
.hero-cover:hover .book{transform:rotateX(2deg) rotateY(-14deg)}
.book>div{position:absolute;top:50%;left:50%}
/* thickness = 54px (chunky board/coloring book). half-thickness translateZ = 27px */
.b-front,.b-back{width:340px;height:352px;margin:-176px 0 0 -170px}
.b-spine,.b-pages{width:54px;height:352px;margin:-176px 0 0 -27px}
.b-top{width:340px;height:54px;margin:-27px 0 0 -170px}
.b-front{transform:translateZ(27px);border-radius:3px 9px 9px 3px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(74,59,46,.10)}
.b-front img{display:block;width:100%;height:100%;object-fit:cover}
/* raking light sheen sweeping across the cover, sells it as a lit object */
.b-front::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.04) 26%,
    rgba(255,255,255,0) 62%,rgba(74,59,46,.14) 100%)}
.b-back{transform:translateZ(-27px) rotateY(180deg);background:#e9dcc2;border-radius:3px 9px 9px 3px}
/* left = printed spine (cover-wrap color) */
.b-spine{transform:rotateY(-90deg) translateZ(170px);
  background:linear-gradient(90deg,#b85f26,#d97a30 55%,#e88d3f);
  box-shadow:inset -9px 0 18px rgba(0,0,0,.34),inset 4px 0 7px rgba(255,255,255,.22)}
/* right = white fore-edge, fine page striping */
.b-pages{transform:rotateY(90deg) translateZ(170px);border-radius:0 2px 2px 0;
  background:repeating-linear-gradient(180deg,#fffdf6 0 1.5px,#e6d8bd 1.5px 3px);
  box-shadow:inset 7px 0 15px rgba(0,0,0,.22),inset -3px 0 5px rgba(0,0,0,.12)}
.b-top{transform:rotateX(90deg) translateZ(176px);
  background:repeating-linear-gradient(90deg,#fffdf6 0 1.5px,#e6d8bd 1.5px 3px);
  box-shadow:inset 0 7px 14px rgba(0,0,0,.18)}
/* grounded drop shadow, offset to the light */
/* The photo carries its own contact shadow, so the CSS ground shadow that the fake 3D book
   needed is gone. Leaving it in doubled the shadow and read as a smudge under the image. */

/* elevator pitch band */
#pitch p{font-size:clamp(19px,2.2vw,25px);line-height:1.55;font-weight:600;max-width:34ch;margin:0 auto}
#pitch em{font-style:normal;color:#2E3B28} /* #930: 5.56:1 on sage */

/* story split */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.story-grid img{border-radius:var(--radius);box-shadow:0 16px 44px rgba(74,59,46,.18)}
.story-copy h2{font-size:clamp(26px,3vw,38px);margin-bottom:14px}
.story-copy p{margin-bottom:12px;max-width:52ch}

/* ritual full-width */
#ritual{text-align:center}
#ritual .ritual-words{font-family:'Baloo 2',sans-serif;font-weight:800;
  font-size:clamp(30px,4.4vw,52px);color:var(--carrot-deep);margin:10px 0 18px}
#ritual img{max-width:760px;width:100%;margin:26px auto 0;display:block;
  border-radius:var(--radius);box-shadow:0 16px 44px rgba(74,59,46,.18)}
#ritual .sub{max-width:58ch;margin:0 auto}

/* inside gallery: horizontal scroll-snap */
.flip-row{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:26px 6px 18px;-webkit-overflow-scrolling:touch}
.flip-row figure{flex:0 0 min(320px,74vw);scroll-snap-align:center;margin:0}
.flip-row img{width:100%;aspect-ratio:1/1;border-radius:14px;border:8px solid #fff;
  box-shadow:0 10px 26px rgba(74,59,46,.16);display:block}
.flip-row figcaption{font-size:14px;color:var(--ink-soft);padding:8px 4px 0;text-align:center}
.flip-row::-webkit-scrollbar{height:8px}
.flip-row::-webkit-scrollbar-thumb{background:var(--paper-deep);border-radius:99px}

/* grown-ups band */
#grownups .story-grid{align-items:start}
/* story + grownups sit on the carrot band (strict tan/green/orange cycle, owner 2026-09-14) */
#story,#grownups{text-align:left}
#story .story-copy p,#grownups .story-copy p,#grownups .check-list li{color:#fff}
#grownups .check-list li::before{background:var(--paper)}
#inside .flip-row figcaption,#halloween .flip-row figcaption{color:#2E3B28}
.check-list{list-style:none;margin-top:18px}
.check-list li{padding-left:30px;position:relative;margin-bottom:12px}
.check-list li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;
  border-radius:50%;background:var(--sage-deep)}

/* resources */
.kit-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:32px}
.kit-card{grid-column:span 2;background:#fff;border-radius:var(--radius);padding:24px 22px;
  box-shadow:0 8px 24px rgba(74,59,46,.1);display:block;color:var(--ink);text-decoration:none;
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.kit-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(74,59,46,.16)}
.kit-card:nth-child(4),.kit-card:nth-child(5){grid-column:span 3}
.kit-card b{font-family:'Baloo 2',sans-serif;font-size:19px;display:block;margin-bottom:6px}
.kit-card span{font-size:14.5px;color:var(--ink-soft);line-height:1.5;display:block}
.kit-more{text-align:center;margin-top:28px}

/* halloween feature card (white, so it keeps ink text on the sage band) */
.feature{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center;
  background:#fff;border-radius:var(--radius);padding:38px;box-shadow:0 12px 34px rgba(74,59,46,.12)}
.feature img{width:100%;height:auto;max-width:320px;border-radius:14px;box-shadow:0 16px 36px rgba(74,59,46,.24);justify-self:center}
.feature .title{color:var(--ink)}
.feature .sub{color:var(--ink-soft);margin-left:0}
.feature .tag{display:inline-block;background:var(--carrot-btn);color:#fff;font-family:'Baloo 2',sans-serif;
  font-weight:800;font-size:13px;letter-spacing:.06em;padding:6px 14px;border-radius:999px;text-transform:uppercase}

@media (max-width:860px){
  .hero-grid,.story-grid{grid-template-columns:1fr;gap:32px}
  .hero-cover{order:-1;transform:scale(.82);transform-origin:center top}
  .kit-grid{grid-template-columns:1fr}
  .kit-card,.kit-card:nth-child(4),.kit-card:nth-child(5){grid-column:span 1}
  .feature{grid-template-columns:1fr;gap:24px;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .book,.kit-card,.cover-shot{transition:none}
  .hero-cover:hover .book{transform:rotateX(6deg) rotateY(-29deg)}
  .hero-cover:hover .cover-shot{transform:rotateX(3deg) rotateY(-12deg)}
}