/* SarahWantsaCookie — Cookie Pop v4. Graphic styling, unified cookie icon, responsive navigation. */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:dark;--bg:#0d0b16;--dark:#080610;--paper:#fcf4fd;--pink:#ff5eaa;--hot:#ff3f94;--pink2:#ffbce1;--violet:#a98bff;--lav:#d6c8ff;--mint:#8ff1c3;--muted:#d6c5e4;--line:rgba(255,212,246,.28);--shell:1480px;--stroke:3px solid #080610;font-family:'Nunito','Trebuchet MS',system-ui,sans-serif}
*{box-sizing:border-box}html{min-width:320px}body{margin:0;color:var(--paper);background:var(--bg);font-family:inherit;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid #fff;outline-offset:4px}::selection{background:var(--hot);color:#fff}
.page{isolation:isolate;position:relative;display:flex;flex-direction:column;min-height:100svh;overflow:hidden;background:radial-gradient(circle at 94% 19%,#4b24465f 0,transparent 30%),radial-gradient(circle at 8% 81%,#4a21695b 0,transparent 29%),linear-gradient(135deg,#100a1b,#110d20 45%,#130d20)}
.page::before{content:"";pointer-events:none;position:absolute;z-index:-1;inset:-20%;background:radial-gradient(circle at 20% 25%,rgba(255,93,171,.1),transparent 27%),radial-gradient(circle at 79% 70%,rgba(146,99,255,.13),transparent 22%);animation:ambient 22s ease-in-out infinite alternate}
.page::after{content:"";pointer-events:none;position:absolute;inset:0;opacity:.17;background-image:radial-gradient(#fff 0.55px,transparent .85px);background-size:33px 33px;mask-image:linear-gradient(to bottom,transparent 5%,black 35%,transparent 100%);z-index:-1}
.shell{width:min(calc(100% - 74px),var(--shell));margin-inline:auto}
/* Compact one-row header, black ink lines and energetic hover states */
.site-header{flex:none;position:relative;z-index:5;background:rgba(11,8,22,.84);border-bottom:3px solid #090613;box-shadow:0 3px 0 rgba(255,117,189,.33)}
.header-inner{height:79px;display:flex;align-items:center;gap:clamp(18px,2vw,36px)}
.brand{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;flex-shrink:0;min-width:0}
.brand-text{font-size:clamp(17px,1.52vw,25px);font-weight:800;letter-spacing:-.067em;line-height:1;color:#fff}
.brand-text span{color:#ff7cbd}
.cookie{display:inline-block;flex:none;position:relative;width:37px;height:37px;border:3px solid #090611;border-radius:48% 54% 45% 52%/52% 45% 58% 48%;background:radial-gradient(circle at 30% 33%,#fff0b9 0 9%,transparent 11%),radial-gradient(circle at 29% 61%,#5c2c26 0 11%,transparent 12%),radial-gradient(circle at 69% 26%,#704033 0 10%,transparent 12%),radial-gradient(circle at 77% 74%,#4a211d 0 10%,transparent 11%),radial-gradient(circle at 46% 49%,#6d3222 0 9%,transparent 11%),radial-gradient(circle at 18% 80%,#a66338 0 9%,transparent 11%),linear-gradient(145deg,#ffd89a,#eeb56b 55%,#b8753d);box-shadow:2px 3px 0 #05030c,inset -3px -4px 0 #9d612e,0 0 12px #fbb26348;transform:rotate(-18deg)}
.cookie::after{content:"";position:absolute;width:4px;height:4px;border-radius:60%;background:#9b5e34;left:47%;top:14%;box-shadow:9px 10px 0 #8f4e2c,-10px 3px 0 #9a6639,5px 15px 0 #d88c43}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(4px,.46vw,9px)}
.nav a{position:relative;white-space:nowrap;font-size:clamp(10px,.75vw,12px);font-weight:800;letter-spacing:-.013em;padding:11px clamp(7px,.87vw,14px);border:2px solid transparent;border-radius:9px 12px 8px 11px;transition:transform .22s,background .22s,box-shadow .22s,border-color .22s}
.nav a:hover,.nav a:focus-visible{background:#fe70b71d;border-color:#090611;box-shadow:0 0 0 2px #ff84c5,0 0 18px #f45cae7c,3px 3px 0 #080610;transform:translateY(-2px) rotate(-1deg)}
.nav a[aria-current=page]{background:#f78dca19;color:#fff;border-color:#080610;box-shadow:0 0 0 1px #ff98c6,3px 3px 0 #080610;padding-left:27px}
.nav a[aria-current=page]::before{content:"";position:absolute;left:7px;top:50%;margin-top:-7px;width:14px;height:14px;background:radial-gradient(circle at 65% 28%,#583021 0 2px,transparent 2.5px),radial-gradient(circle at 27% 52%,#65331f 0 2px,transparent 2.5px),radial-gradient(circle at 64% 75%,#673321 0 2px,transparent 2.5px),#efbd77;border:2px solid #080610;border-radius:45% 54% 48% 55%;transform:rotate(-16deg)}
.header-yt{border:var(--stroke);border-radius:10px 13px 9px 12px;padding:10px 13px;background:#faeaf7;color:#0d0a15;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-weight:800;font-size:12px;box-shadow:3px 3px 0 #f95bb0;transition:transform .2s,box-shadow .2s,background .2s}
.header-yt:hover{background:#fff;transform:translateY(-3px) rotate(.6deg);box-shadow:0 0 0 2px #fe74b8,0 0 25px #f45bab8a,3px 5px 0 #080610}
.yt-svg{width:23px;height:17px;flex:none}
/* Shared doodle card language; tiny deliberate unevenness instead of rigid rectangles */
.sketch{position:relative;min-width:0;border:var(--stroke);border-radius:17px 24px 15px 22px;box-shadow:5px 5px 0 #080610,0 0 0 1px rgba(255,255,255,.06);overflow:hidden;isolation:isolate}
.sketch::before{content:"";z-index:-1;pointer-events:none;position:absolute;inset:0;background:radial-gradient(circle at 90% 12%,rgba(255,255,255,.12),transparent 39%)}
.main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center}
.intro{padding:22px 0 19px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex:none}
.eyebrow{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:#ffbce1;font-weight:800;letter-spacing:.14em;font-size:10px;text-transform:uppercase}
.eyebrow::before{content:"";height:3px;width:21px;background:#ff78bc;border-radius:20px;transform:rotate(-7deg)}
.intro-title{font-weight:800;font-size:clamp(28px,3.15vw,54px);letter-spacing:-.066em;line-height:1.02;margin:0;color:#ffe5f4;}
.intro-title strong{color:#ff76b8;font-weight:800;position:relative;display:inline-block;background:linear-gradient(110deg,#ff75b6 10%,#ffd3e9 38%,#ff75b6 55%,#ff75b6 100%);background-size:260% 100%;background-position:150% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:title-glint 13s ease-in-out infinite}
.intro-note{font-size:12px;line-height:1.4;color:#e5cde9;max-width:240px;margin:0;border-left:3px solid #ff65af;padding:5px 0 5px 13px}
.intro-note strong{display:block;color:#fff;font-weight:800}
/* Video always maintains the true 16:9 ratio */
.dashboard{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,1fr);gap:clamp(12px,1.12vw,21px);align-items:stretch;min-height:0;margin-bottom:20px}
.video-card{display:flex;flex-direction:column;background:#171127}
.video-head{height:38px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 15px;background:linear-gradient(100deg,#3b193e,#24172e);border-bottom:3px solid #080610}
.video-head strong{font-size:12px;letter-spacing:.035em;font-weight:800}.video-head span{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:#dbb4da}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff79b9;box-shadow:0 0 0 3px #f25eae38,0 0 13px #ff57b5;vertical-align:middle;margin-right:6px;animation:heartbeat 3.8s infinite}
.player-wrap{background:#06050a;width:100%;aspect-ratio:16/9;position:relative;flex:0 0 auto;overflow:hidden}
.player-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video-foot{padding:13px 15px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex:1;background:linear-gradient(115deg,#251633,#1b142a)}
.video-info{min-width:0}.small-label{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#f6a8d6;margin:0 0 4px}
.video-title{font-size:clamp(12px,1.13vw,16px);font-weight:800;line-height:1.18;margin:0;max-width:330px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.actions{display:flex;align-items:center;gap:6px;flex:none}.chip{cursor:pointer;border:2px solid #080610;background:#f5dcef;color:#120917;font-size:10px;font-weight:800;padding:8px 9px;border-radius:7px 10px 6px 9px;box-shadow:2px 2px 0 #080610;transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap}
.chip:hover{background:#fff;box-shadow:0 0 0 2px #f875b7,0 0 12px #ff5ead,3px 3px 0 #080610;transform:translateY(-2px) rotate(-1deg)}.chip.pink{background:#ff76b9}
/* Four supporting cards alongside the featured video */
.side-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(12px,1.12vw,21px);min-height:0}
.social-card,.feature-tile{display:flex;flex-direction:column;min-height:0;padding:14px 15px;transition:box-shadow .25s,filter .25s,transform .25s}
.social-card:hover,.feature-tile:hover{box-shadow:5px 5px 0 #080610,0 0 0 2px #ff95cf,0 0 28px #ec61b177}
.social-card{background:linear-gradient(140deg,#3d2147,#22162f 80%)}.social-card.youtube-post{transform:rotate(-.5deg)}.social-card.x-post{transform:rotate(.45deg);background:linear-gradient(140deg,#241f42,#171a30 82%)}
.social-heading{display:flex;justify-content:space-between;align-items:center;gap:6px;flex:none;margin-bottom:9px;font-size:12px;font-weight:800;color:#fff}.social-heading .corner{font-size:11px;letter-spacing:.03em;color:#f8b5d5}
.social-title{font-size:clamp(17px,1.55vw,23px);letter-spacing:-.05em;line-height:1.06;margin:0 0 8px;color:#fff;font-weight:800}
.social-copy{font-size:11px;line-height:1.42;color:#edd3f1;margin:0 0 8px;max-width:215px}.social-cta{font-size:10px;font-weight:800;color:#100918;background:#ffa5d2;padding:7px 9px;border:2px solid #080610;border-radius:7px 9px 7px 10px;box-shadow:2px 2px 0 #080610;display:inline-flex;width:max-content;max-width:100%;transition:transform .2s,background .2s,box-shadow .2s;margin-top:auto;align-items:center;gap:5px}
.social-cta:hover{transform:translateY(-2px);background:#ffdef1;box-shadow:0 0 0 2px #fa83c0,0 0 17px #fa68b9,3px 4px 0 #080610}
.post-art{position:absolute;right:-8px;bottom:18px;width:110px;height:110px;opacity:.19;pointer-events:none;background:repeating-radial-gradient(circle at center,transparent 0 12px,#ffbce4 12px 14px,transparent 15px 25px);transform:rotate(-16deg)}
.x-embed{position:relative;min-height:0;flex:1 1 auto;overflow:hidden;border-radius:6px;background:#111324;border:1px solid #c89ef846;max-width:100%}
.x-embed a.twitter-timeline{display:block;position:absolute;inset:0;padding:10px;font-size:11px;line-height:1.4;color:#f4d9ef}.x-embed iframe{border:0!important;max-width:100%!important}
.x-post .social-cta{margin-top:7px;background:#d8c9ff}.x-post .social-cta:hover{background:#f0eaff}
.feature-tile{color:#fff;cursor:pointer;justify-content:space-between;isolation:isolate}
.feature-tile.artist{transform:rotate(.7deg);background:linear-gradient(145deg,#ff83bf,#d7489c 78%,#ba2e7d);color:#1b081b}
.feature-tile.tools{transform:rotate(-.6deg);background:linear-gradient(145deg,#bdaaff,#8971ed 72%,#6d57c4);color:#1d103d}
.feature-tile:hover,.social-card.youtube-post:hover,.social-card.x-post:hover{transform:translateY(-3px) rotate(0deg)}
.tile-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.11em;color:#160913;opacity:.79;display:flex;justify-content:space-between;position:relative;z-index:1}
.tile-body{position:relative;z-index:1}.tile-body h2{font-size:clamp(24px,2.25vw,36px);line-height:.96;margin:0 0 9px;letter-spacing:-.078em;font-weight:800;}
.tile-body p{font-size:11px;font-weight:700;line-height:1.28;margin:0;max-width:210px}.tile-link{position:relative;z-index:1;font-size:11px;font-weight:800;display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:2px solid #08061080;padding-top:7px}
.ring-art{position:absolute;right:-38px;top:-56px;width:174px;height:174px;border:4px solid #1a09204d;border-radius:47% 54% 49% 51%;pointer-events:none}
.ring-art::before,.ring-art::after{content:"";position:absolute;inset:21px;border:3px solid #1b08254d;border-radius:50%}.ring-art::after{inset:43px}
.artist:hover .ring-art::before{animation:ring-spread 1.35s ease-out infinite}.artist:hover .ring-art::after{animation:ring-spread 1.35s .6s ease-out infinite}
.grid-art{position:absolute;right:-44px;top:-31px;width:193px;height:168px;opacity:.30;transform:rotate(-18deg);background-image:linear-gradient(to right,#231340 3px,transparent 3px),linear-gradient(to bottom,#231340 3px,transparent 3px);background-size:25px 25px;mask-image:radial-gradient(ellipse,black 21%,transparent 75%)}
.tools:hover .grid-art{animation:grid-grow 4.2s ease-in-out infinite alternate}
.spark{position:absolute;pointer-events:none;width:12px;height:12px;right:22px;top:33px;transform:rotate(45deg);border:2px solid #080610;background:#fff8cf;box-shadow:0 0 14px #ffe9c4;animation:spark-glow 6s ease-in-out infinite}
/* Thin footer, still part of the same desktop view */
.site-footer{flex:none;position:relative;z-index:2;background:rgba(12,9,21,.75);border-top:2px solid #100819}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;color:#c4a9d1;font-size:10px;font-weight:600}.footer-inner strong{color:#fff}.status{color:#f9a9d6;font-weight:800;letter-spacing:.06em}.status::before{content:"";width:6px;height:6px;background:#ff82bd;display:inline-block;border-radius:50%;margin-right:7px;box-shadow:0 0 8px #ff68b5}
/* Interior pages */
.sub-main{flex:1;width:min(calc(100% - 74px),var(--shell));margin-inline:auto;padding:45px 0 34px;display:flex;flex-direction:column;justify-content:center}
.backlink{width:max-content;font-size:12px;font-weight:800;color:#ffc3e4;margin:0 0 23px;transition:transform .2s}.backlink:hover{transform:translateX(-3px)}
.stage{background:linear-gradient(130deg,#371b4c,#251537 48%,#1b162c);padding:clamp(30px,5vw,75px);min-height:410px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.stage.artist-stage{background:linear-gradient(135deg,#9d3779,#542a72 65%,#2b224e)}.stage.contact-stage{background:linear-gradient(135deg,#3e264d,#231930 78%)}
.page-kicker{font-size:11px;font-weight:800;letter-spacing:.17em;color:#ffc8e2;margin:0 0 14px;text-transform:uppercase}
.page-heading{font-size:clamp(52px,7.5vw,110px);font-weight:800;letter-spacing:-.085em;line-height:.93;margin:0 0 18px;color:#fff0f9;}.page-heading em{font-style:normal;color:#ff7fbe}.page-desc{max-width:530px;font-size:clamp(15px,1.1vw,18px);line-height:1.55;color:#ffe1f3;margin:0 0 22px}
.big-link,.copy-btn{border:3px solid #090612;border-radius:10px 14px 9px 12px;color:#1c0b1e;background:#ff8cc7;padding:12px 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:4px 4px 0 #080610;font-size:12px;font-weight:800;cursor:pointer;transition:transform .2s,box-shadow .2s}.big-link:hover,.copy-btn:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 0 0 2px #ffb1d9,0 0 20px #ff6cac,4px 6px 0 #080610}
.resource-header{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:25px}.resource-header .page-heading{font-size:clamp(44px,6.1vw,86px);margin:0}.resource-header .page-desc{font-size:14px;margin:0;max-width:310px}
.resources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.resource-card{display:flex;flex-direction:column;min-height:184px;background:linear-gradient(135deg,#3e244e,#221a36);padding:22px;transition:transform .22s,box-shadow .22s}
.resource-card:nth-child(2n){transform:rotate(.5deg);background:linear-gradient(135deg,#402c63,#241a3c)}.resource-card:nth-child(3n){transform:rotate(-.6deg);background:linear-gradient(135deg,#65345c,#281931)}.resource-card:hover{transform:translateY(-4px) rotate(0deg);box-shadow:5px 5px 0 #080610,0 0 0 2px #fd8acc,0 0 23px #ff82c688}
.resource-top{display:flex;justify-content:space-between;gap:8px;color:#ffc5e6;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.resource-card h2{font-size:clamp(21px,1.9vw,28px);letter-spacing:-.056em;line-height:1;margin:auto 0 8px;}.resource-card p{margin:0;color:#e6cbe6;font-size:12px;line-height:1.38}.resource-note{font-size:11px;color:#ceb2d2;margin:18px 0 0}
.email-link{color:#ffc6e7;font-weight:800;font-size:clamp(18px,2.9vw,33px);overflow-wrap:anywhere;border-bottom:3px solid #f98cc8;padding-bottom:8px;max-width:100%;margin-bottom:20px}.contact-actions{display:flex;gap:14px;flex-wrap:wrap}
.toast{position:fixed;z-index:30;left:50%;bottom:18px;transform:translateX(-50%);padding:11px 16px;background:#ffb1d9;color:#180819;border:3px solid #080610;border-radius:10px;box-shadow:4px 4px 0 #080610;font-size:12px;font-weight:800}.toast[hidden]{display:none}
@keyframes ambient{0%{transform:translate(-2%,-2%) scale(1)}100%{transform:translate(3%,2%) scale(1.04)}}
@keyframes title-glint{0%,35%,100%{background-position:150% 0}44%,52%{background-position:-25% 0}}
@keyframes heartbeat{0%,90%,100%{box-shadow:0 0 0 3px #f25eae38,0 0 13px #ff57b5}94%{box-shadow:0 0 0 6px #f25eae55,0 0 22px #ff57b5}}
@keyframes ring-spread{0%{transform:scale(.58);opacity:.85}100%{transform:scale(1.62);opacity:0}}
@keyframes grid-grow{0%{background-size:25px 25px;opacity:.26}100%{background-size:41px 41px;opacity:.54}}
@keyframes spark-glow{0%,80%,100%{opacity:.35;filter:brightness(1)}86%{opacity:1;filter:brightness(1.65)}}
/* Fit desktop homepage without suppressing content on shorter displays */
@media(min-width:1061px) and (min-height:700px){.home .dashboard{flex:0 0 auto}}
@media(min-width:1061px) and (max-height:850px){.header-inner{height:65px}.intro{padding:13px 0 12px}.intro-title{font-size:clamp(28px,2.68vw,40px)}.dashboard{margin-bottom:14px}.video-head{height:31px}.video-foot{padding:9px 12px}.social-card,.feature-tile{padding:11px 12px}.social-title{font-size:clamp(16px,1.35vw,20px)}.tile-body h2{font-size:clamp(23px,2vw,30px)}.social-copy,.tile-body p{font-size:10px}.footer-inner{padding:7px 0}.x-embed{min-height:75px}}
@media(max-width:1330px){.shell,.sub-main{width:calc(100% - 50px)}.brand-text{font-size:19px}.header-inner{gap:17px}.nav a{font-size:11px;padding:9px 8px}.nav a[aria-current=page]{padding-left:27px}.header-yt{padding:9px}.intro-note{max-width:195px}.social-heading{font-size:11px}.video-foot{flex-wrap:wrap}.actions{flex-wrap:wrap}}
@media(max-width:1060px){.header-inner{height:auto;min-height:74px;flex-wrap:wrap;padding:12px 0;gap:13px}.brand-text{font-size:21px}.nav{order:3;width:100%;justify-content:center;margin-left:0}.nav a{font-size:12px}.header-yt{margin-left:auto}.dashboard{grid-template-columns:1fr}.side-grid{min-height:430px}.player-wrap{aspect-ratio:16/9}.video-foot{flex-wrap:nowrap}.intro-title{font-size:clamp(30px,4.5vw,49px)}.intro-note{max-width:220px}.resource-header{align-items:start}}
@media(max-width:700px){.shell,.sub-main{width:calc(100% - 28px)}.site-header .header-inner{gap:11px}.cookie{width:30px;height:30px}.brand-text{font-size:clamp(17px,4.4vw,22px)}.header-yt{font-size:0;padding:8px 9px}.yt-svg{width:25px;height:18px}.nav{width:100%;justify-content:space-between;gap:0}.nav a{padding:8px 7px;font-size:clamp(9px,2.3vw,12px)}.nav a[aria-current=page]{padding-left:24px}.intro{padding:24px 0 19px;flex-direction:column;align-items:start}.intro-note{max-width:none}.intro-title{font-size:clamp(30px,7.5vw,50px)}.dashboard{gap:16px}.video-head span{display:none}.video-foot{flex-direction:column;align-items:start;gap:11px}.video-title{font-size:15px;max-width:none}.actions{flex-wrap:wrap}.side-grid{grid-template-columns:1fr 1fr;grid-template-rows:none;min-height:0;gap:13px}.social-card,.feature-tile{min-height:218px;padding:12px}.social-title{font-size:clamp(18px,4vw,25px)}.social-copy{font-size:11px}.tile-body h2{font-size:clamp(23px,5vw,30px)}.tile-body p{font-size:10px}.tile-label{font-size:9px}.x-embed{height:105px;min-height:105px;flex:none}.social-heading{font-size:10px}.social-cta{font-size:9px}.footer-inner{flex-wrap:wrap;justify-content:center;text-align:center;font-size:9px}.sub-main{padding:29px 0}.stage{min-height:390px;padding:26px}.page-heading{font-size:clamp(52px,11vw,80px)}.resources{grid-template-columns:1fr 1fr;gap:12px}.resource-card{min-height:164px;padding:15px}.resource-header{display:block}.resource-header .page-desc{margin-top:15px}.resource-card h2{font-size:20px}}
@media(max-width:440px){.side-grid{grid-template-columns:1fr}.social-card,.feature-tile{min-height:177px}.x-embed{height:105px}.social-copy{max-width:270px}.resources{grid-template-columns:1fr}.resource-card{min-height:145px}.intro-title{font-size:32px}.nav a{font-size:9px;padding:7px 5px}.nav a[aria-current=page]{padding-left:22px}.nav a[aria-current=page]::before{left:5px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}


/* --- v4 refinements: no text stroke, friendly rounded type, cookie shared with favicon --- */
.brand-text{font-family:'Fredoka','Nunito','Trebuchet MS',sans-serif;font-size:clamp(19px,1.65vw,26px);font-weight:600;letter-spacing:-.047em;filter:none}
.cookie{width:40px;height:40px;display:block;border:0;border-radius:0;background:none;box-shadow:none;transform:none;image-rendering:pixelated;image-rendering:crisp-edges;object-fit:contain;transition:transform .22s ease,filter .22s ease}
.cookie::after{content:none}
.brand:hover .cookie{transform:rotate(-12deg) scale(1.08);filter:drop-shadow(0 0 8px rgba(255,157,195,.48))}
.intro-title,.page-heading,.tile-body h2,.resource-card h2{font-family:'Fredoka','Nunito','Trebuchet MS',sans-serif;letter-spacing:-.026em;font-weight:600}
.intro-title{line-height:1.09;color:#fff0fa}
.intro-title strong{font-weight:600}
.page-heading{line-height:.98}
.tile-body h2{letter-spacing:-.03em;line-height:1.02}
.video-title,.resource-card h2{letter-spacing:-.02em}
/* All links reserve the small favicon-sized bitten-cookie slot; active/hover only changes opacity. */
.nav{gap:clamp(7px,.8vw,15px);flex:0 0 auto}
.nav a,.nav a[aria-current=page]{display:inline-flex;align-items:center;justify-content:center;min-height:41px;padding:9px clamp(9px,.75vw,13px) 9px 30px;font-size:clamp(11px,.79vw,13px);font-weight:800;letter-spacing:0;flex:0 0 auto}
.nav a::before{content:"";position:absolute;left:8px;top:50%;width:16px;height:16px;margin:0;background:url('cookie-pixel.png') center/contain no-repeat;border:0;border-radius:0;opacity:0;transform:translateY(-50%);transition:opacity .22s ease}
.nav a:is([aria-current=page],:hover,:focus-visible)::before{opacity:1}
.nav a[aria-current=page]{box-shadow:0 0 0 1px #ff98c6,3px 3px 0 #080610}
.header-inner{gap:clamp(11px,1.6vw,28px)}
.header-yt{margin-left:auto}
/* After removing unavailable social embeds, give the two feature cards proper space. */
.side-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr) auto}
.feature-tile{padding:clamp(16px,1.45vw,24px)}
.tile-body h2{font-size:clamp(27px,2.45vw,39px)}
.tile-body p{font-size:clamp(11px,.88vw,13px);line-height:1.4;max-width:240px}
.tile-label{font-size:clamp(9px,.71vw,11px)}
.tile-link{font-size:clamp(10px,.75vw,12px)}
.follow-strip{grid-column:1/-1;min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 16px;background:linear-gradient(110deg,#312140,#231a38 65%,#31213d)}
.follow-caption{font-size:10px;letter-spacing:.14em;font-weight:900;color:#f8c9e5;display:inline-flex;align-items:center;gap:9px}
.follow-dot{width:8px;height:8px;background:#ff79b9;box-shadow:0 0 13px #ff57b5;border-radius:50%;animation:heartbeat 3.8s infinite}
.x-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#eadbff;color:#170e2e;border:3px solid #080610;border-radius:10px 13px 9px 12px;box-shadow:3px 3px 0 #080610;padding:8px 15px;font-size:12px;font-weight:900;transition:transform .25s,box-shadow .25s,background .25s;white-space:nowrap}
.x-link:hover,.x-link:focus-visible{background:#fff3ff;transform:translateY(-3px) rotate(-.7deg);box-shadow:0 0 0 2px #ff8dca,0 0 24px rgba(249,100,190,.65),4px 5px 0 #080610}
.x-symbol{font-weight:900;font-size:17px;line-height:1}
@media (max-width:1330px){
 .nav{gap:5px}
 .nav a,.nav a[aria-current=page]{padding:8px 7px 8px 26px;font-size:11px;min-height:39px}
 .nav a::before{left:6px;width:14px;height:14px}
 .header-inner{gap:12px}
 .brand-text{font-size:21px}
 .feature-tile{padding:15px}
}
@media (max-width:1060px){
 .header-inner{row-gap:12px}
 .header-yt{margin-left:auto}
 .nav{flex:1 0 100%;gap:8px;justify-content:center}
 .nav a,.nav a[aria-current=page]{padding:9px 11px 9px 30px;font-size:12px}
 .nav a::before{left:8px;width:16px;height:16px}
 .side-grid{min-height:0;grid-template-rows:auto auto}
 .feature-tile{min-height:245px}
}
@media (max-width:700px){
 .cookie{width:32px;height:32px}
 .nav{flex-wrap:nowrap;width:100%;gap:2px;justify-content:space-between}
 .nav a,.nav a[aria-current=page]{padding:8px 5px 8px 22px;font-size:clamp(9px,2.15vw,11px);min-height:34px}
 .nav a::before{left:4px;width:13px;height:13px}
 .feature-tile{min-height:215px;padding:13px}
 .tile-body h2{font-size:clamp(23px,5vw,30px)}
 .tile-body p{font-size:11px}
 .follow-strip{min-height:56px;padding:8px 12px}
}
@media (max-width:440px){
 .nav{gap:0}
 .nav a,.nav a[aria-current=page]{font-size:clamp(8px,2.4vw,10px);padding:7px 3px 7px 17px}
 .nav a::before{left:2px;width:12px;height:12px}
 .side-grid{grid-template-columns:1fr;grid-template-rows:auto}
 .feature-tile{min-height:172px}
 .follow-strip{grid-column:1}
 .follow-caption{font-size:9px;letter-spacing:.08em}
 .x-link{font-size:11px;padding:8px 9px}
}


/* Interactive brand: pink ink aura on hover / keyboard focus, without shifting the header. */
.brand{position:relative;isolation:isolate;border-radius:12px;transition:transform .23s ease}
.brand::before{content:"";pointer-events:none;position:absolute;z-index:-1;inset:-5px -9px;border:2px solid transparent;border-radius:13px 17px 12px 16px;background:linear-gradient(120deg,rgba(255,107,189,.15),rgba(175,108,255,.12));opacity:0;transform:scale(.97) rotate(-.6deg);transition:opacity .24s ease,box-shadow .24s ease,transform .24s ease}
.brand-text{transition:filter .24s ease,color .24s ease}
.brand:hover,.brand:focus-visible{transform:translateY(-2px)}
.brand:hover::before,.brand:focus-visible::before{opacity:1;transform:scale(1) rotate(-.6deg);border-color:#080610;box-shadow:0 0 0 2px #ff8dca,0 0 22px rgba(255,83,167,.7),3px 4px 0 #080610}
.brand:hover .brand-text,.brand:focus-visible .brand-text{filter:drop-shadow(0 0 5px rgba(255,136,206,.8))}
.brand:hover .cookie,.brand:focus-visible .cookie{transform:rotate(-12deg) scale(1.08);filter:drop-shadow(0 0 8px rgba(255,157,195,.62))}

/* Cookie Pop v5: identical bitten-cookie graphic for header, favicon, and selected nav ONLY. */
.nav a::before{
 background-image:url('cookie-pixel.png?v=5'); opacity:0;
 transition:none; /* marker belongs to current page, never a hover animation */
}
.nav a:hover::before,.nav a:focus-visible::before{opacity:0}
.nav a[aria-current="page"]::before,
.nav a[aria-current="page"]:hover::before,
.nav a[aria-current="page"]:focus-visible::before{opacity:1}
/* Hover, keyboard-focus and selected page use the same black ink + substantial pink halo. */
.nav a[aria-current="page"],
.nav a[aria-current="page"]:hover,
.nav a[aria-current="page"]:focus-visible{
 border:2px solid #080610;
 box-shadow:0 0 0 2px #ff84c5,0 0 18px #f45cae7c,3px 3px 0 #080610;
}
/* Text maintains its fixed allocated cookie slot, so header remains aligned. */
.nav a[aria-current="page"]{padding-left:30px}
.header-inner{justify-content:space-between}
.nav{margin-left:auto}
/* Avoid tiny arrows and square decoration on feature cards. */
.feature-tile .spark{display:none}
.tile-label,.tile-link{justify-content:flex-start}
/* Unified social section sits below feature cards. */
.social-links{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;justify-content:flex-end}
.social-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  background:#eadbff;color:#170e2e;border:3px solid #080610;border-radius:10px 13px 9px 12px;
  box-shadow:3px 3px 0 #080610;padding:8px 13px;font-size:12px;font-weight:900;
  transition:transform .25s,box-shadow .25s,background .25s}
.social-btn:hover,.social-btn:focus-visible{background:#fff3ff;transform:translateY(-3px) rotate(-.7deg);
 box-shadow:0 0 0 2px #ff8dca,0 0 24px rgba(249,100,190,.65),4px 5px 0 #080610}
.youtube-link{background:#ffe7f1}.youtube-link:hover{background:#fff4f8}.youtube-link .yt-svg{width:23px;height:17px}
/* v5 contact form: server-backed PHP, responsive layout, no published inbox address. */
.contact-main{width:min(calc(100% - 74px),1000px);margin-inline:auto;flex:1;display:flex;flex-direction:column;
 justify-content:center;padding:31px 0 32px}
.contact-stage{padding:clamp(25px,3.7vw,46px);min-height:auto}
.contact-heading{font-size:clamp(43px,5vw,67px);margin:0 0 8px}
.contact-lead{font-size:14px;margin:0 0 20px;line-height:1.48;color:#e9d6f3}
.contact-form{width:100%;display:grid;gap:13px}
.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-group{min-width:0;display:flex;flex-direction:column;gap:6px}
.form-group label{font-size:12px;font-weight:900;color:#ffe6f7}
.form-group input,.form-group select,.form-group textarea{width:100%;min-width:0;
 border:2px solid #080610;border-radius:9px 12px 10px 11px;background:#fdf2ff;
 color:#211029;padding:10px 13px;font:600 14px 'Nunito',system-ui,sans-serif;
 box-shadow:2px 2px 0 #090610;transition:box-shadow .2s,border-color .2s;}
.form-group textarea{resize:vertical;min-height:115px;line-height:1.5}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;
 border-color:#ff67b3;box-shadow:0 0 0 2px #080610,0 0 15px #f95bb077}
.form-group input::placeholder,.form-group textarea::placeholder{color:#6b566f}
.form-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.form-privacy{font-size:11px;color:#e2c5e8;max-width:470px;line-height:1.5}
.form-submit{border:3px solid #080610;box-shadow:3px 3px 0 #080610;color:#170c22;
 background:#ff85c1;border-radius:9px 14px 8px 11px;font-weight:900;font-size:13px;
 padding:12px 18px;cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s}
.form-submit:hover,.form-submit:focus-visible{background:#ffc0e1;transform:translateY(-2px) rotate(-.5deg);
 box-shadow:0 0 0 2px #ffa5d7,0 0 19px #ff6cac,3px 4px 0 #080610}
.form-status{padding:12px 15px;border:2px solid #ffc3e8;background:#442348;
 border-radius:10px;margin:0 0 16px;color:#fff3fc;font-size:13px;line-height:1.45;font-weight:700}
.form-status.success{border-color:#a4edca;background:#193d35}
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
@media(max-width:1330px){.nav a[aria-current="page"]{padding-left:26px}}
@media(max-width:1060px){.nav a[aria-current="page"]{padding-left:30px}}
@media(max-width:700px){.nav a[aria-current="page"]{padding-left:22px}
 .contact-main{width:calc(100% - 28px);padding:25px 0}}
@media(max-width:440px){.nav a[aria-current="page"]{padding-left:17px}
 .social-links{gap:6px}.social-btn{font-size:10px;padding:7px 8px;gap:6px}
 .social-btn .yt-svg{width:19px;height:14px}.follow-caption{font-size:10px}
 .contact-row{grid-template-columns:1fr}.contact-stage{padding:18px}.contact-form{gap:12px}}

/* v6: replace all legacy cookie pseudo-elements with an explicit, single shared image. */
.nav a::before,.nav a[aria-current="page"]::before,.nav a:hover::before,
.nav a:focus-visible::before,.nav a[aria-current="page"]:hover::before{content:none!important;background:none!important;opacity:0!important}
.nav a,.nav a[aria-current="page"]{position:relative;padding-left:30px;}
.nav-cookie{position:absolute;left:8px;top:50%;width:16px;height:16px;
  transform:translateY(-50%);object-fit:contain;image-rendering:pixelated;pointer-events:none}
.nav a[aria-current="page"],.nav a[aria-current="page"]:hover,.nav a[aria-current="page"]:focus-visible{
  border-color:#080610;box-shadow:0 0 0 2px #ff84c5,0 0 18px #f45cae7c,3px 3px 0 #080610}
/* Keep exactly the same reserved marker width on the active and all inactive links. */
@media(max-width:1330px){.nav a,.nav a[aria-current="page"]{padding-left:26px}.nav-cookie{left:6px;width:14px;height:14px}}
@media(max-width:1060px){.nav a,.nav a[aria-current="page"]{padding-left:30px}.nav-cookie{left:8px;width:16px;height:16px}}
@media(max-width:700px){.nav a,.nav a[aria-current="page"]{padding-left:22px}.nav-cookie{left:4px;width:13px;height:13px}}
@media(max-width:440px){.nav a,.nav a[aria-current="page"]{padding-left:17px}.nav-cookie{left:2px;width:12px;height:12px}}

/* Cookie Pop v7 — compact, content-first single-screen desktop layout.
   Deliberately avoid fixed viewport clipping: everything remains accessible on
   small mobile/touch screens and on unusually short browser windows. */
@media (min-width:901px) {
  /* Tighten spacing shared by every secondary page, not the navigation or art. */
  .sub-main { padding-top:16px; padding-bottom:16px; }
  .sub-main .backlink, .contact-main .backlink { margin-bottom:12px; }
  .page-kicker { margin-bottom:8px; }
  .page-desc { margin-bottom:14px; }

  /* All five NoPixel links in one row; their full names remain visible. */
  .resources { grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(10px,1vw,16px); }
  .resource-header { align-items:center; gap:20px; margin-bottom:18px; }
  .resource-header .page-heading { font-size:clamp(48px,4.2vw,67px); line-height:1.01; }
  .resource-header .page-desc { max-width:340px; font-size:13px; line-height:1.42; margin:0; }
  .resource-card { min-height:157px; padding:clamp(12px,1.13vw,17px); }
  .resource-top { font-size:9px; letter-spacing:.07em; }
  .resource-card h2 { font-size:clamp(18px,1.48vw,23px); line-height:1.12; margin:auto 0 7px; }
  .resource-card p { font-size:11px; line-height:1.36; }
  .resource-note { margin-top:15px; font-size:10px; }

  /* Artist placeholder remains roomy, while never forcing a tall page. */
  .stage.artist-stage { min-height:clamp(285px,42vh,390px); padding:clamp(25px,3.4vw,51px); }
  .artist-stage .page-heading { font-size:clamp(54px,6.2vw,90px); }

  /* Contact: use width for the two-column form, not excess vertical padding. */
  .contact-main { padding-top:15px; padding-bottom:15px; }
  .contact-stage { padding:clamp(19px,2vw,29px); }
  .contact-heading { font-size:clamp(42px,4vw,56px); margin-bottom:3px; }
  .contact-lead { margin-bottom:10px; font-size:13px; line-height:1.35; }
  .contact-form { gap:9px; }
  .contact-row { gap:12px; }
  .form-group { gap:4px; }
  .form-group label { font-size:11px; }
  .form-group input,.form-group select,.form-group textarea { padding:7px 11px; font-size:13px; }
  .form-group textarea { min-height:75px; height:75px; resize:vertical; line-height:1.35; }
  .form-privacy { font-size:10px; line-height:1.35; }
  .form-submit { padding:9px 15px; }
  .form-status { padding:8px 11px; margin-bottom:9px; }
}

/* A little extra room on 720px desktop displays, with safe readable labels. */
@media (min-width:901px) and (max-height:760px) {
  .sub-main { padding-top:11px; padding-bottom:11px; }
  .contact-main { padding-top:10px; padding-bottom:10px; }
  .contact-stage { padding:18px 24px; }
  .contact-main .backlink, .sub-main .backlink { margin-bottom:9px; }
  .resource-header { margin-bottom:14px; }
  .resource-note { margin-top:11px; }
  .stage.artist-stage { min-height:275px; }
  .intro { padding-top:10px; padding-bottom:10px; }
  .dashboard { margin-bottom:10px; }
}

@media (min-width:901px) and (max-width:1060px) {
  /* Use an efficient two-column desktop layout until the screen is truly narrow. */
  .home .dashboard { grid-template-columns:minmax(0,1.13fr) minmax(0,1fr); gap:11px; }
  .home .side-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:minmax(0,1fr) auto; min-height:0; gap:10px; }
  .home .feature-tile { min-height:0; padding:12px; }
  .home .tile-body h2 { font-size:24px; }
  .home .tile-body p { font-size:10px; }
  .home .follow-strip { padding:6px 10px; min-height:52px; }
  .home .follow-caption { font-size:9px; }
  .home .social-btn { padding:6px 9px; font-size:10px; }
  .home .intro { padding:13px 0 12px; }
  .home .intro-title { font-size:clamp(28px,3.5vw,40px); }
  .home .intro-note { font-size:11px; }
  .home .video-foot { padding:9px 10px; flex-wrap:wrap; }
  .home .actions { gap:4px; }
  .home .chip { font-size:9px; padding:6px 6px; }
  .home .video-head { height:31px; }
  .home .dashboard { margin-bottom:12px; }
  .resources { gap:9px; }
  .resource-card { padding:11px; min-height:148px; }
  .resource-card h2 { font-size:18px; }
  .resource-card p { font-size:10px; }
}

/* On phones and narrow tablets, preserve accessible controls rather than hide overflow. */
@media (max-width:900px) {
  .resources { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:440px) {
  .resources { grid-template-columns:1fr; }
}

/* Shared black hexagon theme — 2026-11-02. No page/form behavior changes. */
:root{--bg:#000;--dark:#000}
html{scrollbar-gutter:stable;background:#000}
@supports not (scrollbar-gutter:stable){html{overflow-y:scroll}}
body{background:#000}
.page{background:#000;overflow:clip}
/* Stationary hex texture: visible in localized light, fading to black elsewhere. */
.page::before{position:fixed;inset:0;opacity:1;animation:none;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2284%22%20viewBox%3D%220%200%2048%2084%22%3E%3Cpath%20d%3D%22M24%200%2048%2014V42L24%2056%200%2042V14Z%20M0%2042%2024%2056V84L0%2098%20-24%2084V56Z%20M48%2042%2072%2056V84L48%2098%2024%2084V56Z%22%20fill%3D%22none%22%20stroke%3D%22%238d8c9f%22%20stroke-width%3D%220.8%22%2F%3E%3C%2Fsvg%3E");background-size:48px 84px;mask-image:radial-gradient(ellipse 620px 430px at 11% 27%,#0005 0%,#0002 44%,transparent 78%),radial-gradient(ellipse 680px 470px at 91% 72%,#0004 0%,#0001 48%,transparent 80%)}
.page::after{position:fixed;inset:0;opacity:1;animation:none;background:radial-gradient(ellipse 570px 390px at 11% 27%,#9ba7c41c 0%,#7780990a 43%,transparent 76%),radial-gradient(ellipse 640px 440px at 91% 72%,#b298d918 0%,#80709508 48%,transparent 78%);mask-image:none}
/* Broad pointer spotlight; the static two-pool design remains the fallback. */
.page.pointer-light::before{mask-image:radial-gradient(ellipse 620px 460px at var(--light-x) var(--light-y),#0006 0%,#0005 18%,#0003 40%,#0001 64%,transparent 88%)}
.page.pointer-light::after{background:radial-gradient(ellipse 620px 460px at var(--light-x) var(--light-y),#b1a9d022 0%,#9ca5bf17 20%,#8b91a80c 43%,#716b8d04 66%,transparent 90%)}

.site-header{background:#030303;border-bottom:1px solid #5c3c5d;box-shadow:0 1px 0 #ff7bb41f}
.header-inner{max-width:1360px}
@media(min-width:1061px){.nav{margin-right:18px}}
@media(max-width:1060px){.nav{margin-right:0}}