@font-face{font-family:'Cabin Sketch';src:url('fonts/CabinSketch-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Just Another Hand';src:url('fonts/JustAnotherHand-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
*{box-sizing:border-box}
body{margin:0;background:white;color:#242424;font-family:Arial,sans-serif}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid #1679ad;outline-offset:5px}
.intro{text-align:center;padding:42px 20px 25px}
h1{color:#4169e1;font-family:'Cabin Sketch',sans-serif;font-size:96px;font-weight:700;line-height:.98;margin:0 auto;letter-spacing:.16em}
h1>span{display:block;padding-left:.16em}
h1 small{display:block;font-size:29px;letter-spacing:.17em;padding-left:.17em;margin-top:12px;line-height:1.2}
.tagline,.their-words{font-family:'Just Another Hand',cursive;font-weight:400}
.tagline{color:#4169e1;font-size:37px;letter-spacing:1.6px;margin:29px 0 17px;white-space:nowrap}
.their-words{color:#87ceeb;font-size:58px;line-height:.98;margin:0 0 17px}
.earth{display:block;width:285px;height:auto;margin:0 auto}
.videos{max-width:1050px;margin:15px auto 40px;padding:0 24px;--cards:5;--gap:18px}
.video-row{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 0}
.video-row::-webkit-scrollbar{display:none}
.video-card{flex:0 0 calc((100% - (var(--cards) - 1)*var(--gap))/var(--cards));min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.video-thumbnail{display:block;width:100%;aspect-ratio:9/16;position:relative;border:0;padding:0;background:#eee;color:#fff;overflow:hidden;border-radius:2px}
.video-thumbnail img{display:block;width:100%;height:100%;object-fit:cover}
.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:43px;height:43px;padding-left:3px;border-radius:50%;background:#fff;color:#333;box-shadow:0 1px 12px #0003;font-size:17px}
.video-card h2{font-size:13px;line-height:1.45;font-weight:400;margin:10px 0 0}
.video-card a{display:inline-block;font-size:11px;color:#666;margin-top:6px;text-underline-offset:3px}
.video-controls{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:20px}
.video-controls button{width:44px;height:44px;background:white;border:0;color:#555;font-size:23px}
.video-controls button:disabled{opacity:.25;cursor:default}
.sample-note{font-size:11px;color:#777}
dialog{border:0;padding:16px;width:min(440px,calc(100% - 24px));max-height:94dvh;overflow:auto;background:#fff}
dialog::backdrop{background:#000b}
.player-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.player-top h2{font-size:14px;line-height:1.5;margin:0;font-weight:400}
.player-top button{border:0;background:#fff;font-size:26px;min-width:36px;min-height:36px;line-height:1}
#player{aspect-ratio:9/16;max-height:68dvh;margin:auto;background:#000;display:flex}
#player iframe{width:100%;height:100%;border:0}
#youtube-link{display:block;text-align:center;font-size:12px;margin-top:14px;color:#444}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:850px){.videos{--cards:3}}
@media(max-width:600px){
 .intro{padding:30px 16px 16px}
 h1{font-size:clamp(63px,19vw,82px)}
 h1 small{font-size:23px;margin-top:10px}
 .tagline{font-size:clamp(25px,7.6vw,33px);letter-spacing:1px;margin:25px 0 15px}
 .their-words{font-size:48px;margin-bottom:15px}
 .earth{width:245px}
 .videos{--cards:1;max-width:335px;padding:0 22px;margin-top:10px}
 .video-card h2{font-size:14px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}