/* Cute Paws — the books are bold black line art on white paper, so the site is
   built the same way: black rules, white sheets, and color only inside the
   covers and on one accent. */
:root {
  color-scheme: light dark;
  --ink: #16110F;
  --paper: #FFFFFF;
  /* Not cream. The ground is a soft wash from the blue swatch card into the pink
     one -- the same sky-into-grass move the pages themselves make -- so white
     sheets sit on color instead of on beige. */
  --ground: #E7EDFB;
  --ground-2: #FBE7EF;
  --stone: #3F3A44;
  --rose: #FF6FA3;
  --action: #35C6DA;
  --sky: #BFD7FF;
  --rule: #16110F;
  --card: #FFFFFF;
  --shadow: 0 18px 40px -26px rgba(22,17,15,.6);
  --pattern-ink: rgba(22,17,15,.06);
  --display: "Trebuchet MS", "Lucida Grande", Verdana, sans-serif;
  --body: "Segoe UI", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --ink:#F2EEF6; --ground:#14161F; --ground-2:#1E1620; --stone:#C9C2D2;
          --action:#35C6DA; --rule:#F2EEF6; --card:#1B1922; --shadow:0 18px 44px -22px rgba(0,0,0,.9);
          --pattern-ink: rgba(242,238,246,.05); }
}
:root[data-theme="dark"] { --ink:#F2EEF6; --ground:#14161F; --ground-2:#1E1620; --stone:#C9C2D2;
          --action:#35C6DA; --rule:#F2EEF6; --card:#1B1922; --shadow:0 18px 44px -22px rgba(0,0,0,.9);
          --pattern-ink: rgba(242,238,246,.05); }
:root[data-theme="light"] { --ink:#16110F; --ground:#E7EDFB; --ground-2:#FBE7EF; --stone:#3F3A44;
          --rule:#16110F; --card:#FFFFFF; --shadow:0 18px 40px -26px rgba(22,17,15,.6);
          --pattern-ink: rgba(22,17,15,.06); }

* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink);
  background-color: var(--ground);
  background-image: linear-gradient(165deg, var(--ground) 0%, var(--ground) 38%, var(--ground-2) 100%);
  background-attachment: fixed;
  font-family: var(--body); font-size: 19px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
/* Paw prints, stars and hearts scattered like the little accents on the pages. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--pattern); background-size: 300px 300px;
}
/* height:auto is not optional here -- the width/height attributes on each <img>
   are there to reserve space, and without this the picture is stretched to them. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--action); color: #16110F;
  padding: .6rem 1rem; border: 2px solid var(--rule); z-index: 50; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); line-height: 1.04; letter-spacing: -.025em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.12; letter-spacing: -.018em; }
h3 { font-size: 1.08rem; letter-spacing: -.008em; }
p, ul, ol, dl { margin: 0; }

.eyebrow, .nav a, .btn, .facts span, .crumbs { font-size: .82rem; text-transform: uppercase;
  letter-spacing: .11em; font-weight: 700; }
.whisper { color: var(--stone); font-size: .92rem; }

/* The header and footer rules run the full width, but their contents sit in the
   same centerd column as the page, so the logo lines up with the text below it. */
.bar { position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--ground) 90%, transparent);
  backdrop-filter: blur(10px); border-bottom: 2px solid var(--rule); }
.bar-in, .foot-in { max-width: 1180px; margin: 0 auto;
  padding: .7rem clamp(1rem, 4vw, 3rem); display: flex; align-items: center; gap: 1.2rem; }
.bar-in { flex-wrap: nowrap; }
.bar-in .btn { white-space: nowrap; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none;
  margin-right: auto; min-width: 0; }
.brand-mark { width: clamp(56px, 6vw, 78px); height: auto; flex: none; border-radius: 50%;
  border: 3px solid var(--rule); background: #FFFDFB; box-shadow: 3px 3px 0 var(--rule); }
.brand-name { font-family: var(--display); font-weight: 700;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem); white-space: nowrap;
  letter-spacing: -.02em; line-height: 1.05; }
