@font-face{font-family:HighJinkies;src:url('fonts/High_Jinkies.woff2') format('woff2');font-display:swap}
@font-face{font-family:Comic;src:url('fonts/HVComicSerifotf.woff2') format('woff2');font-display:swap}
:root{--ink:#2a2633;--page:#f6f1e3;--paper:#fffbf0;--pink:#f6a5c9;--yellow:#f7d44c;--blue:#8ccaf2;--soft:#655e6e;color:var(--ink);font-family:ui-rounded,'SF Pro Rounded',system-ui,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--page)}a{color:inherit}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.55;cursor:default}:focus-visible{outline:3px dashed var(--ink);outline-offset:5px}[hidden]{display:none!important}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip:focus{position:fixed;top:10px;left:10px;z-index:100;background:var(--yellow);padding:14px}
.top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px max(24px,calc((100vw - 1200px)/2));position:relative}.top::after{content:'';position:absolute;bottom:0;left:24px;right:24px;height:3px;background:var(--ink);clip-path:polygon(0 35%,12% 0,30% 40%,48% 10%,70% 50%,89% 0,100% 35%,100% 100%,0 100%)}.brand{font-family:HighJinkies,sans-serif;font-size:clamp(32px,4vw,58px);text-decoration:none;line-height:.9;transform:rotate(-2deg)}.brand span{display:block;font-family:Comic,serif;font-size:13px;margin:9px 0 0 5px;letter-spacing:1px}.top nav{display:flex;gap:14px}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:2px solid var(--ink);background:var(--paper);border-radius:15px 9px 17px 10px;box-shadow:3px 3px 0 var(--ink);padding:10px 16px;text-decoration:none;font-weight:650;font-size:14px;transition:transform .15s,box-shadow .15s}.button:hover{transform:rotate(-2deg) translateY(-2px)}.button:active{transform:translate(3px,3px);box-shadow:none}.submit{background:var(--yellow);transform:rotate(-2deg)}
main{padding-bottom:0}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:1.6px;font-weight:650}
.carousel-shell{position:relative;max-width:1500px;margin:0 auto}.carousel{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:26px max(24px,calc((100% - min(29vw,340px))/2)) 30px;overscroll-behavior-x:contain;position:relative}.carousel::-webkit-scrollbar{display:none}.book{flex:0 0 min(29vw,340px);scroll-snap-align:center;position:relative;text-decoration:none;display:block;transition:opacity .25s;opacity:.65}.book img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;border:2px solid var(--ink);box-shadow:6px 8px 0 #2a26331c;transform:scale(.87) rotate(var(--tilt));transition:transform .25s,box-shadow .25s}.book.is-active{opacity:1}.book.is-active img{transform:scale(1) rotate(-1deg);box-shadow:7px 9px 0 var(--ink)}.book:hover img{transform:scale(.96) rotate(0deg)}.book.is-active:hover img{transform:scale(1.02)}.book-label{position:absolute;bottom:12px;right:-10px;background:var(--yellow);padding:7px 16px;border:2px solid var(--ink);border-radius:50%;font-family:Comic,serif;transform:rotate(5deg);opacity:0}.is-active .book-label{opacity:1}.arrow{position:absolute;top:45%;z-index:2;border:2px solid var(--ink);border-radius:46% 54% 51% 49%;background:var(--paper);box-shadow:3px 3px 0 var(--ink);width:48px;height:48px;font-size:25px}.arrow:hover{background:var(--yellow)}.prev{left:max(16px,calc((100% - 1150px)/2))}.next{right:max(16px,calc((100% - 1150px)/2))}
.discover{max-width:1050px;margin:50px auto 0;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}.panel{padding:24px;border:2px solid var(--ink);border-radius:24px 13px 27px 14px;box-shadow:5px 6px 0 var(--ink)}.podcast{background:#ddf0fc;transform:rotate(-.8deg)}.picture{background:#fde3ef;transform:rotate(.8deg)}.panel-top{display:flex;align-items:center;justify-content:space-between}.tag{border:1.5px solid var(--ink);border-radius:8px 5px 10px 4px;background:var(--paper);padding:4px 10px;font-family:Comic,serif;font-size:12px;transform:rotate(-3deg)}.doodle{font-size:35px;line-height:1}.panel h2{font-family:Comic,serif;font-size:26px;font-weight:400;margin:16px 0 8px;line-height:1.25}.panel p{font-size:14px;color:var(--soft);margin:0 0 22px}.episode{display:flex;align-items:center;gap:14px;min-height:102px;margin:10px 0 20px}.episode img{border:2px solid var(--ink);border-radius:12px;object-fit:cover;flex-shrink:0}.episode h3{font-size:17px;line-height:1.4;margin:7px 0 0;overflow-wrap:anywhere}audio{display:block;width:100%;height:42px}.panel-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}.panel-actions a{font-size:12px;text-underline-offset:4px}.random-frame{display:flex;justify-content:center;background:var(--paper);border:2px solid var(--ink);border-radius:12px 8px 14px 7px;overflow:hidden;margin:16px 0 10px}.random-frame img{width:100%;height:250px;object-fit:contain}.picture-credit{font-size:12px;min-height:18px}.panel .status{font-size:12px;margin:10px 0 0}.status:empty{display:none}.footer{max-width:1050px;margin:38px auto 0;padding:0 24px;display:flex;gap:16px;justify-content:space-between;color:var(--soft);font-size:12px}
@media(min-width:1450px){.carousel{padding-left:calc((100% - 340px)/2);padding-right:calc((100% - 340px)/2)}}
@media(max-width:650px){.top{padding:20px 18px 18px;gap:14px;flex-wrap:wrap}.brand{font-size:43px}.brand span{font-size:11px}.top nav{gap:10px}.top nav .button{font-size:12px;padding:9px 12px}.eyebrow{font-size:9px}.carousel{gap:14px;padding-left:20vw;padding-right:20vw}.book{flex-basis:60vw}.arrow{width:38px;height:38px;font-size:21px}.discover{grid-template-columns:1fr;margin-top:36px;padding:0 20px;gap:26px}.panel{padding:20px}.panel h2{font-size:24px}.footer{flex-direction:column;padding:0 20px}main{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}.author{will-change:auto}}
.book img{height:auto}.panel{min-width:0}.episode>div{min-width:0}

/* A roomy, scrollable playground at the bottom of the page. */
.books{padding-top:25px}
.author-dock{margin:55px 0 0;padding:0 0 max(18px,env(safe-area-inset-bottom));background:var(--paper);border-top:2px solid var(--ink)}
.dock-heading{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;max-width:1050px;margin:0 auto;padding:22px 24px 15px;font-family:Comic,serif;font-size:14px}
.dock-heading a{text-decoration:none}.dock-heading button{font:inherit;font-size:12px;background:var(--yellow);border:2px solid var(--ink);border-radius:12px 8px 14px 9px;padding:8px 12px;box-shadow:2px 3px 0 var(--ink)}.dock-heading button[aria-pressed=true]{background:var(--pink)}
.author-scroll{overflow:clip;padding:0 0 12px;background-image:radial-gradient(#ded5c3 1px,transparent 1.5px);background-size:24px 24px}
.author-track{position:relative;width:100%;height:650px;margin:0;overflow:hidden}
.author{position:absolute;left:0;top:0;display:block;width:var(--size);height:var(--size);padding:7px;border:2px solid var(--ink);border-radius:50%;background:var(--color);box-shadow:3px 4px 0 #2a26334a;text-decoration:none;will-change:transform;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.author:nth-child(3n){padding:9px}.author img{width:100%;height:100%;display:block;object-fit:cover;border:1.5px solid var(--ink);border-radius:50%;pointer-events:none;-webkit-user-drag:none}
.author .initial{position:absolute;inset:0;display:grid;place-items:center;font-family:Comic,serif;z-index:-1}
.author:hover,.author:focus-visible,.author.held{z-index:2}.author.held{cursor:grabbing;box-shadow:5px 7px 0 #2a263355}
.author::after{content:attr(data-name);position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);border-radius:6px;padding:6px 10px;white-space:nowrap;font-size:11px;opacity:0;pointer-events:none}
.author:hover::after,.author:focus-visible::after,.author.held::after{opacity:1}
.author-track.still{display:flex;flex-wrap:wrap;gap:26px;align-content:center;justify-content:center;padding:35px;width:100%;height:auto;min-height:420px;overflow:visible}
.author-track.still .author{position:relative;will-change:auto;cursor:pointer;touch-action:auto}
@media(max-width:650px){.books{padding-top:12px}.dock-heading{padding:18px 20px;font-size:12px}.dock-heading button{font-size:11px}.author-dock{margin-top:35px}}

/* Uneven, double-drawn rings: the portrait follows the same handmade shape. */
.author{border-radius:47% 53% 43% 57% / 55% 44% 56% 45%;border-width:2px 3px 2px 2.5px;box-shadow:3px 4px 0 #2a263340}
.author:nth-child(4n+1){border-radius:57% 43% 54% 46% / 43% 58% 42% 57%}
.author:nth-child(4n+2){border-radius:43% 57% 48% 52% / 58% 45% 55% 42%}
.author:nth-child(4n+3){border-radius:54% 46% 59% 41% / 47% 54% 46% 53%}
.author img{border-radius:inherit}
.author::before{content:'';position:absolute;inset:-5px -3px -4px -5px;border:1.5px solid var(--ink);border-radius:inherit;transform:rotate(-8deg);opacity:.6;pointer-events:none}
.author:nth-child(2n)::before{transform:rotate(9deg);inset:-3px -5px -5px -3px}




.people-page .author-dock{margin-top:28px}
.author-dialog{position:fixed;border:2.5px solid var(--ink);border-radius:26px 17px 29px 15px;background:var(--paper);color:var(--ink);padding:35px 25px;max-width:min(440px,calc(100vw - 40px));text-align:center;box-shadow:6px 7px 0 var(--ink)}
.author-dialog::backdrop{background:#2a263375;backdrop-filter:blur(4px)}
.author-dialog img{display:block;margin:0 auto 22px;width:180px;height:180px;object-fit:cover;padding:9px;background:var(--color,var(--pink));border:2px solid var(--ink);border-radius:46% 54% 42% 58% / 55% 43% 57% 45%}
.author-dialog h2{font-family:Comic,serif;font-size:26px;line-height:1.3;margin:0 0 25px;overflow-wrap:anywhere}
.close-author{position:absolute;right:10px;top:8px;background:none;border:0;font-size:30px;padding:3px 10px}


.authors-label{display:inline-block;font-family:Comic,serif;font-size:clamp(23px,3vw,32px);line-height:1.1;color:var(--ink);background:linear-gradient(115deg,#f6a5c9 0% 32%,#f7d44c 32% 67%,#8ccaf2 67%);border:2.5px solid var(--ink);border-radius:16px 9px 19px 10px;box-shadow:3px 4px 0 var(--ink);padding:12px 24px;transform:rotate(-2deg);text-decoration:none}
.fish-button{width:57px;height:57px;padding:6px;background:var(--yellow);border-radius:46% 54% 42% 58% / 54% 43% 57% 46%;transform:rotate(3deg)}
.fish-button svg{width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.fish-button:hover{transform:rotate(-4deg)}
.author-crane{position:absolute;top:0;z-index:5;width:60px;transform:translateX(-50%);pointer-events:none;--drop:24px}
.crane-wheel{position:absolute;left:18px;top:-8px;width:24px;height:24px;border:3px solid var(--ink);border-radius:46% 54% 48% 52%;background:var(--pink);box-shadow:2px 2px 0 #2a263330}
.crane-rope{position:absolute;left:29px;top:13px;height:calc(var(--drop) - 13px);border-left:2px solid var(--ink);border-right:1px solid #2a263340;width:3px}
.crane-hook{position:absolute;left:0;top:var(--drop);width:60px;height:55px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:scale .2s}.gripping .crane-hook{scale:.8 1}
.author.caught{z-index:4;pointer-events:none}.author.caught::after{opacity:0}
.people-page .author-dock{margin-top:28px}

/* Compact author-page corner title and navigation, above the playground. */
.people-page .top{padding:18px 24px;flex-wrap:nowrap}
.people-page .people-brand{margin:0;font-weight:400;font-size:clamp(30px,4vw,52px);transform:rotate(-8deg);flex-shrink:0}
.people-page .top nav{align-items:center;gap:12px}
.people-page .home-button{position:relative;padding:11px 27px 11px 14px}
.home-button span{position:absolute;right:7px;top:4px;font-size:15px}
.people-page .fish-button{width:44px;height:44px;border:2px solid var(--ink);box-shadow:2px 3px 0 var(--ink);flex-shrink:0}
.people-page .author-dock{margin-top:12px;border-top:0}
@media(max-width:650px){.people-page .top{padding:16px;gap:8px}.people-page .top nav{gap:8px}.people-page .home-button{font-size:12px;padding:10px 22px 10px 10px}.people-page .fish-button{width:38px;height:38px;padding:4px}.people-page .people-brand{font-size:30px}}

/* Keep the homepage author lettering comfortably inside its frame. */
.home-page .authors-label{font-size:clamp(30px,4vw,42px);line-height:1.3;padding:14px 28px 16px;transform:none;border-radius:14px;background:var(--pink);box-shadow:3px 4px 0 var(--ink)}
.home-page .author-dock{margin-top:40px}
@media(max-width:650px){.home-page .authors-label{font-size:32px;padding:12px 24px 14px}}

/* Homepage author link uses the same expressive lettering as the brand. */
.home-page .authors-label{font-family:HighJinkies,sans-serif;font-size:clamp(38px,5vw,58px);font-weight:400;line-height:1.15;background:none;border:0;border-radius:0;box-shadow:none;padding:8px 4px;transform:rotate(-8deg)}
@media(max-width:650px){.home-page .authors-label{font-size:42px;padding:8px 4px}}

/* Books first, followed by the brand and four clear destinations. */
.home-hub{display:flex;flex-direction:column;align-items:center;gap:25px;margin:36px auto 0;padding:0 20px;max-width:1050px;text-align:center}
.home-hub .brand{font-size:clamp(38px,14.5vw,170px);line-height:1;display:block}
.home-hub .brand span{margin-top:10px;font-size:clamp(13px,1.8vw,22px)}
.home-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.home-actions .courses-link{background:#8fd18b;transform:rotate(1deg)}
.home-actions .shop-link{background:var(--pink);transform:rotate(-1deg)}
.home-actions .games-link{background:var(--blue);transform:rotate(2deg)}
.home-page .discover{margin-top:30px}
.home-page .podcast{padding:18px 20px}
.home-page .podcast .doodle{font-size:26px}
.home-page .podcast .episode{min-height:64px;gap:10px;margin:15px 0 12px}
.home-page .podcast .episode img{width:56px;height:56px}
.home-page .podcast .episode h3{font-size:15px;margin-top:5px}
.home-page .podcast .eyebrow{font-size:9px;letter-spacing:1px}
.home-page .podcast .panel-actions{margin-top:14px}
.home-page .podcast .button{padding:8px 12px;font-size:12px}
@media(max-width:650px){.home-hub{margin-top:28px;gap:22px}.home-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:380px}.home-actions .button{font-size:12px;padding:10px 9px;gap:6px}.home-page .podcast{padding:16px}}