/* ══════════════════ About page (about.html): comic book + story ══════════════════ */
.about-jump{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}

/* ── storybook text ── */
.tale{max-width:820px;margin:0 auto;padding:clamp(22px,4vw,44px);border-radius:24px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2);}
.tale p{font-size:17px;line-height:1.75;color:var(--tx-2);margin:0 0 18px;}
.tale em{color:var(--tx);font-weight:600;}
.tale .lead{font-size:19px;color:var(--tx);}
.tale .lead::first-letter{float:left;font-family:'Sora',sans-serif;font-weight:800;font-size:64px;line-height:.9;margin:6px 10px 0 0;
  background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent;}
.tale .sign{font-weight:600;color:var(--tx);}
.tale-fig{float:right;width:min(300px,42%);margin:4px 0 18px 26px;}
.tale-fig img{width:100%;border-radius:16px;box-shadow:0 0 0 1px var(--line-2),0 20px 40px -20px rgba(0,0,0,.7);}
.tale-fig figcaption{margin-top:8px;font-size:12.5px;color:var(--tx-3);text-align:center;font-style:italic;}
.tale-cta{clear:both;display:flex;gap:10px;flex-wrap:wrap;padding-top:10px;}

@media (max-width:560px){
  .tale-fig{float:none;width:100%;margin:0 0 20px;}
  .tale p{font-size:16px;}
}

/* ══ Comic book ══
   Fixed "printed" palette so the book looks the same in light and dark themes. */
.book-stage{--paper:#fbf6ec;--paper-2:#f3ead9;--ink:#2b2233;--muted:#9a8aa6;--accent:#c2187a;
  perspective:2600px;display:flex;justify-content:center;padding:10px 0 6px;overflow:hidden;}
.book{position:relative;width:min(1040px,100%);aspect-ratio:1.5;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.645,.045,.355,1);}
/* closed book: centre the cover (or back cover) instead of leaving an empty left/right page */
.book.at-start{transform:translateX(-25%);}
.book.at-end{transform:translateX(25%);}
.leaf{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.645,.045,.355,1);}
.leaf.flipped{transform:rotateY(-180deg);}
.face{position:absolute;inset:0;overflow:hidden;container-type:inline-size;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:3px 10px 10px 3px;box-shadow:0 30px 50px -28px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.18);}
.face.back{transform:rotateY(180deg);border-radius:10px 3px 3px 10px;}
/* gutter shading at the spine, plus a sweep of shadow while a page turns */
.shade{position:absolute;inset:0;pointer-events:none;z-index:5;background:linear-gradient(90deg,rgba(40,20,50,.22),rgba(40,20,50,.06) 6%,transparent 14%);}
.face.back .shade{background:linear-gradient(270deg,rgba(40,20,50,.22),rgba(40,20,50,.06) 6%,transparent 14%);}
.leaf.turning .shade{animation:turnShade .9s ease-in-out;}
@keyframes turnShade{50%{background-color:rgba(30,10,40,.22);}}

/* page base */
.pg{position:absolute;inset:0;display:flex;flex-direction:column;}
.pg.paper{color:var(--ink);padding:7cqw 8cqw 5cqw;
  background:radial-gradient(120% 90% at 50% 40%,var(--paper) 60%,var(--paper-2));}
.pg.paper::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:radial-gradient(rgba(120,90,60,.12) 1px,transparent 1.2px);background-size:7px 7px;}
.pg.paper>*{position:relative;}
.pg-run{display:flex;justify-content:space-between;padding-bottom:2.4cqw;border-bottom:1px solid rgba(43,34,51,.14);
  font:600 2.1cqw/1 'Inter',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.pg-fig{margin:auto 0 0;display:flex;justify-content:center;}
.pg-art{width:100%;flex:0 0 auto;background-repeat:no-repeat;border-radius:1.2cqw;background-color:#1a1020;
  box-shadow:0 0 0 1px rgba(43,34,51,.12),0 2.6cqw 5cqw -2.4cqw rgba(43,34,51,.55);}
.pg-text{margin-top:6cqw;font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:3.7cqw;line-height:1.62;color:var(--ink);text-wrap:pretty;}
.pg-text em{font-style:italic;font-weight:600;color:var(--accent);}
.pg-text.first::first-letter{float:left;font-weight:600;font-size:3.3em;line-height:.82;margin:.06em .09em 0 0;color:var(--accent);}
.pg-num{margin-top:auto;padding-top:3cqw;text-align:center;font:italic 400 2.9cqw/1 'Fraunces',Georgia,serif;color:var(--muted);}
.pg-num::before,.pg-num::after{content:'—';margin:0 .6em;opacity:.5;}

/* cover */
.pg.cover{color:#fff;background:#140818;}
.pg.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;}
.pg.cover::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,8,24,.55),transparent 22%,transparent 45%,rgba(20,8,24,.92) 82%),
             linear-gradient(90deg,rgba(255,255,255,.14),transparent 3%);}
