@font-face{font-family:'Bubblegum Sans';font-weight:400;font-style:normal;font-display:swap;src:url(font-0.ttf) format('truetype')}
@font-face{font-family:'Patrick Hand';font-weight:400;font-style:normal;font-display:swap;src:url(font-1.ttf) format('truetype')}
@font-face{font-family:'Quicksand';font-weight:700;font-style:normal;font-display:swap;src:url(font-2.ttf) format('truetype')}


:root{color-scheme:dark;--ink:#211c2b;--cream:#fff1d4;--orange:#ff7f00;--mint:#07eb95;--pink:#ff7da8;--purple:#b9a0ff;--dark:#211c2b}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--dark);color:var(--cream);font-family:'Quicksand',sans-serif;font-weight:700;line-height:1.65}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}img{display:block;max-width:100%;height:auto}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:'Bubblegum Sans',sans-serif;font-weight:400;line-height:1.03}h1{font-size:clamp(3.8rem,7.5vw,7rem)}h2{font-size:clamp(2.5rem,5vw,4.8rem)}h3{font-size:2rem}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px dashed var(--mint);outline-offset:6px}.wrap{width:min(1240px,calc(100% - 48px));margin:auto}.hand{font-family:'Patrick Hand',cursive;font-weight:400}.small{font-size:.8rem}.header{position:fixed;top:0;left:0;right:0;z-index:1000;background:#211c2bf5;border-bottom:1px solid #fff1d422;backdrop-filter:blur(12px)}.header .wrap{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:10px;font-family:'Bubblegum Sans';font-size:2rem;line-height:1}.brand img{width:48px;height:48px}.brand span span{color:var(--orange)}nav{display:flex;align-items:center;gap:30px;font-size:.85rem}.nav-chat{background:var(--cream);color:var(--ink);padding:10px 20px;border-radius:50%;transform:rotate(-5deg)}.menu{display:none;min-height:44px;min-width:60px;border:2px solid var(--cream);border-radius:8px;background:transparent;color:var(--cream)}main{padding-top:86px}.eyebrow{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 24px;background:var(--orange);color:var(--ink);border:2px solid var(--ink);box-shadow:4px 5px 0 var(--ink);border-radius:12px;font-size:.95rem;transition:transform .15s}.button:hover{transform:translateY(-3px) rotate(-1deg)}.button img{width:28px;height:28px;object-fit:contain}.secondary{background:var(--cream)}.buttons{display:flex;flex-wrap:wrap;gap:16px}.section{padding:80px 0}.section-title{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:36px}.section-title p{max-width:320px;font-size:.9rem}.tag{display:inline-block;background:var(--cream);color:var(--ink);padding:5px 13px;transform:rotate(-4deg);font-family:'Patrick Hand';font-size:1.1rem;border:2px solid var(--ink)}.platforms{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.platform{position:relative;padding:28px;border:2px solid var(--ink);box-shadow:6px 7px 0 #0d0a14;border-radius:20px;color:var(--ink);transition:transform .2s}.platform:hover{transform:rotate(-2deg) translateY(-5px)}.platform:nth-child(1){background:#c1a9ff;transform:rotate(-2deg)}.platform:nth-child(2){background:#ffb19d;transform:rotate(1deg)}.platform:nth-child(3){background:#d0eeac;transform:rotate(-1deg)}.platform img{width:86px;height:86px;object-fit:contain;margin-bottom:32px;filter:drop-shadow(3px 5px 0 #211c2b33)}.platform p{font-size:.85rem;margin:14px 0 30px}.platform .arrow{position:absolute;right:25px;top:20px;font-size:2rem}.platform .destination{display:block;border-top:1px solid #211c2b66;padding-top:12px;font-size:.8rem}.footer{border-top:1px solid #fff1d433;padding:36px 0 95px}.footer .wrap{display:flex;justify-content:space-between;gap:25px;align-items:center}.footer p{font-size:.75rem}.footer-links{display:flex;gap:20px;align-items:center}.footer-links img{width:32px;height:32px;object-fit:contain}.compare{position:fixed;bottom:16px;right:16px;z-index:1100;background:#fff1d4;color:var(--ink);border:2px solid var(--ink);box-shadow:4px 4px 0 #0007;border-radius:16px;padding:9px 14px;font-size:.75rem;display:flex;gap:14px;align-items:center}.compare a{padding:4px 0;text-decoration:underline;text-underline-offset:4px}.note{padding:16px 20px;background:#2d2639;border:1px dashed #fff1d466;border-radius:12px;margin-top:30px;font-size:.8rem}.note summary{cursor:pointer;min-height:28px}.note p{margin-top:15px;max-width:800px}.skip{position:fixed;left:10px;top:-100px;z-index:1200;background:var(--mint);color:var(--ink);padding:12px}.skip:focus{top:10px}
@media(max-width:800px){nav{gap:15px}.section-title{align-items:start;flex-direction:column}.platforms{grid-template-columns:1fr}.platform{max-width:100%;display:grid;grid-template-columns:90px 1fr;column-gap:22px}.platform img{grid-row:1/4;align-self:center;margin:0;width:74px;height:74px}.platform h3{font-size:1.8rem;padding-right:15px}.platform p{margin:8px 0 15px}.platform .arrow{font-size:1.5rem;right:16px;top:14px}.section{padding:50px 0}.footer .wrap{align-items:start;flex-direction:column}}
@media(max-width:600px){.wrap{width:calc(100% - 36px)}.header .wrap{min-height:76px;flex-wrap:wrap}.brand{font-size:1.65rem}.brand img{width:40px;height:40px}.menu{display:block}nav{display:none;width:100%;flex-direction:column;align-items:stretch;padding-bottom:20px;gap:4px}nav.open{display:flex}nav a{min-height:44px;padding:8px}.nav-chat{border-radius:10px;transform:none;text-align:center}main{padding-top:76px}.compare{font-size:.67rem;bottom:8px;right:8px;gap:10px;padding:8px}.platform{padding:20px;grid-template-columns:58px 1fr;gap:12px}.platform img{width:55px;height:55px}.buttons{gap:12px}.button{font-size:.85rem;padding:12px 16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

:root { --paper:#fff1d4; --lavender:#c4aceb; --charcoal:#241e2e; --orange:#ff7f00; --ink:#211c2b; }
body { background:var(--charcoal); background-image:radial-gradient(#fff1d412 .8px,transparent .8px); background-size:12px 12px; }
.header { background:#241e2efa; backdrop-filter:none; }
.wrap { max-width:1240px; }
.header .brand { font-size:1.9rem; }
nav a { display:inline-flex; align-items:center; min-height:44px; }
p { text-wrap:pretty; }
.hero { display:grid; grid-template-columns:1fr 1fr; gap:65px; align-items:center; padding-top:65px; padding-bottom:68px; }
.hello { display:inline-block; color:#e8b8f9; font-size:1.85rem; transform:rotate(-4deg); margin-bottom:12px; }
.hero h1 { letter-spacing:-.025em; font-size:clamp(4.5rem,7.6vw,6.9rem); }
.hero h1 span { display:block; color:var(--orange); font-size:1.13em; text-shadow:4px 5px 0 #100a19; transform:rotate(-2deg); }
.slogan { font:400 1.95rem/1.3 'Patrick Hand',cursive; margin:25px 0; max-width:530px; }
.slogan em { color:#c9f598; font-style:normal; text-decoration:underline wavy; text-decoration-thickness:2px; text-underline-offset:7px; }
.intro { max-width:430px; color:#d7ccdf; font-size:.9rem; margin-bottom:27px; }
.hero .hand-note { color:#d5bee7; font-size:1.2rem; margin:20px 0 0 10px; transform:rotate(-3deg); }
.hero-art { min-width:0; padding:12px 8px 0; position:relative; }
.portrait-window { position:relative; border:3px solid #100b18; border-radius:15px; background:var(--lavender); color:var(--ink); box-shadow:10px 12px 0 #100b18; transform:rotate(3deg); }
.window-title { border-bottom:3px solid var(--ink); border-radius:11px 11px 0 0; background:#e8d6f7; padding:11px 15px; display:flex; align-items:center; justify-content:space-between; font-size:.7rem; gap:10px; }
.window-dots { display:flex; gap:6px; }
.window-dots i { width:9px; height:9px; border:1.5px solid var(--ink); border-radius:50%; background:#fff1d4; }
.portrait-canvas { position:relative; padding:30px 10px 0; background-image:linear-gradient(#56396515 1px,transparent 1px),linear-gradient(90deg,#56396515 1px,transparent 1px); background-size:28px 28px; }
.portrait-canvas .portrait { width:100%; max-width:470px; margin:0 auto; transform:rotate(-3deg); position:relative; }
.portrait-canvas .speech { position:absolute; top:16px; right:0; background:var(--paper); border:2px solid var(--ink); border-radius:48% 43% 45% 40%; padding:9px 20px; font:400 1.35rem 'Patrick Hand'; transform:rotate(7deg); z-index:2; box-shadow:3px 4px 0 var(--ink); }
.portrait-canvas .star { position:absolute; top:46px; left:17px; font:400 3.8rem 'Patrick Hand'; color:#633878; transform:rotate(-14deg); }
.portrait-caption { background:var(--paper); border-top:3px solid var(--ink); border-radius:0 0 11px 11px; min-height:55px; padding:11px 100px 11px 15px; font:400 1.25rem/1.25 'Patrick Hand'; }
.lion-wrap { position:absolute; bottom:-7px; right:-6px; z-index:3; transform:rotate(-9deg); }
.lion-button { width:91px; height:91px; display:block; background:transparent; padding:0; border:0; }
.lion-button img { width:91px; filter:drop-shadow(3px 4px 0 #211c2b88); transition:transform .2s; }
.lion-button:hover img { transform:rotate(9deg) translateY(-3px); }
.lion-button[aria-expanded=true] img { transform:rotate(-9deg) translateY(-7px); }
.lion-answer { position:absolute; right:0; bottom:105px; width:205px; background:var(--paper); color:var(--ink); padding:10px 14px; border:2px solid var(--ink); box-shadow:3px 4px 0 var(--ink); border-radius:15px; font:400 1.25rem/1.25 'Patrick Hand'; }
[hidden] { display:none!important; }
.dock { display:flex; justify-content:center; align-items:start; gap:12px; margin:32px 15px 0; }
.dock a { flex:1; min-width:0; display:flex; align-items:center; flex-direction:column; gap:6px; padding:11px 5px 9px; color:var(--paper); border:1px solid #fff1d422; border-radius:13px; background:#342b42; box-shadow:3px 4px 0 #120c1b; transition:transform .15s,background .15s; }
.dock a:hover { transform:translateY(-5px) rotate(-3deg); background:#433550; }
.dock img { width:43px; height:43px; object-fit:contain; }
.dock span { font-size:.71rem; }
.dock-caption { font-size:1.15rem; color:#d2bade; text-align:center; margin-top:12px; transform:rotate(2deg); }
.paper-band { background:var(--paper); color:var(--ink); clip-path:polygon(0 6%,100% 0,100% 94%,0 100%); padding:23px 0; }
.paper-band .wrap { display:flex; align-items:center; justify-content:space-between; gap:14px; font:400 1.45rem 'Patrick Hand'; }
.paper-band b { font-size:2rem; color:#924200; font-weight:400; }
.hangout { display:grid; grid-template-columns:.84fr 1.16fr; gap:65px; align-items:center; padding-top:90px; padding-bottom:95px; }
.hangout-copy h2 { font-size:clamp(3rem,4.4vw,4.3rem); margin:15px 0 22px; }
.hangout-copy > p { color:#d7ccdf; font-size:.9rem; max-width:400px; }
.sticky { position:relative; background:#e6eeae; color:var(--ink); padding:22px 26px; margin:30px 10px 0 8px; max-width:350px; border:2px solid var(--ink); box-shadow:5px 6px 0 #100b18; transform:rotate(-3deg); }
.sticky::before { content:''; position:absolute; top:-13px; left:36%; width:90px; height:25px; background:#fff1d49e; transform:rotate(5deg); }
.sticky .hand { font-size:1.45rem; line-height:1.25; }
.sticky .signed { font-size:.7rem; display:block; margin-top:12px; }
.stream-window { border:3px solid #100b18; border-radius:15px; box-shadow:10px 12px 0 #100b18; background:var(--lavender); color:var(--ink); transform:rotate(2deg); }
.stream-poster { aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:25px; text-align:center; background:repeating-conic-gradient(#b692da 0% 25%,#bfa0df 0% 50%) 50%/48px 48px; }
.stream-poster img { width:64px; height:64px; object-fit:contain; transform:rotate(-8deg); margin-bottom:14px; filter:drop-shadow(4px 4px 0 #3f205855); }
.stream-poster h3 { font-size:2.75rem; }
.stream-poster p { font:400 1.25rem 'Patrick Hand'; margin-top:7px; }
.stream-bottom { background:var(--paper); padding:20px; display:flex; align-items:center; justify-content:space-between; gap:15px; border-top:3px solid var(--ink); border-radius:0 0 10px 10px; }
.stream-bottom p { font-size:.74rem; max-width:185px; }
.stream-bottom .button { flex-shrink:0; min-height:46px; font-size:.8rem; padding:10px 16px; }
.stream-note { font:400 1.25rem 'Patrick Hand'; color:#d5bee7; margin:23px 5px 0; text-align:center; transform:rotate(2deg); }
.elsewhere { background:#1c1726; border-block:1px solid #fff1d414; }
.section-title h2 { margin-top:8px; }
.social-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:start; }
.youtube-card,.instagram-card { color:var(--ink); border:3px solid #0e0916; box-shadow:7px 9px 0 #0e0916; border-radius:15px; transition:transform .2s; }
.youtube-card { background:#ffb19d; transform:rotate(-2deg); }
.youtube-card:hover { transform:rotate(-1deg) translateY(-4px); }
.youtube-card .window-title { background:#ffd3bf; }
.youtube-card .social-content { display:grid; grid-template-columns:100px 1fr; gap:25px; padding:35px 28px; align-items:center; }
.youtube-card img { width:100px; height:100px; object-fit:contain; filter:drop-shadow(3px 4px 0 #211c2b33); }
.social-content h3 { font-size:2.55rem; }
.social-content p { font-size:.86rem; margin:15px 0 22px; }
.social-cta { font-size:.85rem; display:inline-block; border-bottom:2px solid var(--ink); padding-bottom:5px; }
.instagram-card { background:#d0eeac; padding:28px; transform:rotate(2deg); position:relative; margin-top:28px; }
.instagram-card:hover { transform:rotate(1deg) translateY(-4px); }
.instagram-heading { display:flex; gap:20px; align-items:center; margin-bottom:18px; }
.instagram-heading img { width:76px; height:76px; object-fit:contain; }
.instagram-heading .hand { font-size:1.25rem; }
.instagram-heading h3 { font-size:2.45rem; }
.instagram-card p { font-size:.86rem; margin-bottom:22px; }
.social-afterthought { font:400 1.25rem 'Patrick Hand'; color:#dac9e6; margin:30px 0 0; text-align:right; }
.social-afterthought a { display:inline-flex; align-items:center; gap:10px; min-height:44px; text-decoration:underline; text-underline-offset:5px; }
.social-afterthought img { width:28px; height:28px; object-fit:contain; }
.little-letter { max-width:830px; display:grid; grid-template-columns:108px 1fr; gap:27px; align-items:center; margin:0 auto; padding:35px 40px; background:var(--paper); color:var(--ink); border:3px solid #100b18; box-shadow:7px 9px 0 #100b18; transform:rotate(-1deg); }
.little-letter img { width:108px; transform:rotate(-6deg); }
.little-letter .hand { font-size:1.65rem; line-height:1.3; }
.little-letter .signature { font-size:1.3rem; color:#70411c; margin-top:15px; }
.preview-info { font-size:.76rem; color:#c9bfce; margin:45px auto 0; max-width:830px; }
.preview-info summary { display:flex; align-items:center; min-height:44px; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.preview-info p { margin:12px 0; line-height:1.7; }
.footer { padding-bottom:36px; }
.footer-links a { display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; }
@media(min-width:1600px) { .hero { padding-top:85px; padding-bottom:80px; } }
@media(max-width:1100px) { .hero { gap:30px; } .hero h1 { font-size:5.4rem; } .slogan { font-size:1.65rem; } .portrait-caption { font-size:1.1rem; } .hangout { gap:35px; } .stream-poster h3 { font-size:2.25rem; } .youtube-card .social-content { grid-template-columns:65px 1fr; padding:28px 22px; gap:18px; } .social-content h3,.instagram-heading h3 { font-size:2.1rem; } }
@media(max-width:850px) {
 .hero { grid-template-columns:1fr; max-width:600px; gap:30px; padding-top:32px; padding-bottom:38px; }
 .hero-copy { display:contents; }
 .hero-copy .hello { order:0; margin-bottom:-20px; font-size:1.6rem; }
 .hero-copy h1 { order:1; font-size:clamp(3.4rem,10.4vw,5.7rem); }
 .hero-copy h1 span { display:inline; font-size:1em; }
 .hero-art { order:2; margin:0 10px; padding-top:0; }
 .hero-copy .slogan { order:3; margin:0; font-size:1.7rem; }
 .hero-copy .intro { order:4; margin:0; }
 .hero-copy .buttons { order:5; }
 .hero-copy .hand-note { order:6; margin:0; }
 .portrait-canvas .portrait { max-width:400px; width:88%; }
 .portrait-canvas { padding-top:24px; }
 .dock { margin-top:26px; }
 .hangout { grid-template-columns:1fr; gap:45px; max-width:630px; padding-top:55px; padding-bottom:60px; }
 .hangout-copy h2 br { display:none; }
 .hangout-copy > p { max-width:100%; }
 .sticky { max-width:100%; margin-top:26px; }
 .paper-band .wrap { flex-wrap:wrap; justify-content:center; font-size:1.25rem; gap:10px 16px; }
 .social-grid { grid-template-columns:1fr; gap:25px; }
 .instagram-card { margin-top:0; }
 .youtube-card .social-content { grid-template-columns:80px 1fr; padding:26px; }
 .little-letter { grid-template-columns:80px 1fr; padding:25px; gap:20px; }
 .little-letter .hand { font-size:1.45rem; }
 .little-letter img { width:80px; }
}
@media(max-width:600px) {
 .header .brand { font-size:1.65rem; }
 nav { gap:4px; }
 nav a { display:flex; }
 .hero { gap:24px; }
 .hero-copy .hello { margin-bottom:-14px; }
 .hero-art { margin-inline:5px; padding-inline:3px; }
 .window-title { font-size:.62rem; padding:9px 11px; }
 .portrait-window { transform:rotate(2deg); box-shadow:6px 7px 0 #100b18; }
 .portrait-canvas .speech { font-size:1.1rem; padding:7px 13px; top:12px; }
 .portrait-canvas .star { font-size:2.9rem; left:10px; top:48px; }
 .portrait-caption { font-size:1.05rem; padding:11px 80px 11px 10px; }
 .lion-button,.lion-button img { width:75px; height:75px; }
 .lion-answer { bottom:87px; font-size:1.1rem; }
 .dock { gap:9px; margin-inline:0; }
 .dock a { padding:9px 4px 7px; }
 .dock img { width:35px; height:35px; }
 .dock span { font-size:.66rem; }
 .dock-caption { font-size:1.05rem; }
 .slogan br { display:none; }
 .stream-window { transform:rotate(1deg); box-shadow:6px 7px 0 #100b18; }
 .stream-poster { padding:18px 12px; }
 .stream-poster img { width:48px; height:48px; margin-bottom:10px; }
 .stream-poster h3 { font-size:2rem; }
 .stream-poster p { font-size:1.1rem; }
 .stream-bottom { padding:15px; gap:12px; flex-direction:column; align-items:start; }
 .stream-bottom p { max-width:none; }
 .stream-bottom .button { width:100%; }
 .youtube-card .social-content { grid-template-columns:55px 1fr; gap:15px; padding:25px 17px; }
 .youtube-card img { width:55px; height:55px; }
 .social-content h3 { font-size:2.05rem; }
 .instagram-card { padding:22px; }
 .instagram-heading { gap:15px; }
 .instagram-heading img { width:56px; height:56px; }
 .instagram-heading h3 { font-size:2.1rem; }
 .social-afterthought { text-align:left; font-size:1.15rem; }
 .little-letter { grid-template-columns:58px 1fr; padding:24px 17px; gap:13px; }
 .little-letter img { width:58px; }
 .little-letter .hand { font-size:1.3rem; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }

#twitch-frame {aspect-ratio:16/9;position:relative;}
#twitch-frame iframe {width:100%;height:100%;position:absolute;inset:0;border:0;}
.stream-bottom {flex-wrap:wrap;}
.stream-window:has(iframe) {transform:none;}

/* Scale the approved composition, not just the empty outer margins. */
@media (min-width: 1600px) {
  html { font-size:clamp(1rem, .9vw, 2rem); scroll-padding-top:7rem; }
  .wrap { width:min(90%,100rem); max-width:100rem; }
  .header .wrap { min-height:5.375rem; }
  main { padding-top:5.375rem; }
  .brand img { width:3rem; height:3rem; }
  nav { gap:1.875rem; }
  .hero { gap:4rem; padding-top:4rem; padding-bottom:4.5rem; }
  .hero h1 { font-size:6.9rem; }
  .hero-art { padding:.75rem .5rem 0; }
  .portrait-canvas { padding:1.875rem .625rem 0; }
  .portrait-canvas .portrait { width:90%; max-width:34rem; }
  .portrait-canvas .speech { top:1rem; padding:.5625rem 1.25rem; }
  .portrait-caption { min-height:3.5rem; padding:.7rem 6.25rem .7rem 1rem; }
  .lion-button,.lion-button img { width:5.7rem; height:5.7rem; }
  .lion-answer { bottom:6.6rem; width:13rem; }
  .window-title { padding:.7rem 1rem; }
  .window-dots { gap:.375rem; }
  .window-dots i { width:.5625rem; height:.5625rem; }
  .slogan { max-width:33rem; margin:1.6rem 0; }
  .intro { max-width:30rem; margin-bottom:1.7rem; }
  .button { padding:.75rem 1.5rem; min-height:3.25rem; }
  .button img { width:1.75rem; height:1.75rem; }
  .dock { gap:.75rem; margin:2rem 1rem 0; }
  .dock a { padding:.7rem .3rem .6rem; }
  .dock img { width:2.7rem; height:2.7rem; }
  .paper-band { padding:1.45rem 0; }
  .hangout { gap:4rem; padding-top:5.6rem; padding-bottom:6rem; }
  .hangout-copy > p { max-width:30rem; }
  .sticky { max-width:25rem; padding:1.4rem 1.6rem; margin-top:2rem; }
  .stream-poster { padding:1.6rem; }
  .stream-poster img { width:4rem; height:4rem; }
  .stream-bottom { padding:1.25rem; gap:1rem; }
  .stream-bottom p { max-width:14rem; }
  .stream-bottom .button { padding:.625rem 1rem; }
  .section { padding:5rem 0; }
  .social-grid { gap:2rem; }
  .youtube-card .social-content { grid-template-columns:6.25rem 1fr; gap:1.6rem; padding:2.2rem 1.75rem; }
  .youtube-card img { width:6.25rem; height:6.25rem; }
  .instagram-card { padding:1.75rem; }
  .instagram-heading img { width:4.75rem; height:4.75rem; }
  .little-letter { max-width:65rem; grid-template-columns:6.75rem 1fr; padding:2.2rem 2.5rem; gap:1.7rem; }
  .little-letter img { width:6.75rem; }
}
.footer-links { flex-wrap:wrap; }
/* The extra destinations must not crowd tablet navigation. */
@media (min-width:601px) and (max-width:1000px) {
  .header .wrap { min-height:86px; flex-wrap:wrap; }
  .menu { display:block; }
  nav { display:none; width:100%; flex-direction:column; align-items:stretch; padding-bottom:20px; gap:4px; }
  nav.open { display:flex; }
  nav a { min-height:44px; padding:8px; }
  .nav-chat { border-radius:10px; transform:none; text-align:center; }
}
@media (min-width:1001px) and (max-width:1200px) { nav { gap:14px; } }

/* Content hierarchy and shared accessibility refinements. */
.header .shop-link{gap:.45rem;flex-wrap:wrap}.coming-soon{display:inline-block;border:1px solid #b9a0ff80;border-radius:1rem;padding:.15rem .55rem;font:700 .65rem/1.5 'Quicksand',sans-serif;color:#e6d6ff;white-space:nowrap}
.footer-links .shop-link,.footer-links a:has(.coming-soon){gap:.5rem;flex-wrap:wrap}
.latest-section{padding-block:3.2rem 1rem}.compact-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}.compact-heading h2{font-size:clamp(2rem,4vw,3.2rem);margin-top:.4rem}
.text-link,.latest-fallback a,.latest-video a{text-decoration:underline;text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center}
.latest-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem}
.latest-card{padding:1.4rem;background:#352a43;border:1px solid #ac89ca;border-radius:12px;box-shadow:4px 5px 0 #100b18;min-width:0}
.latest-card time{font-size:.8rem;color:#d2b5ed}.latest-card h3{font-size:1.8rem;line-height:1.15;margin:.65rem 0;overflow-wrap:anywhere}.latest-card h3 a{display:inline-flex;align-items:center;min-height:44px}.latest-card h3 a:hover{text-decoration:underline;text-underline-offset:4px}.latest-card p{font:400 .95rem/1.7 system-ui,sans-serif;color:#e0d3e9;overflow-wrap:anywhere}
.latest-video{margin-top:1.25rem;font-size:.85rem;color:#dfccef}.latest-fallback{margin-top:.7rem}.project-section{padding-block:0 4rem}
.project-window{border:2px solid #100b18;border-radius:14px;background:var(--lavender);color:var(--ink);box-shadow:7px 8px 0 #100b18;overflow:hidden}
.project-content{padding:2rem;display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}.project-content h2{font-size:2.7rem;margin:.5rem 0 1rem}.project-content h3{font-size:1.9rem;margin-bottom:1rem}.project-content p,.project-content ul{font:400 1.05rem/1.75 system-ui,sans-serif}.project-content ul{padding-left:1.2rem;margin:0}.project-content li+li{margin-top:.5rem}.project-window :focus-visible{outline-color:#542479}
.policy{max-width:66rem;padding-block:2.5rem 4rem}.policy h1{font-size:clamp(2.5rem,5vw,4rem);margin:.5rem 0 1rem}.policy-intro{color:#d9c5e9;max-width:65ch;margin-bottom:1.5rem}
.policy-sheet{padding:clamp(1.3rem,4vw,3.5rem);background:var(--paper);color:var(--ink);border:2px solid #100b18;border-radius:14px;box-shadow:6px 8px 0 #100b18;font:400 1.05rem/1.8 system-ui,sans-serif;overflow-wrap:anywhere}
.policy-sheet h2{font-size:1.9rem;line-height:1.2;color:#593378;margin:1.8rem 0 .8rem}.policy-sheet h2:first-child{margin-top:0}.policy-sheet p,.policy-sheet ul{margin:0 0 1rem}.policy-sheet ul{padding-left:1.3rem}.policy-sheet a{color:#622d91;text-decoration:underline;text-underline-offset:3px}.policy-sheet :focus-visible{outline:3px solid #622d91;outline-offset:4px}
:where(main,section,article,header,footer,nav,div){min-width:0}.header .brand{flex-shrink:0}
@media(max-width:1000px){.header #nav .shop-link{justify-content:center}.header #nav{max-height:calc(100dvh - 100px);overflow-y:auto}}
@media(max-width:850px){.hero-copy .slogan{order:2}.hero-copy .intro{order:3}.hero-copy .buttons{order:4}.hero-copy .hand-note{order:5}.hero-art{order:6}.latest-grid{grid-template-columns:1fr}.project-content{grid-template-columns:1fr;gap:1.5rem}.latest-section{padding-top:2.5rem}.compact-heading{flex-wrap:wrap}.project-content{padding:1.4rem}}
@media(max-width:400px){.hero h1{font-size:3rem}.hero-copy .buttons{flex-direction:column;align-items:stretch}.brand{max-width:75%}.stream-bottom .button{white-space:normal}}

/* The existing clubhouse, with a clearer first screen and useful inner pages. */
.hero{padding-top:2.5rem;gap:3rem;align-items:start}.hero-copy{padding-top:.4rem}.hero h1{font-size:clamp(3.8rem,5.8vw,6rem)}.hero .hello{margin-bottom:.65rem}.hero-purpose{font:700 1rem/1.7 'Quicksand',sans-serif;max-width:35rem;margin:1.5rem 0 1.25rem;color:#eee2f5}.hero .slogan{font-size:1.6rem;margin:1.7rem 0 .5rem}.hero .hand-note{margin-top:1rem}.hero-art{max-width:34rem;justify-self:end}.header #nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--purple);text-decoration-thickness:3px;text-underline-offset:7px}
.videos-section{padding-block:3rem 1rem}.video-consent{font:400 .9rem/1.7 system-ui,sans-serif;color:#dac9e8;max-width:74ch;margin:0 0 1.3rem}.video-consent a,.feed-note a{text-decoration:underline;text-underline-offset:3px}.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}.video-card{background:#342a42;border:2px solid #100b18;border-radius:13px;box-shadow:5px 6px 0 #100b18;overflow:hidden;min-width:0}.video-card>.window-title{background:#d9c1ee;color:var(--ink);font:700 .65rem/1.5 ui-monospace,monospace}.video-frame{position:relative;aspect-ratio:16/9;background:#170f21;overflow:hidden}.video-thumbnail{width:100%;height:100%;object-fit:cover}.video-frame iframe{border:0;position:absolute;inset:0;width:100%;height:100%}.video-play{position:absolute;bottom:.8rem;left:.8rem;display:flex;gap:.5rem;align-items:center;min-height:44px;background:var(--cream);color:var(--ink);border:2px solid var(--ink);border-radius:9px;padding:.5rem .8rem;box-shadow:3px 3px 0 #100b18;font-size:.85rem}.video-play:hover{background:var(--purple)}.video-copy{padding:1.15rem}.video-copy time{font-size:.75rem;color:#d3b9e8}.video-copy h2,.video-copy h3{font-size:1.65rem;line-height:1.2;margin:.6rem 0;overflow-wrap:anywhere}.video-actions{display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:center}.video-actions a{font-size:.8rem}.video-unload{background:transparent;color:var(--cream);border:1px solid #b9a0ff;border-radius:7px;min-height:44px;padding:.35rem .65rem;font-size:.8rem}.video-status{font:400 .85rem/1.6 system-ui,sans-serif;color:#ded0e9}.video-status:not(:empty){margin-top:.5rem}.feed-note{font-size:.8rem;color:#cbb5dc;margin-top:1rem}.more-videos{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:2rem}.inner-page{padding-block:2.6rem 4rem;max-width:82rem}.page-intro{max-width:55rem;margin-bottom:2rem}.page-intro h1{font-size:clamp(2.6rem,5vw,4.7rem);margin:.6rem 0 1.2rem;line-height:1.1}.page-intro h1 span{color:var(--purple)}.page-intro>p:last-child{max-width:65ch;font:400 1.1rem/1.8 system-ui,sans-serif;color:#e0cfee}.about-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2rem;align-items:start}.prose-panel{padding:clamp(1.3rem,3vw,2.4rem);font:400 1.05rem/1.8 system-ui,sans-serif}.prose-panel h2{font-size:2.1rem;margin:1.5rem 0 .8rem;line-height:1.2;color:#4b2865}.prose-panel h2:first-child{margin-top:0}.prose-panel p{margin:0 0 1rem}.prose-panel a:not(.button){text-decoration:underline;text-underline-offset:4px;color:#542978}.prose-panel ul{padding-left:1.3rem}.prose-panel li+li{margin-top:.5rem}.about-art{padding:1rem}.about-art img{width:100%;max-width:28rem;transform:rotate(3deg);margin:auto}.about-art .hand{font-size:1.5rem;text-align:center;color:#d4b7e8;margin-top:1rem}.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}.contact-note{font-size:.9rem;margin-top:1rem}.prose-panel .contact-note{margin-top:1rem}.contact-footnote{max-width:70ch;margin:2rem auto 0;color:#dfcce9;font:400 1rem/1.8 system-ui,sans-serif}.contact-footnote a{text-decoration:underline}.social-directory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem}.social-directory>a{display:block;background:#342a42;border:1px solid #a984c6;border-radius:12px;padding:1.6rem}.social-directory h2{font-size:2rem;margin-bottom:.7rem}.social-directory p{font:400 1rem/1.7 system-ui,sans-serif;color:#ddcbe9}.social-directory>a:hover{background:#463155}.stream-state{border-left:3px solid #86619f;padding-left:.6rem}.stream-state[data-state=live]{border-color:#29623e;color:#254d32}.stream-state[data-state=offline]{border-color:#745286;color:#503660}.stream-window.is-loaded{transform:none}.stream-window.is-loaded #twitch-frame{min-height:300px}.twitch-mount{position:absolute;inset:0;width:100%;height:100%}.stream-bottom [disabled]{cursor:progress;opacity:.7}.footer .wrap{flex-wrap:wrap;row-gap:1.5rem}.footer-links{gap:.4rem 1rem}.footer-links a{font-size:.85rem}main:focus,section[tabindex="-1"]:focus{outline:none}
@media(min-width:1600px){.hero{padding-top:2.5rem;gap:4rem}.hero h1{font-size:6rem}.hero-art{max-width:38rem}.hero-purpose{max-width:35rem}.hero .slogan{font-size:1.8rem}}
@media(max-width:1000px){.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.header #nav .nav-chat{justify-content:center}.inner-page{padding-top:2rem}}
@media(max-width:850px){.hero{gap:2rem;padding-top:1.8rem}.hero-copy{display:flex;flex-direction:column;padding:0}.hero-copy>*{order:initial}.hero .hello{margin-bottom:.8rem}.hero h1{font-size:clamp(3.2rem,9vw,4.8rem)}.hero-copy .intro{margin:1rem 0 1.2rem}.hero-copy .buttons{order:initial}.hero .slogan{margin:1.5rem 0 .5rem;font-size:1.5rem}.hero-art{order:initial;justify-self:center;max-width:30rem}.hero-copy .hand-note{margin-top:.5rem}.about-layout{grid-template-columns:minmax(0,1fr)}.about-art{max-width:26rem;margin:auto}}
@media(max-width:650px){.video-grid,.contact-grid,.social-directory{grid-template-columns:minmax(0,1fr)}.video-copy h2,.video-copy h3{font-size:1.8rem}.videos-section{padding-top:2rem}.inner-page{padding-top:1.6rem}.page-intro h1{font-size:2.8rem}.footer .brand{max-width:none}.about-layout{gap:1rem}}
@media(prefers-reduced-motion:reduce){.hero-art,.portrait-window,.stream-window{scroll-behavior:auto}}

.video-thumbnail.thumbnail-fallback{object-fit:contain;padding:1rem;background:#342a42}
@media(max-width:850px){.hero-copy .hello,.hero-copy h1,.hero-copy .intro,.hero-copy .buttons,.hero-copy .slogan,.hero-copy .hand-note{order:0}}

.video-frame.is-playing{min-height:200px}

/* Final polish: keep previews honest and media controls easy to use. */
.video-description{font:400 .95rem/1.7 system-ui,sans-serif;color:#e0d3e9;margin:0 0 .8rem;overflow-wrap:anywhere}
.video-card{display:flex;flex-direction:column}.video-card .video-copy{display:flex;flex:1;flex-direction:column}.video-actions{margin-top:auto}.video-frame{flex-shrink:0}
.stream-alternative{margin:1.3rem .3rem 0;font-size:.9rem;text-align:center}.stream-alternative a{padding:.25rem .2rem}
.latest-label{display:block;width:fit-content;margin-bottom:.55rem;font:700 .7rem/1.5 'Quicksand',sans-serif;letter-spacing:.025em;color:#e1c8f5;border:1px solid #87659f;border-radius:1rem;padding:.2rem .65rem}
.latest-card time{display:block}.latest-grid:has(>.latest-card:only-child){grid-template-columns:minmax(0,46rem)}
body .header nav a:not(.nav-chat):hover{text-decoration:underline;text-underline-offset:7px;text-decoration-color:var(--purple)}
.video-play:focus-visible{outline:3px solid #692f91;outline-offset:3px}.video-frame:has(.video-play:focus-visible){outline:3px solid var(--mint);outline-offset:-3px}
@media(max-width:650px){.video-card .video-copy{padding:1.15rem 1.1rem}.hero .hero-purpose{font-size:.96rem;line-height:1.65}.hero .buttons .button{min-height:50px}.stream-alternative{text-align:left}.video-description{font-size:.9rem}}

/* Fill the existing portrait column on large monitors instead of shrink-wrapping it. */
@media(min-width:851px){.hero-art{width:100%}}

/* Orange section accents and content-named clubhouse windows. */
.orange-accent{color:var(--orange)}
.video-card>.window-title{align-items:flex-start;min-height:3.5rem}
.video-card>.window-title h2,.video-card>.window-title h3{font:700 1rem/1.45 'Quicksand',sans-serif;margin:0;overflow-wrap:anywhere}
.video-card>.window-title>span[aria-hidden]{flex-shrink:0}
.latest-card{padding:0;overflow:hidden;border:2px solid #100b18}
.latest-card>.window-title{background:#d9c1ee;color:var(--ink);padding:.85rem 1.15rem;align-items:flex-start}
.latest-card>.window-title h3{font:700 1rem/1.45 'Quicksand',sans-serif;margin:0;overflow-wrap:anywhere}
.latest-card>.window-title h3 a{min-height:44px;display:flex;align-items:center}
.latest-card>.window-title a:focus-visible{outline-color:#622d91}
.latest-card-body{padding:1.35rem}.latest-card-body time{margin-bottom:.65rem}
.project-content .about-name{font-size:2.7rem;margin:.5rem 0 1rem}
.instagram-card{padding:0;overflow:hidden}
.instagram-card>.window-title{background:#e6f4d5;color:var(--ink);align-items:flex-start}
.instagram-card>.window-title>span:first-child{overflow-wrap:anywhere;min-width:0}
.instagram-card>.window-title>span[aria-hidden]{flex-shrink:0}
.instagram-content{padding:28px}
@media(min-width:1600px){.instagram-content{padding:1.75rem}}
@media(max-width:600px){.instagram-content{padding:22px}.latest-card-body{padding:1.15rem}.project-content .about-name{font-size:2.3rem}}