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

:root { --bg:#0a0a0a; --fg:#f2f0e9; --acid:#c8ff00; --line:#353535; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:Inter, Arial, sans-serif; cursor:crosshair; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
.topbar { position:fixed; z-index:20; top:0; left:0; width:100%; height:72px; padding:14px 22px; border-bottom:1px solid var(--line); background:rgba(10,10,10,.88); backdrop-filter:blur(12px); display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; }
.brand { font-weight:900; font-size:22px; letter-spacing:-.09em; }
.brand span { color:var(--acid); }
.issue { justify-self:center; margin:0; text-align:center; font:10px/1.25 'DM Mono', monospace; }
.menu-button { justify-self:end; background:none; border:0; padding:8px 0; font:12px 'DM Mono', monospace; cursor:pointer; }
.menu-button span { color:var(--acid); }
.menu { position:fixed; z-index:30; inset:0; background:var(--acid); color:#090909; padding:20px 24px; transform:translateY(-102%); transition:transform .55s cubic-bezier(.77,0,.18,1); overflow:auto; }
.menu.open { transform:translateY(0); }
.menu-head { display:flex; justify-content:space-between; border-bottom:2px solid; padding-bottom:14px; font:12px 'DM Mono', monospace; }
.menu-head button { background:none; border:0; cursor:pointer; }
.menu ol { list-style:none; padding:24px 0; margin:0; }
.menu li a { display:grid; grid-template-columns:60px 1fr auto; border-bottom:1px solid rgba(0,0,0,.35); padding:10px 0; align-items:baseline; }
.menu li small { font:11px 'DM Mono', monospace; }
.menu li strong { font-size:clamp(24px,5vw,64px); letter-spacing:-.06em; }
.menu-note { font:11px/1.5 'DM Mono', monospace; }
.intro { position:relative; background:#111; }
.hero-panel { position:relative; height:100svh; min-height:650px; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.25); }
.hero-art { position:absolute; z-index:1; left:50%; top:52%; height:min(82svh,900px); aspect-ratio:9/16; transform:translate(-50%,-50%); overflow:hidden; background:#151515; box-shadow:0 0 0 1px rgba(255,255,255,.18); }
.hero-art video { display:block; width:100%; height:100%; object-fit:cover; background:#000; }
.hero-opening .hero-art { left:79%; height:min(76svh,820px); }
.hero-shade { position:absolute; inset:0; }
.hero-art .art { inset:-6%; }
.hero-shade { z-index:2; background:linear-gradient(90deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.18) 57%,rgba(0,0,0,.08)),linear-gradient(0deg,rgba(0,0,0,.7),transparent 48%); pointer-events:none; }
.hero-copy { position:absolute; z-index:3; left:3.5vw; top:48%; width:48vw; transform:translateY(-45%); }
.hero-kicker { margin:0 0 18px; color:var(--acid); font:10px 'DM Mono',monospace; letter-spacing:.08em; }
.hero-copy h1 { display:flex; align-items:baseline; margin:0; font-size:clamp(78px,10.5vw,164px); line-height:.76; letter-spacing:-.12em; font-weight:900; white-space:nowrap; }
.hero-copy h1 i { color:var(--acid); font:italic 300 .55em 'DM Mono',monospace; letter-spacing:-.22em; transform:translateY(-.42em); }
.hero-description { margin:38px 0 0 7px; font:12px/1.65 'DM Mono',monospace; }
.scroll-next,.enter-archive { position:absolute; z-index:4; left:22px; right:22px; bottom:24px; display:flex; justify-content:space-between; padding:12px 0 8px; border-top:1px solid rgba(255,255,255,.55); border-bottom:1px solid; font:10px 'DM Mono',monospace; }
.scroll-next span,.enter-archive span { color:var(--acid); }
.panel-copy { position:absolute; z-index:3; left:22px; top:50%; width:calc(50% - min(24svh,260px)); transform:translateY(-50%); }
.panel-copy > span { color:var(--acid); font:10px 'DM Mono',monospace; }
.panel-copy p { margin:20px 0 0; font-size:clamp(34px,4.6vw,72px); line-height:.95; letter-spacing:-.07em; font-weight:400; }
.panel-copy strong { font-weight:900; }
.panel-credit { position:absolute; z-index:4; top:96px; right:22px; display:flex; flex-direction:column; align-items:flex-end; gap:5px; font:9px 'DM Mono',monospace; }
.panel-credit strong { font:600 17px Inter,sans-serif; letter-spacing:-.04em; }
.archive { padding:60px 12px 140px; display:grid; grid-template-columns:repeat(12,1fr); gap:80px 12px; }
.poster-card { grid-column:span 6; }
.poster-card:nth-child(3n) { grid-column:3 / span 8; }
.poster-card:nth-child(4n) { grid-column:7 / span 6; }
.visual { position:relative; aspect-ratio:9/16; overflow:hidden; background:#181818; isolation:isolate; }
.poster-card:nth-child(3n) .visual { aspect-ratio:9/16; }
.visual::after { content:''; position:absolute; inset:0; border:1px solid rgba(255,255,255,.15); pointer-events:none; z-index:4; }
.art { position:absolute; inset:-10%; transition:filter .3s; }
.poster-card:hover .art { filter:brightness(.7); }
.art-1 { background:repeating-linear-gradient(90deg,#ff3b00 0 6%,#131313 6% 12%); animation:slide 2s linear infinite; }
.art-1::after { content:'TYPE\A IN\A TIME'; white-space:pre; position:absolute; inset:19% 13%; font-size:clamp(50px,8vw,130px); font-weight:900; line-height:.72; letter-spacing:-.1em; color:#fff; animation:pulse 1s steps(2) infinite; }
.art-2 { background:#d7ff00; }
.art-2::before,.art-2::after { content:''; position:absolute; width:55%; aspect-ratio:1; border:3vw solid #111; border-radius:50%; animation:orbit 4s linear infinite; }
.art-2::after { right:0; bottom:0; animation-direction:reverse; }
.art-3 { background:conic-gradient(from 0deg,#4452ff,#ff49c6,#ffef5c,#4452ff); animation:spin 8s linear infinite; }
.art-3::after { content:'SYNCHRONICITY'; position:absolute; inset:0; display:grid; place-items:center; font:900 clamp(34px,8vw,120px)/1 Inter; letter-spacing:-.08em; mix-blend-mode:difference; color:white; animation:stretch 2s ease-in-out infinite alternate; }
.art-4 { background:repeating-radial-gradient(circle at 50% 50%,#eee 0 12px,#111 13px 25px); animation:zoom 2.2s ease-in-out infinite alternate; }
.art-5 { background:#2457ff; }
.art-5::before { content:'05 05 05 05 05'; position:absolute; inset:0; display:flex; align-items:center; font:900 16vw/1 Inter; letter-spacing:-.12em; color:#ff4b00; animation:marquee 3s linear infinite; white-space:nowrap; }
.art-6 { background:linear-gradient(135deg,#fbf6e9 50%,#101010 50%); animation:flip 3s steps(2) infinite; }
.art-6::after { content:'BETWEEN'; position:absolute; inset:0; display:grid; place-items:center; font:900 9vw Inter; color:#ff2a00; transform:rotate(-12deg); }
.art-7 { background:linear-gradient(#151515,#151515),repeating-linear-gradient(45deg,#00ffd5 0 10px,#2424ff 10px 20px); background-blend-mode:screen; animation:hue 4s linear infinite; }
.art-7::after { content:'∞'; position:absolute; inset:0; display:grid; place-items:center; font:300 35vw 'DM Mono'; color:#fff; animation:spin 10s linear infinite; }
.art-8 { background:#ff582d; }
.art-8::before { content:''; position:absolute; inset:10%; background:repeating-linear-gradient(0deg,transparent 0 7%,#0c0c0c 7% 9%); animation:scan 1.2s linear infinite; }
.art-8::after { content:'RE:START'; position:absolute; inset:0; display:grid; place-items:center; font:900 9vw Inter; letter-spacing:-.08em; }
.card-info { display:grid; grid-template-columns:50px 1fr auto; gap:8px; align-items:start; padding-top:10px; font:10px/1.4 'DM Mono',monospace; }
.card-info h2 { margin:0; font:600 clamp(18px,2.6vw,34px)/1 Inter; letter-spacing:-.05em; }
.card-info p { margin:0; text-align:right; }
.statement { border-top:1px solid var(--line); padding:22px 22px 110px; }
.eyebrow { color:var(--acid); font:10px 'DM Mono',monospace; }
.statement-copy { margin:100px 0; font-size:clamp(40px,8.5vw,130px); line-height:.9; font-weight:900; letter-spacing:-.07em; }
.statement-copy em { color:transparent; font-style:normal; -webkit-text-stroke:1px var(--fg); }
.statement-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; font:11px/1.6 'DM Mono',monospace; }
.statement-grid p { max-width:420px; }
footer { border-top:1px solid var(--line); padding:18px 22px 40px; display:grid; grid-template-columns:1fr 1fr 1fr; font:10px 'DM Mono',monospace; }
footer p { margin:0; text-align:center; } footer p:last-child{text-align:right;color:var(--acid)}
@keyframes slide{to{transform:translateX(12%)}} @keyframes pulse{50%{opacity:.25}} @keyframes orbit{to{transform:rotate(360deg) translate(12%)}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes stretch{to{transform:scaleX(.55)}} @keyframes zoom{to{transform:scale(1.2)}} @keyframes marquee{to{transform:translateX(-50%)}} @keyframes flip{50%{transform:rotate(180deg)}} @keyframes hue{to{filter:hue-rotate(360deg)}} @keyframes scan{to{transform:translateY(9%)}}
@media (max-width:700px){.topbar{height:60px;padding:12px 14px}.issue{display:none}.topbar{grid-template-columns:1fr 1fr}.hero-panel{height:100svh;min-height:700px}.hero-art{top:50%;height:auto;width:100vw;aspect-ratio:9/16;box-shadow:none}.hero-opening .hero-art{left:50%;top:58%;height:auto;width:100vw}.hero-copy{left:14px;right:14px;top:94px;width:auto;transform:none}.hero-copy h1{font-size:24vw;line-height:.78}.hero-description{font-size:9px;line-height:1.5;margin:18px 0 0 3px}.hero-shade{background:linear-gradient(90deg,rgba(0,0,0,.58),rgba(0,0,0,.06)),linear-gradient(0deg,rgba(0,0,0,.82),transparent 64%)}.hero-opening .hero-shade{background:linear-gradient(0deg,rgba(0,0,0,.72),transparent 45%)}.scroll-next,.enter-archive{left:14px;right:14px;bottom:18px}.panel-copy{left:14px;right:14px;top:54%;width:auto}.panel-copy p{font-size:11vw}.panel-credit{top:78px;right:14px}.archive{padding:40px 0 100px;gap:54px 0}.poster-card,.poster-card:nth-child(3n),.poster-card:nth-child(4n){grid-column:1 / span 12}.poster-card:nth-child(3n) .visual{aspect-ratio:9/16}.card-info{grid-template-columns:36px 1fr auto;padding:10px 14px 0}.statement{padding:18px 14px 80px}.statement-copy{margin:75px 0}.statement-grid{grid-template-columns:1fr}.statement-grid p:last-child{margin-top:40px}footer{padding:16px 14px 30px;grid-template-columns:1fr auto}footer p:nth-child(2){display:none}.menu{padding:16px 14px}.menu li a{grid-template-columns:40px 1fr auto}}
@media (max-width:700px){.hero-opening{height:auto;min-height:0;padding-top:94px}.hero-opening .hero-copy{position:relative;left:auto;right:auto;top:auto;width:auto;margin:0 14px;transform:none}.hero-opening .hero-art{position:relative;left:auto;top:auto;height:auto;width:100vw;margin-top:34px;transform:none}.hero-opening .scroll-next{position:relative;left:auto;right:auto;bottom:auto;margin:18px 14px 24px}}
@media (min-width:701px) and (max-aspect-ratio:4/3){.hero-art{height:min(72svh,760px)}.hero-copy h1{font-size:17vw}.panel-copy{width:34%}.panel-copy p{font-size:4.2vw}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.art,.art::before,.art::after{animation-play-state:paused!important}}