@import url('https://fonts.googleapis.com/css2?family=Coming+Soon&family=Permanent+Marker&family=Special+Elite&display=swap');

/* ---------- base ---------- */
:root{
  --paper:#f4f1ea;
  --paper-rgb:244,241,234;
  --ink:#090909;
  --ink-rgb:9,9,9;
  --gray:#6b6a66;
  --dex:#d8d5ce;
  --line:2px solid var(--ink);
  --ease:cubic-bezier(.22,.9,.32,1);
}
*{box-sizing:border-box}
picture{display:block}
html{scroll-behavior:smooth}
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Coming Soon',cursive;overflow-x:hidden;cursor:none}
img{max-width:100%}
.doodle-defs{position:absolute;width:0;height:0;overflow:hidden}

.grain{pointer-events:none;position:fixed;inset:0;z-index:30;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");mix-blend-mode:multiply}

.scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:97;background:transparent;pointer-events:none}
.scroll-progress i{display:block;height:100%;width:100%;background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 9px);transform:scaleX(0);transform-origin:left center;will-change:transform}

/* ---------- loader ---------- */
.loader{position:fixed;z-index:100;inset:0;background:var(--paper);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;transition:opacity .7s var(--ease),visibility .7s;overflow:hidden}
.loader-bg{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;opacity:.09;filter:blur(6px) grayscale(1);mix-blend-mode:multiply}
.loader-sketch{position:relative;z-index:1;filter:drop-shadow(3px 4px 0 rgba(9,9,9,.12))}
.loader-sketch .ls-black,.loader-sketch .ls-eye-l,.loader-sketch .ls-eye-r,.loader-sketch .ls-stitch{opacity:0;transition:opacity .5s var(--ease)}
.loader-sketch .ls-black{fill:var(--ink)}
.loader-sketch .ls-eye-l{fill:var(--ink)}
.loader-sketch .ls-eye-r{fill:var(--paper);stroke:var(--ink);stroke-width:5}
.loader-sketch .ls-stitch{fill:none;stroke:var(--ink);stroke-width:3;stroke-dasharray:5 5}
.loader-sketch .ls-outline{fill:none;stroke:var(--ink);stroke-width:7;stroke-linejoin:round;stroke-linecap:round;transition:stroke-dashoffset 1.3s var(--ease)}
.loader-sketch.inked .ls-black,.loader-sketch.inked .ls-eye-l,.loader-sketch.inked .ls-eye-r{opacity:1;transition-delay:.15s}
.loader-sketch.inked .ls-stitch{opacity:1;transition-delay:.35s}
.loader p{position:relative;z-index:1;font-family:'Special Elite',monospace;font-size:12px;margin:2px 0 0;letter-spacing:1px}
.loader-bar{position:relative;z-index:1;width:180px;height:10px;border:2px dashed var(--ink);border-radius:6px;overflow:hidden;background:rgba(var(--ink-rgb),.04)}
.loader-bar span{display:block;height:100%;width:0%;background:var(--ink);transition:width .18s linear}
.loader b{position:relative;z-index:1;font-family:'Special Elite',monospace;font-size:22px;margin:0}
.loader.done{opacity:0;visibility:hidden}

