/* Simon & the 3 Pekes — comic book you scroll.
   Teal from the living-room walls, red-sofa red for action, gold titles, ink-black panel borders.
   One committed look (no dark mode). */
:root{
  --teal:#1f6f73; --teal-dk:#175457; --ink:#141414; --paper:#fffaf0; --cream:#fff3c9;
  --red:#d7263d; --gold:#ffc23d; --pink:#f25fa6; --navy:#1d2a4d; --lime:#a7e04b;
  --display:"Bangers","Impact","Arial Black",sans-serif;
  --body:"Nunito Sans","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--teal);color:var(--ink);font:400 17px/1.55 var(--body);overflow-x:hidden}
body::after{content:"";position:fixed;inset:-40px;z-index:-1;pointer-events:none;
  background-image:radial-gradient(var(--teal-dk) 1.5px,transparent 1.7px);background-size:16px 16px;animation:drift 18s linear infinite}
@keyframes drift{to{transform:translate(16px,16px)}}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:20;background:var(--ink)}
img{max-width:100%}
.wrap{max-width:1140px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.03em;line-height:1;margin:0;text-wrap:balance}
.title{font-size:clamp(44px,7.5vw,76px);color:var(--gold);-webkit-text-stroke:2px var(--ink);text-shadow:5px 5px 0 var(--ink)}
.title.white{color:#fff}
section{padding-block:56px}
p{margin:0}
.lede{color:#fff;font-weight:700;font-size:19px;max-width:38em}
.panel{background:var(--paper);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.caption{display:inline-block;background:var(--gold);border:3px solid var(--ink);padding:4px 12px;font:900 13px/1.2 var(--body);text-transform:uppercase;letter-spacing:.08em;transform:rotate(-2deg)}
.caption.pink{background:var(--pink);color:#fff}
.bubble{position:relative;background:#fff;border:4px solid var(--ink);border-radius:28px;padding:16px 20px;font-weight:800;font-size:18px;line-height:1.35}
.bubble::after{content:"";position:absolute;left:40px;bottom:-22px;border:14px solid transparent;border-top:22px solid var(--ink);border-bottom:0}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{font-family:var(--display);font-size:24px;letter-spacing:.05em;color:#fff;background:var(--red);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:8px 18px;text-decoration:none;display:inline-block;cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover,.btn:focus-visible{transform:translate(-3px,-3px) rotate(-1deg);box-shadow:7px 7px 0 var(--ink);outline:none}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.alt{background:var(--paper);color:var(--ink)}
.btn.small{font-size:19px;padding:5px 12px}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--ink);border-bottom:4px solid var(--gold)}
.nav .wrap{display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap;padding-block:8px}
.nav .brand{display:flex;align-items:center;gap:10px;margin-right:auto;text-decoration:none}
.nav .brand img{width:46px;height:46px;transition:transform .3s}
.nav .brand:hover img{transform:rotate(-12deg) scale(1.1)}
.nav .brand span{font-family:var(--display);font-size:24px;color:var(--gold);letter-spacing:.04em}
.nav a.l{color:#fff;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.1em;text-decoration:none;padding:6px 2px;border-bottom:3px solid transparent}
.nav a.l:hover,.nav a.l:focus-visible,.nav a.l[aria-current]{border-color:var(--red);outline:none;color:var(--gold)}

/* hero (home) */
.hero{position:relative;overflow:hidden;border-bottom:5px solid var(--ink)}
.hero .bg{position:absolute;inset:-6%;background:center/cover no-repeat;animation:kb 30s ease-in-out infinite alternate;filter:saturate(1.1)}
@keyframes kb{from{transform:scale(1) translateX(0)}to{transform:scale(1.12) translateX(-3%)}}
.hero .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,20,20,.55),rgba(20,20,20,.05) 70%)}
.hero .inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;padding-block:56px}
.hero .copy{min-width:0;display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.hero h1{font-size:clamp(54px,9vw,104px);color:#fff;-webkit-text-stroke:2px var(--ink);text-shadow:6px 6px 0 var(--ink)}
.hero h1 span{color:var(--gold)}
.hero .bubble{max-width:26em;margin-bottom:12px}
.logo-wrap{position:relative;justify-self:center;width:min(100%,520px)}
.burst{position:absolute;inset:-12%;border-radius:50%;
  background:repeating-conic-gradient(rgba(255,194,61,.7) 0 5deg,transparent 5deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 25%,transparent 68%);mask:radial-gradient(circle,#000 25%,transparent 68%);animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.logo-wrap img{position:relative;width:100%;display:block;filter:drop-shadow(8px 8px 0 var(--ink));animation:pop .8s cubic-bezier(.3,1.6,.5,1) both,bob 5s 1s ease-in-out infinite}
@keyframes pop{from{transform:scale(.6) rotate(-8deg)}to{transform:scale(1) rotate(0)}}
@keyframes bob{50%{transform:translateY(-8px) rotate(-1deg)}}

/* boxed strip of stills */
.marquee{overflow:hidden;background:var(--ink);padding:12px 0}
.marquee .track{display:flex;gap:10px;width:max-content;animation:slide 90s linear infinite}
.marquee:hover .track,.marquee:focus-within .track{animation-play-state:paused}
.marquee button{padding:0;border:3px solid var(--paper);background:none;cursor:zoom-in;flex:0 0 auto}
.marquee button:focus-visible{outline:3px solid var(--gold)}
.marquee img{height:180px;width:auto;display:block;transition:transform .3s}
.marquee button:hover img{transform:scale(1.05)}
@keyframes slide{to{transform:translateX(-50%)}}

/* teaser tiles */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.tile{display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .18s}
.tile:nth-child(1){transform:rotate(-1.2deg)} .tile:nth-child(2){transform:rotate(.8deg)} .tile:nth-child(3){transform:rotate(-.6deg)}
.tile:hover,.tile:focus-visible{transform:rotate(0) translateY(-8px);outline:none}
.tile .pic{aspect-ratio:4/3;overflow:hidden;border-bottom:4px solid var(--ink)}
.tile .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.tile:hover .pic img{transform:scale(1.07)}
.tile .txt{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px}
.tile h3{font-size:34px}

/* village sign band */
.village{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;align-items:center}
.village .sign{transform:rotate(-2deg)}
.village .sign img{display:block;width:100%;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.village .copy{display:flex;flex-direction:column;gap:16px;min-width:0}

/* character pages */
.char{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:center;padding:24px;margin-bottom:48px}
.char:nth-of-type(even){grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.char:nth-of-type(even) .stage{order:2}
.stage{position:relative;min-width:0}
.stage .sheet{position:relative;aspect-ratio:4/3;max-width:100%;border:4px solid var(--ink);background:#eceae6;overflow:hidden}
.stage .sheet img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .35s,transform .35s}
.stage .sheet img.b{opacity:0;transform:scale(1.04)}
.stage.flip .sheet img.a{opacity:0;transform:scale(.96)}
.stage.flip .sheet img.b{opacity:1;transform:scale(1)}
.stage .namecard{position:absolute;width:38%;left:-4%;top:-12%;z-index:2;transform:rotate(-8deg);animation:wobble 4s ease-in-out infinite;pointer-events:none}
@keyframes wobble{50%{transform:rotate(-4deg) scale(1.04)}}
.stage .toggle{position:absolute;right:10px;bottom:10px;z-index:2}
.char .info{display:flex;flex-direction:column;gap:14px;min-width:0}
.char h2{font-size:clamp(46px,6vw,64px)}
.char .bubble{font-size:17px}
.meter{display:flex;flex-direction:column;gap:6px}
.meter b{font:900 12px var(--body);text-transform:uppercase;letter-spacing:.1em}
.meter .bar{height:22px;border:3px solid var(--ink);background:#fff;position:relative;overflow:hidden}
.meter .bar i{position:absolute;inset:0 auto 0 0;width:0;background:repeating-linear-gradient(45deg,var(--pink) 0 10px,#ff86bf 10px 20px);transition:width 1.6s cubic-bezier(.2,.9,.3,1)}
.meter.on .bar i{width:99.9%}
.meter .num{font-family:var(--display);font-size:26px;color:var(--red)}

/* scroller of comic pages */
.scroller{display:flex;gap:20px;overflow-x:auto;padding:8px 4px 24px;scroll-snap-type:x mandatory}
.scroller button{flex:0 0 auto;width:min(240px,60vw);padding:0;border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:var(--paper);cursor:zoom-in;scroll-snap-align:start;transition:transform .18s}
.scroller button:nth-child(odd){transform:rotate(-1.5deg)} .scroller button:nth-child(even){transform:rotate(1.5deg)}
.scroller button:hover,.scroller button:focus-visible{transform:rotate(0) translateY(-6px);outline:none}
.scroller img{display:block;width:100%}

/* episodes */
.ep{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:28px;padding:24px;margin-bottom:56px}
.ep .poster{position:relative;border:4px solid var(--ink);overflow:hidden;align-self:start}
.ep .poster img{display:block;width:100%}
.ep .poster .caption{position:absolute;left:12px;top:12px}
.ep .info{display:flex;flex-direction:column;gap:14px;min-width:0}
.ep .num{font-family:var(--display);font-size:26px;color:var(--red)}
.ep h2{font-size:clamp(44px,6vw,66px)}
.ep .lines{display:flex;flex-direction:column;gap:12px}
.ep .lines p{font-weight:700}
.ep .lines p b{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.04em;color:var(--red);margin-right:6px}
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;background:var(--ink);padding:8px;border:4px solid var(--ink)}
.strip button{padding:0;border:0;background:none;cursor:zoom-in;aspect-ratio:9/12;overflow:hidden}
.strip button img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.strip button:hover img,.strip button:focus-visible img{transform:scale(1.08)}
.strip button:focus-visible{outline:3px solid var(--gold)}
.ep.soon{background:var(--cream)}

/* peke files */
.files{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.file{position:relative;padding:28px 20px 22px;background:#f4e4bc;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);display:flex;flex-direction:column;gap:10px}
.file::before{content:"";position:absolute;left:-4px;top:-22px;width:42%;height:22px;background:#f4e4bc;border:4px solid var(--ink);border-bottom:0}
.file .stamp{position:absolute;right:14px;top:14px;font:900 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--red);border:3px solid var(--red);padding:2px 8px;transform:rotate(8deg)}
.file h3{font-size:28px;margin-top:10px}
.file p{font-size:15.5px}

/* follow band */
.follow{background:var(--ink);border-top:5px solid var(--gold);color:#fff}
.follow .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;padding-block:48px}
.follow img{width:100%;display:block;border:4px solid var(--paper)}
.follow .copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.follow .btn:nth-child(1){background:#000;border-color:#fff}
.follow .btn:nth-child(2){background:var(--pink)}
.follow .btn:nth-child(3){background:#2d5bd7}
.follow .btn:nth-child(4){background:var(--red)}
footer{background:var(--ink);color:#bfcfcf;font-size:14px}
footer .wrap{padding-block:0 32px}

/* lightbox */
.lb{position:fixed;inset:0;z-index:50;background:rgba(10,10,10,.92);display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.lb img{max-width:min(92vw,900px);max-height:84vh;border:4px solid var(--paper);box-shadow:10px 10px 0 var(--red);animation:pop .3s cubic-bezier(.3,1.6,.5,1)}
.lb .x,.lb .prev,.lb .next{position:absolute;font-family:var(--display);font-size:28px;background:var(--gold);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);width:52px;height:52px;cursor:pointer}
.lb .x{top:calc(16px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px))}
.lb .prev{left:calc(12px + env(safe-area-inset-left,0px));top:50%}
.lb .next{right:calc(12px + env(safe-area-inset-right,0px));top:50%}

/* pop-in on scroll (visible by default; JS adds the motion) */
.js .reveal{transition:transform .6s cubic-bezier(.3,1.4,.5,1),opacity .6s}
.js .reveal.pre{transform:translateY(30px) scale(.97);opacity:.01}

@media (max-width:880px){
  .hero .inner,.village,.char,.char:nth-of-type(even),.ep,.follow .wrap{grid-template-columns:1fr}
  .char:nth-of-type(even) .stage{order:0}
  .tiles,.files{grid-template-columns:1fr}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .marquee img{height:130px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ===== v3: immersive layer ===== */
/* comic page-turn between pages (browsers that support it) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .35s ease-in both}
::view-transition-new(root){animation:vt-in .55s cubic-bezier(.2,.9,.3,1) both}
@keyframes vt-out{to{opacity:0;transform:scale(.96) rotate(-1deg)}}
@keyframes vt-in{from{clip-path:circle(0 at 50% 40%)}to{clip-path:circle(150% at 50% 40%)}}

/* nav extras */
.nav a.pat{font-family:var(--display);font-size:19px;letter-spacing:.05em;color:var(--ink);background:var(--gold);border:3px solid var(--paper);padding:3px 12px;text-decoration:none;transform:rotate(-2deg);transition:transform .15s}
.nav a.pat:hover,.nav a.pat:focus-visible{transform:rotate(2deg) scale(1.08);outline:none}

/* hero: pointer parallax + tilting logo */
.hero{--mx:0;--my:0}
.hero .bg{animation:kb 30s ease-in-out infinite alternate;translate:calc(var(--mx)*-18px) calc(var(--my)*-12px);transition:translate .25s ease-out}
.hero .logo-wrap{perspective:900px;cursor:pointer}
.hero .logo-wrap .tilt{position:relative;transform:rotateY(calc(var(--mx)*14deg)) rotateX(calc(var(--my)*-12deg));transition:transform .2s ease-out;transform-style:preserve-3d}
.hero .logo-wrap.spin .tilt{animation:logospin .9s cubic-bezier(.3,1.4,.5,1)}
@keyframes logospin{from{transform:rotateY(0) scale(1)}50%{transform:rotateY(180deg) scale(1.12)}to{transform:rotateY(360deg) scale(1)}}
.pow{position:absolute;z-index:5;pointer-events:none;font-family:var(--display);font-size:clamp(30px,5vw,54px);color:var(--gold);-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--ink);white-space:nowrap;animation:powfx .9s cubic-bezier(.2,1.5,.4,1) forwards}
.pow.p2{color:var(--pink)} .pow.p3{color:#fff} .pow.p4{color:var(--lime)}
@keyframes powfx{0%{transform:translate(-50%,-50%) scale(.2) rotate(-20deg);opacity:0}30%{opacity:1}70%{transform:translate(-50%,-90%) scale(1.1) rotate(6deg);opacity:1}100%{transform:translate(-50%,-140%) scale(1) rotate(0);opacity:0}}
.hint{font:900 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:1px 1px 0 var(--ink);text-align:center;margin-top:6px}

/* paw trail (mouse only) */
.paw{position:fixed;z-index:40;pointer-events:none;width:18px;height:18px;opacity:.55;animation:pawfade 1.1s forwards;
  background:radial-gradient(circle at 50% 68%,var(--ink) 0 34%,transparent 36%),radial-gradient(circle at 18% 30%,var(--ink) 0 13%,transparent 15%),radial-gradient(circle at 42% 12%,var(--ink) 0 13%,transparent 15%),radial-gradient(circle at 68% 14%,var(--ink) 0 13%,transparent 15%),radial-gradient(circle at 88% 34%,var(--ink) 0 13%,transparent 15%)}
@keyframes pawfade{to{opacity:0;transform:scale(.7)}}

/* scroll tour of Sleepy Magna */
.tour{position:relative;padding:0}
.tour .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:18px}
.tour .head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.tour .track{display:flex;gap:28px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:40vw;will-change:transform}
.stop{position:relative;flex:0 0 auto;width:min(78vw,860px);height:min(62vh,520px);border:5px solid var(--ink);box-shadow:10px 10px 0 var(--ink);overflow:hidden;background:var(--ink)}
.stop:nth-child(odd){transform:rotate(-1deg)} .stop:nth-child(even){transform:rotate(1deg)}
.stop img{width:112%;max-width:none;height:100%;object-fit:cover;display:block;transform:translateX(calc(var(--p,0)*-10%))}
.stop.sign{width:min(60vw,360px)}
.stop .caption{position:absolute;left:14px;bottom:14px;font-size:15px}
.tour .bar{height:10px;border:3px solid var(--ink);background:var(--paper);max-width:320px}
.tour .bar i{display:block;height:100%;width:calc(var(--prog,0)*100%);background:var(--red)}
.tour.flat .pin{position:static;height:auto;padding-block:56px}
.tour.flat .track{overflow-x:auto;padding-right:16px;padding-bottom:20px}

/* 3D flip character sheets */
.stage{perspective:1200px}
.stage .sheet{overflow:visible;background:none;border:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,1.3,.5,1);transform:rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg))}
.stage .sheet img,.stage .sheet img.b{opacity:1;border:4px solid var(--ink);background:#eceae6;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:none}
.stage .sheet img.a{transform:none}
.stage .sheet img.b{transform:rotateY(180deg)}
.stage.flip .sheet{transform:rotateX(var(--ty,0deg)) rotateY(calc(180deg + var(--tx,0deg)))}
.stage.flip .sheet img.a,.stage.flip .sheet img.b{opacity:1}
.stage.flip .sheet img.a{transform:none}
.stage.flip .sheet img.b{transform:rotateY(180deg)}

/* tilt for tiles and toys */
.tiltable{transform-style:preserve-3d;will-change:transform}

/* Patreon band */
.patreon{padding-block:48px}
.patreon .box{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:28px;align-items:center;padding:26px;background:var(--gold);position:relative;overflow:hidden}
.patreon .box::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 12% 50%,rgba(255,255,255,.35) 0 6deg,transparent 6deg 14deg);pointer-events:none}
.patreon img{position:relative;width:100%;filter:drop-shadow(5px 5px 0 var(--ink));animation:bob 5s ease-in-out infinite}
.patreon .copy{position:relative;display:flex;flex-direction:column;gap:14px;align-items:flex-start;min-width:0}
.patreon h2{font-size:clamp(40px,6vw,62px);color:#fff;-webkit-text-stroke:2px var(--ink);text-shadow:5px 5px 0 var(--ink)}
.patreon p{font-weight:800;font-size:18px}

/* Play page */
.toys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:start}
.toy{padding:18px;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.toy h2{font-size:38px}
.toy .screen{position:relative;width:100%;aspect-ratio:9/13;border:4px solid var(--ink);overflow:hidden;background:var(--ink);touch-action:manipulation}
.toy .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.toy .screen .frame{opacity:0}
.toy .screen .frame.on{opacity:1}
.toy .score{font-family:var(--display);font-size:26px;color:var(--red)}
.toy .say{min-height:3.2em;font-weight:800}
.toy .stampbig{position:absolute;left:50%;top:38%;font-family:var(--display);font-size:clamp(34px,5vw,52px);padding:2px 16px;border:5px solid currentColor;background:rgba(255,250,240,.9);transform:translate(-50%,-50%) rotate(-12deg) scale(0);transition:transform .35s cubic-bezier(.2,1.8,.4,1);white-space:nowrap}
.toy .stampbig.on{transform:translate(-50%,-50%) rotate(-12deg) scale(1)}
.toy .stampbig.bad{color:var(--red)} .toy .stampbig.good{color:#1c8a3a}
.items{display:flex;gap:12px;justify-content:center}
.items button{width:84px;height:84px;padding:0;border:4px solid var(--ink);box-shadow:4px 4px 0 var(--ink);background:#fff;cursor:pointer;overflow:hidden;transition:transform .15s}
.items button:hover,.items button:focus-visible{transform:translate(-2px,-2px) rotate(-3deg);outline:none}
.items button img{width:100%;height:100%;object-fit:cover;display:block}
.ring{position:absolute;inset:8%;border-radius:50%;pointer-events:none;
  background:conic-gradient(var(--gold) calc(var(--om,0)*360deg),transparent 0);
  -webkit-mask:radial-gradient(circle,transparent 62%,#000 63%);mask:radial-gradient(circle,transparent 62%,#000 63%);opacity:.9}
.glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 55%,rgba(255,194,61,calc(var(--om,0)*.75)),transparent 60%)}
.hold{user-select:none;-webkit-user-select:none;touch-action:none}

@media (max-width:880px){
  .toys{grid-template-columns:1fr}
  .toy{max-width:420px;margin-inline:auto;width:100%}
  .patreon .box{grid-template-columns:1fr}
  .patreon img{max-width:160px}
  .nav .wrap{gap:6px 14px}
  .nav .brand span{font-size:20px}
  .stop{height:min(56vh,440px)}
}
.tour .bar{flex:1 1 180px;align-self:center}
.tour .pin{padding-top:64px}
@media (max-width:560px){
  .nav .brand span{display:none}
  .nav .wrap{flex-wrap:nowrap;gap:12px;overflow-x:auto}
  .nav a.l{font-size:12px;white-space:nowrap}
  .nav a.pat{font-size:16px;padding:2px 8px}
  .nav .brand img{width:40px;height:40px}
}
.nav .brand{flex:0 0 auto}
#nose .stampbig{top:80%}

/* tour is a plain sideways strip: the page scrolls past it normally */
.tour{padding-block:40px}
.tour .pin{position:static;height:auto;overflow:visible;padding-top:0}
.tour .track{overflow-x:auto;overflow-y:hidden;padding-right:16px;padding-block:14px 26px;scrollbar-width:thin;scrollbar-color:var(--ink) transparent;will-change:auto;overscroll-behavior-x:contain}
.stop{height:min(52vh,440px)}
.tour .arrows{display:flex;gap:10px}
.tour .arrows button{font:400 26px/1 var(--display);width:46px;height:46px;background:var(--gold);color:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);cursor:pointer}
.tour .arrows button:hover,.tour .arrows button:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);outline:none}
.tour{padding-top:0}
.village .copy .caption{align-self:flex-start}
.tour .head{width:100%}

/* ground: bright teal with crisp halftone dots that swell toward two corners */
body{background:#1e8a8c}
body::after{inset:0;animation:none;opacity:.42;mix-blend-mode:multiply;
  background:linear-gradient(135deg,#000,#808080 46%,#808080 54%,#000),radial-gradient(closest-side,#000,#fff) 0 0/22px 22px,radial-gradient(closest-side,#000,#fff) 11px 11px/22px 22px;
  background-blend-mode:screen,multiply,normal;filter:contrast(40)}
/* each page has its own ground colour */
body.pg-pekes{background:#6a4fcf}
body.pg-eps{background:#c8357f}
body.pg-play{background:#2473d6}
body.pg-files{background:#2f8f4e}
/* TikTok embeds before TikTok's script fills them (and in previews where it can't): show a proper button */
blockquote.tiktok-embed{border:0;padding:0;text-align:center}
blockquote.tiktok-embed section{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 12px}
blockquote.tiktok-embed section::before{content:"Clips play here once the site is live";font:700 15px/1.3 var(--body);color:#555}
blockquote.tiktok-embed section a{display:inline-block;font:400 24px/1 var(--display);letter-spacing:.05em;color:#fff;background:var(--red);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:10px 18px;text-decoration:none}
blockquote.tiktok-embed section a:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
blockquote.tiktok-embed section p,blockquote.tiktok-embed section a ~ a{display:none}

/* episode with a playable video on the right */
.ep.has-player{grid-template-columns:minmax(0,.62fr) minmax(0,1fr) minmax(0,.62fr)}
.ep .player{display:flex;flex-direction:column;gap:14px;align-items:center;min-width:0}
.ep .player .frame{width:100%;aspect-ratio:9/16;border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:var(--ink) url(img/ep1-still-1.jpg) center/cover;overflow:hidden}
.ep .player iframe{display:block;width:100%;height:100%;border:0}
@media (max-width:1100px){.ep.has-player{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ep.has-player .poster{display:none}}
@media (max-width:860px){.ep.has-player{grid-template-columns:1fr}.ep .player .frame{max-width:380px}}

/* Write to Betty */
body.pg-contact{background:#e0702c}
footer a{color:var(--gold)}
.contact{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:32px;align-items:center}
.contact .letter{padding:28px;display:flex;flex-direction:column;gap:14px;transform:rotate(-.6deg)}
.contact .caption{align-self:flex-start}
.contact form{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.contact label{display:flex;flex-direction:column;gap:6px;font:900 14px/1.2 var(--body);text-transform:uppercase;letter-spacing:.06em}
.contact input,.contact textarea{font:400 17px/1.4 var(--body);padding:10px 12px;border:3px solid var(--ink);background:#fff;box-shadow:4px 4px 0 var(--ink);border-radius:0;color:var(--ink);text-transform:none;letter-spacing:0;width:100%}
.contact input:focus,.contact textarea:focus{outline:3px solid var(--gold);outline-offset:2px}
.contact .btn{align-self:flex-start;cursor:pointer}
.contact .hp{display:none}
.contact .say{margin:0;font-weight:800;min-height:1.4em}
.contact .say.ok{color:#1d7a3a} .contact .say.bad{color:var(--red)}
.contact .betty-pic{width:100%;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);transform:rotate(2.5deg)}
@media (max-width:760px){.contact{grid-template-columns:1fr}.contact .betty-pic{max-width:320px;justify-self:center}}
.contact .lede{color:var(--ink);text-shadow:none}