.pg.cover>*:not(img){position:relative;z-index:2;}
.cv-top{display:flex;justify-content:space-between;padding:5cqw 6cqw 0;font:600 2.3cqw/1 'Inter',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85);}
.cv-bottom{margin-top:auto;padding:0 6cqw 9cqw;}
.cv-kicker{font:600 2.4cqw/1 'Inter',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#ffd36b;margin-bottom:2.4cqw;}
.cv-title{font-family:'Fraunces',Georgia,serif;font-weight:600;font-style:italic;font-size:12.5cqw;line-height:.95;letter-spacing:-.02em;
  background:linear-gradient(100deg,#ff8ac2,#ffd36b 55%,#9be7ff);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 .6cqw 1.6cqw rgba(0,0,0,.55));}
.cv-sub{margin-top:1.6cqw;font:italic 400 5cqw/1.1 'Fraunces',Georgia,serif;color:#fff;}
.cv-hint{position:absolute!important;right:5cqw;bottom:5cqw;display:inline-flex;align-items:center;gap:1.4cqw;padding:1.8cqw 3.2cqw;border-radius:999px;
  background:rgba(20,8,24,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
  font:600 2.6cqw/1 'Inter',sans-serif;animation:nudge 1.8s ease-in-out infinite;}
@keyframes nudge{50%{transform:translateX(1.2cqw);}}

/* the end */
.pg.end{align-items:center;justify-content:center;text-align:center;gap:2.4cqw;}
.end-orn{color:var(--accent);letter-spacing:.5em;font-size:3cqw;}
.end-title{font:italic 600 13cqw/1 'Fraunces',Georgia,serif;color:var(--ink);}
.end-sub{font:italic 400 3.6cqw/1.3 'Fraunces',Georgia,serif;color:var(--muted);}
.end-mascot{width:26cqw;margin:2cqw 0;filter:drop-shadow(0 2cqw 3cqw rgba(43,34,51,.25));}
.end-q{max-width:78cqw;font:italic 400 3.5cqw/1.55 'Fraunces',Georgia,serif;color:var(--ink);}
.end-cta{display:flex;gap:2cqw;flex-wrap:wrap;justify-content:center;margin-top:2cqw;}

/* back cover */
.pg.backcover{align-items:center;justify-content:center;gap:3cqw;text-align:center;color:#fff;
  background:radial-gradient(80% 60% at 50% 35%,#5a1a7a,#22092f 70%,#140818);}
.pg.backcover::before{content:'';position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(#fff 1px,transparent 1.3px),radial-gradient(#ffd36b 1px,transparent 1.3px);
  background-size:9cqw 9cqw,13cqw 13cqw;background-position:0 0,4cqw 6cqw;-webkit-mask-image:radial-gradient(circle at 50% 40%,transparent 25%,#000 70%);mask-image:radial-gradient(circle at 50% 40%,transparent 25%,#000 70%);}
.pg.backcover>*{position:relative;}
.bc-mascot{width:34cqw;filter:drop-shadow(0 2cqw 4cqw rgba(255,0,102,.45));}
.bc-line{font:italic 600 6.4cqw/1.15 'Fraunces',Georgia,serif;}
.bc-small{font:600 2.3cqw/1 'Inter',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.6);}

/* controls */
.book-ctrl{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px;}
.book-btn{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--tx);
  box-shadow:inset 0 0 0 1px var(--line-2);transition:background .2s,color .2s,opacity .2s;}
.book-btn:hover:not(:disabled){background:#ff0066;color:#fff;}
.book-btn:disabled{opacity:.35;cursor:default;}
.book-info{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:170px;font-size:13.5px;font-weight:600;color:var(--tx-2);font-variant-numeric:tabular-nums;}
.book-bar{width:160px;height:3px;border-radius:3px;background:var(--line-2);overflow:hidden;}
.book-bar i{display:block;height:100%;width:0;background:var(--brand);transition:width .6s ease;}
.book-full{text-align:center;margin-top:12px;}
.book-full a{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--tx-3);text-decoration:underline;text-underline-offset:3px;}
.book-full a:hover{color:var(--tx);}



/* ── page effects: play when a story page turns into view (.pg.play) ── */
.pg-fig{position:relative;}
.fx{position:absolute;inset:0;pointer-events:none;z-index:3;}
.fx>*{position:absolute;opacity:0;}
.pg.play .pg-art{animation:artIn .7s cubic-bezier(.2,.9,.3,1.2) both;}
@keyframes artIn{from{transform:scale(.94) rotate(-.6deg);filter:saturate(.6) brightness(1.1);}}

/* sparkles */
.sp{color:#ffd36b;font-size:calc(4.2cqw * var(--s));text-shadow:0 0 1.6cqw rgba(255,211,107,.9);}
.pg.play .sp{animation:twinkle 1.6s ease-in-out 2;}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.2) rotate(0);}45%{opacity:1;transform:scale(1.15) rotate(90deg);}70%{opacity:.8;transform:scale(.9) rotate(140deg);}}

/* stamps: PLOT TWIST / EFF THAT / BANNED / PFFT */
.stamp{left:50%;top:50%;padding:1.2cqw 3cqw;border:.8cqw solid #e6005c;border-radius:1.6cqw;color:#e6005c;background:rgba(255,255,255,.88);
  font:400 8.5cqw/1 'Bangers',Impact,sans-serif;letter-spacing:.06em;white-space:nowrap;transform:translate(-50%,-50%) rotate(-10deg);
  box-shadow:0 1cqw 3cqw rgba(0,0,0,.35);}
.pg.play .stamp{animation:stamp .55s cubic-bezier(.3,1.6,.5,1) .15s both;}
.pg.play .fx:has(.stamp) ~ *,.pg.play .pg-fig:has(.stamp) .pg-art{animation:artIn .7s both,shake .4s .3s;}
@keyframes stamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-24deg) scale(3);}60%{opacity:1;}100%{opacity:1;transform:translate(-50%,-50%) rotate(-10deg) scale(1);}}
@keyframes shake{20%{transform:translate(-1.2cqw,.6cqw);}40%{transform:translate(1cqw,-.8cqw);}60%{transform:translate(-.8cqw,.4cqw);}80%{transform:translate(.6cqw,-.3cqw);}}

/* badge pop: PURE GOLD / MAGIC / SHIPPED WITH LOVE */
.badge-pop{right:3%;top:-3cqw;padding:1.4cqw 3cqw;border-radius:999px;color:#2b2233;background:linear-gradient(135deg,#ffe58a,#ffc13d);
  font:400 5cqw/1 'Bangers',Impact,sans-serif;letter-spacing:.06em;white-space:nowrap;box-shadow:0 1cqw 2.4cqw rgba(160,100,0,.45),inset 0 0 0 .4cqw #fff6;}
.pg.play .badge-pop{animation:popIn .6s cubic-bezier(.3,1.8,.5,1) .3s both,bob 2.4s ease-in-out 1s infinite;}
@keyframes popIn{from{opacity:0;transform:scale(0) rotate(-20deg);}to{opacity:1;transform:scale(1) rotate(6deg);}}
@keyframes bob{50%{transform:scale(1.04) rotate(3deg) translateY(-.6cqw);}}
.pg.play .badge-pop{opacity:1;}

/* dragon embers */
.em{width:1.4cqw;height:1.4cqw;border-radius:50%;background:radial-gradient(#fff3b0,#ff7a1a 55%,transparent 70%);top:auto!important;bottom:4%;}
.pg.play .em{animation:ember 2.2s ease-out 2;}
@keyframes ember{0%{opacity:0;transform:translate(0,0) scale(var(--s));}15%{opacity:1;}100%{opacity:0;transform:translate(3cqw,-30cqw) scale(.2);}}
.pg.play .fx-embers~.pg-art,.pg.play .pg-fig:has(.fx-embers) .pg-art{animation:artIn .7s both,shake .5s .4s 2;}

/* sad rain */
.drop{width:.5cqw;height:3cqw;border-radius:1cqw;background:linear-gradient(transparent,#7fb8ff);top:-6%!important;}
.pg.play .drop{animation:rain 1.1s linear 3;}
@keyframes rain{0%{opacity:0;transform:translateY(0);}15%{opacity:.9;}100%{opacity:0;transform:translateY(42cqw);}}
.pg.play .pg-fig:has(.fx-rain) .pg-art{animation:artIn .7s both,gloom 3.4s ease-in-out .3s;}
@keyframes gloom{30%,70%{filter:saturate(.45) brightness(.82);}}

/* mysterious mist over the realm of grey */
.mist{inset:-10% -20%!important;background:radial-gradient(40% 50% at 30% 50%,rgba(255,255,255,.75),transparent 70%),radial-gradient(35% 45% at 70% 60%,rgba(220,210,255,.65),transparent 70%);}
.mist.m2{transform:scaleX(-1);}
.pg.play .mist{animation:mist 3s ease-in-out both;}
.pg.play .mist.m2{animation-delay:.4s;}
@keyframes mist{0%{opacity:0;translate:-25% 0;}30%{opacity:1;}100%{opacity:0;translate:25% 0;}}

/* floating hearts */
.ht{font-size:calc(4.5cqw * var(--s));top:auto!important;bottom:6%;}
.pg.play .ht{animation:floatUp 2.6s ease-out 2;}
@keyframes floatUp{0%{opacity:0;transform:translateY(0) scale(.4);}20%{opacity:1;transform:translateY(-4cqw) scale(1);}100%{opacity:0;transform:translateY(-28cqw) translateX(3cqw) scale(.9) rotate(12deg);}}

/* the name: puff cloud + PFFT */
.puff{left:6%;bottom:6%;font-size:12cqw;}
.pg.play .puff{animation:puff 1.4s ease-out .2s both;}
@keyframes puff{0%{opacity:0;transform:translateX(0) scale(.3);}25%{opacity:1;}100%{opacity:0;transform:translateX(-10cqw) scale(1.8);}}
.stamp.pfft{border-color:#8a3ffc;color:#8a3ffc;left:58%;top:40%;}

@media (prefers-reduced-motion:reduce){
  .fx{display:none;}
  .pg.play .pg-art{animation:none!important;}
  .leaf,.book{transition-duration:.01s!important;}
}

/* sound toggle */
.book-full{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;}
.music-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--tx-2);
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2);transition:all .2s;}
.music-btn:hover{color:var(--tx);box-shadow:inset 0 0 0 1px var(--line-3);}
.music-btn.on{color:#fff;background:linear-gradient(135deg,#ff0066,#c21aff);box-shadow:0 6px 20px -8px #ff0066;}
.music-btn .eq{display:none;align-items:flex-end;gap:2px;height:12px;}
.music-btn.on .eq{display:inline-flex;}
.music-btn .eq b{width:3px;border-radius:2px;background:currentColor;animation:eq .9s ease-in-out infinite;}
.music-btn .eq b:nth-child(2){animation-delay:-.3s;}.music-btn .eq b:nth-child(3){animation-delay:-.6s;}
@keyframes eq{0%,100%{height:3px;}50%{height:12px;}}
/* narrator */
.book-read{display:flex;justify-content:center;margin-top:22px;}
.read-btn{min-width:220px;}
.read-btn.on{background:var(--surface-2);color:var(--tx);box-shadow:inset 0 0 0 1px var(--line-3);}
.book-read+.book-ctrl{margin-top:14px;}
.music-btn:not(.on)[id="narBtn"]{opacity:.85;}

/* ── phone: swipe-through portrait book (no 3D — smooth on older phones) ── */
.book.single{width:100%;aspect-ratio:auto;transform:none;}
.sb-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scrollbar-width:none;border-radius:14px;}
.sb-track::-webkit-scrollbar{display:none;}
.sb-page{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;position:relative;container-type:inline-size;
  min-height:min(72svh,620px);display:flex;overflow:hidden;border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);}
.sb-page+.sb-page{margin-left:0;}
.sb-page>.pg{position:relative;inset:auto;flex:1;}
/* readable sizes on a phone (page widths are ~340px, so fixed px instead of page-relative units) */
.book.single .pg.paper{padding:22px 20px 18px;}
.book.single .pg-run{font-size:10px;padding-bottom:10px;}
.book.single .pg-fig{margin-top:22px;}
.book.single .pg-art{border-radius:8px;box-shadow:0 0 0 1px rgba(43,34,51,.12),0 10px 18px -10px rgba(43,34,51,.5);}
.book.single .pg-text{font-size:17px;line-height:1.6;margin-top:20px;}
.book.single .pg-num{font-size:13px;padding-top:16px;}
.book.single .pg.cover{min-height:min(72svh,620px);}
.book.single .cv-top{font-size:10px;padding:16px 18px 0;}
.book.single .cv-kicker{font-size:10.5px;}
.book.single .cv-sub{font-size:20px;}
.book.single .cv-hint{font-size:12px;padding:8px 14px;}
.book.single .cv-open{display:none;}
.book.single .cv-hint::before{content:"Swipe to open";}
.book.single .end-sub{font-size:15px;}
.book.single .end-q{font-size:15px;}
.book.single .bc-small{font-size:10px;}
.book.single .bc-line{font-size:24px;}
/* swiping is enough on a phone: hide the left/right paging shadow and keep effects light */
.book.single .shade{display:none;}
.book.single .end-mascot,.book.single .bc-mascot{filter:none;}
body.comic-in-view #umfMascot,body.comic-in-view #umfChatBubble,body.comic-in-view #backToTop{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .25s,visibility .25s;}