/* ---------- cursor ---------- */
.cursor{--cursor-angle:0deg;width:52px;height:34px;border:0;border-radius:0;background:transparent;opacity:0;position:fixed;z-index:99;pointer-events:none;transform:translate(-50%,-50%) rotate(var(--cursor-angle));transform-origin:center;transition:width .18s,height .18s,opacity .15s;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.25));mix-blend-mode:difference}
.cursor.active{opacity:1}
.cursor svg{display:block;width:100%;height:100%;overflow:visible}
.cursor-eye{fill:#f4f1ea;stroke:#090909;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cursor-eye-shadow{fill:none;stroke:#f4f1ea;stroke-width:2;opacity:.85}
.cursor-scratch,.cursor-glint{fill:none;stroke:#090909;stroke-width:1.35;stroke-linecap:round}
.cursor-iris{fill:#090909;stroke:#f4f1ea;stroke-width:1.8;transform-origin:39px 24px;transition:transform .18s}
.cursor-pupil{fill:#f4f1ea;transform-origin:39px 24px;transition:transform .14s}
.cursor-ring{position:absolute;inset:-9px;border:2px dashed #f4f1ea;border-radius:50%;opacity:0;transform:scale(.35) rotate(0);transition:opacity .15s,transform .25s}
.cursor.hover{width:70px;height:44px;mix-blend-mode:difference}
.cursor.hover .cursor-iris{transform:scale(1.22)}
.cursor.hover .cursor-pupil{transform:scale(.65)}
.cursor.hover .cursor-ring{opacity:.8;transform:scale(1) rotate(18deg)}
.cursor.pressed{width:48px;height:31px}
.cursor.pressed .cursor-pupil{transform:scale(1.8)}
.cursor.pressed .cursor-ring{opacity:1;transform:scale(1.3) rotate(38deg)}
.ink-trail{position:fixed;z-index:98;width:5px;height:5px;border-radius:46% 54% 38% 62%;background:#fff;pointer-events:none;mix-blend-mode:difference;transform:translate(-50%,-50%) rotate(var(--trail-rotate));animation:ink-fade .62s ease-out forwards}
.ink-splat{position:fixed;z-index:98;pointer-events:none;transform:translate(-50%,-50%) scale(0);animation:splat-pop .55s var(--ease) forwards}
.ink-splat svg{width:34px;height:26px;fill:var(--ink);mix-blend-mode:difference}
@keyframes ink-fade{0%{opacity:.7;transform:translate(-50%,-50%) scale(1) rotate(var(--trail-rotate))}100%{opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(calc(var(--trail-rotate) + 90deg))}}
@keyframes splat-pop{0%{opacity:.9;transform:translate(-50%,-50%) scale(0) rotate(0)}60%{opacity:.7;transform:translate(-50%,-50%) scale(1.15) rotate(12deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.4) rotate(18deg)}}
@media(max-width:800px),(pointer:coarse){.cursor,.ink-trail,.ink-splat{display:none!important}body{cursor:auto}}

/* ---------- header ---------- */
.topbar{height:80px;border-bottom:var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4vw;position:sticky;top:0;z-index:50;background:rgba(var(--paper-rgb),.86);backdrop-filter:blur(6px);transition:box-shadow .3s,height .3s}
.topbar.scrolled{box-shadow:0 4px 0 rgba(var(--ink-rgb),.06)}
.brand,.footer-brand{font-family:'Permanent Marker',cursive;text-decoration:none;color:var(--ink);font-size:27px;letter-spacing:-2px;transform:rotate(-2deg);display:inline-block}
.brand span{color:var(--paper);background:var(--ink);padding:0 4px}
.brand em{font:11px 'Special Elite';margin-left:8px;letter-spacing:0}
.topbar nav,footer nav{display:flex;gap:22px}
.topbar nav a,footer nav a{color:var(--ink);font:12px 'Special Elite';text-decoration:none;position:relative}
.topbar nav a:after,footer nav a:after{content:'';height:2px;background:var(--ink);position:absolute;left:0;bottom:-5px;width:0;transition:.25s}
.topbar nav a:hover:after,footer nav a:hover:after,.topbar nav a.active:after{width:100%}
.topbar-actions{display:flex;align-items:center;gap:14px}
.socials{display:flex;gap:7px}
.sketch-icon{border:var(--line);color:var(--ink);text-decoration:none;padding:6px 8px;transform:rotate(-3deg);transition:.2s;display:inline-flex;align-items:center;justify-content:center}
.sketch-icon svg{width:15px;height:15px;fill:currentColor}
.sketch-icon:hover{background:var(--ink);color:var(--paper);transform:rotate(3deg) scale(1.08)}

/* ---------- layout ---------- */
.section{position:relative;padding:130px 8vw}
.section-label{position:absolute;top:52px;left:8vw;font:11px 'Special Elite';letter-spacing:1px}
.section-kicker{text-align:center;font:13px 'Special Elite';color:var(--gray);margin:-6px 0 0}
.eyebrow{font:11px 'Special Elite';letter-spacing:1px}
.eyebrow:before{content:'✦ ';font-size:16px}
h1,h2{font-family:'Permanent Marker',cursive;font-weight:400;line-height:.89;letter-spacing:-3px;margin:17px 0 24px}
h1{font-size:clamp(60px,8.3vw,128px)}
h2{font-size:clamp(50px,7.2vw,112px)}
.hero-text{max-width:400px;line-height:1.7;font-size:15px}

/* ---------- buttons ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:17px;border:var(--line);padding:17px 22px;margin:17px 0;color:var(--ink);text-decoration:none;font:15px 'Special Elite';box-shadow:5px 6px 0 var(--ink);transform:rotate(-1.4deg);transition:transform .2s,box-shadow .2s;background:transparent;cursor:none}
.button small{font:10px 'Special Elite'}
.button:hover{transform:rotate(1deg) translate(3px,3px);box-shadow:1px 2px 0 var(--ink)}
.button-black{background:var(--ink);color:var(--paper);box-shadow:5px 6px 0 #9d9a93}
.button-mini{padding:9px 14px;margin:0;box-shadow:3px 4px 0 var(--ink);gap:6px;font-size:12px;transform:rotate(-2deg)}
.button-mini:hover{transform:rotate(1deg) translate(2px,2px);box-shadow:1px 2px 0 var(--ink)}
.button-outline{background:transparent;color:var(--ink);border:var(--line)}
.final .button-outline{color:var(--paper);border-color:var(--paper);box-shadow:5px 6px 0 #55524c}
.final .button-outline:hover{box-shadow:1px 2px 0 #55524c}
.final-socials{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.ca-card{display:flex;width:min(100%,490px);background:transparent;border:0;border-top:var(--line);border-bottom:var(--line);align-items:center;gap:10px;padding:11px 0;cursor:none;text-align:left;color:var(--ink);font-family:'Special Elite'}
.ca-card span{font-size:9px;min-width:81px}
.ca-card strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.ca-card b{font-size:10px;border-left:var(--line);padding:4px 0 4px 10px}
.final .ca-card{color:var(--paper);border-color:var(--paper)}
.text-copy{color:var(--ink);background:0;border:0;border-bottom:2px solid var(--ink);font:12px 'Special Elite';padding:4px 0;cursor:none;text-decoration:none}

/* ---------- sticky CTA ---------- */
.sticky-cta{position:fixed;z-index:60;right:26px;bottom:26px;display:flex;align-items:center;gap:8px;border:var(--line);background:var(--ink);color:var(--paper);text-decoration:none;padding:13px 18px;font:13px 'Special Elite';box-shadow:4px 5px 0 var(--gray);transform:translateY(140px) rotate(-2deg);transition:transform .4s var(--ease),box-shadow .2s;cursor:none}
.sticky-cta.show{transform:translateY(0) rotate(-2deg)}
.sticky-cta:hover{transform:translateY(0) rotate(1deg) translate(2px,2px);box-shadow:1px 2px 0 var(--gray)}
.sticky-cta small{font-size:16px}
@media(max-width:640px){.sticky-cta{right:16px;bottom:16px;padding:11px 15px}}

/* ---------- hero stage ---------- */
.hero{min-height:calc(100vh - 80px);display:grid;grid-template-columns:1fr 1fr;align-items:center;padding-top:55px;overflow:hidden}
.hero-stage{max-width:620px;justify-self:end;position:relative;aspect-ratio:1/1;width:100%;perspective:1200px}
.stage-layer,.stage-doodles,.stage-main{position:absolute;inset:0;will-change:transform}
.stage-back{display:flex;align-items:center;justify-content:center}
.aura-img{position:absolute;inset:-12%;width:124%;height:124%;object-fit:contain;filter:blur(22px) grayscale(1) contrast(1.05);opacity:.4;mix-blend-mode:multiply;pointer-events:none}
.orbit{position:absolute;border:2px solid var(--ink);border-radius:50%;pointer-events:none;opacity:.5}
.orbit-one{width:95%;height:68%;left:2%;top:16%;animation:spin-cw 42s linear infinite}
.orbit-two{width:83%;height:86%;left:9%;top:7%;border-style:dashed;animation:spin-ccw 58s linear infinite}
.orbit-three{width:70%;height:96%;left:15%;top:2%;border-style:dotted;opacity:.4;animation:spin-cw 75s linear infinite}
@keyframes spin-cw{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes spin-ccw{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
.stage-doodles{pointer-events:none}
.doodle-slot{position:absolute;display:block}
.doodle{width:40px;height:auto;opacity:.62;overflow:visible}
.slot-cloud-1{top:6%;left:-6%;animation:float-a 9s ease-in-out infinite}
.slot-cloud-2{bottom:10%;right:-4%;animation:float-b 11s ease-in-out infinite .6s}
.slot-star-1{top:14%;right:6%;animation:float-c 6s ease-in-out infinite}
.slot-star-2{bottom:16%;left:4%;animation:float-c 7s ease-in-out infinite 1.1s}
.slot-spiral-1{top:44%;left:-10%;animation:float-a 13s ease-in-out infinite 2s}
.slot-cloud-1 .doodle{width:56px}
.slot-cloud-2 .doodle{width:46px}
.slot-star-1 .doodle,.slot-star-2 .doodle{width:26px;opacity:.75}
.slot-spiral-1 .doodle{width:44px;opacity:.4}
@keyframes float-a{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(6px,-10px) rotate(4deg)}}
@keyframes float-b{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-8px,8px) rotate(-5deg)}}
@keyframes float-c{0%,100%{transform:translate(0,0) scale(1) rotate(0)}50%{transform:translate(3px,-6px) scale(1.12) rotate(10deg)}}
.stage-main{display:flex;align-items:center;justify-content:center}
.stage-main picture{display:block;width:92%;animation:breathe 7s ease-in-out infinite}
.hero-creature{width:100%;height:auto;display:block;mix-blend-mode:multiply;filter:contrast(1.12) drop-shadow(0 0 0 rgba(0,0,0,0));animation:ink-flicker 5.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1) rotate(-1deg)}50%{transform:scale(1.018) rotate(1deg)}}
@keyframes ink-flicker{0%,100%{filter:contrast(1.12) drop-shadow(2px 3px 0 rgba(9,9,9,.05))}45%{filter:contrast(1.16) drop-shadow(1px 2px 0 rgba(9,9,9,.1))}70%{filter:contrast(1.1) drop-shadow(3px 4px 0 rgba(9,9,9,.04))}}
.stamp{position:absolute;z-index:2;font:12px 'Special Elite';border:2px dashed var(--ink);border-radius:50%;width:76px;height:76px;display:grid;place-items:center;text-align:center;transform:rotate(-12deg);top:-2%;left:6%;background:var(--paper)}
.art-note{position:absolute;z-index:2;right:0;bottom:6%;font:10px 'Special Elite';transform:rotate(8deg)}
.scroll-mark{position:absolute;bottom:20px;left:8vw;font:10px 'Special Elite';letter-spacing:1px}
.scroll-mark span{font-size:24px;vertical-align:middle;margin-left:7px;display:inline-block;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ---------- marquee ---------- */
.marquee{border-top:var(--line);border-bottom:var(--line);background:var(--ink);color:var(--paper);overflow:hidden;padding:14px 0}
.marquee-track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.marquee-track span{font:20px 'Permanent Marker';white-space:nowrap;padding-right:40px;letter-spacing:1px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation-duration:120s}}

/* ---------- seams ---------- */
.seam{position:relative;height:34px;background:var(--paper)}
.seam:after{content:'';position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-1px);background:repeating-linear-gradient(90deg,var(--gray) 0 10px,transparent 10px 18px)}
.seam-to-ink{background:linear-gradient(to bottom,var(--paper) 50%,var(--ink) 50%)}
.seam-to-paper{background:linear-gradient(to bottom,var(--ink) 50%,var(--paper) 50%)}

/* ---------- lore ---------- */
.lore{background:var(--ink);color:var(--paper);display:grid;grid-template-columns:.9fr 1.1fr;gap:9vw;align-items:center;overflow:hidden}
.lore .section-label{color:#c6c3bc}
.lore-art{position:relative;border:2px solid var(--paper);padding:10px;transform:rotate(-3deg)}
.lore-art picture{position:relative;z-index:1;display:block}
.lore-art img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(2);mix-blend-mode:screen}
.aura-img-small{position:absolute;inset:-16%;width:132%;height:132%;object-fit:contain;filter:blur(20px) grayscale(1);opacity:.3;mix-blend-mode:screen}
.lore-copy p{max-width:530px;line-height:1.8;font-size:15px}
.quote{font-family:'Permanent Marker';font-size:26px;line-height:1.1;margin-top:35px;transform:rotate(-2deg)}
.quote span{display:block;font:11px 'Special Elite';margin-top:8px}

/* ---------- gallery ---------- */
.gallery{padding-bottom:70px}
.gallery-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:repeat(2,1fr);gap:22px;margin-top:30px}
.card{position:relative;margin:0;border:var(--line);background:#fff;padding:9px;box-shadow:6px 7px 0 var(--ink);transition:box-shadow .25s,transform .25s;display:flex;flex-direction:column}
.card:hover{box-shadow:2px 3px 0 var(--ink);transform:translate(4px,4px)}
.card picture{display:block;flex:1 1 0;min-height:220px;overflow:hidden}
.card img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.1);transition:transform .5s var(--ease)}
.card:hover img{transform:scale(1.05)}
.card-large{grid-column:1;grid-row:1/3}
.card-large picture{min-height:420px}
.card figcaption{flex:0 0 auto;padding:10px 3px 0;font:13px 'Special Elite';display:flex;justify-content:space-between}
.card-flip{padding:0;background:var(--paper);perspective:1000px;box-shadow:6px 7px 0 var(--ink)}
.flip-inner{position:relative;width:100%;flex:1 1 0;min-height:280px;transition:transform .6s var(--ease);transform-style:preserve-3d}
.card-flip:hover .flip-inner,.card-flip:focus-visible .flip-inner,.card-flip.flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:18px}
.flip-front{font:14px 'Special Elite'}
.flip-front .doodle{fill:none;stroke:var(--ink);opacity:.7}
.flip-front span{font:20px 'Permanent Marker'}
.flip-front small{color:var(--gray);font-size:10px}
.flip-back{transform:rotateY(180deg);background:var(--ink);color:var(--paper)}
.flip-back p{font:12px 'Special Elite';line-height:1.7;margin:5px 0}

