/* ROARING SAMMI · reskin of the GMECAT zine system: cream paper, red block, ink type. */
:root{--red:#ef282f;--cream:#f8f5e9;--ink:#171715;--muted:#c0bdb4;--display:'Anton',Impact,sans-serif;--body:'DM Sans',Arial,sans-serif;--mono:'Space Mono',monospace;
--ease-out:cubic-bezier(.16,1,.3,1);--page-progress:0;--hero-drift:0px;--hero-turn:-4deg;--lore-turn:-3deg;--lore-drift:0px;--story-progress:0;--receipt-turn:5deg;--receipt-scale:.94;--outro-x:70px;--join-x:90px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:16px}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:3px solid #1251ff;outline-offset:5px}
::selection{color:var(--cream);background:var(--ink)}
img{max-width:100%}
.skip{position:fixed;top:-100px;z-index:30;background:var(--cream);padding:20px}
.skip:focus{top:10px}
.scroll-progress{position:fixed;z-index:50;top:0;left:0;height:4px;width:100%;background:var(--red);transform:scaleX(var(--page-progress));transform-origin:left;pointer-events:none;mix-blend-mode:difference}

/* header */
.header{position:relative;z-index:10;height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 4.5%;border-bottom:2px solid var(--ink);gap:30px;background:var(--cream)}
.brand{font-family:var(--display);font-size:35px;letter-spacing:-1.3px;white-space:nowrap}
.brand span{color:var(--red)}
.header nav{display:flex;gap:25px;font-weight:700;font-size:14px}
.header nav a{padding:14px 0;border-bottom:2px solid transparent}
.header nav a:hover,.header nav a.is-active{border-color:var(--red)}
.menu-toggle{display:none;background:transparent;border:2px solid var(--ink);width:44px;height:44px;font-size:20px}
.mobile-nav{display:grid;background:var(--cream);border-bottom:2px solid var(--ink);padding:10px 5% 18px}
.mobile-nav a{padding:14px 0;font-weight:700;border-bottom:1px solid #17171522}
.mobile-nav[hidden]{display:none}

/* buttons */
.button{display:inline-flex;min-height:58px;padding:0 27px;gap:32px;align-items:center;justify-content:space-between;border:2px solid var(--ink);background:var(--red);color:var(--ink);font-size:14px;font-weight:900;transition:transform .18s,box-shadow .18s;white-space:nowrap}
.button span{font-size:23px}
.button:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink)}
.button.small{min-height:45px;padding:0 19px;font-size:12px;gap:24px}
.button.small span{font-size:18px}
.cream{background:var(--cream)}
.dark{background:var(--ink);color:var(--cream)}
.outline{background:transparent}
.button[disabled],.button[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.button[disabled]:hover,.button[aria-disabled="true"]:hover{transform:none;box-shadow:none}
.text-link{display:inline-flex;gap:14px;align-items:center;font-size:12px;font-weight:900;min-height:44px;border-bottom:1px solid currentColor}
.text-link:hover{opacity:.7}
.text-link.light{color:var(--cream)}
.text-link[aria-disabled="true"]{opacity:.5;cursor:not-allowed}

/* hero */
.hero{position:relative;background:radial-gradient(ellipse at 76% 38%,#ff6b54 0,transparent 54%),var(--red);padding:23px 4.5% 55px;overflow:hidden}
.hero-top,.section-heading{display:flex;justify-content:space-between;gap:20px}
.eyebrow{font:700 12px/1.5 var(--mono);letter-spacing:1.2px}
.hero-layout{display:grid;grid-template-columns:1.05fr 1fr;max-width:1500px;margin:auto;min-height:610px}
.hero-copy{padding:49px 0 35px;position:relative;z-index:2}
.tag{display:inline-block;font:700 11px var(--mono);letter-spacing:1px;border:1.5px solid var(--ink);padding:8px 11px;transform:rotate(-2deg)}
h1{font-family:var(--display);font-weight:400;line-height:1.01;font-size:clamp(68px,7.5vw,112px);letter-spacing:-1.5px;margin:22px 0 21px}
.hero-line{display:block}
.motion-ready .hero-line{animation:headline-in .95s var(--ease-out) both}
.motion-ready .hero-line:nth-child(2){animation-delay:.09s}
.motion-ready .hero-line:nth-child(3){animation-delay:.18s}
.motion-ready .hero-copy>p,.motion-ready .hero-actions{animation:headline-in 1s .3s var(--ease-out) both}
.footer-word{color:var(--cream);text-shadow:3px 3px 0 var(--ink)}
.period{color:var(--ink);text-shadow:none}
.hero-copy>p{font-size:18px;line-height:1.5;font-weight:600;margin:0 0 26px}
.hero-actions{display:flex;align-items:center;gap:28px}
.micro{font:700 10px var(--mono);margin-top:20px;letter-spacing:.4px}
.hero-art{position:relative;display:flex;align-items:center;justify-content:center;min-width:0}
.hero-art:before{content:'';position:absolute;inset:14% 2% 13%;border:1px solid #17171530;border-radius:50%;transform:rotate(-25deg);pointer-events:none}
.main-cat{width:92%;max-width:none;height:auto;position:relative;margin:30px 0 0;transform:translate3d(0,var(--hero-drift),0) rotate(var(--hero-turn));will-change:transform;filter:drop-shadow(14px 18px 0 #17171522)}
.art-note{position:absolute;right:15px;top:35px;z-index:2;font:700 17px/1.3 var(--mono);transform:rotate(8deg);animation:note-float 5s ease-in-out infinite}
.sticker{position:absolute;left:-10px;bottom:69px;width:129px;height:129px;border:2px solid var(--ink);border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;flex-direction:column;transform:rotate(-13deg);box-shadow:4px 4px 0 var(--ink);animation:sticker-rock 6s ease-in-out infinite;z-index:2}
.sticker span{font:700 10px var(--mono);max-width:90px;text-align:center}
.sticker strong{font-family:var(--display);font-size:34px;line-height:1.2}
.image-caption{position:absolute;bottom:28px;right:5px;font:700 10px var(--mono)}
.contract{max-width:1500px;margin:10px auto 0;display:flex;align-items:center;gap:24px;border-top:1px solid #17171580;padding-top:20px}
.contract-label{font:700 11px var(--mono);letter-spacing:.5px;flex-shrink:0}
.contract code{font:12px var(--mono);overflow-wrap:anywhere}
.contract code.is-tba{font-weight:700}
.contract button{margin-left:auto;display:flex;align-items:center;gap:9px;white-space:nowrap;padding:9px 12px;background:transparent;border:1px solid var(--ink);font:700 11px var(--mono);min-height:44px;color:var(--ink)}
.contract button:hover{background:var(--cream)}
.contract button[disabled]{opacity:.5;cursor:not-allowed}
.contract svg{width:17px;height:17px}

/* sections */
.section{padding:40px 4.5% 78px}
.section-heading{padding-bottom:34px;border-bottom:1px solid #17171544}
h2{font:400 clamp(44px,4.3vw,66px)/1.06 var(--display);letter-spacing:-.5px;margin:0 0 25px}
h3{font:24px var(--display);margin:0 0 10px}

/* vote */
.vote-section{position:relative;background:#171715;color:var(--cream);padding-top:50px;padding-bottom:90px;border-radius:45px 45px 0 0;margin-top:-25px;z-index:2}
.vote-section .section-heading{border-color:#ffffff29;padding-bottom:25px}
.vote-live{font:11px var(--mono);display:flex;align-items:center;gap:9px;letter-spacing:1px;color:#c5c2b8}
.vote-live i{width:7px;height:7px;background:#b6b1a4;border-radius:50%}
.vote-live.connected i{background:#cfff83;box-shadow:0 0 14px #cfff8350}
.vote-live.local i{background:#fff0bf;box-shadow:0 0 14px #fff0bf50}
.vote-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;padding:44px 0 37px}
.vote-heading h2{font-size:clamp(44px,5.1vw,77px);line-height:1.05;margin:0}
.vote-heading h2 span{color:var(--red)}
.vote-heading p{font-size:17px;line-height:1.65;margin:0 0 15px;color:#ddd8ca}
.vote-anonymous{font:11px/1.6 var(--mono);color:#a8a599;letter-spacing:.4px}
.vote-board{padding:25px;border:1px solid #ffffff26;background:linear-gradient(140deg,#252522,#1c1c19);box-shadow:0 14px 48px #0002}
.vote-board-top{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:0 0 25px}
.vote-board-top>span:first-child{font:13px/1.5 var(--mono);font-weight:700}
.vote-board-top>.eyebrow{font-size:10px;color:#bdb9ae;letter-spacing:.5px}
.vote-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vote-option{--vote-color:#ff5459;--share:0;position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;text-align:left;min-height:355px;padding:23px 21px 19px;border:1px solid #ffffff30;color:var(--cream);background:#171715;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s}
.vote-option[data-choice="100m"]{--vote-color:#fff0bf}
.vote-option[data-choice="1b"]{--vote-color:#b7d8fa}
.vote-option:not(:disabled):hover{transform:translateY(-5px);border-color:var(--vote-color);box-shadow:0 7px 0 #0003}
.vote-option.is-selected{border:2px solid var(--vote-color);padding:22px 20px 18px}
.vote-option:disabled{cursor:default}
.vote-board[aria-busy="true"] .vote-option:disabled{cursor:wait}
.vote-card-top{display:flex;gap:7px;justify-content:space-between;align-items:center;min-height:25px;position:relative;z-index:2}
.vote-rank{font:10px/1.4 var(--mono);letter-spacing:.3px;color:#c8c2b8}
.vote-badge{background:var(--vote-color);color:#171715;font:700 9px/1 var(--mono);padding:7px;white-space:nowrap}
.vote-badge[hidden]{display:none}
.vote-percent{display:block;position:relative;z-index:2;font:clamp(64px,6.8vw,100px)/1.15 var(--display);letter-spacing:-2px;margin:13px 0 100px;text-shadow:0 1px 15px #171715aa}
.vote-percent small{font-size:.4em;letter-spacing:-1px;color:var(--vote-color);margin-left:5px}
.vote-heat{position:absolute;right:20px;top:88px;font-size:22px;z-index:2;opacity:0;transition:opacity .4s}
.vote-option.is-leading .vote-heat{opacity:1}
.vote-chart{position:absolute;left:0;right:0;top:80px;bottom:92px;z-index:-1;overflow:hidden}
.vote-fill{position:absolute;inset:0;transform:scaleY(var(--share));transform-origin:bottom;background:linear-gradient(to top,color-mix(in srgb,var(--vote-color) 48%,transparent),color-mix(in srgb,var(--vote-color) 18%,transparent));border-top:3px solid var(--vote-color);transition:transform .85s cubic-bezier(.22,1,.36,1)}
.vote-chart-lines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 39px,#ffffff0b 39px,#ffffff0b 40px)}
.vote-card-bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:2;border-top:1px solid #ffffff25;padding-top:19px}
.vote-card-bottom strong{display:block;font:clamp(34px,3.8vw,52px)/1 var(--display);letter-spacing:-.5px}
.vote-card-bottom small{display:block;font:10px var(--mono);letter-spacing:1px;margin-top:8px;color:#b9b3a9}
.vote-action{font:700 10px var(--mono);display:flex;align-items:center;gap:13px;color:var(--vote-color)}
.vote-action b{font:25px var(--body)}
.vote-option.is-leading .vote-rank{color:var(--vote-color)}
.vote-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:22px}
.vote-bottom p{margin:0;font-size:14px;line-height:1.6;max-width:570px;color:#e0dacb}
.vote-bottom>span{font:10px/1.5 var(--mono);color:#a9a497;text-align:right}
.vote-bottom button{background:transparent;border:1px solid #f8f5e950;color:var(--cream);font:11px var(--mono);padding:12px;min-height:44px;white-space:nowrap}
.vote-bottom button:hover{border-color:var(--cream)}
.vote-bottom button[hidden]{display:none}

/* ticker */
.ticker{position:relative;margin-top:-20px;z-index:3;transform:rotate(-2deg) scale(1.025);background:var(--ink);color:var(--cream);overflow:hidden;border:3px solid var(--ink);border-width:3px 0;box-shadow:0 12px 0 #17171510}
.ticker-track{display:flex;width:max-content;animation:ticker-loop 28s linear infinite}
.ticker-track>div{display:flex;align-items:center;gap:34px;padding:19px 17px;width:max-content;flex-shrink:0;font:30px var(--display);letter-spacing:.3px}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker b{color:var(--red);font-size:31px;display:inline-block;animation:asterisk-turn 12s linear infinite}

/* lore */
.lore{padding-top:85px;padding-bottom:130px;position:relative;background:var(--cream)}
.lore-grid{display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:center;padding:65px 0 56px}
.lore-image{position:relative;border:2px solid var(--ink);transform:translate3d(0,var(--lore-drift),0) rotate(var(--lore-turn));will-change:transform;background:#fffdf3;box-shadow:8px 8px 0 var(--ink)}
.lore-image img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover}
.image-label{display:block;text-align:center;font:700 11px var(--mono);padding:17px;border-top:2px solid var(--ink)}
.lore-copy h2{font-size:clamp(48px,5vw,76px)}
.lore-copy h2 span{color:var(--red)}
.lore-copy p{font-size:16px;line-height:1.75;margin:0 0 16px;max-width:490px}
.lore-copy .lore-punch{font-weight:800;line-height:1.5;margin-top:24px}
.aside{font-size:12px;color:#66645d}
.chapters{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.chapters article{display:flex;gap:20px;padding:29px 27px;border-right:1px solid var(--ink);transition:background .3s,transform .4s var(--ease-out)}
.chapters article:first-child{padding-left:0}
.chapters article:last-child{border:0;padding-right:0}
.chapters article:hover{background:#ef282f0a;transform:translateY(-5px)}
.chapter-no{font:35px var(--display);color:var(--red);transition:transform .5s var(--ease-out)}
.chapters article:hover .chapter-no{transform:rotate(-10deg) scale(1.15)}
.chapters p{font-size:14px;line-height:1.6;margin:0}

/* evidence */
.origin{position:relative;padding-top:70px;padding-bottom:0;background:var(--ink);color:var(--cream);border-radius:64px 64px 0 0;margin-top:-64px;z-index:2}
.origin .section-heading{border-color:#ffffff40}
.origin-scroll{height:190vh;min-height:1100px}
.origin-stage{display:grid;grid-template-columns:1.03fr 1fr;gap:7%;align-items:center;position:sticky;top:30px;min-height:min(850px,calc(100vh - 40px));padding:65px 0}
.evidence-visual{min-width:0;perspective:1100px}
.evidence-title,.evidence-caption{display:flex;align-items:center;justify-content:space-between;gap:20px;font:11px/1.5 var(--mono);color:#b6b3a9}
.evidence-title{margin:0 0 30px}
.record-status{display:flex;align-items:center;gap:8px;font-size:10px;white-space:nowrap}
.record-status i{width:6px;height:6px;border-radius:50%;background:var(--red)}
.receipt{display:block;width:100%;margin:0;background:var(--cream);color:var(--ink);border:2px solid #eee9da;box-shadow:12px 12px 0 var(--red);transform:rotate(var(--receipt-turn)) scale(var(--receipt-scale));transition:box-shadow .3s;will-change:transform}
.receipt:hover{box-shadow:17px 17px 0 var(--red)}
.receipt-header,.receipt-footer{display:flex;align-items:center;justify-content:space-between;padding:18px;font:700 11px var(--mono);gap:20px}
.receipt a{display:block}
.receipt img{display:block;width:100%;height:auto;aspect-ratio:680/390;object-fit:contain;background:#fff}
.receipt-footer strong{font-family:var(--body);font-size:14px}
.evidence-caption{margin:37px 0 22px;font-size:10px}
.sound-bars{display:flex;align-items:center;height:28px;gap:4px}
.sound-bars i{display:block;width:4px;height:24px;background:var(--red);transform-origin:50% 50%;animation:equalizer 1.1s ease-in-out infinite alternate}
.sound-bars i:nth-child(2n){animation-delay:-.7s}
.sound-bars i:nth-child(3n){animation-delay:-.3s}
.sound-bars i:nth-child(4n){animation-delay:-.9s}
.story-timeline{height:2px;background:#ffffff20}
.story-timeline span{display:block;height:100%;width:100%;background:var(--red);transform:scaleX(var(--story-progress));transform-origin:left}
.tag.light{border-color:var(--cream);font-size:10px;letter-spacing:.4px;margin-bottom:23px}
.secret-story h2{font-size:clamp(42px,4.1vw,63px);margin-bottom:24px}
.secret-story h2 span{color:var(--red)}
.secret-steps{margin-bottom:27px}
.secret-step{display:flex;gap:18px;padding:17px 0;border-bottom:1px solid #ffffff20;opacity:.52;transition:opacity .35s,transform .5s var(--ease-out)}
.secret-step.active{opacity:1;transform:translateX(8px)}
.step-index{font:24px var(--display);color:var(--red);flex-shrink:0}
.secret-step h3{font-size:20px;margin-bottom:7px}
.secret-step p{font-size:14px;line-height:1.65;margin:0;color:#e1ddd3}
.origin-links{display:flex;align-items:flex-start;flex-direction:column;gap:17px;margin-top:25px}
.origin-outro{overflow:hidden;padding:12px 0 48px;border-bottom:1px solid #ffffff25;white-space:nowrap}
.origin-outro span{display:block;font:clamp(72px,12.3vw,190px)/1.1 var(--display);letter-spacing:-2px;color:var(--cream);transform:translate3d(var(--outro-x),0,0)}

/* contract */
.ca-section{position:relative;background:var(--ink);color:var(--cream);padding-top:50px;padding-bottom:145px}
.ca-section .section-heading{border-color:#ffffff40}
.ca-heading{margin-top:65px}
.ca-heading h2 span{color:var(--red)}
.ca-heading p{color:#ccc8be;line-height:1.75;max-width:490px}
.ca-panel{margin-top:34px;padding:26px 28px;border:1px solid #eeeadb70;background:linear-gradient(115deg,#22221f,var(--ink));box-shadow:8px 8px 0 var(--red);transition:border-color .3s}
.ca-panel:hover{border-color:var(--cream)}
.ca-panel-label{display:flex;justify-content:space-between;font:700 11px var(--mono);letter-spacing:.5px;color:#b6b3a9;margin-bottom:18px}
.ca-panel code{display:block;font:clamp(17px,2.16vw,32px)/1.3 var(--mono);overflow-wrap:anywhere;margin-bottom:26px}
.ca-panel code.is-tba{color:#ff8a8f}
.ca-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.ca-actions .button{color:var(--ink)}
.ca-actions .button:hover{box-shadow:5px 5px 0 var(--red)}
.ca-actions .button svg{width:18px;height:18px;margin-left:12px}
.ca-actions .text-link{color:var(--cream)}
.affiliation{font-size:12px;text-align:center;color:#ccc8be;border-top:1px solid #ffffff30;padding-top:28px;margin-top:40px}

/* join */
.join{isolation:isolate;position:relative;overflow:hidden;text-align:center;padding-top:100px;padding-bottom:32px;margin-top:-65px;border-radius:64px 64px 0 0;background:radial-gradient(ellipse at 50% 50%,#ff4d44,transparent 70%),var(--red)}
.join-ghost{position:absolute;z-index:-1;top:20px;left:-20%;white-space:nowrap;font:clamp(140px,24vw,360px)/1 var(--display);color:transparent;-webkit-text-stroke:1px #17171528;transform:translate3d(var(--join-x),0,0);pointer-events:none}
.join h2{position:relative;font-size:clamp(75px,10vw,145px);line-height:1.02;margin:26px 0 20px}
.join h2 span{color:var(--cream);text-shadow:3px 3px 0 var(--ink)}
.join>p{font-size:18px;line-height:1.5;font-weight:600}
.join-actions{display:flex;justify-content:center;gap:18px;margin:28px 0 80px;flex-wrap:wrap}
.join-bottom{display:flex;justify-content:space-between;font:700 11px var(--mono);border-top:1px solid #17171566;padding-top:26px}

/* footer */
footer{background:var(--cream);padding:48px 4.5% 15px}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:30px;border-bottom:1px solid #17171544}
.footer-top>span{font:700 11px/1.6 var(--mono);margin-right:auto;margin-left:35px}
.back-top{font:700 11px var(--mono);padding:15px 0}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;font:10px var(--mono);padding-top:10px}
.copyright{display:flex;align-items:center;gap:2px}
.copyright button{background:transparent;border:0;width:44px;height:44px;font-size:18px;border-radius:50%;position:relative;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
.copyright button.holding{background:var(--red);animation:hold .8s linear}
.footer-hint{color:#6e6a62;font-size:11px}

/* dialog + toast */
dialog{padding:0;max-width:min(620px,calc(100% - 32px));width:620px;border:3px solid var(--ink);background:var(--cream);color:var(--ink);box-shadow:12px 12px 0 var(--red)}
dialog::backdrop{background:#000b;backdrop-filter:blur(7px)}
.dialog-bar{display:flex;justify-content:space-between;align-items:center;padding:9px 12px 9px 20px;font:700 12px var(--mono);background:var(--red);border-bottom:3px solid var(--ink)}
.dialog-bar button{font-size:31px;line-height:1;background:transparent;border:0;width:44px;height:44px}
.cat-screen{background:var(--red);min-height:250px;display:grid;place-items:center;position:relative;overflow:hidden}
.cat-screen img{display:block;width:70%;height:auto;margin-top:20px;animation:roar-in .6s cubic-bezier(.34,1.56,.64,1) both}
.psps-bubble{position:absolute;top:22px;right:28px;font:34px var(--display);background:var(--cream);color:var(--red);padding:6px 16px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transform:rotate(6deg)}
.dialog-footer{padding:22px;text-align:center}
.dialog-footer h2{font-size:39px;margin-bottom:8px}
.dialog-footer p{margin:0 0 14px}
.dialog-footer>span{font:10px var(--mono)}
#toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:var(--cream);padding:15px 22px;box-shadow:4px 4px 0 var(--red);font-size:14px;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;text-align:center}
#toast.visible{opacity:1;transform:translate(-50%,0)}

/* keyframes */
@keyframes hold{from{box-shadow:0 0 0 0 var(--red)}to{box-shadow:0 0 0 12px transparent}}
@keyframes headline-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes note-float{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-8px)}}
@keyframes sticker-rock{0%,100%{transform:rotate(-13deg)}50%{transform:rotate(-7deg)}}
@keyframes ticker-loop{to{transform:translateX(-50%)}}
@keyframes asterisk-turn{to{transform:rotate(360deg)}}
@keyframes equalizer{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
@keyframes roar-in{from{transform:scale(.6) translateY(40px);opacity:0}to{transform:none;opacity:1}}

@media(min-width:1550px){.header,.hero,.section,footer{padding-left:max(4.5%,calc((100vw - 1460px)/2));padding-right:max(4.5%,calc((100vw - 1460px)/2))}}
@media(max-width:1000px){.vote-card-top{flex-wrap:wrap;min-height:42px}.vote-option{padding:18px 15px}.vote-option.is-selected{padding:17px 14px}.vote-card-bottom{gap:6px}.vote-action{gap:6px;font-size:9px}.vote-board-top>.eyebrow{max-width:36%;text-align:right}}
@media(max-width:950px){.header nav{gap:20px}.hero-layout{min-height:550px}.hero-copy{padding-top:40px}h1{font-size:9vw}.hero-actions{gap:18px;flex-wrap:wrap}.hero-art .sticker{left:0;bottom:58px;width:105px;height:105px}.sticker strong{font-size:26px}.sticker span{font-size:8px}.art-note{font-size:13px}.hero-edition{display:none}.micro{font-size:8px}.lore-grid{gap:6%}.chapters article{padding:23px 16px;gap:12px}.chapter-no{font-size:28px}.contract{gap:14px}.contract-label{font-size:9px}.contract code{font-size:10px}.section-heading .eyebrow:last-child{max-width:50%;text-align:right}.origin-stage{grid-template-columns:1fr;gap:40px;position:static;min-height:0}.origin-scroll{height:auto;min-height:0}}
@media(max-width:700px){html{scroll-padding-top:20px}.header{height:74px;padding:0 5%;gap:12px}.brand{font-size:30px}.header nav{display:none}.header .small{margin-left:auto;min-height:42px;padding:0 12px;font-size:10px;gap:10px}.menu-toggle{display:grid;place-items:center}.hero{padding:18px 5% 40px}.hero-layout{grid-template-columns:1fr;min-height:0}.hero-copy{padding:26px 0 10px}h1{font-size:15vw}.hero-copy>p{font-size:16px}.hero-art{margin-top:10px}.main-cat{width:86%}.hero-art:before{display:none}.contract{flex-wrap:wrap}.contract button{margin-left:0}.section{padding:36px 5% 60px}.section-heading{flex-direction:column;gap:6px}.section-heading .eyebrow:last-child{max-width:none;text-align:left}.vote-section{border-radius:28px 28px 0 0;padding:35px 5% 60px;margin-top:-20px}.vote-heading{display:block;padding:30px 0}.vote-heading h2{font-size:48px}.vote-heading>div{margin-top:21px}.vote-heading p{font-size:16px}.vote-heading p br{display:none}.vote-board{padding:16px}.vote-board-top{align-items:flex-start;gap:12px;padding-bottom:18px}.vote-board-top>span:first-child{font-size:11px}.vote-board-top>.eyebrow{font-size:8px;max-width:43%}.vote-options{grid-template-columns:1fr;gap:12px}.vote-option{min-height:170px;padding:15px 17px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;column-gap:16px}.vote-option.is-selected{padding:14px 16px}.vote-card-top{grid-column:1 / -1;min-height:25px;flex-wrap:nowrap}.vote-percent{grid-row:2;grid-column:2;margin:7px 0 0;align-self:center;font-size:66px}.vote-heat{display:none}.vote-chart{top:45px;bottom:0;right:0;left:0}.vote-fill{transform:scaleX(var(--share));transform-origin:left;border-top:0;border-right:2px solid var(--vote-color);background:linear-gradient(to right,color-mix(in srgb,var(--vote-color) 10%,transparent),color-mix(in srgb,var(--vote-color) 30%,transparent))}.vote-chart-lines{background:repeating-linear-gradient(90deg,transparent 0,transparent 39px,#ffffff0a 39px,#ffffff0a 40px)}.vote-card-bottom{grid-row:2;grid-column:1;margin:0;align-self:center;border-top:0;padding-top:14px;display:block}.vote-card-bottom strong{font-size:39px}.vote-card-bottom small{font-size:9px;margin-top:5px}.vote-action{font-size:10px;margin-top:9px;gap:8px}.vote-action b{font-size:18px;line-height:1}.vote-bottom{flex-wrap:wrap;gap:12px;padding-top:16px}.vote-bottom p{font-size:13px}.vote-bottom>span{width:100%;text-align:left;font-size:9px}.vote-anonymous{font-size:10px}.ticker-track>div{font-size:22px;gap:20px}.lore{padding-top:60px;padding-bottom:70px}.lore-grid{grid-template-columns:1fr;gap:40px;padding:40px 0}.lore-image{transform:rotate(-2deg)}.chapters{grid-template-columns:1fr}.chapters article{border-right:0;border-bottom:1px solid var(--ink);padding:20px 0}.chapters article:last-child{border-bottom:0}.origin{border-radius:28px 28px 0 0;margin-top:-28px;padding-top:50px}.origin-stage{padding:40px 0}.origin-outro span{font-size:20vw}.ca-section{padding-bottom:90px}.ca-heading{margin-top:40px}.ca-panel{padding:20px}.ca-actions{gap:16px}.join{border-radius:28px 28px 0 0;margin-top:-28px;padding-top:70px}.join h2{font-size:16vw}.join-actions{margin-bottom:50px}.join-actions .button{width:100%;justify-content:space-between}.join-bottom{flex-direction:column;gap:8px;text-align:left}.footer-top{flex-wrap:wrap}.footer-top>span{margin-left:0;width:100%}.footer-bottom{flex-wrap:wrap;gap:10px}}
@media(prefers-reduced-motion:reduce){.motion-ready .hero-line,.motion-ready .hero-copy>p,.motion-ready .hero-actions,.art-note,.sticker,.ticker-track,.ticker b,.sound-bars i{animation:none}html{scroll-behavior:auto}}

/* ── hover animations (Kalx) ─────────────────────────────── */
@media (hover:hover) and (pointer:fine){
  .brand{transition:letter-spacing .3s var(--ease-out)}
  .brand:hover{letter-spacing:.5px}
  .brand span{display:inline-block;transition:transform .35s var(--ease-out)}
  .brand:hover span{transform:translateY(-3px) rotate(-3deg)}
  .header nav a{transition:color .2s,transform .25s var(--ease-out)}
  .header nav a:hover{transform:translateY(-2px);color:var(--red)}
  .button span,.text-link span{display:inline-block;transition:transform .25s var(--ease-out)}
  .button:hover span,.text-link:hover span{transform:translate(4px,-4px)}
  .text-link:hover{opacity:1;color:var(--ink);border-bottom-width:2px}
  .origin .text-link:hover,.ca-actions .text-link:hover,.text-link.light:hover{color:var(--red)}
  .tag{transition:transform .35s var(--ease-out),background .2s,color .2s}
  .tag:hover{transform:rotate(2deg) scale(1.04);background:var(--ink);color:var(--cream)}
  .tag.light:hover{background:var(--cream);color:var(--ink)}
  .main-cat{transition:transform .6s var(--ease-out),filter .6s var(--ease-out);cursor:pointer}
  .hero-art:hover .main-cat{transform:translate3d(0,calc(var(--hero-drift) - 14px),0) rotate(0deg) scale(1.04);filter:drop-shadow(22px 26px 0 #17171533)}
  .hero-art:hover .sticker{animation-play-state:paused;transform:rotate(6deg) scale(1.12)}
  .sticker{transition:transform .45s var(--ease-out);cursor:pointer}
  .sticker:hover{transform:rotate(360deg) scale(1.1)!important}
  .art-note{transition:transform .4s var(--ease-out)}
  .hero-art:hover .art-note{transform:rotate(-4deg) scale(1.15)}
  .contract{transition:border-color .3s}
  .contract:hover{border-top-color:var(--ink)}
  .contract button:not([disabled]):hover{background:var(--ink);color:var(--cream)}
  .vote-board{transition:box-shadow .4s var(--ease-out),border-color .3s}
  .vote-board:hover{border-color:#ffffff55;box-shadow:0 24px 60px #0006}
  .vote-option:not(:disabled):hover .vote-percent{transform:translateX(6px);text-shadow:0 0 30px color-mix(in srgb,var(--vote-color) 60%,transparent)}
  .vote-percent{transition:transform .4s var(--ease-out),text-shadow .4s}
  .vote-option:not(:disabled):hover .vote-fill{filter:brightness(1.25)}
  .vote-option:not(:disabled):hover .vote-action b{transform:translate(4px,-4px)}
  .vote-action b{display:inline-block;transition:transform .3s var(--ease-out)}
  .ticker-track>div span{transition:color .2s}
  .ticker-track>div span:hover{color:var(--red)}
  .lore-image{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
  .lore-image:hover{transform:translate3d(0,calc(var(--lore-drift) - 10px),0) rotate(0deg);box-shadow:16px 16px 0 var(--red)}
  .lore-image .image-label{transition:background .3s,color .3s}
  .lore-image:hover .image-label{background:var(--ink);color:var(--cream)}
  .lore-copy h2 span{display:inline-block;transition:transform .4s var(--ease-out)}
  .lore-copy:hover h2 span{transform:skewX(-8deg)}
  .chapters article:hover h3{color:var(--red)}
  .chapters h3{transition:color .3s}
  .receipt{transition:transform .5s var(--ease-out),box-shadow .3s}
  .receipt:hover{transform:rotate(0deg) scale(1.02)}
  .receipt img{transition:transform .6s var(--ease-out)}
  .receipt:hover img{transform:scale(1.03)}
  .secret-step{cursor:default}
  .secret-step:hover{opacity:1;transform:translateX(12px)}
  .secret-step:hover .step-index{transform:scale(1.25) rotate(-8deg)}
  .step-index{display:inline-block;transition:transform .4s var(--ease-out)}
  .sound-bars:hover i{animation-duration:.35s}
  .ca-panel{transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s}
  .ca-panel:hover{transform:translate(-4px,-4px);box-shadow:14px 14px 0 var(--red)}
  .ca-panel code{transition:color .3s,letter-spacing .4s var(--ease-out)}
  .ca-panel:hover code:not(.is-tba){color:#fff;letter-spacing:.5px}
  .join h2 span{display:inline-block;transition:transform .5s var(--ease-out),text-shadow .5s}
  .join:hover h2 span{transform:translate(-4px,-4px) rotate(-2deg);text-shadow:8px 8px 0 var(--ink)}
  .join .button.dark:hover{background:var(--cream);color:var(--ink)}
  .join .button.outline:hover{background:var(--ink);color:var(--cream)}
  .back-top{display:inline-block;transition:transform .3s var(--ease-out),color .2s}
  .back-top:hover{transform:translateY(-4px);color:var(--red)}
  .copyright button{transition:transform .3s var(--ease-out),background .2s}
  .copyright button:hover{transform:rotate(20deg) scale(1.2);background:#ef282f22}
  .footer-hint{transition:color .3s}
  footer:hover .footer-hint{color:var(--red)}
  .eyebrow{transition:letter-spacing .35s var(--ease-out)}
  .section-heading:hover .eyebrow{letter-spacing:2.2px}
}