[hidden]{display:none!important}
@font-face{font-family:Bungee;src:url(/assets/fonts/bungee.woff2) format("woff2");font-display:block}
@font-face{font-family:Montserrat;src:url(/assets/fonts/montserrat.woff2) format("woff2");font-weight:100 900;font-display:block}
@font-face{font-family:Marker;src:url(/assets/fonts/marker.woff2) format("woff2");font-display:block}
:root{--ink:#3D030A;--ink2:#22020a;--berry:#A90D46;--pink:#EE79C6;--blush:#F3D3E3;--cream:#FDF0DF;--tan:#D38E6B;--plum:#5D3751;--stone:#87807F;--green:#5E7F3A;--green2:#86AE52;--gold:#F5C518;
  --display:Bungee,Impact,sans-serif;--body:Montserrat,system-ui,sans-serif;--hand:Marker,cursive;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ink2);overflow:hidden;color:var(--ink);font-family:var(--body)}
.deck{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden}
.stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:center;transform:translate(-50%,-50%) scale(var(--s,1))}
#snake{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;opacity:0;transition:opacity .8s}
#snake.on{opacity:1}

/* slides */
.slide{position:absolute;inset:0;padding:90px 110px;overflow:hidden;opacity:0;visibility:hidden;transform:scale(1.04);transition:opacity .7s var(--ease),transform .9s var(--ease),visibility 0s .7s}
.slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .7s var(--ease),transform .9s var(--ease)}
.slide.prev{transform:scale(.96)}
.slide.cream{background:var(--cream) radial-gradient(circle at 85% 10%,rgba(238,121,198,.18),transparent 45%)}
.slide.dark{background:var(--ink) radial-gradient(circle at 15% 100%,rgba(169,13,70,.55),transparent 55%);color:var(--cream)}
.slide.dark::before{content:"";position:absolute;inset:0;background:url(/assets/img/scales.webp) center/620px;opacity:.12;pointer-events:none}
.slide::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;background:repeating-linear-gradient(-45deg,var(--pink) 0 16px,var(--ink) 16px 32px)}
.slide.cream::after{opacity:.9}

/* entrance animations, played each time a slide becomes active */
[class*="a-"]{opacity:0}
.on .a-up{animation:up .9s var(--ease) both;animation-delay:var(--d,0s)}
.on .a-left{animation:left .9s var(--ease) both;animation-delay:var(--d,0s)}
.on .a-pop{animation:pop .75s cubic-bezier(.3,1.5,.5,1) both;animation-delay:var(--d,0s)}
@keyframes up{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
@keyframes left{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.6) rotate(-4deg)}to{opacity:1;transform:none}}
.wig{animation:wig 3s ease-in-out infinite!important;opacity:1}
.on .wig{animation:pop .75s cubic-bezier(.3,1.5,.5,1) both,wig 3.2s ease-in-out 1.2s infinite!important;animation-delay:var(--d,0s),calc(var(--d,0s) + .8s)!important}
@keyframes wig{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-10px)}}

