/* Nemur's Conspiracy — animated reader
   Palette lifted from Giavanna Loya's artwork: sage, butter, cream, ink, moo-orange. */

:root{
  --sage:#cfdcae; --sage-deep:#a9bd83; --sage-dark:#5f7040;
  --butter:#f8f0c8; --cream:#fdf9ec; --paper:#fffdf5;
  --ink:#2b2721; --ink-soft:#5c554a; --ink-faint:#9b9384;
  --moo:#ee9d54; --moo-deep:#d97e2e;
  --tail:#8d8d86; --night:#22304a; --night-deep:#141d2e;
  --r-sm:12px; --r-md:20px; --r-lg:32px;
  --shadow-soft:0 10px 40px rgba(43,39,33,.13);
  --shadow-lift:0 26px 70px rgba(43,39,33,.2);
  --ease:cubic-bezier(.22,.61,.36,1);
  --font-d:'Baloo 2',system-ui,sans-serif;
  --font-b:'Nunito',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font-b); color:var(--ink);
  background:var(--cream); overflow:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:3px solid var(--moo-deep);outline-offset:3px;border-radius:6px}

.screen{position:fixed;inset:0;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.screen.active{opacity:1;visibility:visible}

/* ───────────────────────── COVER ───────────────────────── */
.cover{
  overflow-y:auto;
  background:
    radial-gradient(900px 620px at 12% 8%, rgba(255,255,255,.75), transparent 60%),
    linear-gradient(168deg,var(--sage) 0%,#e2e9c4 42%,var(--butter) 100%);
}
.cover-wrap{
  min-height:100%;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(24px,4vw,72px);align-items:center;
  padding:clamp(24px,4vw,64px) clamp(20px,5vw,80px);max-width:1240px;margin:0 auto;
}
.cover-art{position:relative;justify-self:end;width:min(100%,420px);
  transform:rotate(-2.2deg);animation:coverFloat 9s var(--ease) infinite}
.cover-art img{
  border-radius:var(--r-md);box-shadow:var(--shadow-lift);
  border:6px solid var(--paper);
}
.cover-glow{position:absolute;inset:-14%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.85),transparent 65%);filter:blur(14px)}
@keyframes coverFloat{0%,100%{transform:rotate(-2.2deg) translateY(0)}50%{transform:rotate(-1.2deg) translateY(-14px)}}

.eyebrow{margin:0 0 .5rem;font-family:var(--font-d);font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;font-size:.78rem;color:var(--sage-dark)}
.cover-title{
  margin:0;font-family:var(--font-d);font-weight:800;line-height:.94;
  font-size:clamp(2.9rem,7.4vw,5.4rem);letter-spacing:-.015em;color:var(--ink);
}
.cover-title::first-letter{color:var(--moo-deep)}
.cover-sub{margin:.75rem 0 0;font-size:clamp(1rem,1.7vw,1.28rem);font-weight:600;color:var(--ink-soft)}
.tail-rule{display:block;width:230px;max-width:60%;height:auto;margin:1.35rem 0 1.1rem;color:var(--tail)}
.tail-path{stroke-dashoffset:0;animation:tailDraw 2.4s var(--ease) both}
@keyframes tailDraw{from{stroke-dasharray:0 260;opacity:0}to{stroke-dasharray:14 11;opacity:1}}
.cover-by{margin:0;font-size:1.02rem;line-height:1.7;color:var(--ink-soft)}
.cover-by strong{color:var(--ink)}
.cover-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.6rem 0 1.1rem}
.cover-home{margin:0;font-size:.82rem;letter-spacing:.04em;color:var(--ink-faint)}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.5rem;border-radius:999px;
  font-family:var(--font-d);font-weight:700;font-size:1.02rem;transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s}
