@import url('https://fonts.googleapis.com/css2?family=Electrolize&family=Inter:wght@300;400;500;600&display=swap');

:root { --ink:#07070a; --paper:#eceee9; --acid:#d7ff24; --pink:#f214a8; --muted:#8b8c91; --line:rgba(255,255,255,.16); }
* { box-sizing:border-box; }
html { background:var(--ink); color:var(--paper); scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--ink); color:var(--paper); font-family:Inter,Arial,sans-serif; overflow-x:hidden; }
body.menu-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
img { display:block; max-width:100%; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.noise { position:fixed; z-index:90; inset:0; pointer-events:none; opacity:.045; 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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.site-header { position:fixed; z-index:100; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:flex-start; padding:18px 24px; mix-blend-mode:difference; }
.brand { position:relative; display:block; width:120px; height:76px; }
.brand-wordmark { position:absolute; width:78px; top:1px; left:42px; }
.brand-tongue { position:absolute; width:80px; top:1px; left:-44px; }
.menu-toggle { width:52px; height:52px; display:grid; align-content:center; gap:6px; padding:12px; background:transparent; border:0; cursor:pointer; }
.menu-toggle span:not(.sr-only) { display:block; width:28px; height:2px; background:#fff; transition:.3s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
.site-menu { position:fixed; z-index:95; inset:0; padding:120px max(8vw,30px) 40px; background:rgba(7,7,10,.97); visibility:hidden; opacity:0; transform:translateY(-20px); transition:.35s; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.site-menu.is-open { visibility:visible; opacity:1; transform:none; }
.site-menu > a,.nft-menu-toggle { border:0; background:none; font-family:Electrolize,sans-serif; text-transform:uppercase; font-size:clamp(2.8rem,8vw,8rem); line-height:.9; transition:color .2s, transform .2s; cursor:pointer; }
.site-menu > a:hover { color:var(--acid); transform:translateX(10px); }
.nft-menu { width:min(760px,100%); text-align:right; }
.nft-menu-toggle { width:100%; text-align:right; padding:0; }
.nft-menu-toggle span { display:inline-block; color:var(--acid); font-size:.5em; transition:transform .25s; }
.nft-menu.is-open .nft-menu-toggle span { transform:rotate(45deg); }
.nft-submenu { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .3s,opacity .25s; }
.nft-submenu::before { content:""; min-height:0; }
.nft-submenu { overflow:hidden; }
.nft-menu.is-open .nft-submenu { grid-template-rows:1fr; opacity:1; padding:12px 0 14px; }
.nft-submenu a { display:block; padding:7px 0; color:#aaa; font:400 clamp(.8rem,1.4vw,1.15rem) Electrolize,sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.nft-submenu a:hover { color:var(--acid); }
#app:focus { outline:none; }
.hero { min-height:100svh; position:relative; display:grid; place-items:center; overflow:hidden; }
.hero video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.15) contrast(1.08); }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.3),rgba(0,0,0,0) 60%), linear-gradient(0deg,rgba(0,0,0,.22),transparent 50%); }
.hero h1 { position:relative; z-index:1; width:100%; margin:0; color:var(--acid); font-family:Electrolize,sans-serif; font-weight:400; font-size:clamp(2.7rem,6.5vw,7rem); line-height:1.15; text-align:center; text-shadow:0 0 20px rgba(215,255,36,.2); }
.hero h1 span { display:block; }
.hero h1 span:last-child { display:flex; align-items:center; justify-content:center; gap:.1em; }
.hero h1 b { min-width:0; text-align:center; font-weight:400; }
.hero h1 i { width:3px; height:.9em; background:var(--acid); animation:blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity:0; } }
.scroll-cue { position:absolute; z-index:2; bottom:22px; left:50%; transform:translateX(-50%); display:grid; gap:4px; text-align:center; color:var(--acid); font-family:Electrolize,sans-serif; text-transform:uppercase; font-size:.75rem; letter-spacing:.08em; }
.scroll-cue span:last-child { font-size:2rem; animation:bob 1.4s ease-in-out infinite; }
@keyframes bob { 50% { transform:translateY(7px); } }
.work { padding:120px 5vw; background:linear-gradient(135deg,#08080b 0%,#0c0912 45%,#060708 100%); }
.section-intro { display:grid; grid-template-columns:1fr 2fr; gap:40px; align-items:start; margin-bottom:90px; }
.eyebrow,.page-kicker { color:var(--acid); text-transform:uppercase; letter-spacing:.13em; font-size:.72rem; }
.section-intro h2 { margin:0; font-family:Electrolize,sans-serif; font-size:clamp(3.5rem,9vw,9rem); line-height:.82; font-weight:400; letter-spacing:-.05em; }
.section-intro em { color:transparent; font-style:normal; -webkit-text-stroke:1px var(--pink); }
.filters { position:sticky; top:0; z-index:20; display:flex; gap:6px; flex-wrap:wrap; padding:15px 0; margin-bottom:36px; background:linear-gradient(var(--ink) 70%,transparent); }
.filters button { border:1px solid var(--line); background:rgba(7,7,10,.8); padding:10px 16px; font:500 .72rem/1 Electrolize,sans-serif; letter-spacing:.08em; cursor:pointer; transition:.2s; }
.filters button:hover,.filters button.active { border-color:var(--acid); background:var(--acid); color:#08090a; }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.project-card { transition-delay:var(--delay); }
.project-card a { display:block; }
.project-image { position:relative; overflow:hidden; aspect-ratio:1.35/1; background:#111; }
.project-image::after { content:""; position:absolute; inset:0; border:1px solid rgba(215,255,36,0); transition:.3s; box-shadow:inset 0 0 0 1px transparent; }
.project-image img { width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .4s; }
.project-card:hover img { transform:scale(1.045); filter:saturate(1.25) contrast(1.05); }
.project-card:hover .project-image::after { border-color:var(--acid); box-shadow:inset 0 0 25px rgba(215,255,36,.18); }
.project-number { position:absolute; top:12px; right:12px; padding:5px 7px; background:#08090a; color:var(--acid); font:700 .65rem Electrolize,sans-serif; }
.project-meta { position:absolute; z-index:2; inset:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; padding:22px; background:linear-gradient(0deg,rgba(5,5,8,.95),rgba(5,5,8,.12) 70%); opacity:0; transform:translateY(8px); transition:.28s; }
.project-card:hover .project-meta,.project-card:focus-within .project-meta { opacity:1; transform:none; }
.project-meta p { margin:0 0 5px; color:var(--acid); font:500 .62rem Electrolize,sans-serif; letter-spacing:.1em; }
.project-meta h3 { margin:0; font:400 clamp(1.15rem,2vw,2rem) Electrolize,sans-serif; text-transform:uppercase; }
.project-meta > span { margin-top:12px; color:#ddd; font-size:.68rem; text-transform:uppercase; }
.empty-state { grid-column:1/-1; padding:80px 0; color:var(--muted); }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s, transform .7s; }
.reveal.visible { opacity:1; transform:none; }
.project-hero { position:relative; height:min(82vh,900px); min-height:580px; overflow:hidden; }
.project-hero > img { width:100%; height:100%; object-fit:cover; }
.project-hero-overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgba(4,4,6,.9),transparent 70%),linear-gradient(90deg,rgba(0,0,0,.35),transparent); }
.project-hero header { position:absolute; left:5vw; right:5vw; bottom:7vh; }
.project-hero header p { color:var(--acid); font:500 .75rem Electrolize,sans-serif; letter-spacing:.12em; }
.project-hero h1 { max-width:1100px; margin:.1em 0 0; font:400 clamp(3.6rem,10vw,10rem)/.86 Electrolize,sans-serif; text-transform:uppercase; letter-spacing:-.055em; }
.back-link { position:absolute; z-index:2; top:105px; left:5vw; padding:9px 13px; border:1px solid rgba(255,255,255,.55); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }
.project-copy { display:grid; grid-template-columns:1.2fr 1fr; gap:6vw; padding:100px max(5vw,24px) 140px; }
.project-lead { margin:0; font:400 clamp(2rem,4.5vw,5rem)/1.05 Electrolize,sans-serif; }
.project-body { max-width:650px; font-size:clamp(1rem,1.5vw,1.3rem); line-height:1.7; color:#b9babd; }
.neon-button { display:inline-block; grid-column:2; width:max-content; margin-top:30px; padding:15px 22px; border:1px solid var(--acid); color:var(--acid); text-transform:uppercase; letter-spacing:.08em; font:500 .78rem Electrolize,sans-serif; transition:.2s; }
.neon-button:hover { background:var(--acid); color:var(--ink); box-shadow:0 0 30px rgba(215,255,36,.2); }
.project-section-index { display:flex; flex-wrap:wrap; gap:8px; padding:0 max(5vw,24px) 70px; }
.project-section-index span { padding:9px 12px; border:1px solid var(--line); color:var(--acid); font:500 .7rem Electrolize,sans-serif; text-transform:uppercase; letter-spacing:.06em; }
.project-media { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; padding:0 max(5vw,24px) 140px; }
.media-item { margin:0; min-height:280px; background:#030304; overflow:hidden; }
.media-item:nth-child(3n + 1) { grid-column:1 / -1; }
.project-media img,.project-media video { display:block; width:100%; height:100%; max-height:90vh; object-fit:contain; background:#030304; }
.media-embed { position:relative; grid-column:1 / -1; aspect-ratio:16/9; }
.media-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.project-collection { padding:0 max(5vw,24px) 140px; }
.project-collection > header { display:flex; justify-content:space-between; align-items:end; padding-bottom:24px; border-bottom:1px solid var(--line); }
.project-collection > header p { color:var(--acid); text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; }
.project-collection > header h2 { margin:0; font:400 clamp(2.4rem,6vw,6rem) Electrolize,sans-serif; }
.collection-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 18px; padding-top:30px; }
.collection-item { transition-delay:var(--delay); }
.collection-item img { width:100%; aspect-ratio:1/1; object-fit:cover; background:#111; }
.collection-item > div { display:flex; justify-content:space-between; gap:20px; align-items:start; padding-top:12px; }
.collection-item h3 { margin:0; font:400 clamp(1rem,1.6vw,1.5rem) Electrolize,sans-serif; text-transform:uppercase; }
.collection-item a { flex:none; color:var(--acid); font-size:.65rem; text-transform:uppercase; }
.next-project { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.next-project a { display:grid; grid-template-columns:1fr auto 40px; gap:30px; align-items:center; padding:55px 5vw; }
.next-project span { color:var(--muted); text-transform:uppercase; font-size:.72rem; letter-spacing:.1em; }
.next-project strong { font:400 clamp(1.4rem,3vw,3.5rem) Electrolize,sans-serif; text-transform:uppercase; }
.text-page { min-height:100vh; padding:145px 5vw 130px; }
.text-page > header { display:grid; grid-template-columns:2fr 1fr; align-items:end; margin:40px 0 80px; }
.text-page > header h1 { margin:0; font:400 clamp(5rem,15vw,14rem)/.75 Electrolize,sans-serif; letter-spacing:-.06em; }
.text-page > header > p { margin:0 0 4px; color:var(--acid); font:400 clamp(1.2rem,2.4vw,2.4rem)/1.2 Electrolize,sans-serif; }
.about-image { margin:0 0 85px; height:min(65vw,760px); overflow:hidden; }
.about-image img { width:100%; height:100%; object-fit:cover; }
.about-copy { display:grid; grid-template-columns:1.2fr 1fr; gap:30px 8vw; }
.about-copy p { grid-column:2; margin:0; max-width:650px; color:#bfc0c1; line-height:1.75; font-size:1.05rem; }
.about-copy .lead { grid-column:1; grid-row:1 / span 3; color:var(--paper); font:400 clamp(2rem,4vw,4.4rem)/1.08 Electrolize,sans-serif; }
.about-page > .neon-button { margin-left:55%; }
.shop-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.shop-card { position:relative; min-height:430px; overflow:hidden; }
.shop-card:nth-child(3n) { grid-column:1 / -1; min-height:620px; }
.shop-card img { width:100%; height:100%; object-fit:cover; transition:.5s; }
.shop-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.9),transparent 65%); }
.shop-card > div { position:absolute; z-index:2; inset:auto 24px 24px; display:grid; grid-template-columns:1fr auto; align-items:end; }
.shop-card span { grid-column:1/-1; color:var(--acid); font:.65rem Electrolize,sans-serif; letter-spacing:.1em; }
.shop-card h2 { margin:4px 0 0; font:400 clamp(1.6rem,3.2vw,3.5rem) Electrolize,sans-serif; text-transform:uppercase; }
.shop-card b { font-size:.72rem; text-transform:uppercase; }
.shop-card:hover img { transform:scale(1.04); }
.policy-page { max-width:1500px; margin:auto; }
.policy-copy { width:min(820px,100%); margin-left:auto; }
.policy-copy h2 { margin:62px 0 10px; color:var(--acid); font:400 1.1rem Electrolize,sans-serif; text-transform:uppercase; letter-spacing:.07em; }
.policy-copy p { color:#b9babd; line-height:1.75; }
.policy-copy .lead { color:var(--paper); font:400 clamp(1.6rem,3.5vw,3rem)/1.2 Electrolize,sans-serif; }
.policy-copy a { color:var(--acid); }
.policy-note { margin-top:70px; padding:20px; border:1px solid var(--pink); }
.not-found { min-height:80vh; display:grid; place-content:center; text-align:center; }
.not-found p { color:var(--acid); }
.not-found h1 { margin:0 0 30px; font:400 clamp(4rem,12vw,10rem) Electrolize,sans-serif; }
.not-found .neon-button { margin:auto; }
.site-footer { display:grid; grid-template-columns:130px 2fr 1fr; gap:35px; padding:80px 5vw 45px; border-top:1px solid var(--line); background:#050507; }
.footer-logo img { width:100px; }
.site-footer p { max-width:470px; margin:0; font:400 clamp(1.4rem,2.5vw,2.5rem)/1.2 Electrolize,sans-serif; }
.site-footer nav { display:flex; flex-direction:column; align-items:flex-start; gap:10px; text-transform:uppercase; font-size:.75rem; }
.site-footer nav a:hover { color:var(--acid); }
.socials { grid-column:2; display:flex; gap:10px; }
.socials a { width:30px; }
.site-footer small { align-self:end; color:var(--muted); }

@media (max-width:760px) {
  .site-header { padding:12px 14px; }
  .brand { width:92px; height:60px; }
  .brand-wordmark { width:60px; left:32px; }
  .brand-tongue { width:65px; left:-38px; }
  .site-menu { padding:100px 24px 30px; overflow:auto; }
  .site-menu > a { font-size:3.6rem; }
  .nft-menu-toggle { font-size:3.6rem; }
  .hero h1 { width:100%; padding:0 10px; font-size:7.6vw; }
  .hero h1 span:last-child { justify-content:center; white-space:nowrap; }
  .hero h1 b { min-width:0; }
  .work { padding:90px 18px; }
  .section-intro { grid-template-columns:1fr; gap:20px; margin-bottom:55px; }
  .project-grid { grid-template-columns:1fr; }
  .project-card { margin-bottom:42px; }
  .project-meta { opacity:1; transform:none; padding:18px; }
  .project-meta h3 { font-size:1.6rem; }
  .project-hero { min-height:600px; height:85vh; }
  .project-copy { grid-template-columns:1fr; padding:70px 20px 100px; }
  .neon-button { grid-column:1; }
  .next-project a { grid-template-columns:1fr 25px; padding:40px 20px; }
  .project-media { grid-template-columns:1fr; padding:0 20px 90px; }
  .media-item,.media-item:nth-child(3n + 1),.media-embed { grid-column:1; }
  .project-section-index { padding:0 20px 50px; }
  .project-collection { padding:0 20px 90px; }
  .collection-grid { grid-template-columns:1fr 1fr; gap:28px 12px; }
  .collection-item > div { display:block; }
  .collection-item a { display:inline-block; margin-top:8px; }
  .next-project a span:first-child { grid-column:1/-1; }
  .text-page { padding:115px 20px 90px; }
  .text-page > header { grid-template-columns:1fr; gap:35px; margin:30px 0 50px; }
  .text-page > header h1 { font-size:5.2rem; }
  .about-image { height:80vw; margin-bottom:55px; }
  .about-copy { display:block; }
  .about-copy p { margin-bottom:25px; }
  .about-copy .lead { margin-bottom:45px; }
  .about-page > .neon-button { margin-left:0; }
  .shop-grid { grid-template-columns:1fr; }
  .shop-card,.shop-card:nth-child(3n) { grid-column:auto; min-height:400px; }
  .site-footer { grid-template-columns:1fr; padding:65px 20px 35px; }
  .socials { grid-column:1; }
}

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