/* type */
.hl{font-family:var(--display);font-weight:400;line-height:.95;color:var(--blush);-webkit-text-stroke:.05em var(--ink);paint-order:stroke fill;text-shadow:.05em .06em 0 var(--pink);margin:0}
h2{margin:0}
.t-hero{font-size:150px;display:flex;flex-direction:column}
.t-xl{font-family:var(--display);font-weight:400;font-size:96px;line-height:.95}
.t-l{font-family:var(--display);font-weight:400;font-size:72px;line-height:1}
.cream .t-l,.cream .t-xl{color:var(--ink);text-shadow:.04em .05em 0 var(--pink)}
em{font-style:normal;color:var(--berry)}
.dark em{color:var(--pink)}
.tg{display:inline-block;font:900 20px/1 var(--body);letter-spacing:.16em;padding:10px 14px;border-radius:999px;color:#fff;vertical-align:middle}
.tg.s{background:var(--green)}.tg.v{background:var(--berry)}
.tg.big{font-size:30px;padding:14px 20px;transform:translateY(-10px)}
.cr{position:absolute;right:14px;bottom:12px;font:600 15px/1 var(--body);color:#fff;background:rgba(0,0,0,.45);padding:6px 10px;border-radius:8px}
img[data-zoom]{cursor:zoom-in}

/* title */
.bg{position:absolute;inset:-30px;background-size:cover;background-position:center;animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.1) translate(-20px,10px)}}
.veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(34,2,10,.95) 0%,rgba(61,3,10,.75) 48%,rgba(61,3,10,.15) 100%)}
.title-body{position:relative;z-index:4;max-width:1080px;margin-top:20px}
.title .badge{width:250px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.kick{font:900 26px/1 var(--body);letter-spacing:.34em;text-transform:uppercase;color:var(--pink);margin:34px 0 18px}
.sub{font:800 52px/1.1 var(--body);color:var(--gold);margin:30px 0 0;letter-spacing:.01em}

/* heads with numerals */
.head{display:flex;align-items:center;gap:36px;margin-bottom:40px}
.big-num{font:400 220px/.8 var(--display);color:var(--green);text-shadow:8px 8px 0 var(--ink)}
.big-num.red{color:var(--berry);text-shadow:8px 8px 0 var(--pink)}

/* tiles */
.tile{position:relative;margin:0;border-radius:22px;overflow:hidden;border:5px solid var(--ink);background:#000;box-shadow:8px 8px 0 var(--ink)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.tile:hover img{transform:scale(1.07)}
.tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;background:linear-gradient(0deg,rgba(20,0,5,.92),transparent);color:#fff;font:800 27px/1.1 var(--body);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.tile figcaption .tg{font-size:15px;padding:7px 11px}
.grid9{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,230px);gap:22px;position:absolute;left:830px;right:110px;top:70px}
.slide:has(.grid9) .head{flex-direction:column;align-items:flex-start;width:650px;margin-top:180px}
.grid6{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,330px);gap:26px}
.tile.v{border-color:var(--berry);box-shadow:8px 8px 0 var(--pink)}
.stamp{position:absolute;top:22px;right:-48px;background:var(--gold);color:var(--ink);font:900 20px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;padding:12px 60px;transform:rotate(30deg);box-shadow:0 4px 0 var(--ink)}
.ven6 .head{margin-bottom:30px}.ven6 .big-num{font-size:180px}

/* ecosystems */
.eco h2{max-width:1500px}
.eco-grid{display:grid;grid-template-columns:1fr 760px;gap:70px;margin-top:40px}
.eco-text p{font:600 30px/1.42 var(--body);margin:0 0 22px}
.eco-text p b{font-weight:900;color:var(--berry)}
.chain{display:flex;flex-direction:column;align-items:center;gap:12px}
.tier{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.tier span{background:var(--ink);color:var(--cream);font:800 24px/1 var(--body);padding:15px 20px;border-radius:999px}
.tier.prey span{background:var(--blush);color:var(--ink);border:3px solid var(--ink)}
.arrow{font:400 26px/1 var(--hand);color:var(--berry)}
.hub{width:250px;height:250px;border-radius:50%;overflow:hidden;border:7px solid var(--ink);box-shadow:0 0 0 10px var(--pink)}
.hub img{width:100%;height:100%;object-fit:cover}
.ticks{display:flex;align-items:center;gap:18px;margin-top:22px;background:var(--gold);border:4px solid var(--ink);border-radius:24px;padding:16px 26px;box-shadow:7px 7px 0 var(--ink)}
.ticks b{font:400 88px/1 var(--display)}
.ticks span{font:800 24px/1.2 var(--body)}

/* threats */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:60px;height:700px}
.tri figure{margin:0;position:relative;border-radius:26px;overflow:hidden;border:5px solid var(--pink)}
.tri img{width:100%;height:100%;object-fit:cover}
.tri figcaption{position:absolute;left:0;right:0;bottom:0;padding:70px 26px 26px;background:linear-gradient(0deg,rgba(20,0,5,.95),transparent);font:400 48px/1 var(--display);color:var(--blush)}