.btn .ico{width:20px;height:20px;flex:0 0 auto}
.btn--primary{background:var(--ink);color:var(--paper);box-shadow:0 8px 24px rgba(43,39,33,.28)}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(43,39,33,.34)}
.btn--ghost{background:rgba(255,255,255,.72);color:var(--ink);box-shadow:inset 0 0 0 2px rgba(43,39,33,.16)}
.btn--ghost:hover{transform:translateY(-3px);background:#fff}

/* ───────────────────────── READER ───────────────────────── */
.reader{background:var(--cream)}
.stage{position:absolute;inset:0}

.spread{
  position:absolute;inset:0;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .55s var(--ease),visibility .55s,transform .55s var(--ease);
  transform:translateX(4%) scale(.985);
}
.spread.is-current{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.spread.is-behind{transform:translateX(-4%) scale(.985)}

/* --- art half --- */
.art{position:relative;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(150deg,#e7edd0,var(--butter))}
.art img{
  width:100%;height:100%;object-fit:contain;object-position:center;
  padding:clamp(10px,1.6vw,26px);
  transform:scale(1.005);transition:transform 14s linear;
}
.spread.is-current .art img{transform:scale(1.055)}
.art::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 120px rgba(43,39,33,.14)}
.art-frame{position:absolute;inset:0;pointer-events:none;z-index:3}

/* --- text half --- */
.leaf{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,4vw,68px) clamp(28px,4vw,68px) clamp(74px,7vw,96px);overflow-y:auto;
  background:linear-gradient(178deg,#dbe6c2 0%,var(--butter) 62%,#fbf4d4 100%);
}
.leaf::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(700px 400px at 82% 14%,rgba(255,255,255,.7),transparent 62%)}
.verse{position:relative;margin:0;max-width:42ch}
.vline{
  display:block;font-family:var(--font-d);font-weight:600;
  font-size:clamp(1.05rem,1.55vw,1.6rem);line-height:1.42;color:var(--ink);
  opacity:0;transform:translateY(16px);
  text-wrap:pretty;text-indent:-.55em;padding-left:.55em;
}
.vline.gap{height:.7em}
.vline em{font-style:italic;color:var(--moo-deep);font-weight:700}
.spread.is-current .vline{animation:lineIn .72s var(--ease) both;animation-delay:var(--d)}
@keyframes lineIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.vline.speaking{color:var(--moo-deep);transition:color .3s}

.folio{position:absolute;bottom:clamp(16px,3vw,32px);left:clamp(28px,5vw,84px);
  font-family:var(--font-d);font-weight:700;font-size:.86rem;letter-spacing:.16em;color:var(--sage-dark)}

/* ───────────────── per-page effects ───────────────── */
/* rain */
.fx-rain{position:absolute;inset:0;overflow:hidden;z-index:2;pointer-events:none}
.fx-rain i{position:absolute;top:-18%;width:2px;height:16%;border-radius:2px;
  background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.72));
  animation:fall linear infinite}
@keyframes fall{from{transform:translate3d(0,-20vh,0)}to{transform:translate3d(-26px,120vh,0)}}

/* moo burst */
.fx-moo{position:absolute;inset:0;z-index:2;pointer-events:none}
.spread.is-current .fx-moo .ring{animation:mooRing 2.6s var(--ease) infinite}
.fx-moo .ring{position:absolute;top:16%;right:12%;width:120px;height:120px;margin:-60px -60px 0 0;
  border:4px solid rgba(238,157,84,.7);border-radius:50%;opacity:0}
.fx-moo .ring:nth-child(2){animation-delay:.55s !important}
.fx-moo .ring:nth-child(3){animation-delay:1.1s !important}
@keyframes mooRing{0%{transform:scale(.35);opacity:.85}70%{opacity:0}100%{transform:scale(2.6);opacity:0}}
.spread[data-fx="moo"].is-current .art img{animation:mooShake 1.9s var(--ease) infinite}
@keyframes mooShake{0%,100%{transform:scale(1.03) rotate(0)}25%{transform:scale(1.06) rotate(.8deg)}75%{transform:scale(1.06) rotate(-.8deg)}}

/* night twinkle */
.fx-night{position:absolute;inset:0;z-index:2;pointer-events:none}
.fx-night i{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;
  box-shadow:0 0 10px 3px rgba(255,255,255,.75);opacity:0;animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.95;transform:scale(1)}}
