/* The existing paper-and-crayon picture-story language, inside the journey. */
.crayon-story{list-style:none;max-width:1100px;margin:34px auto 48px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,5vw,64px)}
.crayon-story li{min-width:0;text-align:center}
.crayon-story .story-picture{position:relative;max-width:260px;aspect-ratio:1;margin:0 auto 14px}
.crayon-story .story-picture>img{display:block;width:100%;height:100%;object-fit:contain}
.crayon-story h3{font:600 clamp(22px,2.1vw,28px)/1.2 Fredoka,sans-serif;letter-spacing:-.02em;margin:0 0 10px;color:var(--ink)}
.crayon-story p{max-width:27ch;margin:0 auto;font-size:16px;line-height:1.6;color:var(--ink)}
.story-scribble{position:absolute;bottom:4%;left:10%;width:80%;height:16%;color:#c73159;overflow:visible;pointer-events:none}
.story-scribble path{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.story-feet{position:absolute;left:12%;bottom:7%;width:76%;height:16%;overflow:visible;color:#743348;pointer-events:none}
.story-feet path{fill:currentColor;opacity:.45}
.story-hello{position:absolute;right:-1%;top:4%;font:500 28px/1.1 Caveat,cursive;color:#852344;transform:rotate(8deg)}
.crayon-story[data-story-motion=on][data-story-phase="0"] li:nth-child(1) .story-picture>img{animation:story-wish 3.6s var(--entrance) both}
.crayon-story[data-story-motion=on][data-story-phase="1"] .story-scribble{animation:story-draw 2s linear both}
.crayon-story[data-story-motion=on][data-story-phase="1"] .story-feet path{animation:story-step 1.6s var(--entrance) both}
.crayon-story[data-story-motion=on][data-story-phase="1"] .story-feet path:nth-child(2){animation-delay:.22s}
.crayon-story[data-story-motion=on][data-story-phase="1"] .story-feet path:nth-child(3){animation-delay:.44s}
.crayon-story[data-story-motion=on][data-story-phase="1"] .story-feet path:nth-child(4){animation-delay:.66s}
.crayon-story[data-story-motion=on][data-story-phase="1"] .story-feet path:nth-child(5){animation-delay:.88s}
.crayon-story[data-story-motion=on][data-story-phase="2"] .story-hello{animation:story-hello 3.6s var(--entrance) both}
.crayon-story[data-story-motion=off] .story-scribble{clip-path:none}
@keyframes story-wish{0%,100%{transform:rotate(0deg)}20%{transform:rotate(-3deg)}36%{transform:rotate(2deg)}52%,88%{transform:rotate(0deg)}}
@keyframes story-draw{from{clip-path:inset(-20% 100% -20% -20%)}to{clip-path:inset(-20%)}}
@keyframes story-step{0%{opacity:.25;transform:translateY(3px)}35%,100%{opacity:1;transform:translateY(0)}}
@keyframes story-hello{0%,100%{transform:rotate(8deg) scale(1)}14%{transform:rotate(-4deg) scale(1.06)}28%{transform:rotate(5deg) scale(1)}42%,84%{transform:rotate(0deg) scale(1)}}
@media(max-width:650px){.crayon-story{grid-template-columns:1fr;gap:26px;margin:24px auto 36px}.crayon-story li{display:grid;grid-template-columns:minmax(112px,38%) 1fr;gap:18px;align-items:center;text-align:left}.crayon-story .story-picture{width:100%;margin:0}.crayon-story h3{font-size:22px}.crayon-story p{font-size:15px;margin:0;max-width:25ch}.story-hello{font-size:23px}}
@media(prefers-reduced-motion:reduce){.crayon-story img,.crayon-story .story-scribble,.crayon-story .story-feet path,.crayon-story .story-hello{animation:none!important}.crayon-story .story-scribble{clip-path:none}.crayon-story .story-feet path{opacity:1}}

.crayon-story-note{text-align:center;font-size:13px;line-height:1.5;color:#746572;margin:-18px 0 32px}