.nav { display: flex; gap: clamp(.7rem, 1.4vw, 1.3rem); white-space: nowrap; }
.nav a { text-decoration: none; color: var(--stone); }
.nav a:hover, .nav a.here { color: var(--ink); }

.btn { display: inline-block; text-decoration: none; padding: .78rem 1.5rem;
  background: var(--action); color: #16110F; border: 2px solid var(--rule);
  box-shadow: 4px 4px 0 var(--rule); transition: transform .12s ease, box-shadow .12s ease; }
.btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--rule); }
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--rule); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-small { padding: .5rem 1rem; box-shadow: 3px 3px 0 var(--rule); }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }

main { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem); }
.block { padding: clamp(2.8rem, 6vw, 5rem) 0; display: flex; flex-direction: column; gap: 1.8rem; }
.narrow { max-width: 780px; }
.section-head { display: flex; flex-direction: column; gap: .7rem; max-width: 58ch; }
.section-head p { color: var(--stone); }
.row { display: flex; gap: .9rem; flex-wrap: wrap; }

.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4.5rem);
  align-items: center; padding: clamp(2.5rem,6vw,5.5rem) 0; }
.hero-copy { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
.framed { position: relative; padding: 1rem 1.35rem; }
.framed::before { content: ""; position: absolute; inset: 0; background-image: var(--frame);
  background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }
.lead { font-size: 1.12rem; max-width: 44ch; color: var(--stone); }

.wipe { position: relative; margin: 0; border: 3px solid var(--rule); background: var(--paper);
  box-shadow: var(--shadow); overflow: hidden; touch-action: none; user-select: none;
  container-type: inline-size; }
.wipe img { width: 100%; }
.wipe-line { position: absolute; inset: 0; width: 52%; overflow: hidden; }
.wipe-line img { width: 100cqw; max-width: none; }
.wipe-handle { position: absolute; top: 0; bottom: 0; left: 52%; width: 3px;
  background: var(--rule); cursor: ew-resize; }
.wipe-handle span { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px;
  transform: translate(-50%,-50%); border-radius: 50%; background: var(--action);
  border: 3px solid var(--rule); }
.wipe figcaption { position: absolute; inset: 0 0 auto 0; padding: .55rem; text-align: center;
  font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: #16110F; background: var(--action);
  border-bottom: 3px solid var(--rule); }

.facts { display: grid; grid-template-columns: repeat(4,1fr); border-block: 2px solid var(--rule);
  text-align: center; }
.facts div { padding: 1.3rem .5rem; display: flex; flex-direction: column; gap: .15rem; }
.facts div + div { border-left: 2px solid var(--rule); }
.facts strong { font-family: var(--display); font-size: 1.9rem; line-height: 1; }
.facts span { color: var(--stone); }

.grid { display: grid; gap: clamp(1.2rem,2.5vw,2rem); align-items: stretch;
  grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); }
.card { display: flex; flex-direction: column; gap: .7rem; height: 100%; }
.card-sheet { display: block; position: relative; border: 3px solid var(--rule);
  background: var(--paper); box-shadow: var(--shadow); transition: transform .16s ease; }
