@font-face{font-family:Onest;src:url(/fonts/Onest.ttf) format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Dela Gothic One";src:url(/fonts/DelaGothicOne-Regular.ttf) format("truetype");font-display:swap}
:root{--banana:#f1ba27;--ink:#0a0a09;--mute:#5d5b55;--line:#e8e6df;--soft:#fbf7e8;--max:1040px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:400 17px/1.6 Onest,system-ui,sans-serif}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
header.top{border-bottom:2px solid var(--ink)}
header.top .wrap{display:flex;align-items:center;gap:12px;height:64px}
header.top img{width:40px;height:40px;border-radius:50%;background:var(--banana)}
header.top a{font:400 18px "Dela Gothic One",sans-serif;text-decoration:none;letter-spacing:.01em}
h1,h2{font-family:"Dela Gothic One",sans-serif;font-weight:400;line-height:1.08;margin:0}
h1{font-size:clamp(32px,6.4vw,64px)}
h2{font-size:clamp(22px,3.6vw,32px)}
.hero{display:grid;grid-template-columns:1fr 280px;gap:40px;align-items:center;padding:56px 0 48px}
.hero img{width:100%;height:auto;border-radius:50%;background:var(--banana);box-shadow:10px 10px 0 var(--ink)}
.hero p{max-width:34em;color:var(--mute);margin:18px 0 0}
mark{background:var(--banana);color:var(--ink);padding:0 .15em}
.list{border-top:2px solid var(--ink);margin:0 0 72px;padding:0;list-style:none}
.list li{border-bottom:1px solid var(--line)}
.list a{display:grid;grid-template-columns:1fr auto;gap:8px 24px;padding:22px 4px;text-decoration:none}
.list a:hover h2{background:linear-gradient(transparent 62%,var(--banana) 62%)}
.list p{margin:6px 0 0;color:var(--mute);max-width:40em}
.tag{font:600 14px Onest;align-self:start;border:2px solid var(--ink);border-radius:99px;padding:2px 12px;white-space:nowrap}
.empty{padding:36px 0 80px;font-size:19px}
.class{padding:48px 0 80px;max-width:720px}
.class .back{display:inline-block;margin-bottom:24px;color:var(--mute)}
.class .lead{font-size:19px;margin:20px 0 28px}
form.signup{border-top:2px solid var(--ink);padding-top:22px}
form.signup label{display:block;font-weight:600;margin-bottom:8px}
.row{display:flex;gap:10px}
input[type=email]{flex:1;min-width:0;font:inherit;padding:13px 14px;border:2px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink)}
button{font:700 17px Onest;padding:13px 22px;border:2px solid var(--ink);border-radius:8px;background:var(--banana);color:var(--ink);cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
button:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
button:disabled{opacity:.6;cursor:wait}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{min-height:1.6em;margin:12px 0 0;font-weight:500}
.msg.err{color:#a3200f}
.fine{color:var(--mute);font-size:14px;margin-top:10px}
video,.yt{width:100%;aspect-ratio:16/9;background:var(--ink);border:2px solid var(--ink);border-radius:8px;display:block}
.yt iframe{width:100%;height:100%;border:0}
.notes{margin-top:32px;border-top:2px solid var(--ink);padding-top:20px}
.notes p{margin:0 0 1em;white-space:pre-line}
@media(max-width:640px){
 body{font-size:16px}
 .hero{grid-template-columns:1fr;gap:28px;padding:32px 0}
 .hero img{width:150px;order:-1;box-shadow:6px 6px 0 var(--ink)}
 .row{flex-direction:column}
 button{width:100%}
 .list a{grid-template-columns:1fr}
 .class{padding:28px 0 56px}
}
@media(prefers-reduced-motion:reduce){button{transition:none}}
#p{margin-top:28px}