:root{color-scheme:light}html{-webkit-text-size-adjust:100%}body{margin:0}img,video{max-width:100%}[hidden]{display:none!important}
/* Layout: one flight, top to bottom. Sky (boarding) -> a stop you play -> landing on the book's own mustard yellow. */
:root{
  --sky:#bde8f8; --sky-deep:#8fd3f0; --cloud:#ffffff;
  --mustard:#ffcc00; --red:#e20e17; --blue:#1d3f8f; --blue-bright:#1c9ad6;
  --ink:#16264d; --pupil:#1d1d1b; --orange:#e8541a; --pencil:#3b3b3d; --paper-warm:#fffaf0; --tan:#bd9b52; --vino:#591d33; --stamp-ink:#5a6aa0; --ink-soft:#44557c; --paper:#ffffff; --wa:#128c4a;
  --display:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;
  --ticket:"Bebas Neue","Arial Narrow",Impact,sans-serif;
  --hand:"Caveat","Segoe Print","Bradley Hand",cursive;
  --r:22px;
}
*{box-sizing:border-box}
body{background:var(--sky);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;font-weight:500;overflow-x:hidden}
h1,h2,h3{font-family:var(--display);line-height:1.08;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
.wrap{max-width:720px;margin:0 auto;padding-inline:16px}

/* language switch */
.lang{display:flex;justify-content:flex-end;gap:6px;padding-block:8px 2px}
.lang a{display:inline-block;text-decoration:none;font:700 14px var(--body);letter-spacing:.04em;border:2px solid var(--blue);background:transparent;color:var(--blue);border-radius:999px;padding:6px 14px;cursor:pointer}
.lang a[aria-current="page"]{background:var(--blue);color:var(--cloud)}

/* sky */
.sky{position:relative;background:linear-gradient(var(--sky-deep),var(--sky) 55%);padding-block:0 56px;overflow:hidden}
.puff{position:absolute;background:var(--cloud);border-radius:999px;opacity:.85;filter:blur(2px);pointer-events:none}
.puff::before,.puff::after{content:"";position:absolute;background:var(--cloud);border-radius:50%}
.puff::before{width:55%;height:170%;left:14%;top:-80%}
.puff::after{width:42%;height:130%;right:14%;top:-50%}
.p1{width:210px;height:54px;left:-60px;top:270px;animation:drift 38s linear infinite alternate}
.p2{width:260px;height:64px;right:-90px;top:420px;animation:drift 46s linear infinite alternate-reverse}
.p3{width:180px;height:46px;left:8%;top:760px;animation:drift 52s linear infinite alternate}
@keyframes drift{from{transform:translateX(-18px)}to{transform:translateX(34px)}}
.hero{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding-top:14px}
.covertop{position:relative;z-index:1;background:var(--mustard);text-align:center}
.covertop .logo{display:inline-block;width:min(270px,66vw);margin-bottom:6px}
.covertop .logo img{display:block;width:100%;height:auto}
.band{background:var(--red);color:var(--cloud);font:500 15px var(--display);letter-spacing:.02em;padding:7px 16px 6px;border-radius:55% 45% 0 0/9px 12px 0 0;margin-top:-4px;position:relative}
.logo{position:relative;line-height:0}
.eye{position:absolute;aspect-ratio:1;border-radius:50%;background:var(--cloud);transform:translate(-50%,-50%);pointer-events:none}
.eye.e1{left:32%;top:25.5%;width:5.9%}
.eye.e2{left:76.44%;top:27.65%;width:5.6%}
.eye i{position:absolute;left:21%;top:21%;width:58%;height:58%;border-radius:50%;background:var(--pupil);transition:transform .12s ease-out;will-change:transform}
.eye i::after{content:"";position:absolute;left:36%;top:24%;width:24%;height:24%;border-radius:50%;background:var(--cloud)}
.kids{position:relative;z-index:2;margin-bottom:-52px;width:min(220px,52vw);height:auto;display:block;-webkit-mask-image:radial-gradient(closest-side,#000 74%,transparent 100%);mask-image:radial-gradient(closest-side,#000 74%,transparent 100%);animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(-1deg)}}
h1{font-size:clamp(25px,6.9vw,44px);font-weight:700;color:var(--blue)}
h1 em{font-style:normal;color:var(--red)}
.lede{font-size:18px;color:var(--ink);max-width:34ch}

/* boarding pass */
.board{width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center}
.pass{position:relative;width:100%;max-width:560px;margin-top:0;background:var(--paper);border-radius:var(--r);box-shadow:0 14px 0 rgba(29,63,143,.14),0 2px 0 rgba(29,63,143,.2);transform:rotate(-2deg);text-align:left;overflow:hidden}
.pass-top{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--blue);color:var(--cloud);padding:10px 18px;font-family:var(--ticket);letter-spacing:.06em}
.pass-top b{font-size:28px;font-weight:400}
.pass-top span{font-size:15px;text-align:right;line-height:1.1}
.pass-body{display:grid;grid-template-columns:1fr auto;gap:8px 14px;padding:16px 18px 12px;align-items:center}
.pass-body p{font-size:15.5px;line-height:1.35;color:var(--ink)}
.ven{font-family:var(--ticket);font-size:clamp(64px,19vw,104px);line-height:.85;color:var(--ink);display:flex;align-items:center;gap:6px}
.ven svg{width:.42em;height:.42em;fill:var(--ink-soft)}
.fields{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:10px;border-top:2px dashed var(--sky-deep);padding-top:10px}
.fields div{font-family:var(--ticket);line-height:1.05}
.fields small{display:block;font-size:14px;letter-spacing:.08em;color:var(--blue-bright)}
.fields strong{font-size:21px;font-weight:400;letter-spacing:.03em;color:var(--ink)}
.stub{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 18px 9px;background:var(--blue-bright);color:var(--cloud);font:400 17px var(--ticket);letter-spacing:.08em;border-top:3px dashed var(--cloud);transition:transform .38s ease-in,opacity .38s}
.barcode{flex:1;max-width:120px;height:22px;background:repeating-linear-gradient(90deg,var(--cloud) 0 2px,transparent 2px 5px,var(--cloud) 5px 6px,transparent 6px 9px)}
.pass.torn .stub{transform:translateY(46px) rotate(5deg);opacity:0}
.pass::before,.pass::after{content:"";position:absolute;width:26px;height:26px;border-radius:50%;background:var(--sky);top:calc(50% - 13px)}
.pass::before{left:-13px}.pass::after{right:-13px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:500 19px var(--display);letter-spacing:.02em;-webkit-font-smoothing:antialiased;text-decoration:none;border:0;border-radius:999px;padding:15px 26px;cursor:pointer;min-height:54px;text-align:center;transition:transform .12s}
.btn:active{transform:translateY(2px)}
.btn-go{background:var(--red);color:var(--cloud);box-shadow:0 6px 0 #9b0a10;margin-top:14px}
.btn-buy{background:var(--blue);color:var(--cloud);box-shadow:0 6px 0 #0f2459}
.btn-wa{background:var(--wa);color:var(--cloud);box-shadow:0 6px 0 #0a5c30}
.btn svg{width:22px;height:22px;fill:currentColor;flex:none}
/* take-off overlay: the one orchestrated moment */
.takeoff{position:fixed;inset:0;z-index:60;background:linear-gradient(var(--sky-deep),var(--sky));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden;opacity:0;transition:opacity .25s;padding:16px;text-align:center}
.takeoff.run{opacity:1}
.takeoff.out{opacity:0;transition:opacity .6s}
.takeoff .puff{animation:none;opacity:.92;top:-22vh}
.takeoff.run .puff{animation:rush 1.1s linear infinite}
.takeoff .r1{left:-12%;width:230px;height:58px}
.takeoff.run .r2{animation-duration:.85s;animation-delay:.25s}.takeoff .r2{right:-14%;width:260px;height:64px}
.takeoff.run .r3{animation-duration:1.3s;animation-delay:.5s}.takeoff .r3{left:22%;width:170px;height:44px}
.takeoff.run .r4{animation-duration:.95s;animation-delay:.7s}.takeoff .r4{right:8%;width:150px;height:40px}
.takeoff.run .r5{animation-duration:1.2s;animation-delay:.1s}.takeoff .r5{left:48%;width:200px;height:50px}
@keyframes rush{from{transform:translateY(-10vh)}to{transform:translateY(150vh)}}
.tk-kids{width:min(300px,70vw);height:auto;position:relative;z-index:2;transform:translateY(34vh) scale(.6);-webkit-mask-image:radial-gradient(closest-side,#000 74%,transparent 100%);mask-image:radial-gradient(closest-side,#000 74%,transparent 100%)}
.takeoff.run .tk-kids{animation:climb 4.2s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes climb{0%{transform:translateY(34vh) scale(.6) rotate(6deg)}60%{transform:translateY(-2vh) scale(1) rotate(-3deg)}100%{transform:translateY(-8vh) scale(1.12) rotate(-2deg)}}
.tk-line{font:700 clamp(24px,7vw,38px) var(--display);color:var(--blue);position:relative;z-index:2;opacity:0}
.takeoff.run .tk-line{animation:pop .5s .3s forwards}
.takeoff.run .tk-line.l2{color:var(--red);animation-delay:1.7s}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
.tk-wipe{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px;border-radius:50%;background:var(--cloud);transform:scale(0);z-index:3}
.takeoff.run .tk-wipe{animation:wipe .55s 4.05s ease-in forwards}
@keyframes wipe{to{transform:scale(60)}}
#t-stop:focus{outline:none}

/* stop */
.stop{background:var(--cloud);padding-block:44px 52px;position:relative}
.stop::before{content:"";position:absolute;left:0;right:0;top:-28px;height:56px;background:var(--cloud);border-radius:50% 50% 0 0/100% 100% 0 0}
.stop .wrap{position:relative;display:flex;flex-direction:column;gap:16px}
.eyebrow{font:400 20px var(--ticket);letter-spacing:.1em;color:var(--blue-bright)}
h2{font-size:clamp(34px,10vw,54px);font-weight:700;color:#e8541a}
.verse{font-size:18px;color:var(--ink-soft);font-style:italic;max-width:40ch}
.how{font-weight:800;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.chips li{display:flex;align-items:center;gap:8px;background:var(--sky);border-radius:999px;padding:5px 14px 5px 5px;font-weight:800;font-size:15px;color:var(--ink)}
.chips img{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block;border:2px solid var(--cloud)}
.chips li.done{background:var(--mustard)}
.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.chips li{flex-direction:column;gap:8px;border-radius:20px;padding:8px 8px 10px;font-size:14.5px;line-height:1.2;text-align:center;box-shadow:0 5px 0 rgba(29,63,143,.12)}
.chips li:nth-child(odd){transform:rotate(-1.500deg)}
.chips li:nth-child(even){transform:rotate(1.500deg)}
.chips img{width:100%;height:auto;aspect-ratio:1;border-radius:14px;border:3px solid var(--cloud)}
.chips li.done span::after{content:" ✓"}
.scene{position:relative;width:100%;aspect-ratio:1445/1674;max-width:100%;border-radius:var(--r);overflow:hidden;touch-action:none;cursor:none;background:var(--ink);user-select:none;-webkit-user-select:none}
.scene .base,.lens,.lit{background-image:var(--img)}
.scene .base{position:absolute;inset:0;background-size:100% 100%;filter:brightness(.5) saturate(.6) blur(3px);transform:scale(1.03)}
.lit{position:absolute;border-radius:50%;background-repeat:no-repeat;box-shadow:0 0 0 4px var(--mustard),0 0 0 7px rgba(22,38,77,.5);pointer-events:none}
.lens{position:absolute;border-radius:50%;background-repeat:no-repeat;box-shadow:0 0 0 6px var(--cloud),0 0 0 10px var(--blue-bright),0 12px 24px rgba(0,0,0,.45);pointer-events:none;will-change:left,top,background-position}
.lens::after{content:"";position:absolute;right:-18%;bottom:-18%;width:34%;height:12%;background:var(--red);border-radius:999px;transform:rotate(45deg);transform-origin:left center;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.count{font:600 20px var(--display);color:var(--blue)}
.hint{font:700 15px var(--body);background:transparent;border:2px solid var(--blue);color:var(--blue);border-radius:999px;padding:8px 16px;cursor:pointer;min-height:44px}
.say{min-height:3.2em;background:var(--sky);border-radius:16px;padding:12px 16px;font-weight:700;color:var(--ink)}
.win{background:var(--mustard);border-radius:var(--r);padding:22px 18px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.win h3{font-size:28px;color:var(--blue)}
.win p{color:var(--ink);font-weight:700}
.row{display:flex;flex-wrap:wrap;gap:14px}

/* stop 2: spot the difference, only a window of the page is shown */
.stop2{background:var(--mustard);padding-block:46px 56px;position:relative}
.stop2::before{content:"";position:absolute;left:0;right:0;top:-14px;height:28px;background:var(--red);border-radius:40% 60% 0 0/100% 100% 0 0}
.stop2 .wrap{position:relative;display:flex;flex-direction:column;gap:16px}
.stop2 .eyebrow{color:var(--blue)}
.stop2 h2{color:var(--red)}
.stop2 .verse{color:var(--ink)}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.diffimg{position:relative;border-radius:16px;overflow:hidden;cursor:pointer;line-height:0;box-shadow:0 0 0 4px var(--cloud),0 10px 20px rgba(22,38,77,.25);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.diffimg img{display:block;width:100%;height:auto;pointer-events:none}
.diffimg button{position:absolute;opacity:0;border:0;padding:0;background:transparent;cursor:pointer}
.diffimg button:focus-visible{opacity:1;outline:3px dashed var(--cloud);outline-offset:-3px;border-radius:50%}
.ring{position:absolute;border:4px solid var(--red);border-radius:50%;box-shadow:0 0 0 2px var(--cloud),inset 0 0 0 2px var(--cloud);pointer-events:none;animation:ringin .35s cubic-bezier(.3,1.6,.5,1)}
.ring.tip{border-style:dashed;border-color:var(--cloud);box-shadow:none;animation:tip 1.600s ease-in-out forwards}
@keyframes ringin{from{transform:scale(1.5);opacity:0}to{transform:none;opacity:1}}
@keyframes tip{0%{opacity:0}20%,70%{opacity:1}100%{opacity:0}}
.miss{position:absolute;width:30px;height:30px;margin:-15px;border-radius:50%;background:rgba(22,38,77,.55);color:var(--cloud);font:700 18px/30px var(--display);text-align:center;pointer-events:none;animation:missout .7s forwards}
@keyframes missout{to{opacity:0;transform:scale(1.4)}}
.stop2 .say{background:var(--cloud)}
.stop2 .win{background:var(--cloud)}
.stop2 .hint{background:var(--cloud)}
.pd{font:700 24px/1.15 var(--hand);color:var(--pencil);transform:rotate(-1.500deg);align-self:flex-start;max-width:34ch;display:flex;align-items:center;gap:12px}
.nopen{width:50px;height:50px;flex:none;transform:rotate(1.500deg)}
.next{align-self:flex-start;font:700 17px var(--display);color:var(--blue)}

/* stop 3: a warm-up with six of the nine fans; the book's real question stays unanswered */
.stop3{background:var(--tan);padding-block:0 56px}
.stop3 .head{background:var(--vino);padding-block:34px 26px;border-radius:0 0 46% 54%/0 0 18px 26px;margin-bottom:22px}
.stop3 .head .wrap{display:flex;flex-direction:column;gap:8px}
.stop3 .eyebrow{color:var(--mustard)}
.stop3 h2{color:var(--mustard)}
.stop3 .body{display:flex;flex-direction:column;gap:16px}
.stop3 .verse{color:var(--cloud);font-style:normal;font-weight:700}
.clue{background:var(--cloud);border-radius:var(--r);padding:16px 18px;font:600 22px/1.2 var(--display);color:var(--vino);min-height:3.4em;display:flex;align-items:center}
.fans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.fan{appearance:none;border:0;padding:0;background:transparent;border-radius:18px;cursor:pointer;line-height:0;position:relative;-webkit-tap-highlight-color:transparent}
.fan img{display:block;width:100%;height:auto;border-radius:18px;pointer-events:none}
.fan.ok::after{content:"✓";position:absolute;right:6px;top:6px;width:30px;height:30px;border-radius:50%;background:var(--wa);color:var(--cloud);font:700 18px/30px var(--display);text-align:center}
.fan.ok{box-shadow:0 0 0 4px var(--mustard)}
.fan.no{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.stop3 .count{color:var(--vino)}
.stop3 .win{background:var(--cloud)}
.stop3 .win h3{color:var(--vino)}

/* stamps: one per finished stop */
.sellos{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;background:var(--cloud);border:2px dashed var(--blue);border-radius:18px;padding:10px 14px}
.sellos b{font:400 18px/1.1 var(--ticket);letter-spacing:.08em;color:var(--blue)}
.slots{display:flex;gap:10px}
.slot{width:58px;display:flex;flex-direction:column;align-items:center;gap:4px;font:700 10.5px/1.1 var(--body);color:var(--ink-soft);text-align:center}
.slot i{width:50px;height:50px;border-radius:50%;border:2px dashed var(--sky-deep);display:flex;align-items:center;justify-content:center;font:400 20px var(--ticket);color:var(--sky-deep);font-style:normal;background-size:cover;background-position:center top}
.slot.on{color:var(--ink)}
.slot.on i{border:3px solid var(--red);box-shadow:0 0 0 2px var(--cloud),0 0 0 4px var(--red);color:transparent;transform:rotate(-8deg)}
.slot.on.new i{animation:thump .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes thump{from{transform:scale(2.200) rotate(10deg);opacity:0}to{transform:rotate(-8deg);opacity:1}}
.sellos.big{padding:16px 18px}
.sellos.big .slot{width:88px;font-size:13px}
.sellos.big .slot i{width:78px;height:78px;font-size:30px}
.sealed{background:var(--sky);padding-block:44px 4px}
.sealed .wrap{display:flex;flex-direction:column;gap:14px}
.sealed .how{font-size:19px}
.slot{width:76px;font-size:11.500px}
.slot i{width:66px;height:66px;font-size:24px}
.sellos.big{justify-content:center}
.sellos.big b{flex-basis:100%;text-align:center;font-size:21px}
.sellos.big .slot,.fiesta .slot{width:min(104px,25vw);font-size:13.500px}
.sellos.big .slot i,.fiesta .slot i{width:min(98px,23vw);height:min(98px,23vw);font-size:34px}
.slot.on i{border-width:4px}
/* the stamp strip drawn as a real boarding pass */
.sellos,.sellos.big{display:block;padding:0;border:0;border-radius:20px;overflow:hidden;box-shadow:0 0 0 2px var(--blue),0 9px 0 rgba(29,63,143,.16);transform:rotate(-1deg)}
.bp-top{display:flex;justify-content:space-between;gap:10px;background:var(--blue);color:var(--cloud);font:400 16px/1.1 var(--ticket);letter-spacing:.08em;padding:9px 16px 8px}
.bp-route{display:grid;grid-template-columns:auto minmax(36px,1fr) auto;align-items:end;gap:10px;padding:12px 16px 2px;font:400 20px/1.05 var(--ticket);letter-spacing:.03em;color:var(--ink)}
.bp-route small{display:block;font-size:12.500px;letter-spacing:.1em;color:var(--blue-bright)}
.bp-to{text-align:right;color:var(--red)}
.bp-line{position:relative;height:0;border-top:3px dashed var(--sky-deep);margin-bottom:9px}
.bp-plane{position:absolute;top:-14px;width:26px;height:26px;margin-left:-13px;transition:left 1s cubic-bezier(.4,0,.2,1)}
.bp-plane svg{display:block;width:100%;height:100%;fill:var(--blue);transform:rotate(90deg)}
.sellos .slots{justify-content:center;padding:10px 10px 12px}
.bp-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--blue-bright);padding:7px 16px 8px;border-top:3px dashed var(--cloud)}
.sellos .bp-foot b{color:var(--cloud);flex-basis:auto;text-align:left;font-size:19px}
.sellos.done .bp-foot{background:var(--red)}
/* celebration when the pass is complete */
.fiesta{position:fixed;inset:0;z-index:70;background:rgba(22,38,77,.74);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .3s}
.fiesta.on{opacity:1}
.fiesta canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.fiesta-card{position:relative;background:var(--mustard);border-radius:26px;padding:16px 18px 14px;max-width:400px;width:100%;max-height:100%;overflow:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:0 0 0 6px var(--cloud),0 24px 50px rgba(0,0,0,.4);transform:scale(.85);transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.fiesta.on .fiesta-card{transform:none}
.fiesta-kids{width:140px;height:auto;-webkit-mask-image:radial-gradient(closest-side,#000 74%,transparent 100%);mask-image:radial-gradient(closest-side,#000 74%,transparent 100%)}
.fiesta h3{font-size:36px;color:var(--blue)}
.fiesta p{font-weight:700;color:var(--ink)}
.fiesta .slots{gap:8px;margin-block:4px}
.fiesta .slot{color:var(--ink)}
.fiesta .slot.on.new i{animation-fill-mode:backwards}
.fiesta .btn{width:100%}
.fiesta-close{background:none;border:0;font:800 15px var(--body);color:var(--blue);text-decoration:underline;cursor:pointer;min-height:44px}

/* postcards: real review excerpts, sent air mail */
.mail{background:linear-gradient(var(--sky),var(--sky-deep));padding-block:48px 74px;position:relative;overflow:hidden}
.mail .wrap{display:flex;flex-direction:column;gap:14px}
.mail h2{color:var(--blue);font-size:clamp(30px,8.4vw,46px)}
.rating{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:800;color:var(--ink)}
.stars{display:inline-flex;gap:2px}
.stars svg{width:22px;height:22px;fill:var(--mustard);stroke:var(--blue);stroke-width:1.2}
.postales{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.postal{padding:7px;border-radius:14px;background:repeating-linear-gradient(135deg,var(--red) 0 11px,var(--paper-warm) 11px 22px,var(--blue) 22px 33px,var(--paper-warm) 33px 44px);box-shadow:0 10px 22px rgba(22,38,77,.22);transform:rotate(var(--r,0deg));transition:transform .7s cubic-bezier(.2,.8,.2,1);margin-top:-8px;position:relative}
.postal:first-child{margin-top:0}
.postal:nth-child(odd){margin-right:14px}
.postal:nth-child(even){margin-left:14px}
.postal.pre{transform:rotate(0deg) translateY(18px)}
.postal-in{background:var(--paper-warm);border-radius:8px;padding:16px 14px 12px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:start}
.postal blockquote{margin:0;grid-column:1}
.pq-h{font:700 30px/1.05 var(--hand);color:var(--red);grid-column:1}
.pq{font:600 25px/1.18 var(--hand);color:var(--ink)}
.stampbox{grid-column:2;grid-row:1/span 2;position:relative;width:78px}
.stamp{display:block;background:var(--cloud);border:4px dotted var(--paper-warm);box-shadow:0 1px 3px rgba(22,38,77,.3);padding:2px;line-height:0}
.stamp img{display:block;width:100%;height:auto}
.pm{position:absolute;left:-12px;bottom:-24px;width:58px;height:58px;border:2px solid var(--stamp-ink);border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;font:400 14px/1 var(--ticket);letter-spacing:.06em;color:var(--stamp-ink);transform:rotate(-14deg);opacity:.85}
.pm::after{content:"";position:absolute;inset:4px;border:1px solid var(--stamp-ink);border-radius:50%}
.pmeta{grid-column:1/-1;display:flex;gap:6px;align-items:flex-start;font-size:13px;font-weight:700;color:var(--ink-soft);border-top:1.5px solid var(--sky);padding-top:8px;margin-top:8px}
.pmeta svg{width:15px;height:15px;flex:none;fill:var(--wa);margin-top:2px}
.allrev{align-self:flex-start;font-weight:800;color:var(--blue);margin-top:10px}
@media (min-width:700px){.postales{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px}.postal{margin-top:0}.postal:nth-child(even){margin-top:34px}}

.proof{display:flex;flex-direction:column;gap:3px}
.proof .pq-s{font:700 25px/1.1 var(--hand);color:var(--blue)}
.proof small{font:700 12.5px var(--body);color:var(--ink)}

/* album: real people with the book, as polaroids */
.album{background:var(--cloud);padding-block:48px 56px}
.album .wrap{display:flex;flex-direction:column;gap:14px}
.album h2{color:var(--red);font-size:clamp(30px,8.4vw,46px)}
.polas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;margin-top:8px;align-items:start}
.pola{margin:0;background:var(--paper);padding:9px 9px 12px;border-radius:4px;box-shadow:0 0 0 1px rgba(22,38,77,.08),0 10px 22px rgba(22,38,77,.25);transform:rotate(var(--r,0deg))}
.pola.wide{grid-column:1/-1;justify-self:center;width:min(300px,100%)}
.pola.mid{grid-column:1/-1;justify-self:center;width:min(230px,70%)}
.pola img,.pola video{display:block;width:100%;height:auto;aspect-ratio:var(--ar,3/4);object-fit:cover;background:var(--ink);border-radius:2px}
.pola figcaption{font:700 23px/1.1 var(--hand);color:var(--ink);text-align:center;padding-top:9px}
.playwrap{position:relative}
.playbtn{position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;border:4px solid var(--cloud);background:var(--red);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.playbtn svg{width:30px;height:30px;fill:var(--cloud);margin-left:5px}
@media (min-width:700px){.polas{grid-template-columns:repeat(4,minmax(0,1fr))}.pola.wide,.pola.mid{grid-column:auto;width:auto;justify-self:stretch}}

.gracias{font:700 30px/1.1 var(--display);color:var(--blue);margin-top:26px}
.polas.two{max-width:780px}
.pola .by{display:block;font:800 14px var(--body);color:var(--blue);margin-top:5px}
@media (min-width:700px){.polas.two{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:699px){.polas.two .pola:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 7px)}}

/* FAQ */
.faq{background:var(--cloud);padding-block:46px 64px}
.faq .wrap{display:flex;flex-direction:column;gap:12px}
.faq h2{color:var(--blue);font-size:clamp(30px,8.4vw,46px);margin-bottom:6px}
.faq details{background:var(--sky);border-radius:18px}
.faq details[open]{background:var(--mustard)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 14px 13px 16px;font:600 19px/1.25 var(--display);color:var(--ink);min-height:56px;border-radius:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:32px;height:32px;border-radius:50%;background:var(--blue);color:var(--cloud);font:700 23px/31px var(--display);text-align:center;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p a{color:var(--blue);font-weight:800}
.faq details p{padding:0 16px 16px;color:var(--ink);font-weight:700;max-width:62ch}

.faq summary{justify-content:flex-start}
.faq summary span{flex:1;min-width:0}
.stk{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 25%;flex:none;border:3px solid var(--cloud);box-shadow:0 3px 0 rgba(29,63,143,.18);transform:rotate(-7deg);transition:transform .25s cubic-bezier(.3,1.6,.5,1);background:var(--cloud)}
.stk-svg{border:0;box-shadow:none}
.faq details[open] .stk{transform:rotate(6deg) scale(1.12)}
.faq details.egg[open] .stk{animation:spin 3.500s linear infinite}
@keyframes spin{to{transform:rotate(360deg) scale(1.12)}}
.ans{display:flex;align-items:flex-end;gap:10px;padding:2px 14px 16px}
.faq details[open] .ans{animation:bubble .38s cubic-bezier(.3,1.4,.5,1)}
@keyframes bubble{from{opacity:0;transform:translateY(8px) scale(.96)}}
.who{width:56px;height:56px;border-radius:50%;flex:none;border:3px solid var(--cloud);background-color:var(--sky);background-repeat:no-repeat;background-size:235%;background-position:40% 21%}
.faq .ans p{flex:1;min-width:0;margin:0;background:var(--cloud);border-radius:18px 18px 18px 4px;padding:12px 14px;max-width:56ch}

/* FAQ, playful pass: one colour per question, taken from the book's own page colours */
.faq{background:var(--paper-warm)}
h2 em{font-style:normal;color:var(--red)}
.album,.faq{background:var(--paper-warm)}
.album h2,.mail h2,.faq h2,.land h2{color:var(--blue)}
.faq .how{align-self:flex-start;font:700 25px/1.15 var(--hand);color:var(--ink);background:var(--mustard);padding:7px 18px 9px;border-radius:255px 18px 225px 18px/18px 225px 18px 255px;transform:rotate(-1.500deg);margin-bottom:8px}
.faq details{--c:var(--mustard);--on:var(--ink);background:var(--sky);background:color-mix(in srgb,var(--c) 22%,var(--cloud));border-radius:24px;border:3px solid transparent;transition:border-color .2s}
.faq details:nth-of-type(6n+2){--c:var(--red);--on:var(--cloud)}
.faq details:nth-of-type(6n+3){--c:var(--wa);--on:var(--cloud)}
.faq details:nth-of-type(6n+4){--c:var(--blue-bright);--on:var(--cloud)}
.faq details:nth-of-type(6n+5){--c:var(--vino);--on:var(--cloud)}
.faq details:nth-of-type(6n+6){--c:var(--orange);--on:var(--cloud)}
.faq details:nth-of-type(odd){transform:rotate(-.400deg)}
.faq details:nth-of-type(even){transform:rotate(.400deg)}
.faq details[open]{background:var(--mustard);background:color-mix(in srgb,var(--c) 30%,var(--cloud));border-color:var(--c)}
.faq summary{position:relative;padding:12px 14px 12px 18px;gap:14px;font:500 20px/1.25 var(--display);border-radius:24px}
.faq summary::before{content:"";position:absolute;left:3px;top:1px;width:20px;height:20px;background:var(--c);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 18.9L7 16.6M15.6 15.6L10.7 10.7M18.9 13.5L16.6 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 18.9L7 16.6M15.6 15.6L10.7 10.7M18.9 13.5L16.6 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.faq summary::after{background:var(--c);color:var(--on);width:38px;height:38px;font:700 26px/36px var(--display);box-shadow:0 3px 0 rgba(22,38,77,.18)}
.faq .stk{width:60px;height:60px;border-width:4px}
.faq .stk-svg{border:0}
.faq .who{border-color:var(--c)}

/* shared hand-written touches: brush-stroke instruction lines and spoken feedback */
.stop .how,.stop2 .how,.stop3 .how{align-self:flex-start;font:700 25px/1.15 var(--hand);color:var(--ink);background:var(--mustard);padding:7px 18px 9px;border-radius:255px 18px 225px 18px/18px 225px 18px 255px;transform:rotate(-1.500deg)}
.stop2 .how,.stop3 .how{background:var(--cloud)}
.stop2 .how{transform:rotate(1.200deg)}
.say{font:700 24px/1.2 var(--hand);border-radius:18px 18px 18px 4px;padding:11px 16px 12px;min-height:0;align-self:flex-start}
.fiesta-close{font:700 22px/1.2 var(--hand);text-decoration:none;color:var(--ink);padding:6px 4px;max-width:30ch}

@media (max-height:720px){.fiesta-kids{width:78px}.fiesta h3{font-size:27px}.fiesta .slot i{width:70px;height:70px}.fiesta-card{gap:7px;padding:12px 16px 10px}.fiesta .btn{min-height:46px;padding:10px 18px;font-size:17px}.fiesta-close{font-size:20px}}

/* landing */
.land{background:var(--mustard);padding-block:48px 120px;position:relative}
.land::before{content:"";position:absolute;left:0;right:0;top:-14px;height:28px;background:var(--red);border-radius:60% 40% 0 0/100% 100% 0 0}
.land .wrap{display:flex;flex-direction:column;gap:22px;position:relative}
.land h2{color:var(--blue)}
.book{display:flex;flex-wrap:wrap;gap:22px;align-items:center}
.book img{width:min(230px,58vw);height:auto;border-radius:6px;transform:rotate(-4deg);box-shadow:0 0 0 8px var(--cloud),0 18px 30px rgba(22,38,77,.3);margin:10px 8px}
.facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-weight:800;color:var(--ink);flex:1 1 220px;min-width:0}
.facts li::before{content:"✈";color:var(--red);margin-right:8px}
.gift{background:var(--cloud);border-radius:var(--r);padding:20px 18px;display:flex;flex-direction:column;gap:12px}
.gift h3{font-size:26px;color:var(--red)}
.gift label{font-weight:800;color:var(--ink)}
.gift input{font:700 18px var(--body);color:var(--ink);background:var(--cloud);border:2px solid var(--blue);border-radius:14px;padding:12px 14px;width:100%;max-width:340px}
.preview{white-space:pre-line;font-size:15px;color:var(--ink-soft);background:var(--sky);border-radius:14px;padding:10px 14px;overflow-wrap:anywhere}

/* sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--cloud);border-top:3px solid var(--blue);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:space-between;gap:12px;transform:translateY(110%);transition:transform .3s}
.buybar.on{transform:none}
.buybar p{font-weight:800;color:var(--ink);font-size:15px;line-height:1.2;min-width:0}
.buybar .btn{font-size:17px;padding:10px 18px;min-height:46px;box-shadow:0 4px 0 #0f2459;flex:none}

@media (min-width:700px){.pass-body p{font-size:17px}.scene{cursor:none}}
@media (prefers-reduced-motion:reduce){.faq details{transition:none}.stk{transition:none}.faq details.egg[open] .stk,.faq details[open] .ans{animation:none}.faq summary::after{transition:none}.bp-plane{transition:none}.fiesta,.fiesta-card{transition:none}.fiesta-card{transform:none}.slot.on.new i{animation:none}.fan.no{animation:none}.ring{animation:none}.ring.tip{animation:tip 1.600s forwards}.postal{transition:none}.takeoff{display:none}.puff,.kids{animation:none}.stub{transition:none}.buybar{transition:none}html{scroll-behavior:auto}}

.para{font:700 30px/1.1 var(--hand);color:var(--ink);background:var(--cloud);padding:8px 20px 10px;border-radius:255px 18px 225px 18px/18px 225px 18px 255px;transform:rotate(-2deg);box-shadow:0 6px 0 rgba(29,63,143,.12);max-width:100%;overflow-wrap:anywhere}