:root{--ink:#101010;--cream:#fff6e8;--pink:#ffa6bb;--blue:#08aeea;--red:#ef4c52}
*{box-sizing:border-box} html{scroll-behavior:smooth;background:#111} body{margin:0;overflow-x:hidden;background:#111;color:var(--ink);font-family:"Comic Sans MS","Comic Neue","Trebuchet MS",cursive,sans-serif;cursor:none} a,button,input{font:inherit} a{color:inherit;text-decoration:none;cursor:none} button{cursor:none}.section{position:relative;overflow:hidden;isolation:isolate}.panel{min-height:100vh}.custom-cursor{position:fixed;z-index:99999;left:0;top:0;width:64px;height:58px;background:url("assets/cursor.png") left top/contain no-repeat;pointer-events:none;transform:translate(-6px,-5px);opacity:0;transition:opacity .12s ease}.cursor-ready .custom-cursor{opacity:1}
.site-nav{position:fixed;top:24px;left:50%;transform:translateX(-50%) rotate(-.8deg);z-index:500;display:flex;align-items:center;justify-content:center;gap:clamp(42px,5vw,84px);padding:8px 12px;color:#111;font-weight:900;font-size:clamp(15px,1.35vw,24px);text-shadow:1px 1px 0 rgba(255,255,255,.42);white-space:nowrap}.nav-link{position:relative;display:inline-block}.nav-link:after{content:"";position:absolute;left:3%;right:3%;bottom:-8px;height:3px;background:#111;border-radius:100%;transform:scaleX(0) rotate(-3deg);transform-origin:center;transition:transform .15s ease}.nav-link:hover:after,.nav-link.active:after{transform:scaleX(1) rotate(-3deg)}
.face-badge{position:fixed;top:12px;right:clamp(17px,4vw,70px);width:72px;height:72px;z-index:501;border-radius:50%;transition:transform .16s ease,filter .16s ease;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.18))}.face-badge:hover{transform:scale(1.07) rotate(5deg)}.face-badge img{width:100%;height:100%;object-fit:contain;display:block}
.hero{background:url("assets/pepo-meadow.jpg") center/cover no-repeat;display:flex;align-items:flex-end;padding:90px clamp(14px,4vw,70px) 0}.hero-art{width:min(1720px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(560px,1.08fr) minmax(420px,.72fr);align-items:end;gap:clamp(0px,2vw,42px);min-height:calc(100vh - 90px)}.hero-copy{align-self:center;padding-bottom:clamp(86px,10vh,145px);transform:rotate(-1deg);position:relative;z-index:3}.hero-girl{justify-self:end;align-self:end;width:min(535px,35vw);max-height:86vh;object-fit:contain;transform:translateY(10px) rotate(.4deg);transform-origin:bottom center;filter:drop-shadow(7px 9px 0 rgba(0,0,0,.12));z-index:3;animation:pepoSway 4.3s ease-in-out infinite}@keyframes pepoSway{0%,100%{transform:translateY(10px) rotate(-.7deg)}50%{transform:translateY(7px) rotate(1.2deg)}}
.sun-button{position:absolute;z-index:6;left:clamp(15px,2.8vw,48px);top:clamp(16px,2.5vw,46px);width:clamp(150px,17vw,280px);aspect-ratio:1;padding:0;border:0;background:transparent;filter:drop-shadow(4px 5px 0 rgba(0,0,0,.11));transition:transform .18s ease,filter .18s ease;transform-origin:center}.sun-button img{display:block;width:100%;height:100%;object-fit:contain}.sun-button:hover{transform:scale(1.18) rotate(4deg);filter:drop-shadow(7px 8px 0 rgba(0,0,0,.14)) brightness(1.06)}.hover-note{position:absolute;z-index:8;left:clamp(185px,20.7vw,350px);top:clamp(40px,4.6vw,78px);width:220px;height:135px;transform:rotate(-8deg);pointer-events:none}.hover-note span{position:absolute;top:0;left:0;font-weight:900;font-size:clamp(21px,2.2vw,36px);color:#111;text-shadow:1px 1px 0 rgba(255,255,255,.45)}.hover-note svg{position:absolute;left:2px;top:25px;width:180px;height:105px;overflow:visible}.hover-note path{fill:none;stroke:#111;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.button-row{position:relative;z-index:10;display:flex;align-items:center;gap:clamp(12px,1.4vw,22px);margin-left:clamp(25px,3vw,52px);margin-top:-6px;padding:0 0 28px;transform:rotate(.2deg)}.image-button{display:block;transition:transform .15s ease,filter .15s ease}.image-button:hover{transform:translateY(-4px) scale(1.035) rotate(-1deg);filter:brightness(1.05)}.image-button img{display:block;height:auto;object-fit:contain;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.06))}.buy-link img{width:clamp(250px,24vw,380px)}.x-link img,.tg-link img{width:clamp(78px,7vw,112px)}
.heart-field{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}.heart-field span{position:absolute;color:#ff7fa0;font-size:clamp(28px,3.2vw,56px);text-shadow:2px 2px 0 rgba(0,0,0,.08);opacity:0;animation:floatHeart 6s ease-in-out infinite}.heart-field span:nth-child(1){left:16%;top:40%;animation-delay:.2s}.heart-field span:nth-child(2){left:39%;top:23%;animation-delay:1s}.heart-field span:nth-child(3){left:56%;top:47%;animation-delay:1.7s}.heart-field span:nth-child(4){left:77%;top:24%;animation-delay:2.5s}.heart-field span:nth-child(5){left:89%;top:58%;animation-delay:3.2s}.heart-field span:nth-child(6){left:28%;top:68%;animation-delay:4.1s}@keyframes floatHeart{0%{transform:translateY(20px) scale(.65) rotate(-10deg);opacity:0}22%{opacity:.9}75%{opacity:.72}100%{transform:translateY(-54px) scale(1.05) rotate(9deg);opacity:0}}
.ticker{position:relative;z-index:50;height:58px;overflow:hidden;margin-top:-1px;background:#ffa9bd;border-top:5px solid #111;border-bottom:5px solid #111;white-space:nowrap}.ticker-track{height:100%;display:flex;width:max-content;align-items:center;animation:ticker 16s linear infinite}.ticker-group{display:flex;align-items:center;min-width:100vw}.ticker-group span{font-size:clamp(17px,1.5vw,27px);font-weight:900;padding:0 13px;letter-spacing:.3px}@keyframes ticker{to{transform:translateX(-33.3333%)}}
.about{min-height:100vh;background:radial-gradient(circle at 50% 25%,rgba(255,255,255,.82),rgba(255,246,232,.96) 43%,rgba(255,239,210,.94));display:grid;place-items:center;padding:92px 24px 70px}.about-center{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(1000px,95vw);transform:rotate(.2deg)}.about-title{margin:0 0 28px;font-size:clamp(58px,7vw,112px);line-height:.9;letter-spacing:3px;color:#161616;-webkit-text-stroke:2px #111;text-shadow:4px 5px 0 #ffacc0;transform:rotate(.3deg)}.about-paper{position:relative;text-align:center;border:3px solid #111;box-shadow:5px 6px 0 rgba(0,0,0,.14)}.blue-paper{width:min(760px,86vw);border-radius:16px 20px 13px 18px;background:#effbff;padding:20px 30px;transform:rotate(-.35deg)}.blue-paper p{margin:2px 0;font-size:clamp(21px,2.1vw,34px);font-weight:800}.note-paper{width:min(560px,82vw);margin-top:34px;display:flex;align-items:center;justify-content:center;gap:28px;background:#fff0a8;border-radius:5px;padding:22px 34px;transform:rotate(-2.8deg)}.note-paper img{width:116px;height:92px;object-fit:contain;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.12))}.note-paper p{font-size:clamp(26px,2.6vw,44px);line-height:1.12;margin:0;font-weight:900;text-align:left}.tape{position:absolute;width:80px;height:27px;background:rgba(199,157,86,.58);border:2px solid rgba(0,0,0,.15);z-index:2}.tape-a{left:-20px;top:-15px;transform:rotate(-10deg)}.tape-b{right:-18px;bottom:-14px;transform:rotate(-12deg)}.doodle{position:absolute;z-index:1;user-select:none;pointer-events:none;font-weight:900}.heart-big{left:8%;top:20%;font-size:88px;color:#ff8fa9;transform:rotate(-19deg);text-shadow:2px 2px 0 rgba(0,0,0,.08)}.sparkle-left{left:8%;top:48%;font-size:58px;color:#fff;text-shadow:2px 2px 0 #111;transform:rotate(7deg)}.flower-left{left:9%;bottom:15%;font-size:48px;color:#fff;text-shadow:2px 2px 0 #111;transform:rotate(-6deg)}.dash-left{left:5%;top:10%;font-size:43px;transform:rotate(9deg)}.sparkle-yellow{right:24%;top:17%;font-size:58px;color:#ffdf2c;text-shadow:2px 2px 0 #111}.heart-right{right:11%;top:28%;font-size:44px;color:#ff8fa9;transform:rotate(17deg)}.heart-right-small{right:8%;top:34%;font-size:28px;color:#ff8fa9;transform:rotate(22deg)}.star-right{right:11%;bottom:18%;font-size:48px;color:#fff;text-shadow:2px 2px 0 #111;transform:rotate(10deg)}.dash-right{right:5%;top:12%;font-size:43px;transform:rotate(-8deg)}
.nightcore{min-height:100vh;background:url("assets/pepo-night-stop.jpg") center/cover no-repeat;display:grid;grid-template-columns:minmax(300px,1fr) minmax(340px,520px);align-items:end;padding:92px 9vw 0}.nightcore:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,13,44,.28),rgba(8,13,44,0) 60%);z-index:-1}.night-copy{justify-self:center;align-self:center;text-align:left;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.5);transform:rotate(-.6deg);z-index:3}.night-copy h2{margin:0;font-size:clamp(42px,5.2vw,86px);line-height:.95;text-transform:uppercase;letter-spacing:1px}.night-lines{width:260px;max-width:62vw;height:3px;background:#fff;margin:18px 0;box-shadow:0 13px 0 rgba(255,255,255,.7)}.night-copy p{font-size:clamp(21px,1.7vw,31px);line-height:1.25;font-weight:900}.night-copy span{font-size:48px;color:#ff94bd}.smoking-wrap{position:relative;justify-self:end;align-self:end;width:min(520px,34vw);z-index:2}.smoking-girl{display:block;width:100%;height:auto;filter:drop-shadow(7px 8px 0 rgba(0,0,0,.18))}.smoke{position:absolute;left:19%;top:8%;width:45px;height:45px;border-radius:50%;background:rgba(215,215,215,.42);filter:blur(2px);animation:smokeUp 4.3s ease-in-out infinite;z-index:3}.smoke-two{left:13%;top:2%;width:58px;height:58px;animation-delay:.8s}.smoke-three{left:25%;top:-1%;width:38px;height:38px;animation-delay:1.6s}.smoke-four{left:17%;top:14%;width:34px;height:34px;animation-delay:2.4s}@keyframes smokeUp{0%{transform:translateY(30px) translateX(0) scale(.6);opacity:0}20%{opacity:.62}100%{transform:translateY(-120px) translateX(-24px) scale(1.45);opacity:0}}
.basement{min-height:100vh;background:url("assets/pepo-basement.jpg") center/cover no-repeat;display:grid;place-items:center;padding:98px 24px 75px}.basement:before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.1);z-index:-1}.ca-card{position:relative;width:min(670px,90vw);background:#fff7dc;border:4px solid #111;border-radius:18px 14px 20px 12px;padding:42px 38px 34px;text-align:center;box-shadow:9px 11px 0 rgba(0,0,0,.18);transform:rotate(-.5deg)}.ca-card h2{font-size:clamp(35px,4.2vw,68px);margin:0 0 25px;color:#111;text-shadow:3px 3px 0 #ffacc0}.ca-input-wrap{border:3px dashed #111;padding:14px;margin:0 auto 25px;border-radius:8px;background:#fff}.ca-input-wrap input{width:100%;border:0;background:transparent;text-align:center;font-size:clamp(16px,1.6vw,27px);font-weight:900;outline:none;color:#222}.copy-button{position:relative;border:4px solid #111;background:#1c91f2;color:#fff;padding:11px 55px;font-size:clamp(25px,2.5vw,43px);font-weight:900;box-shadow:8px 8px 0 #075d9e;transition:transform .14s ease}.copy-button:hover{transform:translateY(-4px) scale(1.04)}.ca-card p{margin:27px 0 0;font-size:clamp(18px,1.5vw,27px);font-weight:900}.ca-star{position:absolute;right:45px;bottom:38px;font-size:42px}.footer{min-height:55px;background:#111;color:#fff;display:flex;align-items:center;justify-content:space-around;gap:18px;padding:14px 20px;font-size:clamp(11px,1vw,16px);font-weight:900;letter-spacing:.3px}
@media (max-width:900px){body{cursor:auto}.custom-cursor{display:none}.site-nav{gap:26px;top:14px}.face-badge{width:56px;height:56px}.hero{padding-top:80px}.hero-art{grid-template-columns:1fr;align-items:end;min-height:calc(100vh - 80px)}.hero-copy{padding-top:95px;padding-bottom:10px}.button-row{margin-left:10px}.hero-girl{width:min(400px,58vw);justify-self:end;margin-top:-30px}.sun-button{width:140px}.hover-note{left:145px;top:43px}.nightcore{grid-template-columns:1fr;padding:90px 8vw 0}.smoking-wrap{width:min(430px,70vw)}.footer{flex-wrap:wrap}.buy-link img{width:235px}.x-link img,.tg-link img{width:78px}}
@media (max-width:560px){.button-row{gap:8px}.buy-link img{width:190px}.x-link img,.tg-link img{width:62px}.about-title{font-size:50px}.ticker{height:48px}.night-copy{justify-self:start}.nav-link{font-size:14px}.site-nav{gap:20px}.face-badge{right:10px}}

/* pepo theme */
:root{--ink:#172416;--cream:#eff6e9;--pink:#d94235;--blue:#75d7df;--red:#c9372c}
body{font-family:"Trebuchet MS","Comic Sans MS",cursive,sans-serif}
.site-nav{color:#132418;text-shadow:1px 1px 0 #fff;transition:color .25s}.site-nav .nav-link:after{background:currentColor}body.on-dark .site-nav{color:white;text-shadow:2px 2px 0 #111}
.face-badge{background:white;border:3px solid #172416;overflow:hidden;box-shadow:4px 5px 0 #172416;filter:none}.face-badge img{width:125%;height:125%;object-fit:cover;object-position:center 19%;transform:translate(-10%,-2%)}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(216,243,222,.16),transparent 65%);z-index:-1}
.pepo-logo{position:relative;width:max-content;max-width:100%;margin:0 0 -10px;font-size:clamp(105px,19vw,360px);line-height:.9;letter-spacing:-.095em;padding-right:.13em;color:#d3362b;-webkit-text-stroke:clamp(3px,.55vw,9px) #182418;paint-order:stroke fill;text-shadow:7px 11px 0 #10251a,13px 17px 0 rgba(0,0,0,.14);font-weight:1000;transform:rotate(-2deg)}.logo-drip{display:block;position:absolute;right:.08em;bottom:-.06em;font-size:.16em;color:#72d9e6;-webkit-text-stroke:2px #182418;text-shadow:2px 3px 0 #182418;animation:drip 2.8s ease-in-out infinite}@keyframes drip{50%{transform:translateY(9px)}}
.hero-tagline{margin:8px 0 8px 25px;font-size:clamp(21px,2.2vw,38px);font-weight:1000;color:#182418;text-shadow:2px 3px 0 #fff;transform:rotate(-1deg)}.hero-girl{width:min(600px,39vw);max-height:88vh;object-position:bottom}
.button-row{margin-top:22px;align-items:center}.image-button{appearance:none;border:4px solid #152117;background:#d94235;color:#fff;display:grid;place-items:center;height:clamp(74px,7vw,112px);font-size:clamp(25px,2.7vw,43px);font-weight:1000;white-space:nowrap;line-height:1;box-shadow:6px 8px 0 #152117;transform:rotate(-1deg);text-shadow:2px 2px 0 rgba(0,0,0,.14)}.image-button:hover{transform:translateY(-6px) rotate(1deg);filter:brightness(1.05)}.buy-link{width:clamp(250px,24vw,380px);border-radius:13px 18px 10px 16px}.x-link,.tg-link{width:clamp(78px,7vw,112px);background:#7ccf9a;border-radius:16px 12px 17px 11px;color:#152117;text-shadow:none}.tg-link{background:#7bd4dc;font-size:clamp(36px,3.5vw,53px)}
.sun-button{border-radius:50%;border:5px solid #152117;background:#f7db78;width:clamp(120px,14vw,225px);padding:9px;box-shadow:5px 7px 0 #152117;filter:none}.sun-button:before{content:"";position:absolute;inset:-20px;border:5px dashed #dcae31;border-radius:50%;z-index:-1;animation:spin 18s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.sun-button img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 22%;background:#fff}.sun-button:hover{filter:none;transform:scale(1.14) rotate(7deg)}.hover-note{left:clamp(170px,18vw,300px)}
.heart-field span{color:#6bd7e5;font-size:clamp(20px,2vw,35px);-webkit-text-stroke:2px #143327;text-shadow:none}.ticker{background:#a4db9d;border-color:#152117}
.about{background:radial-gradient(circle at 50% 18%,#f9fff0 0,#e5f2d8 55%,#bfdfc1 100%)}.about:before{content:"";position:absolute;inset:0;opacity:.16;background:repeating-radial-gradient(circle at 50% 112%,transparent 0 65px,#508c70 67px 70px,transparent 73px 125px);pointer-events:none}.about-title{color:#d63e31;text-shadow:5px 6px 0 #b3dcb5;letter-spacing:-.025em}.blue-paper{background:#f6fff3}.note-paper{background:#d8f0d0}.note-paper img{width:116px;height:96px;border:2px solid #172416;border-radius:50%;object-fit:cover;object-position:center 25%;background:#fff}.heart-big,.heart-right,.heart-right-small{color:#67c9d2}.sparkle-yellow{color:#e15340}
.night-copy{color:#f7f3da}.night-copy span{color:#85dbe3}.smoking-wrap{width:min(555px,38vw)}.smoke{background:rgba(126,218,224,.33)}.ca-card{background:#f1f3dc;border-color:#162416;box-shadow:10px 12px 0 rgba(0,0,0,.38)}.ca-card h2{text-shadow:3px 3px 0 #aad8a3}.copy-button{background:#d53a2e;box-shadow:8px 8px 0 #842c23}.ca-input-wrap{background:#fffef5}.footer{background:#132018;color:#d9f0d9}
.site-toast{position:fixed;left:50%;bottom:28px;z-index:1000;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#f7fff0;border:3px solid #162416;border-radius:12px;box-shadow:5px 5px 0 #162416;padding:12px 20px;font-size:18px;font-weight:900;white-space:nowrap;transition:opacity .2s,transform .2s}.site-toast.visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.hero-art{min-height:calc(100svh - 80px)}.hero-copy{padding-top:100px;align-self:center}.pepo-logo{font-size:clamp(115px,22vw,210px)}.hero-girl{width:min(450px,60vw);max-height:50vh}.sun-button{width:125px}.hover-note{left:150px}.smoking-wrap{width:min(480px,66vw)}.image-button{height:75px}.buy-link{width:235px}.x-link,.tg-link{width:78px}}
@media(max-width:560px){.site-nav{left:14px;transform:none;gap:19px;top:20px}.face-badge{width:48px;height:48px}.hero{padding:90px 14px 0}.hero-art{display:flex;flex-direction:column;justify-content:flex-end;gap:0}.hero-copy{align-self:stretch;padding-top:120px;padding-bottom:0}.pepo-logo{font-size:clamp(100px,27vw,160px);margin-left:2px}.hero-tagline{font-size:20px;margin:10px 0 12px 9px}.button-row{margin:20px 0 0;gap:9px;padding-bottom:10px;transform:none}.image-button{height:59px;border-width:3px;box-shadow:4px 5px 0 #152117;font-size:22px}.buy-link{width:auto;flex:1}.x-link,.tg-link{width:58px;flex:0 0 58px}.tg-link{font-size:34px}.hero-girl{align-self:flex-end;width:min(310px,70vw);max-height:44vh;margin-top:4px}.sun-button{left:18px;top:78px;width:90px;padding:4px;border-width:3px}.sun-button:before{inset:-10px;border-width:3px}.hover-note{left:116px;top:101px;width:115px;transform:rotate(-8deg)}.hover-note span{font-size:19px}.hover-note svg{width:90px;top:15px}.nightcore{padding-top:75px}.night-copy{align-self:center}.night-copy h2{font-size:clamp(46px,12vw,70px)}.night-copy p{font-size:20px}.smoking-wrap{width:min(310px,70vw)}.about-title{font-size:clamp(44px,12vw,65px)}.note-paper{gap:14px;padding:20px}.note-paper img{width:85px;height:85px}.note-paper p{font-size:26px}.ca-card{padding:28px 20px}.ca-input-wrap input{font-size:17px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;scroll-behavior:auto!important}}
.tg-link svg{display:block;width:53%;height:53%;fill:currentColor;filter:none}