/* spotlight */
.spot{display:grid;grid-template-columns:1080px 1fr;gap:70px;padding:0;background:var(--ink);color:var(--cream)}
.spot.flip{grid-template-columns:1fr 1080px}
.spot.flip .spot-photo{order:2}
.spot-photo{position:relative;height:1080px;overflow:hidden}
.spot-photo img.cover{width:100%;height:100%;object-fit:cover;animation:kb 22s ease-in-out infinite alternate}
.spot-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 70%,var(--ink));pointer-events:none}
.spot.flip .spot-photo::after{background:linear-gradient(270deg,transparent 70%,var(--ink))}
.spot-info{padding:110px 100px 90px 0;display:flex;flex-direction:column;gap:28px;justify-content:center;position:relative;z-index:2}
.spot.flip .spot-info{padding:110px 0 90px 110px}
.spot h2{color:var(--blush);-webkit-text-stroke:.04em var(--ink);paint-order:stroke fill;text-shadow:.05em .06em 0 var(--pink)}
.dist{display:flex;align-items:center;gap:30px;background:rgba(253,240,223,.06);border:3px solid rgba(238,121,198,.5);border-radius:26px;padding:22px 28px}
.map-wrap{width:250px;flex:none}
.map{width:100%;display:block}
.map .st{fill:var(--blush);stroke:var(--ink);stroke-width:3}
.map .rg{fill:var(--berry)}
.map.all .st{fill:var(--berry);stroke:var(--blush)}
.on .map .rg,.on .map.all .st{animation:mapin 1.4s var(--ease) .9s both}
@keyframes mapin{from{opacity:0;fill:var(--gold)}60%{fill:var(--gold)}to{opacity:1}}
.dist .lbl{display:block;font:900 22px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--pink);margin-bottom:12px}
.dist b{font:400 54px/1.05 var(--display);color:var(--gold)}
.thumbs{display:flex;gap:22px;align-items:flex-end}
.thumbs>img{width:230px;height:175px;object-fit:cover;border-radius:16px;border:4px solid var(--pink)}
.pol{margin:0;background:#fff;padding:10px 10px 0;border:3px solid var(--ink);transform:rotate(var(--r,3deg));box-shadow:0 18px 40px -16px #000;color:var(--ink)}
.pol img{width:190px;height:230px;object-fit:cover;display:block}
.pol figcaption{font:400 22px/1 var(--hand);text-align:center;padding:10px 0 12px;color:var(--berry)}

/* water */
.water-head{display:flex;flex-direction:column;gap:8px}
.water .lead{font:700 34px/1.3 var(--body);margin:14px 0 0}
.shout{font:400 60px/1 var(--hand);color:var(--green);margin:6px 0 0;transform-origin:left}
.water-grid{display:grid;grid-template-columns:repeat(3,1fr) 520px;gap:26px;margin-top:40px;height:560px}
.water .tile figcaption{font-size:25px}
.compare{display:flex;flex-direction:column;gap:18px}
.compare figure{flex:1;margin:0;position:relative;border-radius:20px;overflow:hidden;border:5px solid var(--ink);background:#000}
.compare img{width:100%;height:100%;object-fit:cover}
.compare figcaption{position:absolute;left:0;right:0;bottom:0;background:rgba(20,0,5,.85);color:#fff;font:700 22px/1.25 var(--body);padding:12px 16px}
.compare .ok{color:var(--green2)}.compare .no{color:var(--pink)}

/* mimics */
.tap{font:700 34px/1 var(--body);margin:24px 0 40px}
.tap em{font-family:var(--hand);font-weight:400;color:var(--gold)}
.flip3{display:grid;grid-template-columns:repeat(3,1fr);gap:46px;height:650px;perspective:1800px}
.fcard{all:unset;cursor:pointer;position:relative;display:block;border-radius:28px}
.fcard .inner{position:absolute;inset:0;transition:transform .9s cubic-bezier(.4,1.4,.5,1);transform-style:preserve-3d;display:block}
.fcard.open .inner{transform:rotateY(180deg)}
.front,.back{position:absolute;inset:0;backface-visibility:hidden;border-radius:28px;overflow:hidden;border:6px solid var(--pink);display:block}
.front img,.back img{width:100%;height:100%;object-fit:cover;display:block}
.front .q{position:absolute;right:24px;top:18px;font:400 120px/1 var(--display);color:var(--gold);text-shadow:6px 6px 0 var(--ink)}
.back{transform:rotateY(180deg)}
.back b{position:absolute;left:0;right:0;bottom:0;padding:90px 26px 90px;background:linear-gradient(0deg,rgba(20,0,5,.95),transparent);font:400 44px/1.05 var(--display);color:#fff}
.back .tg{position:absolute;left:26px;bottom:30px;font-size:24px}
.back.v{border-color:var(--berry);box-shadow:0 0 0 8px var(--gold)}
.back.s{border-color:var(--green2)}

/* tips */
.tips-grid{display:grid;grid-template-columns:1fr 560px;gap:50px;height:100%}
.tiplist{margin:30px 0 0;padding:0;list-style:none;counter-reset:t;display:grid;gap:13px}
.tiplist li{counter-increment:t;display:flex;align-items:center;gap:24px;font:700 31px/1.2 var(--body);background:#fff;border:4px solid var(--ink);border-radius:20px;padding:11px 22px;box-shadow:6px 6px 0 var(--ink)}
.tiplist li::before{content:counter(t);flex:none;width:58px;height:58px;border-radius:50%;background:var(--berry);color:#fff;display:grid;place-items:center;font:400 30px/1 var(--display)}
.tips-art{position:relative}
.tips-art>img{width:520px;position:absolute;top:30px;right:0}
.tips-art .pol{position:absolute;bottom:60px;left:20px}
.tips-art .pol img{width:300px;height:220px}

/* stats */
.stats-grid{display:grid;grid-template-columns:1fr 860px;gap:60px;margin-top:36px}
.claim{font:800 40px/1.25 var(--body);margin:0 0 30px}
.claim b{color:var(--gold)}
.nums{display:flex;gap:26px;margin-bottom:28px}
.nums>div{background:var(--blush);color:var(--ink);border-radius:24px;padding:22px 28px;border:4px solid var(--pink);flex:1}
.nums b{display:block;font:400 76px/1 var(--display);color:var(--berry)}
.nums span{font:700 22px/1.25 var(--body)}
.facts{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.facts li{font:600 27px/1.3 var(--body);padding-left:36px;position:relative}
.facts li::before{content:"";position:absolute;left:0;top:11px;width:16px;height:16px;border-radius:50%;background:var(--pink)}
.facts b{color:var(--gold)}
.chart{background:var(--cream);color:var(--ink);border-radius:28px;padding:34px 38px;border:5px solid var(--pink)}
.chart h3{font:400 38px/1 var(--display);margin:0 0 6px}
.axis{font:600 19px/1.2 var(--body);color:var(--plum);margin:0 0 20px}
.bar{display:grid;grid-template-columns:270px 1fr 140px;align-items:center;gap:16px;margin-bottom:16px}
.bl{font:700 21px/1.15 var(--body);text-align:right}
.bt{height:46px;background:rgba(61,3,10,.08);border-radius:12px;overflow:hidden}
.bt i{display:block;height:100%;width:0;background:var(--plum);border-radius:12px}
.on .bt i{animation:grow 1.4s var(--ease) both;animation-delay:var(--d)}
@keyframes grow{to{width:var(--w)}}
.bar b{font:400 28px/1 var(--display)}
.bar.hot .bt i{background:var(--green)}.bar.hot b,.bar.hot .bl{color:var(--green)}

/* plan */
.plan{padding-top:60px}
.plan-head{display:flex;justify-content:space-between;align-items:center;gap:40px}
.sos{display:flex;flex-direction:column;gap:10px;background:var(--berry);color:#fff;border:4px solid var(--ink);border-radius:22px;padding:18px 26px;box-shadow:7px 7px 0 var(--ink);font:700 24px/1.25 var(--body)}
.sos b{color:var(--gold);font-family:var(--display);font-weight:400;font-size:30px}
.plan h2.do,.plan h2.no{font:400 76px/1 var(--display);margin:24px 0 18px;color:var(--green);text-shadow:4px 4px 0 var(--ink)}
.plan h2.no{color:var(--berry)}
.plist{margin:0;padding:0;list-style:none;columns:2;column-gap:40px;counter-reset:p}
.plist li{break-inside:avoid;counter-increment:p;display:grid;grid-template-columns:54px 1fr;gap:16px;background:#fff;border:4px solid var(--ink);border-radius:18px;padding:16px 20px;margin-bottom:18px;font:600 23px/1.36 var(--body)}
.plist li::before{content:counter(p);width:50px;height:50px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font:400 26px/1 var(--display)}
.dont .plist li::before{background:var(--berry)}
.dont .plist li{font-size:21px;padding:12px 18px;margin-bottom:14px}
.qrline{display:flex;align-items:center;gap:14px;margin-top:10px}
.qrline img{width:120px;height:120px;border:3px solid var(--ink);border-radius:10px;background:#fff}
.qrline small{font-size:15px;color:var(--plum);word-break:break-all}
.anti{background:var(--blush);border-left:10px solid var(--berry);border-radius:0 18px 18px 0;padding:16px 22px;font:600 20px/1.4 var(--body);margin:4px 0 0}

/* takeaways */
.take-grid{display:grid;grid-template-columns:1fr 560px;gap:40px;height:100%}
.tlist{margin:36px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.tlist li{font:700 32px/1.3 var(--body);padding:14px 22px 14px 70px;position:relative;background:rgba(253,240,223,.07);border-radius:18px;border:3px solid rgba(238,121,198,.35)}
.tlist li::before{content:"✓";position:absolute;left:20px;top:12px;font:400 32px/1 var(--display);color:var(--gold)}
.tlist b{color:var(--gold)}
.take-art{position:relative}
.take-art .badge{width:300px;position:absolute;right:20px;top:0}
.take-art .pol{position:absolute}
.take-art .pol:nth-of-type(1){left:10px;top:330px}.take-art .pol:nth-of-type(2){right:0;top:420px}
.take-art .pol img{width:230px;height:300px}

/* join */
.join-body{position:relative;z-index:4;max-width:1300px}
.join .lead{font:700 40px/1.3 var(--body);color:var(--blush);margin:20px 0 50px;max-width:1000px}
.joins{display:flex;gap:36px}
.jcard{background:var(--cream);color:var(--ink);border:5px solid var(--ink);border-radius:28px;padding:26px;width:350px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;box-shadow:10px 10px 0 var(--pink)}
.jcard img{width:240px;height:240px}
.jcard b{font:400 30px/1.05 var(--display)}
.jcard span{font:700 21px/1.2 var(--body)}
.jcard .ph{font:400 34px/1 var(--display);color:var(--berry)}
.kernel-wave{position:absolute;right:90px;bottom:60px;width:430px;z-index:4}

/* hud */
.hud{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;gap:10px;padding:10px 16px;background:linear-gradient(0deg,rgba(20,0,5,.85),transparent);opacity:0;transition:opacity .4s}
body.show-hud .hud,.hud:hover,.hud:focus-within{opacity:1}
.hud button,.hud .home{background:rgba(253,240,223,.12);color:var(--cream);border:0;border-radius:12px;min-width:44px;height:44px;font:700 22px/1 var(--body);cursor:pointer;display:grid;place-items:center}
.hud button:hover{background:var(--pink);color:var(--ink)}
.hud .home img{width:34px;height:34px;object-fit:contain}
.prog{flex:1;padding:0 10px}
.track{position:relative;height:8px;background:rgba(253,240,223,.15);border-radius:99px}
#bar{position:absolute;left:0;top:0;bottom:0;background:var(--pink);border-radius:99px;transition:width .6s var(--ease)}
#crawler{position:absolute;top:-30px;width:40px;margin-left:-20px;transition:left .6s var(--ease)}
#count{color:var(--cream);font:800 15px/1 var(--body);min-width:64px;text-align:center}
.overview{position:fixed;inset:0;z-index:30;background:rgba(20,0,5,.96);overflow:auto;padding:30px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;align-content:start}
.overview button{all:unset;cursor:pointer;background:var(--ink);border:3px solid rgba(238,121,198,.4);border-radius:14px;padding:18px;color:var(--cream);font:700 17px/1.3 var(--body);min-height:90px}
.overview button b{display:block;font:400 30px/1 var(--display);color:var(--pink);margin-bottom:8px}
.overview button.cur{border-color:var(--gold)}
.overview button:hover{background:var(--berry)}
.lightbox{position:fixed;inset:0;z-index:40;background:rgba(10,0,3,.94);display:grid;place-items:center;cursor:zoom-out;padding:3vh}
.lightbox img{max-width:94vw;max-height:94vh;border-radius:14px;box-shadow:0 30px 80px #000;animation:pop .45s cubic-bezier(.3,1.4,.5,1)}
.black{position:fixed;inset:0;z-index:50;background:#000}
.helpbox{position:fixed;right:16px;bottom:70px;z-index:25;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:16px;padding:16px 20px;font:600 15px/1.6 var(--body);box-shadow:6px 6px 0 var(--pink)}
@media(prefers-reduced-motion:reduce){[class*="a-"]{opacity:1!important;animation:none!important}.bg,.spot-photo img.cover{animation:none}}

/* ===== phone layout: slides reflow into a scrollable card instead of shrinking ===== */
body.m .stage{width:100vw;height:100dvh;transform:none;left:0;top:0}
body.m .slide{padding:58px 18px 110px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;transform:none}
body.m .slide::after{display:none}
body.m .hud{border-top:6px solid transparent;border-image:repeating-linear-gradient(-45deg,var(--pink) 0 10px,var(--ink) 10px 20px) 6}
body.m .hud{opacity:1;padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
body.m .hud #grid,body.m .hud #help,body.m .hud #fs{display:none}
body.m .t-hero{font-size:clamp(44px,13vw,70px)}
body.m .t-xl{font-size:clamp(34px,10vw,52px)}
body.m .t-l{font-size:clamp(28px,8.4vw,42px)}
body.m .tg{font-size:12px;padding:7px 10px}
body.m .tg.big{font-size:16px;transform:none}
body.m .title .badge{width:130px}
body.m .title-body{margin-top:30px}
body.m .kick{font-size:13px;margin:22px 0 12px}
body.m .sub{font-size:24px;margin-top:18px}
body.m .veil{background:linear-gradient(180deg,rgba(34,2,10,.92),rgba(61,3,10,.7) 60%,rgba(61,3,10,.35))}
body.m .head{gap:16px;margin-bottom:20px}
body.m .big-num,body.m .ven6 .big-num{font-size:96px;text-shadow:4px 4px 0 var(--ink)}
body.m .slide:has(.grid9) .head{flex-direction:row;align-items:center;width:auto;margin-top:0}
body.m .grid9,body.m .grid6{position:static;grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:150px;gap:12px}
body.m .tile{border-width:3px;border-radius:14px;box-shadow:4px 4px 0 var(--ink)}
body.m .tile.v{box-shadow:4px 4px 0 var(--pink)}
body.m .tile figcaption{font-size:15px;padding:30px 10px 10px;gap:6px}
body.m .tile figcaption .tg{font-size:10px;padding:5px 8px}
body.m .stamp{font-size:10px;padding:6px 40px;top:12px;right:-38px}
body.m .eco-grid,body.m .stats-grid,body.m .tips-grid,body.m .take-grid{grid-template-columns:1fr;gap:26px;margin-top:18px;height:auto}
body.m .eco-text p{font-size:17px;margin-bottom:12px}
body.m .tier span{font-size:14px;padding:9px 12px}
body.m .arrow{font-size:18px}
body.m .hub{width:150px;height:150px;border-width:5px;box-shadow:0 0 0 6px var(--pink)}
body.m .ticks{padding:12px 16px;gap:12px}.body.m .ticks b{font-size:52px}
body.m .ticks b{font-size:52px}body.m .ticks span{font-size:15px}
body.m .tri{grid-template-columns:1fr;height:auto;gap:16px;margin-top:22px}
body.m .tri figure{height:220px;border-width:3px}
body.m .tri figcaption{font-size:26px;padding:40px 16px 14px}
body.m .spot,body.m .spot.flip{display:block;padding:0 0 110px}
body.m .spot-photo{height:44vh}
body.m .spot-photo::after,body.m .spot.flip .spot-photo::after{background:linear-gradient(180deg,transparent 60%,var(--ink))}
body.m .spot-info,body.m .spot.flip .spot-info{padding:0 18px;gap:16px;margin-top:-30px}
body.m .dist{gap:16px;padding:14px 16px;border-radius:18px}
body.m .map-wrap{width:120px}
body.m .dist .lbl{font-size:11px;margin-bottom:6px}
body.m .dist b{font-size:24px}
body.m .thumbs{flex-wrap:wrap;gap:12px}
body.m .thumbs>img{width:calc(50% - 6px);height:120px;border-width:3px}
body.m .pol img{width:130px;height:160px}
body.m .pol figcaption{font-size:15px}
body.m .cr{font-size:10px;bottom:36px}
body.m .water .lead{font-size:18px}
body.m .shout{font-size:34px}
body.m .water-grid{grid-template-columns:1fr 1fr;height:auto;gap:12px;margin-top:20px;grid-auto-rows:160px}
body.m .compare{grid-column:1/-1;flex-direction:row;height:220px;gap:10px}
body.m .compare figcaption{font-size:13px;padding:8px 10px}
body.m .tap{font-size:18px;margin:12px 0 18px}
body.m .flip3{grid-template-columns:1fr;height:auto;gap:16px}
body.m .fcard{height:250px}
body.m .front .q{font-size:70px}
body.m .back b{font-size:24px;padding:60px 16px 56px}
body.m .back .tg{left:16px;bottom:16px}
body.m .tiplist{margin-top:18px;gap:10px}
body.m .tiplist li{font-size:17px;gap:14px;padding:10px 12px;border-width:3px;box-shadow:4px 4px 0 var(--ink)}
body.m .tiplist li::before{width:38px;height:38px;font-size:18px}
body.m .tips-art{height:300px}
body.m .tips-art>img{width:230px;top:0;right:0}
body.m .tips-art .pol{bottom:0;left:0}
body.m .tips-art .pol img{width:160px;height:120px}
body.m .claim{font-size:21px;margin-bottom:16px}
body.m .nums{gap:10px;margin-bottom:16px}
body.m .nums>div{padding:12px 14px;border-radius:16px}
body.m .nums b{font-size:34px}
body.m .nums span{font-size:13px}
body.m .facts li{font-size:16px;padding-left:24px}
body.m .facts li::before{top:7px;width:11px;height:11px}
body.m .chart{padding:18px;border-radius:18px}
body.m .chart h3{font-size:20px}
body.m .axis{font-size:12px;margin-bottom:12px}
body.m .bar{grid-template-columns:96px 1fr 62px;gap:8px;margin-bottom:10px}
body.m .bl{font-size:11px}
body.m .bt{height:24px;border-radius:8px}
body.m .bar b{font-size:14px}
body.m .plan{padding-top:58px}
body.m .plan-head{flex-direction:column;align-items:flex-start;gap:14px}
body.m .sos{font-size:14px;padding:12px 14px;border-radius:14px;box-shadow:4px 4px 0 var(--ink)}
body.m .sos b{font-size:18px}
body.m .plan h2.do,body.m .plan h2.no{font-size:40px;margin:16px 0 12px}
body.m .plist{columns:1}
body.m .plist li,body.m .dont .plist li{font-size:15px;grid-template-columns:36px 1fr;gap:10px;padding:10px 12px;margin-bottom:10px;border-width:3px}
body.m .plist li::before{width:34px;height:34px;font-size:16px}
body.m .qrline img{width:84px;height:84px}
body.m .qrline small{font-size:10px}
body.m .anti{font-size:14px;padding:12px 14px}
body.m .tlist{margin-top:18px;gap:10px}
body.m .tlist li{font-size:17px;padding:10px 12px 10px 44px}
body.m .tlist li::before{left:12px;top:10px;font-size:20px}
body.m .take-art{height:330px}
body.m .take-art .badge{width:140px;right:auto;left:0;top:0}
body.m .take-art .pol:nth-of-type(1){left:auto;right:110px;top:20px}
body.m .take-art .pol:nth-of-type(2){right:0;top:130px}
body.m .take-art .pol img{width:120px;height:150px}
body.m .join .lead{font-size:19px;margin:12px 0 22px}
body.m .joins{flex-direction:column;gap:14px}
body.m .jcard{width:100%;flex-direction:row;text-align:left;padding:14px;gap:14px;align-items:center;border-width:3px;box-shadow:5px 5px 0 var(--pink)}
body.m .jcard img{width:90px;height:90px;flex:none}
body.m .jcard b{font-size:18px}
body.m .jcard span,body.m .jcard .ph{font-size:14px}
body.m .jcard .ph{font-size:20px}
body.m .kernel-wave{position:static;width:180px;margin:18px auto 0;display:block}
body.m .helpbox{display:none}
body.m .swipe-hint{display:block}
.swipe-hint{display:none;position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:21;background:rgba(253,240,223,.95);color:var(--ink);font:800 13px/1 var(--body);padding:10px 16px;border-radius:99px;box-shadow:0 4px 0 var(--ink);animation:fadeout 1s 4s forwards;pointer-events:none}
@keyframes fadeout{to{opacity:0}}

.tips .t-l{font-size:60px}
body.m .jcard{display:grid;grid-template-columns:90px 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:4px;align-items:center}
body.m .jcard img{grid-row:1/3}
body.m .jcard b{align-self:end}body.m .jcard span{align-self:start}

/* big screens: presenter controls scale with the window (set by deck.js as --uiz) */
.hud{padding:calc(10px * var(--uiz,1)) calc(16px * var(--uiz,1))}
.hud>*,.overview button,.helpbox{zoom:var(--uiz,1)}
.overview{grid-template-columns:repeat(auto-fill,minmax(calc(260px * var(--uiz,1)),1fr))}

/* spotlight with two field polaroids (Gunnar): keep the row inside the slide */
.thumbs.two{gap:26px}.thumbs.two>img{width:210px;height:160px}.thumbs.two .pol img{width:165px;height:196px}.thumbs.two .pol figcaption{font-size:19px;padding:8px 0 10px}
body.m .thumbs.two .pol img{width:130px;height:160px}
/* spotlights: keep the photo row clear of the bottom edge and the HUD */
.spot-info{padding:76px 100px 112px 0;gap:20px}
.spot.flip .spot-info{padding:76px 0 112px 110px}
.spot .thumbs>img{width:210px;height:150px}
.spot .pol img{width:165px;height:196px}
.spot .pol figcaption{font-size:19px;padding:8px 0 10px}
body.m .spot-info,body.m .spot.flip .spot-info{padding:0 18px;gap:16px}
body.m .spot .thumbs>img{width:calc(50% - 6px);height:120px}
body.m .spot .pol img{width:130px;height:160px}