.spread[data-fx="night"] .leaf{background:linear-gradient(178deg,#2f3d57,#1d2739 70%,#161f2e)}
.spread[data-fx="night"] .vline{color:#eef2e2}
.spread[data-fx="night"] .vline em{color:#ffc98d}
.spread[data-fx="night"] .folio{color:#8fa2c0}

/* jungle depth */
.spread[data-fx="jungle"] .art{background:#1d2a1a}
.spread[data-fx="jungle"] .art::after{box-shadow:inset 0 0 190px rgba(6,14,4,.62)}
.fx-leaf{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.fx-leaf i{position:absolute;width:26px;height:12px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:rgba(122,158,80,.55);animation:drift linear infinite}
@keyframes drift{from{transform:translate3d(-10vw,-12vh,0) rotate(0)}to{transform:translate3d(112vw,108vh,0) rotate(520deg)}}

/* hearts */
.fx-heart{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.fx-heart i{position:absolute;bottom:-8%;width:20px;height:20px;
  background:var(--moo);clip-path:path("M10 18 C 2 12, 0 6, 4 3 C 7 .5, 10 3, 10 5 C 10 3, 13 .5, 16 3 C 20 6, 18 12, 10 18 Z");
  opacity:0;animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.9}
  100%{transform:translateY(-108vh) scale(1.15);opacity:0}}

/* laugh bounce, tumble, sway, pop, freeze, peek, shelf */
.spread[data-fx="laugh"].is-current .art img{animation:laughBob 1.5s ease-in-out infinite}
@keyframes laughBob{0%,100%{transform:scale(1.03) translateY(0)}50%{transform:scale(1.05) translateY(-10px)}}
.spread[data-fx="tumble"].is-current .art img{animation:tumbleSpin 7s ease-in-out infinite}
@keyframes tumbleSpin{0%,100%{transform:scale(1.03) rotate(-1.6deg)}50%{transform:scale(1.05) rotate(1.6deg)}}
.spread[data-fx="sway"].is-current .art img{animation:swayA 5.5s ease-in-out infinite}
@keyframes swayA{0%,100%{transform:scale(1.02) translateX(-1.6%)}50%{transform:scale(1.05) translateX(1.6%)}}
.spread[data-fx="pop"].is-current .art img{animation:popIn 1.1s var(--ease) both, swayA 7s ease-in-out 1.1s infinite}
@keyframes popIn{0%{transform:scale(.86)}62%{transform:scale(1.07)}100%{transform:scale(1.02)}}
.spread[data-fx="freeze"].is-current .art img{animation:freezeHold 4.6s steps(1,end) infinite}
@keyframes freezeHold{0%{transform:scale(1.06)}22%{transform:scale(1.02)}100%{transform:scale(1.02)}}
.spread[data-fx="peek"].is-current .art img{transition:transform 9s linear;transform:scale(1.06) translateX(-2%)}
.spread[data-fx="shelf"].is-current .art img{transition:transform 11s linear;transform:scale(1.07) translateY(3%)}

/* ── afterword + closing ── */
.spread--prose{grid-template-columns:1fr;grid-template-rows:1fr}
.prose-wrap{overflow-y:auto;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(20px,4vw,64px);align-items:center;padding:clamp(28px,5vw,72px);
  background:linear-gradient(168deg,#e7edd0,var(--butter));min-height:100%}
.prose-wrap img{border-radius:var(--r-md);box-shadow:var(--shadow-soft);border:5px solid var(--paper);
  max-height:78vh;width:100%;object-fit:contain;background:var(--paper)}
.prose h2{margin:0 0 .8rem;font-family:var(--font-d);font-weight:800;
  font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.06;color:var(--ink)}
.prose p{margin:0 0 1rem;font-size:clamp(1rem,1.28vw,1.14rem);line-height:1.78;color:var(--ink-soft);max-width:60ch}
.prose .credit{font-size:.9rem;color:var(--ink-faint)}
.prose .caption{font-family:var(--font-d);font-weight:700;font-size:clamp(1.15rem,2.2vw,1.7rem);color:var(--ink)}
.prose-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}

/* ───────────────────────── HUD / NAV ───────────────────────── */
.hud{position:fixed;top:max(14px,env(safe-area-inset-top));right:14px;z-index:40;display:flex;gap:.45rem}
.hud-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.86);box-shadow:var(--shadow-soft);color:var(--ink);
  transition:transform .2s var(--ease),background .2s}
.hud-btn:hover{transform:translateY(-2px);background:#fff}
.hud-btn svg{width:21px;height:21px}
.hud-btn .ico-mute{display:none}
.hud-btn[aria-pressed="false"]#btn-narrate .ico-speak{display:none}
.hud-btn[aria-pressed="false"]#btn-narrate .ico-mute{display:block}
#btn-narrate[aria-pressed="true"]{background:var(--moo);color:#fff}
#btn-narrate[aria-pressed="true"] .wave1{animation:pulseW 1.2s ease-in-out infinite}
#btn-narrate[aria-pressed="true"] .wave2{animation:pulseW 1.2s ease-in-out .2s infinite}
@keyframes pulseW{0%,100%{opacity:.35}50%{opacity:1}}
#btn-motion[aria-pressed="true"]{background:var(--night);color:#fff}

.nav{position:fixed;top:50%;translate:0 -50%;z-index:40;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.82);box-shadow:var(--shadow-soft);
  color:var(--ink);transition:transform .2s var(--ease),opacity .2s,background .2s}
.nav svg{width:26px;height:26px}
.nav--prev{left:14px}.nav--next{right:14px}
.nav:hover{background:#fff;transform:translateY(-2px) scale(1.06)}
.nav[disabled]{opacity:.28;cursor:default}
.nav[disabled]:hover{transform:none}

.rail{position:fixed;bottom:max(14px,env(safe-area-inset-bottom));left:50%;translate:-50% 0;z-index:40;
  display:flex;gap:7px;padding:9px 13px;border-radius:999px;
  background:rgba(255,255,255,.8);box-shadow:var(--shadow-soft);backdrop-filter:blur(6px)}
.dot{width:9px;height:9px;border-radius:50%;background:rgba(43,39,33,.22);transition:all .28s var(--ease)}
.dot[aria-selected="true"]{background:var(--moo-deep);width:26px;border-radius:999px}
.dot:hover{background:rgba(43,39,33,.45)}

/* ───────────────────────── RESPONSIVE ───────────────────────── */
@media (max-width:1000px){
  .cover-wrap{grid-template-columns:1fr;text-align:center;padding-top:clamp(34px,9vw,64px)}
  .cover-art{justify-self:center;width:min(78%,320px)}
  .cover-actions{justify-content:center}
  .tail-rule{margin-inline:auto}
  .spread{grid-template-columns:1fr;grid-template-rows:42vh 1fr}
  .spread--prose{grid-template-rows:1fr}
  .spread.is-current .art img{transform:scale(1.02)}
  .art img{padding:8px}
  .prose-wrap{grid-template-columns:1fr;align-items:start;align-content:start;
    padding:clamp(64px,14vw,88px) 56px 104px;gap:22px}
  .prose-wrap img{max-height:38vh;object-fit:contain}
  .prose p{max-width:none}
  .leaf{padding:clamp(22px,6vw,40px) clamp(22px,6vw,40px) 88px}
  .verse{max-width:34ch;margin-inline:auto;text-align:center;text-indent:0}
  .vline{text-indent:0;padding-left:0}
  .folio{left:50%;translate:-50% 0;bottom:74px}
  .nav{width:46px;height:46px}
  .nav--prev{left:8px}.nav--next{right:8px}
}
@media (max-width:520px){
  .vline{font-size:clamp(1.18rem,5.4vw,1.6rem)}
  .rail{gap:5px;padding:8px 11px}
  .dot{width:7px;height:7px}
  .dot[aria-selected="true"]{width:20px}
}

/* ───────────────────────── CALM MODE / REDUCED MOTION ───────────────────────── */
body.calm .art img,
body.calm .cover-art,
body.calm .fx-rain i,body.calm .fx-night i,body.calm .fx-leaf i,body.calm .fx-heart i,
body.calm .fx-moo .ring,body.calm .tail-path{animation:none !important;transition:none !important}
body.calm .art img{transform:scale(1.005) !important}
body.calm .vline{animation:none !important;opacity:1 !important;transform:none !important}
body.calm .fx-rain,body.calm .fx-night,body.calm .fx-leaf,body.calm .fx-heart,body.calm .fx-moo{opacity:.25}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.15s !important}
  .vline{opacity:1 !important;transform:none !important}
}

/* ═══ Version two — the dollies ═══════════════════════════════════════════ */

.dolly-layer{
  position:absolute;z-index:4;pointer-events:none;
  transform:scale(1.005);transition:transform 14s linear;
}
.spread.is-current .dolly-layer{transform:scale(1.055)}
body.calm .dolly-layer{transform:scale(1.005) !important;transition:none !important}

.dolly{
  position:absolute;pointer-events:auto;appearance:none;cursor:pointer;
  width:clamp(46px,9%,84px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:0;padding:0;background:transparent;border-radius:50%;
  -webkit-tap-highlight-color:transparent;
}
.dolly::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:3px dashed rgba(43,39,33,.5);
  background:radial-gradient(circle,rgba(255,255,255,.5),rgba(255,255,255,.06) 72%);
  box-shadow:0 0 0 2px rgba(255,255,255,.6),0 3px 12px rgba(43,39,33,.16);
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.dolly::after{
  content:"";position:absolute;inset:-9%;border-radius:50%;
  border:2px solid var(--moo,#ee9d54);opacity:0;
}
.dolly:hover::before{transform:scale(1.09);border-color:rgba(43,39,33,.55)}
.dolly:focus-visible{outline:3px solid var(--night,#22304a);outline-offset:4px}
.dolly:active::before{transform:scale(.93)}

/* the gentle "there's something here" pulse, only while unwoken */
.spread.is-current .dolly:not(.is-awake):not(.dolly--gone)::after{
  animation:dollyPulse 2.6s ease-out infinite;
}
.spread.is-current .dolly--watched::after{animation-duration:4.2s}
@keyframes dollyPulse{
  0%  {opacity:.85;transform:scale(.82)}
  70% {opacity:0;transform:scale(1.5)}
 100% {opacity:0;transform:scale(1.5)}
}

/* awake */
.dolly.is-awake::before{
  border-style:solid;border-color:var(--moo,#ee9d54);
  background:radial-gradient(circle,rgba(255,214,140,.62),rgba(255,214,140,0) 70%);
  box-shadow:0 0 26px 6px rgba(238,157,84,.42);
}
.dolly.just-woke{animation:dollyWake .78s cubic-bezier(.28,1.5,.4,1)}
@keyframes dollyWake{
  0%  {transform:translate(-50%,-50%) scale(1)}
  28% {transform:translate(-50%,-62%) scale(1.24) rotate(-7deg)}
  52% {transform:translate(-50%,-48%) scale(.96) rotate(5deg)}
  76% {transform:translate(-50%,-55%) scale(1.08) rotate(-2deg)}
 100% {transform:translate(-50%,-50%) scale(1)}
}

/* a grown-up is watching */
.dolly.is-shh{animation:dollyShh .6s ease-in-out}
.dolly.is-shh::before{border-color:var(--night,#22304a)}
@keyframes dollyShh{
  0%,100%{transform:translate(-50%,-50%) rotate(0)}
  20%{transform:translate(-50%,-50%) rotate(-4deg)}
  45%{transform:translate(-50%,-50%) rotate(4deg)}
  70%{transform:translate(-50%,-50%) rotate(-2deg)}
}

/* after the goodbye */
.dolly--gone::before{
  border-style:dotted;border-color:rgba(43,39,33,.2);
  background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,0) 70%);
}
.dolly--gone.is-touched::before{
  animation:dollyFade .9s ease-out;
}
@keyframes dollyFade{
  0%{opacity:1;transform:scale(1)}
  40%{opacity:.55;transform:scale(1.06)}
  100%{opacity:1;transform:scale(1)}
}

/* sparkles */
.dolly-spark{
  position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;
  background:var(--moo,#ee9d54);pointer-events:none;
  animation:dollySpark 1.05s ease-out forwards;animation-delay:var(--d,0s);
}
@keyframes dollySpark{
  0%  {opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(0) scale(.4)}
  22% {opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-56px) scale(.15)}
}

/* the counter */
.dolly-tally{
  display:inline-flex;align-items:center;gap:7px;
  height:40px;padding:0 13px 0 10px;border-radius:20px;
  background:rgba(253,249,236,.9);border:1.5px solid rgba(43,39,33,.16);
  color:var(--ink,#2b2721);backdrop-filter:blur(7px);
  font-family:"Baloo 2",system-ui,sans-serif;font-weight:700;
  font-size:.92rem;letter-spacing:.01em;font-variant-numeric:tabular-nums;
  transition:background .3s ease,border-color .3s ease,color .3s ease;
}
.dolly-tally svg{width:22px;height:22px;flex:none;color:var(--moo-deep,#d97e2e)}
.dolly-tally.is-full{
  background:var(--moo,#ee9d54);border-color:var(--moo-deep,#d97e2e);color:#3a2408;
}
.dolly-tally.is-full svg{color:#3a2408}

/* the banner */
.dolly-toast{
  position:fixed;left:50%;bottom:clamp(76px,11vh,116px);
  transform:translate(-50%,14px);
  max-width:min(88vw,30rem);padding:11px 20px;border-radius:15px;
  background:rgba(34,48,74,.94);color:#fdf9ec;
  font-family:"Nunito",system-ui,sans-serif;font-weight:700;font-size:1rem;
  text-align:center;line-height:1.35;
  box-shadow:0 12px 34px rgba(34,48,74,.3);
  opacity:0;pointer-events:none;z-index:60;
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,1.3,.4,1);
}
.dolly-toast.is-up{opacity:1;transform:translate(-50%,0)}

body.calm .dolly::after{animation:none !important;opacity:0 !important}
body.calm .dolly.just-woke,
body.calm .dolly.is-shh{animation:none !important}

@media (prefers-reduced-motion:reduce){
  .dolly::after,.dolly.just-woke,.dolly.is-shh,.dolly-spark{animation:none !important}
  .dolly-layer{transition:none !important}
}

@media (max-width:1000px){
  .spread.is-current .dolly-layer{transform:scale(1.02)}
}
@media (max-width:760px){
  .dolly{width:clamp(34px,10%,54px)}
  .dolly::before{border-width:2px}
  .dolly-tally{height:38px;padding:0 11px 0 9px;font-size:.86rem}
  .dolly-toast{bottom:clamp(92px,14vh,128px);font-size:.94rem;padding:10px 16px}
}

/* cover flag for version two */
.v2-flag{
  margin:26px 0 0;max-width:40ch;
  font-family:"Nunito",system-ui,sans-serif;font-size:.94rem;line-height:1.5;
  color:rgba(43,39,33,.72);
}
.v2-flag span{
  display:inline-block;margin-right:8px;padding:2px 9px;border-radius:999px;
  background:var(--moo,#ee9d54);color:#3a2408;
  font-family:"Baloo 2",system-ui,sans-serif;font-weight:800;
  font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
  vertical-align:2px;
}
@media (max-width:760px){.v2-flag{font-size:.88rem;margin-top:14px}}

/* On a phone the art panel is short and the picture was running off the bottom,
   which put the third dolly on page six out of a child's reach. Give the image a
   definite box so it letterboxes instead of cropping, and every dolly on every
   page can be tapped. Version one is untouched. */
@media (max-width:1000px){
  .art{position:relative}
  .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
}