/* ---------- how to buy ---------- */
.how{border-top:var(--line);padding-top:150px}
.how-heading{text-align:center}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:65px;border-top:var(--line);border-bottom:var(--line)}
.step{padding:27px 19px 30px;border-right:var(--line);min-height:240px}
.step:last-child{border:0}
.step span{font:28px 'Permanent Marker';display:block}
.step h3{font:17px 'Special Elite';margin:15px 0}
.step p{font-size:13px;line-height:1.6}
.how-arrow{position:absolute;top:-26px;width:56px;height:auto;fill:none;stroke:var(--ink);opacity:.55}
.how-arrow-1{left:23%}
.how-arrow-2{left:48%}
.how-arrow-3{left:73%}
@media(max-width:800px){.how-arrow{display:none}}

/* ---------- dex ---------- */
.dex{background:var(--dex)}
.dex-top{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.chart-wrap{margin-top:50px;height:560px;border:var(--line);background:#1a1a1a;position:relative;overflow:hidden;box-shadow:8px 8px 0 var(--ink)}
#dex-chart{width:100%;height:100%;border:0;position:relative;z-index:2}
.chart-placeholder{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--paper);font:15px 'Special Elite';text-align:center}
.chart-placeholder .aura-img{position:relative;inset:auto;width:190px;height:auto;opacity:.6;filter:blur(4px) grayscale(1);margin-bottom:6px}
.chart-placeholder small{font-size:10px;color:#b8b5ad}
.chart-noise{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 4px,rgba(255,255,255,.05) 5px);z-index:3;pointer-events:none}

/* ---------- roadmap ---------- */
.roadmap{overflow:hidden;padding-bottom:210px}
.roadmap-intro{text-align:center}
.path{position:relative;max-width:880px;margin:80px auto 0;padding-left:45px;display:grid;gap:43px}
.road-line{position:absolute;left:-3px;top:0;width:26px;height:100%;overflow:visible}
.road-line path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.milestone{position:relative;max-width:510px}
.milestone:nth-of-type(even){margin-left:auto}
.milestone:last-of-type{margin-left:0}
.milestone i{position:absolute;left:-58px;top:0;background:var(--paper);font-style:normal;font-size:22px}
.milestone span{font:11px 'Special Elite'}
.milestone h3{font:28px 'Permanent Marker';margin:8px 0}
.milestone p{font-size:14px;line-height:1.7;margin:0}
.roadmap-wisp{width:260px;position:absolute;right:2%;bottom:-30px;pointer-events:none}
.roadmap-wisp img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply;transform:rotate(9deg)}

