:root{--o:#FA7400;--w:#f2f2f2;--b:#000}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:'Exo 2',sans-serif;color:var(--w);background:#000;min-height:100vh;line-height:1.65}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:#000 url(../assets/img/bg.webp) center/cover no-repeat}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.07;background:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px);animation:scan 8s linear infinite}
@keyframes scan{to{background-position:0 300px}}
a{color:var(--o)}
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:.7rem 1.4rem;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);border-bottom:1px solid rgba(250,116,0,.35)}
.brand{font-weight:800;letter-spacing:.25em;text-decoration:none}
.top nav a{margin-left:1.2rem;text-decoration:none;color:var(--w);text-transform:uppercase;letter-spacing:.12em;font-size:.85rem}.top nav a:hover{color:var(--o)}
main{max-width:1150px;margin:0 auto;padding:1rem 1.2rem 3rem}

.logo{width:min(440px,80vw);height:auto;filter:drop-shadow(0 0 25px rgba(250,116,0,.35))}
.sec-title{text-align:center;color:var(--o);letter-spacing:.3em;font-weight:800;font-size:clamp(1.3rem,4vw,2.2rem);margin:1rem 0 1.2rem}
.center{text-align:center}.sub{opacity:.8;margin-top:-.8rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;justify-items:center}
.card{display:block;width:100%;max-width:270px;text-decoration:none;color:var(--w);background:rgba(0,0,0,.8);border:1px solid rgba(250,116,0,.45);padding:.6rem;transition:transform .25s,box-shadow .25s}
.card:hover,.card:focus-visible{transform:translateY(-5px);box-shadow:0 0 0 1px var(--o),0 0 30px rgba(250,116,0,.4)}
.card .frame{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;background:#050505}
.card .frame{overflow:hidden}.card img{width:100%;height:100%;object-fit:cover;object-position:center top}
.card h3{margin:.6rem 0 0;text-align:center;color:var(--o);letter-spacing:.15em;text-transform:uppercase}
.card p{margin:.1rem 0 .2rem;text-align:center;font-size:.85rem;opacity:.8}
.panel{background:rgba(0,0,0,.82);border:1px solid rgba(250,116,0,.4);padding:clamp(1rem,3vw,2rem);margin:1.5rem 0}
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:2rem;align-items:center}
.intro img{width:100%;max-height:75vh;object-fit:contain;cursor:zoom-in}
.intro h1{color:var(--o);font-size:clamp(2rem,6vw,3.4rem);margin:0;letter-spacing:.08em;line-height:1.1}
.meta{letter-spacing:.2em;text-transform:uppercase;opacity:.85}.meta b{color:var(--o)}
.note{border-left:3px solid var(--o);padding-left:.8rem;font-weight:600;font-size:.9rem}
.panel h2{color:var(--o);letter-spacing:.25em;margin-top:0}.lore p{text-align:left;max-width:75ch;white-space:pre-line}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#050505;cursor:zoom-in;border:1px solid #222;transition:border-color .2s}.gallery img:hover{border-color:var(--o)}
.btn{display:inline-block;padding:.6rem 1.3rem;border:1px solid var(--o);color:var(--o);text-decoration:none;letter-spacing:.15em;text-transform:uppercase;background:rgba(0,0,0,.7)}.btn:hover{background:var(--o);color:#000}
.links{display:flex;gap:.6rem;flex-wrap:wrap}
.pager{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer{text-align:center;padding:2rem;opacity:.6;font-size:.8rem}
.lightbox{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center}.lightbox[hidden]{display:none}
.lightbox img{max-width:94vw;max-height:90vh;object-fit:contain}.lightbox button{position:absolute;top:1rem;right:1.2rem;font:2.4rem 'Exo 2';color:var(--o);background:none;border:0;cursor:pointer}
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;right:0;top:0;opacity:0;pointer-events:none}
.glitch::before{color:#fff;animation:g1 6s infinite steps(1)}.glitch::after{color:var(--o);filter:brightness(1.4);animation:g2 6s infinite steps(1)}
@keyframes g1{0%,93%,100%{opacity:0;transform:none}94%{opacity:.7;transform:translate(-3px,1px);-webkit-clip-path:inset(10% 0 55% 0);clip-path:inset(10% 0 55% 0)}96%{opacity:.6;transform:translate(3px,-1px);-webkit-clip-path:inset(60% 0 10% 0);clip-path:inset(60% 0 10% 0)}}
@keyframes g2{0%,94%,100%{opacity:0;transform:none}95%{opacity:.7;transform:translate(3px,0);-webkit-clip-path:inset(40% 0 30% 0);clip-path:inset(40% 0 30% 0)}97%{opacity:.5;transform:translate(-2px,1px);-webkit-clip-path:inset(5% 0 80% 0);clip-path:inset(5% 0 80% 0)}}
.glitch-img{animation:gi 9s infinite}@keyframes gi{0%,96%,100%{transform:none;filter:drop-shadow(0 0 25px rgba(250,116,0,.35))}97%{transform:translate(-4px,1px) skewX(2deg);filter:drop-shadow(-4px 0 #FA7400) drop-shadow(4px 0 #fff)}98%{transform:translate(3px,-1px)}}
@media (max-width:760px){.intro{grid-template-columns:1fr}.top nav a{margin-left:.8rem}.brand{letter-spacing:.12em}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.card h3{font-size:.9rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

.search{display:flex;align-items:center;gap:.8rem;max-width:640px;margin:0 auto 1.6rem}
.search input{flex:1;font:inherit;font-size:1.1rem;padding:.85rem 1.1rem;color:var(--w);background:rgba(0,0,0,.85);border:1px solid var(--o);outline:none;letter-spacing:.05em}
.search input:focus{box-shadow:0 0 0 2px rgba(250,116,0,.4),0 0 25px rgba(250,116,0,.3)}.search span{color:var(--o);font-size:.85rem;white-space:nowrap}
.slot{aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px dashed rgba(250,116,0,.6);color:rgba(250,116,0,.8);text-transform:uppercase;letter-spacing:.15em;font-size:.8rem;background:rgba(0,0,0,.5)}.slot small{opacity:.7;text-transform:none;letter-spacing:0}

body[data-page=home] main{padding-top:0}
.hero{position:relative;min-height:calc(100svh - 50px);display:flex;align-items:center;justify-content:center;text-align:center;margin:0 -1.2rem}
#sparks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-in{position:relative;display:flex;flex-direction:column;align-items:center}
.hero .logo{width:min(620px,86vw,70svh)}
.intro-logo{animation:flick 1.8s steps(1) both,gi 9s 2s infinite}
@keyframes flick{0%{opacity:0;filter:blur(6px)}8%{opacity:.6}10%{opacity:0}18%{opacity:.8;transform:translateX(-6px)}20%{opacity:.1}30%{opacity:1;transform:translateX(4px) skewX(-3deg);filter:drop-shadow(-6px 0 #FA7400) drop-shadow(6px 0 #fff)}34%{opacity:.4;transform:none}45%,100%{opacity:1;transform:none;filter:drop-shadow(0 0 25px rgba(250,116,0,.35))}}
.tag{text-shadow:0 0 6px #000,0 0 12px #000;margin:.4rem 0 1.6rem;letter-spacing:.35em;text-transform:uppercase;font-size:clamp(.7rem,2vw,.9rem);opacity:0;animation:fade 1.5s 1.6s forwards}
.enter{display:inline-flex;flex-direction:column;align-items:center;color:var(--o);text-decoration:none;letter-spacing:.3em;text-transform:uppercase;font-weight:600;padding:.8rem 1.6rem;border:1px solid var(--o);background:rgba(0,0,0,.6);opacity:0;animation:fade 1.5s 2.2s forwards;transition:background .2s,color .2s}
.enter:hover{background:var(--o);color:#000}.chev{font-size:1.4rem;line-height:.6;animation:bob 1.8s infinite}
@keyframes fade{to{opacity:1}}@keyframes bob{50%{transform:translateY(5px)}}
#directory{scroll-margin-top:60px;padding-top:1rem}
@media (prefers-reduced-motion:reduce){.tag,.enter{opacity:1}#sparks{display:none}}

.gl{position:relative;display:flex;justify-content:center;overflow:hidden}
.gl img{width:100%;max-height:75vh;object-fit:contain;cursor:zoom-in;display:block}
.gl-l{position:absolute!important;left:0;top:0;width:100%!important;height:100%!important;max-height:none!important;object-fit:contain;pointer-events:none;z-index:1;-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform}
.gl-r{filter:sepia(1) saturate(10) hue-rotate(-35deg) brightness(1.1);-webkit-filter:sepia(1) saturate(10) hue-rotate(-35deg) brightness(1.1);opacity:.6;animation:glr 1s steps(1) forwards}
.gl-b{filter:sepia(1) saturate(8) hue-rotate(170deg);-webkit-filter:sepia(1) saturate(8) hue-rotate(170deg);opacity:.5;animation:glb 1s steps(1) forwards}
.gl-s1,.gl-s2,.gl-s3{animation:gls 1s steps(1) forwards}.gl-s2{animation-name:gls2}.gl-s3{animation-name:gls3}
.glitching > img:not(.gl-l){animation:glimg 1s steps(1)}
.glitching::after{z-index:2;content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(250,116,0,.06) 0 2px,transparent 2px 5px);animation:glsc 1s steps(1) forwards}
@keyframes glimg{0%{opacity:.2;transform:translate(-6px,2px)}10%{opacity:1;transform:translate(4px,-1px) skewX(4deg)}20%{transform:translate(-2px,0)}30%{opacity:.6;transform:translate(3px,1px)}45%{opacity:1;transform:translate(-1px,0) skewX(-2deg)}60%{transform:translate(1px,0)}75%,100%{transform:none;opacity:1}}
@keyframes glr{0%{transform:translate(-10px,0)}15%{transform:translate(8px,2px)}30%{transform:translate(-5px,-1px)}50%{transform:translate(3px,0)}70%{transform:translate(-1px,0);opacity:.3}85%,100%{opacity:0;transform:none}}
@keyframes glb{0%{transform:translate(10px,0)}15%{transform:translate(-7px,-2px)}30%{transform:translate(5px,1px)}50%{transform:translate(-3px,0)}70%{transform:translate(1px,0);opacity:.3}85%,100%{opacity:0;transform:none}}
@keyframes gls{0%{-webkit-clip-path:inset(12% 0 78% 0);clip-path:inset(12% 0 78% 0);transform:translateX(-24px)}12%{-webkit-clip-path:inset(55% 0 30% 0);clip-path:inset(55% 0 30% 0);transform:translateX(18px)}25%{-webkit-clip-path:inset(30% 0 62% 0);clip-path:inset(30% 0 62% 0);transform:translateX(-12px)}40%{-webkit-clip-path:inset(80% 0 8% 0);clip-path:inset(80% 0 8% 0);transform:translateX(10px)}55%{-webkit-clip-path:inset(5% 0 90% 0);clip-path:inset(5% 0 90% 0);transform:translateX(-6px)}70%,100%{-webkit-clip-path:inset(50% 0 50% 0);clip-path:inset(50% 0 50% 0);transform:none}}
@keyframes gls2{0%{-webkit-clip-path:inset(40% 0 45% 0);clip-path:inset(40% 0 45% 0);transform:translateX(20px)}10%{-webkit-clip-path:inset(70% 0 20% 0);clip-path:inset(70% 0 20% 0);transform:translateX(-30px)}22%{-webkit-clip-path:inset(18% 0 70% 0);clip-path:inset(18% 0 70% 0);transform:translateX(14px)}35%{-webkit-clip-path:inset(62% 0 30% 0);clip-path:inset(62% 0 30% 0);transform:translateX(-8px)}50%{-webkit-clip-path:inset(88% 0 2% 0);clip-path:inset(88% 0 2% 0);transform:translateX(12px)}65%,100%{-webkit-clip-path:inset(50% 0 50% 0);clip-path:inset(50% 0 50% 0);transform:none}}
@keyframes gls3{0%{-webkit-clip-path:inset(85% 0 5% 0);clip-path:inset(85% 0 5% 0);transform:translateX(-14px)}14%{-webkit-clip-path:inset(3% 0 85% 0);clip-path:inset(3% 0 85% 0);transform:translateX(26px)}28%{-webkit-clip-path:inset(45% 0 48% 0);clip-path:inset(45% 0 48% 0);transform:translateX(-18px)}42%{-webkit-clip-path:inset(25% 0 68% 0);clip-path:inset(25% 0 68% 0);transform:translateX(6px)}60%,100%{-webkit-clip-path:inset(50% 0 50% 0);clip-path:inset(50% 0 50% 0);transform:none}}
@keyframes glsc{0%{opacity:1}20%{opacity:.4}30%{opacity:.9}55%{opacity:.5}80%,100%{opacity:0}}

.gl-l{-webkit--webkit-clip-path:inset(0);clip-path:inset(0)}
@supports not (mix-blend-mode:screen){.gl-r,.gl-b{filter:sepia(1) saturate(8) hue-rotate(170deg);-webkit-filter:sepia(1) saturate(8) hue-rotate(170deg);opacity:.5;animation:glb 1s steps(1) forwards}}

.scr{position:relative}
.scr-ov{position:absolute;left:0;top:0;right:0;pointer-events:none;color:inherit}
.scrambling .scr-real{visibility:hidden}
.scrambling::before,.scrambling::after{display:none}
.scrambling .scr-ov{animation:scj .12s steps(2) infinite;text-shadow:-2px 0 rgba(255,255,255,.75),2px 0 rgba(250,116,0,.9)}
.scr-ov .o{color:#fff;font-weight:800;text-shadow:0 0 8px #FA7400}.scr-ov .fl{opacity:.5}
.scr-ov .o:nth-of-type(odd){color:#FA7400;text-shadow:2px 0 #fff}
@keyframes scj{0%{-webkit-transform:translate(1px,0);transform:translate(1px,0)}50%{-webkit-transform:translate(-2px,1px);transform:translate(-2px,1px)}100%{-webkit-transform:translate(0,-1px);transform:translate(0,-1px)}}
.note.scr .scr-ov{left:.8rem}
.scr-ov b:not(.o){color:var(--o)}