.card-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.card-sheet.playing .card-clip { opacity: 1; }
.card-sheet.playing:not(.cover-clip)::after {
  content: "Coloring in"; position: absolute; left: 0; right: 0; bottom: 0;
  padding: .35rem; text-align: center; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: #16110F;
  background: color-mix(in srgb, #fff 84%, transparent);
}
.card:hover .card-sheet { transform: translateY(-5px); }
/* Push the button to the bottom of the card: the blurbs are different
   lengths, and without this the buttons sit at different heights. */
.card .btn { align-self: flex-start; margin-top: auto; }
.card h3 { font-size: 1.3rem; line-height: 1.2; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { color: var(--action); }
.card-meta { color: var(--stone); font-size: .9rem; display: flex; gap: .6rem; }
.card-meta .price { color: var(--ink); font-weight: 700; }

/* Collection headings carry a highlighter swipe behind them -- in a shop that
   sells marker work that reads better than a rule, and it makes the sections
   findable while scrolling past a lot of covers. */
.collection h2 { font-size: clamp(2rem, 4.4vw, 3rem); display: flex; align-items: baseline;
  flex-wrap: wrap; gap: .85rem; isolation: isolate; }
.collection h2 span { position: relative; display: inline-block; }
.collection h2 span::before {
  content: ""; position: absolute; z-index: -1;
  left: -.28em; right: -.28em; bottom: .04em; height: .52em;
  background: var(--action); opacity: .55; border-radius: .45em .5em .4em .55em;
  transform: rotate(-.9deg);
}
.collection h2 em { font-family: var(--body); font-style: normal; font-weight: 700;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--stone); }

/* The hidden mouse is the one thing that separates these from every other
   printable coloring book, so it is said in the hero, in the facts, and on each
   book page rather than kept in a single section. */
.prose { display: flex; flex-direction: column; gap: 1rem; max-width: 60ch; }
.prose p { color: var(--stone); font-size: 1.06rem; }

.hook { border-left: 5px solid var(--action); padding: .5rem 0 .5rem .9rem;
  max-width: 46ch; color: var(--stone); }
.hook strong { color: var(--ink); }

.closer { border: 3px solid var(--rule); background: var(--card); box-shadow: var(--shadow);
  padding: clamp(2rem,5vw,3.4rem); margin-bottom: clamp(2rem,5vw,4rem);
  display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.closer p { color: var(--stone); max-width: 46ch; }

.deal { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.4rem,3vw,2.8rem);
  align-items: center; border: 3px solid var(--rule); background: var(--card);
  box-shadow: var(--shadow); padding: clamp(1.1rem,2.4vw,1.8rem); }
.deal-wall { display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; }
.deal-wall img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--rule); }
.deal-body { display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
.deal-body p { color: var(--stone); }

.bundle-hero { display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.5rem,3.5vw,3rem); align-items: center; border: 3px solid var(--rule);
  background: var(--card); box-shadow: var(--shadow); padding: clamp(1.2rem,2.5vw,2rem); }
.bundle-wall { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }
.bundle-wall img { width: 100%; aspect-ratio: 1; object-fit: cover;
  border: 2px solid var(--rule); }
.bundle-lead { display: flex; flex-direction: column; gap: .85rem; align-items: flex-start; }
.bundle-lead p { color: var(--stone); }
.bundle-facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap;
  gap: 1.4rem; }
.bundle-facts li { display: flex; flex-direction: column; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--stone); font-weight: 700; }
.bundle-facts strong { font-family: var(--display); font-size: 1.7rem; color: var(--ink);
  letter-spacing: -.02em; text-transform: none; }

.bundles { display: grid; gap: clamp(1.2rem,2.5vw,2rem);
  grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); }
.bundle { display: flex; flex-direction: column; border: 3px solid var(--rule);
  background: var(--card); box-shadow: var(--shadow); }
/* Covers fanned like a stack of books says "several of these" faster than a
   grid of cropped squares does. */
.bundle-stack { position: relative; height: 190px; background: var(--ground);
  border-bottom: 3px solid var(--rule); overflow: hidden; }
.bundle-stack img { position: absolute; top: 22px; width: 132px; border: 3px solid var(--rule);
  box-shadow: 4px 4px 0 rgba(22,17,15,.25); background: var(--paper);
  left: calc(12px + var(--i) * 58px);
  transform: rotate(calc((var(--i) - 1.5) * 3deg));
  transition: transform .18s ease; }
.bundle:hover .bundle-stack img { transform: rotate(calc((var(--i) - 1.5) * 5deg))
  translateY(-4px); }

.bundle-list { align-self: stretch; }
.bundle-list summary { cursor: pointer; font-weight: 700; font-size: .9rem; }
.bundle-list p { color: var(--stone); font-size: .9rem; padding-top: .4rem; }
.bundle-body { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start;
  padding: 1.1rem; flex: 1; }