/* ---------- join / final ---------- */
.final{background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;gap:7vw;padding-block:100px;flex-wrap:wrap}
.join-art{position:relative;width:min(40vw,390px)}
.join-art .aura-img{opacity:.3}
.final-art{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.2);mix-blend-mode:screen}
.final-copy{max-width:520px}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--paper);border-top:1px solid #77736d;padding:40px 8vw 27px;display:grid;grid-template-columns:1fr auto auto;gap:35px;align-items:center}
footer .footer-brand{color:var(--paper)}
.footer-brand span{color:var(--ink);background:var(--paper);padding:0 3px}
footer nav a{color:var(--paper)}
footer .sketch-icon{color:var(--paper);border-color:var(--paper)}
footer .sketch-icon:hover{background:var(--paper);color:var(--ink)}
footer p{grid-column:1/-1;border-top:1px solid #77736d;margin:0;padding-top:20px;font:9px 'Special Elite';color:#aaa59c}

/* ---------- toast ---------- */
.toast{position:fixed;z-index:80;right:25px;bottom:90px;background:var(--ink);color:var(--paper);font:11px 'Special Elite';padding:14px 18px;transform:translateY(170px) rotate(2deg);transition:.35s;box-shadow:4px 4px 0 #77736d}
.toast.show{transform:translateY(0) rotate(-2deg)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(35px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.gallery-grid .reveal:nth-child(1){transition-delay:0s}
.gallery-grid .reveal:nth-child(2){transition-delay:.08s}
.gallery-grid .reveal:nth-child(3){transition-delay:.16s}
.gallery-grid .reveal:nth-child(4){transition-delay:.24s}
.gallery-grid .reveal:nth-child(5){transition-delay:.32s}
.steps .reveal:nth-child(4){transition-delay:0s}
.steps .reveal:nth-child(5){transition-delay:.1s}
.steps .reveal:nth-child(6){transition-delay:.2s}
.steps .reveal:nth-child(7){transition-delay:.3s}

/* ---------- tilt (3D mouse parallax on cards) ---------- */
.tilt{transform-style:preserve-3d;transition:transform .15s ease-out}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .gallery-grid{grid-template-columns:1fr 1fr}
  .card-large{grid-column:1/3;grid-row:1}
  .card-large picture{min-height:340px}
}
@media(max-width:800px){
  .topbar{height:66px;padding:0 5vw}
  .topbar nav{display:none}
  .brand{font-size:23px}
  .section{padding:95px 7vw}
  .hero{display:flex;flex-direction:column;padding-top:45px;min-height:auto}
  .hero-copy{width:100%}
  .hero-stage{width:100%;max-width:420px;margin:25px auto 0}
  .scroll-mark{display:none}
  .marquee-track span{font-size:16px}
  .lore{display:flex;flex-direction:column;gap:45px}
  .lore-art{width:86%}
  .gallery-grid{grid-template-columns:1fr}
  .card-large{grid-column:1;grid-row:auto}
  .card{display:block}
  .card picture{min-height:0}
  .card img,.card-large picture{height:auto;max-height:420px;min-height:0}
  .card-flip .flip-inner{min-height:220px}
  .how-heading{text-align:left}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(5){border-right:0}
  .step:nth-child(-n+5):nth-child(n+4){border-bottom:var(--line)}
  .dex-top{display:block}
  .chart-wrap{height:430px}
  .roadmap{padding-bottom:155px}
  .path{padding-left:30px}
  .milestone:nth-of-type(even){margin-left:0}
  .milestone i{left:-43px}
  .roadmap-wisp{width:180px}
  .final{flex-direction:column;padding-block:70px;text-align:center}
  .join-art{width:210px}
  .final-copy{text-align:center}
  .final .ca-card{text-align:left}
  .final-socials{justify-content:center}
  footer{grid-template-columns:1fr auto;gap:20px}
  footer nav{display:none}
}
@media(max-width:420px){
  h1{font-size:60px}
  h2{font-size:49px}
  .steps{grid-template-columns:1fr}
  .step{border-right:0!important;border-bottom:var(--line)}
  .step:last-child{border-bottom:0}
  .ca-card strong{font-size:9px}
  .chart-wrap{height:360px}
}