@font-face{font-family:"Comic Neue";src:url("assets/comic-neue-regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Comic Neue";src:url("assets/comic-neue-bold.ttf") format("truetype");font-style:normal;font-weight:700 900;font-display:swap}
:root{--ink:#111820;--blue:#94d6fb;--deep:#0d2032;--red:#ef493f;--yellow:#ffdc45;--paper:#fffefa;--green:#8ed18a;--pink:#f4a4bd;--comic:"Comic Neue","Comic Sans MS","Comic Sans",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;max-width:100%;overflow-x:hidden}
body{width:100%;max-width:100%;margin:0;background:var(--paper);color:var(--ink);font-family:var(--comic);overflow-x:hidden;position:relative}
main,header,footer,section{max-width:100%}
img,iframe{max-width:100%}
a{color:inherit;text-decoration:none}
.site-header{height:92px;display:flex;align-items:center;justify-content:space-between;padding:8px clamp(22px,5vw,76px);border-bottom:4px solid var(--ink);background:#fff;position:relative;z-index:10}
.brand{height:74px;width:115px;display:block}
.brand img{width:100%;height:100%;object-fit:contain;display:block}
nav{display:flex;align-items:center;gap:clamp(18px,3vw,45px);font-weight:700;font-size:15px}
nav a{position:relative}
nav a:not(.nav-button):after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;background:var(--red);transform:scaleX(0) rotate(-2deg);transition:.2s}
nav a:hover:after{transform:scaleX(1) rotate(-2deg)}
.nav-button{background:var(--yellow);border:3px solid var(--ink);padding:10px 16px;box-shadow:4px 4px 0 var(--ink);transform:rotate(1deg)}
.hero{min-height:calc(100vh - 92px);height:760px;max-height:900px;background:var(--blue);border-bottom:5px solid var(--ink);position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(350px,.9fr);align-items:center;padding:50px clamp(28px,7vw,110px);isolation:isolate;overflow:hidden}
#doodle-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.9}
.hero-copy{max-width:700px;min-width:0;z-index:2}
.eyebrow{font-family:var(--comic);font-weight:900;letter-spacing:.18em;font-size:13px;margin:0 0 17px}
.hero h1{font-family:Arial Black,Impact,sans-serif;font-size:clamp(55px,7vw,105px);line-height:.86;letter-spacing:-.065em;margin:0;transform:rotate(-1deg);text-shadow:4px 4px 0 #fff}
.hero h1 span{color:var(--red);-webkit-text-stroke:3px var(--ink);text-shadow:5px 5px 0 var(--ink)}
.intro{font-size:clamp(17px,1.5vw,23px);line-height:1.45;font-weight:bold;margin:35px 0 30px;max-width:600px}
.hero-actions{display:flex;flex-wrap:wrap;gap:18px}
.paint-button{display:inline-block;padding:16px 23px;font-family:var(--comic);font-size:14px;font-weight:900;letter-spacing:.06em;border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.paint-button:hover{transform:translate(3px,3px) rotate(-1deg);box-shadow:3px 3px 0 var(--ink)}
.paint-button.primary{background:var(--red);color:#fff}.paint-button.secondary{background:#fff}
.hero-art{height:min(590px,74vh);position:relative;right:55px;bottom:-48px;align-self:end;display:flex;justify-content:flex-end;align-items:flex-end}
.hero-art img{width:min(560px,44vw);height:100%;object-fit:contain;object-position:right bottom;filter:drop-shadow(8px 8px 0 rgba(255,255,255,.75));animation:floaty 3s ease-in-out infinite;transform-origin:bottom center}
.speech-bubble{position:absolute;top:5%;right:1%;z-index:2;background:#fff;border:4px solid var(--ink);border-radius:50%;padding:25px 31px;font-weight:bold;font-size:20px;transform:rotate(3deg)}
.speech-bubble:before{content:"";position:absolute;left:22%;bottom:-25px;border-width:23px 14px 0 5px;border-style:solid;border-color:var(--ink) transparent transparent transparent;transform:rotate(10deg)}
.speech-bubble:after{content:"";position:absolute;left:calc(22% + 5px);bottom:-15px;border-width:16px 9px 0 3px;border-style:solid;border-color:#fff transparent transparent transparent;transform:rotate(10deg)}
.name-tag{position:absolute;right:1%;bottom:11%;font-weight:900;font-family:var(--comic);transform:rotate(-5deg);font-size:14px}
.scroll-note{position:absolute;bottom:18px;left:50%;transform:translateX(-50%) rotate(-2deg);font-size:13px;font-weight:bold}
@keyframes floaty{0%,100%{transform:rotate(-1.5deg) translateY(0)}50%{transform:rotate(1.5deg) translateY(-8px)}}
.dives{padding:100px clamp(24px,7vw,110px) 120px;max-width:1600px;margin:auto}
.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:45px;padding:0 8px}
.section-heading h2,.about h2,.subscribe h2{font-family:Arial Black,Impact,sans-serif;font-size:clamp(43px,5vw,74px);letter-spacing:-.055em;line-height:.95;margin:0}
.section-heading>p{text-align:right;font-weight:bold;line-height:1.5;transform:rotate(2deg)}
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:36px 42px}
.video-card{border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:#fff;transition:.2s;overflow:hidden;transform:rotate(-.35deg)}
.video-card:nth-child(even){transform:rotate(.45deg)}
.video-card:hover{transform:rotate(-1deg) translateY(-6px);box-shadow:12px 14px 0 var(--ink)}
.thumb{position:relative;border-bottom:4px solid var(--ink);aspect-ratio:16/9;overflow:hidden;background:#ddd}
.thumb img{width:100%;height:100%;display:block;object-fit:cover}.thumb span{position:absolute;top:13px;right:13px;padding:7px 12px;border:3px solid var(--ink);background:var(--yellow);font-family:Arial Black,sans-serif;transform:rotate(5deg);box-shadow:3px 3px 0 var(--ink)}
.video-player iframe{display:block;width:100%;height:100%;border:0}.video-player span{pointer-events:none}.card-copy p a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.card-copy{padding:25px 28px 28px}.card-copy small{font-family:var(--comic);font-weight:900;letter-spacing:.13em}.card-copy h3{font-family:Arial Black,Impact,sans-serif;font-size:clamp(27px,3vw,40px);line-height:1;margin:11px 0 13px;letter-spacing:-.04em}.card-copy p{font-size:16px;font-weight:bold;margin:0}
.blue-card .card-copy{background:#d8f0ff}.yellow-card .card-copy{background:#fff4b4}.pink-card .card-copy{background:#ffd8e4}.green-card .card-copy{background:#d9f4d5}
.live-grid{grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr)}
.live-grid.has-many-videos{grid-template-columns:repeat(2,minmax(0,1fr))}
.video-status{min-height:280px;margin:0;border:4px dashed var(--ink);display:grid;place-items:center;padding:30px;text-align:center;font-size:21px;font-weight:bold;background:#d8f0ff}
.channel-card{border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:var(--yellow);padding:45px;display:flex;flex-direction:column;justify-content:center;position:relative;transform:rotate(.6deg);transition:.2s}
.channel-card:hover{transform:rotate(-1deg) translateY(-6px);box-shadow:12px 14px 0 var(--ink)}
.channel-card small{font-family:var(--comic);font-weight:900;letter-spacing:.13em}.channel-card h3{font-family:Arial Black,Impact,sans-serif;font-size:clamp(31px,3vw,45px);line-height:1;margin:14px 0;letter-spacing:-.04em}.channel-card p{font-weight:bold}.channel-arrow{position:absolute;right:25px;top:20px;font:900 44px var(--comic);color:var(--red);-webkit-text-stroke:2px var(--ink)}
.shorts-shelf{margin-top:95px;padding-top:45px;border-top:4px dashed var(--ink)}.shorts-shelf[hidden]{display:none}.shorts-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:28px}.shorts-heading h3{font-family:Arial Black,Impact,sans-serif;font-size:clamp(34px,4vw,54px);letter-spacing:-.05em;line-height:1;margin:0}.shorts-heading>a{font-family:var(--comic);font-size:13px;font-weight:900;border-bottom:3px solid var(--red)}.shorts-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}.short-card{min-width:0;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:#fff;overflow:hidden}.short-card iframe{display:block;width:100%;aspect-ratio:9/16;border:0}.short-card p{margin:0;padding:12px;font-size:13px;font-weight:bold;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.about{min-height:700px;border-block:5px solid var(--ink);background:#f9da4a;display:grid;grid-template-columns:1fr 1fr;align-items:center;overflow:hidden;padding:70px clamp(28px,9vw,145px);gap:7vw}
.about-art{height:550px;position:relative;background:#fff;border:5px solid var(--ink);box-shadow:12px 12px 0 var(--ink);transform:rotate(-2deg);overflow:hidden}
.about-art:before{content:"";position:absolute;inset:15px;border:3px dashed var(--blue)}
.about-art img{width:100%;height:115%;object-fit:contain;position:relative;top:25px}.scribble-star{position:absolute;right:8%;top:6%;font-size:80px;color:var(--red);-webkit-text-stroke:3px var(--ink);transform:rotate(10deg)}
.about-copy{max-width:600px}.about h2 span{color:var(--red);-webkit-text-stroke:2px var(--ink)}.about-copy>p:not(.eyebrow){font-size:21px;line-height:1.5;font-weight:bold}.about ul{list-style:none;padding:0;margin:28px 0 0;font-size:18px;font-weight:bold}.about li{display:flex;align-items:center;gap:13px;margin:15px 0}.about li span{display:grid;place-items:center;flex:0 0 34px;background:#fff;border:3px solid var(--ink);width:34px;height:34px;line-height:1;font-family:var(--comic);font-size:23px;box-shadow:4px 4px 0 var(--ink)}.about li b{font-weight:bold}.mascot-arrow:after{content:'←';font-style:normal;font-family:var(--comic)}
.subscribe{margin:120px auto;max-width:950px;text-align:center;background:var(--blue);border:5px solid var(--ink);box-shadow:12px 12px 0 var(--ink);padding:70px 25px 55px;position:relative;transform:rotate(.4deg)}
.subscribe>p:not(.eyebrow):not(.fine-print){font-size:20px;font-weight:bold;margin:20px 0 30px}.fine-print{font-size:12px;font-weight:bold;margin:25px 0 0}.tape{position:absolute;width:140px;height:38px;background:rgba(255,245,180,.82);border:1px solid rgba(0,0,0,.15)}.tape-one{top:-16px;left:-45px;transform:rotate(-34deg)}.tape-two{bottom:-12px;right:-42px;transform:rotate(-28deg)}
footer{min-height:150px;background:var(--deep);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:20px clamp(24px,6vw,95px);font-family:var(--comic);font-size:12px;font-weight:900;letter-spacing:.08em}footer img{width:90px;height:100px;object-fit:contain}footer a{border-bottom:2px solid var(--blue)}
@media(max-width:1100px){.shorts-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){.site-header{height:76px}.brand{height:62px;width:76px}.nav-button{padding:9px 12px}nav a:not(.nav-button){display:none}.hero{height:auto;min-height:760px;grid-template-columns:1fr;padding:55px 28px 0;align-items:start}.hero-art{right:5px;bottom:-24px;height:320px;margin-top:-5px;justify-content:flex-end}.hero-art img{width:310px;max-width:82vw;height:100%;object-position:right bottom}.speech-bubble{right:5%;top:3%;font-size:15px;padding:16px 20px}.name-tag{right:3%;bottom:8%;font-size:11px}.scroll-note{display:none}.video-grid{grid-template-columns:1fr}.section-heading{align-items:start}.section-heading>p{display:none}.about{grid-template-columns:1fr;padding-block:80px}.about-art{height:430px;order:2}.mascot-arrow:after{content:'↓'}.subscribe{width:calc(100% - 44px);margin-block:85px}footer{flex-direction:column;gap:14px;text-align:center;padding-block:30px}}
@media(max-width:480px){.hero h1{font-size:clamp(39px,12vw,46px);line-height:.9}.hero h1 span{-webkit-text-stroke:2px var(--ink)}.intro{font-size:16px;margin:25px 0 24px}.hero-actions{flex-direction:column;align-items:stretch;text-align:center;width:100%;padding-right:6px}.paint-button{padding:14px 12px}.hero-art{height:295px;margin-top:8px}.dives{padding-top:70px;overflow-x:hidden}.card-copy,.channel-card{padding:20px}.channel-card{min-height:280px}.shorts-shelf{margin-top:70px}.shorts-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.shorts-heading{align-items:start;gap:18px}.shorts-heading>a{font-size:11px}.about{padding-inline:24px}.about h2{font-size:43px}.about-art{height:350px}.about li{align-items:flex-start}.about li span{margin-top:1px}.subscribe{overflow:hidden}.tape-one{left:0}.tape-two{right:0}footer img{width:76px;height:86px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-art img{animation:none}}