.bundle-body p { color: var(--stone); }
.bundle-meta strong { color: var(--ink); }
.bundle-price { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin-top: auto; padding-top: .4rem; }
.bundle-price .now { font-family: var(--display); font-size: 1.9rem; color: var(--ink); }
.bundle-price .was { text-decoration: line-through; }
.bundle-price .save { background: var(--action); color: #16110F; font-weight: 700;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  padding: .2rem .5rem; border: 2px solid var(--rule); }
.bundle .btn { margin-top: .5rem; }

.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chips a { text-decoration: none; border: 2px solid var(--rule); background: var(--card);
  padding: .45rem .9rem; font-size: .92rem; font-weight: 700;
  box-shadow: 3px 3px 0 var(--rule); transition: transform .12s ease; }
.chips a:hover { transform: translate(-2px,-2px); }
.chips span { color: var(--stone); font-weight: 400; }

.crumbs { padding-top: 1.6rem; color: var(--stone); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs span { padding: 0 .4rem; }

.detail { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(1.6rem,4vw,3.5rem); align-items: start; padding: clamp(1.6rem,4vw,3rem) 0; }
.detail-cover img, .detail-cover video { display: block; width: 100%; height: auto;
  border: 3px solid var(--rule); background: var(--paper); box-shadow: var(--shadow); }
.detail-copy { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.spec { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5rem;
  color: var(--stone); }
.spec li { padding-left: 1.4rem; position: relative; }
.spec li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px;
  background: var(--rose); border: 1.5px solid var(--rule); }
.pricetag { font-family: var(--display); font-size: 2rem; }

/* Buy box: price and button together, so the two things that decide a purchase
   are never separated by a scroll. */
.buybox { align-self: stretch; display: flex; flex-direction: column; gap: .7rem;
  align-items: flex-start; border: 3px solid var(--rule); background: var(--card);
  box-shadow: var(--shadow); padding: 1.1rem; }
.buybox-price { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.buybox .pricetag { margin: 0; }

.upsell { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  flex-wrap: wrap; border: 3px dashed var(--rule); background: var(--card);
  padding: 1.1rem 1.3rem; margin-top: clamp(1rem,2.5vw,1.8rem); }
.upsell p { color: var(--stone); max-width: 62ch; }
.upsell strong { color: var(--ink); }

/* Pages open full size: a thumbnail cannot answer "is this too detailed for a
   four-year-old?", which is the question a parent is actually asking. */
.shots { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }
.shot { padding: 0; border: 3px solid var(--rule); background: var(--paper); cursor: zoom-in;
  box-shadow: var(--shadow); transition: transform .16s ease; display: block; }
.shot:hover { transform: translateY(-5px); }
.shot img { width: 100%; height: auto; }

.lightbox { position: fixed; inset: 0; z-index: 60; display: none; place-items: center;
  padding: clamp(1rem,4vw,3rem); background: rgba(22,17,15,.82); }
.lightbox[open] { display: grid; }
.lightbox img { max-width: min(92vw, 900px); max-height: 88vh; width: auto;
  border: 3px solid #16110F; background: #fff; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); }
.lightbox button { position: absolute; top: clamp(.8rem,3vw,1.6rem);
  right: clamp(.8rem,3vw,1.6rem); }

.previews { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }
.previews img { border: 3px solid var(--rule); background: var(--paper); box-shadow: var(--shadow);
  transition: transform .16s ease; }
.previews a { display: block; }
.previews a:hover img { transform: translateY(-5px); }

.free { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem,4vw,3.5rem);
  align-items: center; }
.free > div { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.free p:not(.eyebrow):not(.whisper) { color: var(--stone); max-width: 46ch; }
.free img { border: 3px solid var(--rule); background: var(--paper); box-shadow: var(--shadow);
  max-width: 340px; }

/* The find-Leo panel. Showing eight different mice side by side made the
   drawing differences between books obvious, so the site shows ONE Leo and
   turns the point into the game itself. */
.hunt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem,4vw,3.5rem);
  align-items: center; }
.hunt-copy { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.hunt-copy p { color: var(--stone); max-width: 46ch; }
.hunt-page { position: relative; margin: 0; border: 3px solid var(--rule);
  background: var(--paper); box-shadow: var(--shadow); line-height: 0; }
.hunt-page svg { position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; }
.hunt-page path { fill: none; stroke: #E8384F; stroke-width: 1.1; stroke-linecap: round;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.hunt-page.found path { animation: draw-ring .85s ease forwards; }
@keyframes draw-ring { to { stroke-dashoffset: 0; } }

.leo-card { margin: .4rem 0 0; display: flex; gap: .9rem; align-items: center; }
.leo-card img { width: 96px; border: 3px solid var(--rule); background: var(--paper);
  box-shadow: 3px 3px 0 var(--rule); }
.leo-card figcaption { font-size: .9rem; color: var(--stone); max-width: 22ch; }

.banner { overflow-x: auto; border: 3px solid var(--rule); background: var(--paper);
  box-shadow: var(--shadow); }
.banner img { min-width: 900px; }

.leo { display: grid; grid-template-columns: 300px 1fr; gap: clamp(1.5rem,4vw,3.5rem);
  align-items: center; }
.leo img { border: 3px solid var(--rule); background: var(--paper); box-shadow: var(--shadow); }
.leo div { display: flex; flex-direction: column; gap: .9rem; }
.leo p { color: var(--stone); max-width: 52ch; }

.steps { list-style: none; padding: 0; display: grid; gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); }
.steps li { display: flex; flex-direction: column; gap: .45rem; padding-top: 1rem;
  border-top: 2px solid var(--rule); }
.step-n { font-family: var(--display); font-size: 1.5rem; color: var(--rose); line-height: 1; }
.steps p { color: var(--stone); }

.qa { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); }
.qa dt { font-weight: 700; margin-bottom: .25rem; }
.qa dd { margin: 0; color: var(--stone); }

.foot { border-top: 2px solid var(--rule); margin-top: 1.5rem; }
.foot-legal { display: flex; flex-direction: column; gap: .5rem; padding-top: 0;
  border-top: 2px solid var(--rule); }
.foot-legal p { max-width: 78ch; }
.foot-legal a { text-decoration: underline; }

.foot-in { padding-block: 2rem; justify-content: space-between; flex-wrap: wrap;
  align-items: flex-start; }
.foot nav { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.foot a { color: var(--stone); text-decoration: none; font-size: .92rem; }
.foot a:hover { color: var(--ink); }

#leoHidden { position: absolute; width: 30px; opacity: .45; transition: opacity .2s ease; }
#leoHidden:hover { opacity: 1; }

@media (max-width: 880px) {
  .hero, .detail, .leo, .free, .hunt, .bundle-hero, .deal { grid-template-columns: 1fr; }
  .bundle-wall, .deal-wall { grid-template-columns: repeat(4,1fr); }
  .facts { grid-template-columns: repeat(2,1fr); }
  .facts div:nth-child(3) { border-left: none; }
  .facts div:nth-child(n+3) { border-top: 2px solid var(--rule); }
  .leo img { max-width: 240px; }
  .nav { display: none; }
  .bar-in { gap: .8rem; }
}
.showcase .section-head { text-align: center; }
.showreel { position: relative; max-width: 520px; margin: 0 auto; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); background: var(--card); }
.showreel video { display: block; width: 100%; height: auto; }
.showreel-sound { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); border: 0; cursor: pointer; font: 600 15px/1 var(--body); color: var(--ink); background: rgba(255,255,255,.92); padding: 11px 18px; border-radius: 999px; box-shadow: 0 6px 18px -8px rgba(0,0,0,.5); transition: background .15s ease, color .15s ease; }
.showreel-sound:hover { background: #fff; }
.showreel-sound.is-on { background: var(--action); color: #fff; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }