:root { --ink:#10100f; --paper:#e7e3d9; --muted:#a7a398; --line:rgba(231,227,217,.22); --accent:#d6ed5f; --cyan:#00FFFF; --shu:#B8372E; --serif:Georgia, 'Times New Roman', serif; --sans:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; overflow-x:hidden; background:var(--ink); color:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.5; }
a { color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.skip-link { position:fixed; z-index:20; left:1rem; top:-4rem; padding:.75rem 1rem; background:var(--accent); color:var(--ink); font-weight:700; }
.skip-link:focus { top:1rem; }
.site-header { position:fixed; z-index:10; inset:0 0 auto; display:flex; align-items:flex-start; justify-content:space-between; min-height:76px; padding:max(1.05rem, env(safe-area-inset-top)) max(1.2rem, env(safe-area-inset-right)) 1rem max(1.2rem, env(safe-area-inset-left)); mix-blend-mode:difference; color:#fff; }
.site-header { transition:transform .35s ease; }
.site-header.is-hidden { transform:translateY(-105%); }
.scroll-progress { position:fixed; z-index:12; top:0; right:0; bottom:0; width:2px; background:rgba(231,227,217,.16); }
.scroll-progress span { display:block; width:100%; height:0; background:var(--accent); transform-origin:top; }
@media (pointer:fine) { body { cursor:none; } }
#cur-ring { position:fixed; z-index:9999; width:30px; height:30px; border:1px solid #00ffff; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); display:none; mix-blend-mode:difference; }
#cur-dot { position:fixed; z-index:9999; width:5px; height:5px; background:#ff00ff; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); display:none; }
@media (pointer:fine) { #cur-ring,#cur-dot { display:block; } body.cursor-fallback { cursor:auto; } body.cursor-fallback #cur-ring,body.cursor-fallback #cur-dot { display:none; } }
.menu-toggle,.menu-scrim { display:none; }
.wordmark { font-size:.72rem; line-height:.88; letter-spacing:.08em; font-weight:800; }
nav { display:flex; gap:clamp(.9rem,2.4vw,2rem); padding-top:.1rem; }
nav a, .language-toggle { font:700 .65rem/1 var(--sans); letter-spacing:.12em; }
nav a { min-height:44px; display:inline-flex; align-items:center; }
.language-toggle { min-width:44px; min-height:44px; padding:0; border:1px solid currentColor; border-radius:50%; background:transparent; color:inherit; cursor:pointer; }
.section { position:relative; padding:clamp(5rem,10vw,10rem) clamp(1.2rem,6vw,7rem); scroll-margin-top:75px; }
.hero { display:grid; min-height:100svh; align-items:end; isolation:isolate; overflow:hidden; padding-bottom:max(5.5rem, calc(2rem + env(safe-area-inset-bottom))); perspective:1000px; transform-style:preserve-3d; will-change:transform; }
.hero-image, .hero::after { position:absolute; inset:0; z-index:-2; }
.hero-image { background:linear-gradient(90deg,rgba(16,16,15,.82),rgba(16,16,15,.19) 70%), url('hero-hironobu.png') center 26% / cover no-repeat; background:linear-gradient(90deg,rgba(16,16,15,.82),rgba(16,16,15,.19) 70%), image-set(url('hero-hironobu.webp') type('image/webp') 1x, url('hero-hironobu.png') type('image/png') 1x) center 26% / cover no-repeat; filter:grayscale(.25) contrast(1.08); transform:translate3d(calc(var(--background-pointer-x,0px) + var(--background-gsap-x,0px)),calc(var(--background-pointer-y,0px) + var(--background-scroll-y,0px) + var(--background-gsap-y,0px)),0) skewX(var(--background-gsap-skew,0deg)) scale(1.035); }
.hero-subject-depth { position:absolute; z-index:-1; inset:-4%; opacity:.16; pointer-events:none; background:image-set(url('hero-hironobu.webp') type('image/webp') 1x, url('hero-hironobu.png') type('image/png') 1x) center 26% / cover no-repeat; filter:grayscale(.25) contrast(1.08); mix-blend-mode:screen; mask-image:radial-gradient(ellipse at 66% 46%,#000 0 29%,transparent 63%); transform:translate3d(var(--subject-pointer-x,0px),calc(var(--subject-pointer-y,0px) + var(--subject-scroll-y,0px)),0) scale(1.07); }
.hero-distortion { position:absolute; z-index:0; inset:0; width:100%; height:100%; pointer-events:none; }
.hero-foreground-signal { position:absolute; z-index:1; inset:-5%; pointer-events:none; opacity:.34; background:linear-gradient(112deg,transparent 42%,rgba(214,237,95,.12) 49%,transparent 56%); mix-blend-mode:screen; transform:translate3d(var(--foreground-pointer-x,0px),calc(var(--foreground-pointer-y,0px) + var(--foreground-scroll-y,0px)),0); }
.hero::after { z-index:-1; background:linear-gradient(180deg,rgba(16,16,15,.18),rgba(16,16,15,.94) 90%); content:''; }
.hero::before { content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(90deg,transparent 0%,rgba(0,255,255,.05) 45%,rgba(0,255,255,.12) 50%,rgba(0,255,255,.05) 55%,transparent 100%); width:60%; animation:lightSweep 9s ease-in-out 3s infinite; }
.hero-signal { position:absolute; z-index:-1; inset:0; width:100%; height:100%; opacity:.42; pointer-events:none; transform:translate3d(var(--signal-pointer-x,0px),calc(var(--signal-pointer-y,0px) + var(--signal-scroll-y,0px)),0); }
.hero-content { max-width:64rem; margin-top:6rem; }
.hero-content { position:relative; z-index:3; }
.hero-copy-depth { transform:translate3d(var(--type-gsap-x,0px),var(--type-gsap-y,0px),0); }
.hero-foreground-signal { transform:translate3d(calc(var(--foreground-pointer-x,0px) + var(--foreground-gsap-x,0px)),calc(var(--foreground-pointer-y,0px) + var(--foreground-scroll-y,0px) + var(--foreground-gsap-y,0px)),0); }
.hero h1 { transform:translate3d(calc(var(--parallax-x, 0px) * .7),calc(var(--parallax-y, 0px) * .7 + var(--type-scroll-y, 0px)),0); transition:transform .18s ease-out; }
.hero-english { transform:translate3d(calc(var(--parallax-x, 0px) * .55),calc(var(--parallax-y, 0px) * .55 + var(--type-scroll-y, 0px) * .72),0); transition:transform .18s ease-out; }
.hero-idea { transform:translate3d(calc(var(--parallax-x, 0px) * 1.2),calc(var(--parallax-y, 0px) * 1.2 + var(--type-scroll-y, 0px) * 1.08),0); transition:transform .18s ease-out; }
.hero-release { transform:translate3d(calc(var(--parallax-x, 0px) * .45),calc(var(--parallax-y, 0px) * .45 + var(--release-scroll-y, 0px)),0); transition:transform .18s ease-out; }
.eyebrow { margin:0 0 1rem; color:var(--accent); font-size:.68rem; letter-spacing:.18em; font-weight:700; }
h1,h2,p { margin-top:0; }
h1 { max-width:14ch; margin-bottom:1rem; font:clamp(3rem,8vw,8.7rem)/.91 var(--serif); font-weight:400; letter-spacing:-.055em; text-wrap:balance; }
h2 { margin:0; font:clamp(2.25rem,5.3vw,6rem)/.95 var(--serif); font-weight:400; letter-spacing:-.045em; }
.hero-english { max-width:31rem; margin-bottom:.6rem; font:clamp(1rem,2vw,1.45rem)/1.2 var(--serif); }
.hero-idea { max-width:31rem; margin-bottom:2rem; color:var(--muted); font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; }
.hero-release { max-width:320px; margin:0 0 1.15rem; }
.hero-release a { display:grid; grid-template-columns:68px 1fr auto; align-items:center; gap:.7rem; min-height:78px; padding:.35rem; border:1px solid rgba(231,227,217,.42); background:rgba(16,16,15,.74); backdrop-filter:blur(5px); }
.hero-release img { width:68px; height:68px; object-fit:cover; }
.hero-release span { display:grid; gap:.05rem; min-width:0; }
.hero-release small { color:var(--accent); font-size:.53rem; letter-spacing:.14em; }
.hero-release strong { overflow:hidden; font:1.1rem/1.05 var(--serif); text-overflow:ellipsis; white-space:nowrap; }
.hero-release time { color:var(--muted); font-size:.61rem; letter-spacing:.08em; }
.hero-release b { padding:.35rem; color:var(--accent); font-size:1rem; }
.button { display:inline-flex; gap:1.8rem; align-items:center; justify-content:space-between; min-width:220px; min-height:52px; padding:.75rem 1rem; border:1px solid currentColor; font-size:.7rem; font-weight:700; letter-spacing:.12em; }
.button-light { background:var(--paper); color:var(--ink); }
.button:hover { background:var(--accent); color:var(--ink); }
.scroll-note { position:absolute; z-index:3; right:1.25rem; bottom:4.5rem; margin:0; font-size:.6rem; letter-spacing:.16em; writing-mode:vertical-rl; }
.hero-paint-overlay { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; isolation:isolate; }
.hero-paint-overlay::before { content:''; position:absolute; inset:-10%; opacity:.18; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); background-size:260px 260px; }
.paint-s1 { position:absolute; top:5%; left:-12%; width:72vw; height:22vh; transform:rotate(-18deg); opacity:.65; mix-blend-mode:screen; filter:drop-shadow(0 12px 28px rgba(184,55,46,.22)); border-radius:55% 25% 62% 34% / 44% 65% 28% 56%; clip-path:polygon(0% 48%,7% 35%,18% 29%,31% 36%,44% 24%,59% 31%,73% 20%,88% 34%,100% 28%,96% 62%,82% 70%,67% 60%,51% 75%,34% 62%,19% 78%,6% 66%); background:repeating-linear-gradient(101deg,rgba(255,226,180,.26) 0 2px,transparent 2px 8px),linear-gradient(90deg,transparent 0%,rgba(75,15,18,.08) 5%,rgba(184,55,46,.88) 22%,rgba(212,168,67,.62) 47%,rgba(184,55,46,.72) 70%,transparent 100%); animation:paintDrift1 26s ease-in-out infinite alternate; }
.paint-s2 { position:absolute; top:20%; right:-18%; width:62vw; height:28vh; transform:rotate(18deg); opacity:.58; mix-blend-mode:screen; filter:drop-shadow(0 18px 35px rgba(27,58,107,.35)); border-radius:34% 66% 28% 72% / 52% 35% 70% 42%; clip-path:polygon(0% 38%,12% 20%,27% 32%,42% 17%,57% 28%,76% 18%,100% 35%,92% 68%,73% 58%,56% 78%,39% 62%,22% 74%,7% 59%); background:repeating-linear-gradient(78deg,rgba(255,255,255,.14) 0 1px,transparent 1px 7px),linear-gradient(90deg,transparent 0%,rgba(27,58,107,.90) 22%,rgba(0,255,255,.20) 45%,rgba(10,20,45,.82) 72%,transparent 100%); animation:paintDrift2 34s ease-in-out infinite alternate; }
.paint-s3 { position:absolute; bottom:8%; left:18%; width:58vw; height:14vh; transform:rotate(-5deg); opacity:.52; mix-blend-mode:screen; filter:drop-shadow(0 10px 24px rgba(212,168,67,.25)); border-radius:70% 30% 62% 38% / 42% 66% 32% 58%; clip-path:polygon(0% 55%,9% 42%,19% 50%,31% 34%,47% 48%,60% 32%,75% 46%,88% 35%,100% 48%,95% 72%,81% 65%,67% 82%,49% 68%,30% 78%,15% 64%,4% 76%); background:repeating-linear-gradient(96deg,rgba(255,255,255,.28) 0 1px,transparent 1px 6px),linear-gradient(90deg,transparent 0%,rgba(212,168,67,.76) 20%,rgba(255,238,185,.42) 42%,rgba(184,55,46,.32) 68%,transparent 100%); animation:paintDrift3 22s ease-in-out infinite alternate; }
.paint-s1::after,.paint-s2::after,.paint-s3::after { content:''; position:absolute; inset:0; opacity:.34; mix-blend-mode:multiply; background-image:radial-gradient(circle at 12% 45%,rgba(255,255,255,.35) 0 1px,transparent 2px),radial-gradient(circle at 38% 58%,rgba(0,0,0,.28) 0 1px,transparent 3px),radial-gradient(circle at 71% 34%,rgba(255,255,255,.22) 0 1px,transparent 2px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='80'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.075 0.55' numOctaves='5' seed='8'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='80' filter='url(%23p)' opacity='.9'/%3E%3C/svg%3E"); background-size:130px 60px,160px 80px,110px 55px,220px 100px; }
.hero-paint-overlay::after { content:''; position:absolute; inset:0; z-index:5; background:radial-gradient(ellipse at center,rgba(8,8,16,.12) 0%,rgba(8,8,16,.04) 28%,transparent 58%); }
@keyframes paintDrift1 { 0% { transform:translate(-3%,-4%) rotate(-18deg) scale(1); } 50% { transform:translate(8%,5%) rotate(-14deg) scale(1.06); } 100% { transform:translate(14%,-2%) rotate(-20deg) scale(.98); } }
@keyframes paintDrift2 { 0% { transform:translate(4%,2%) rotate(18deg) scale(1); } 50% { transform:translate(-8%,-3%) rotate(14deg) scale(1.08); } 100% { transform:translate(-15%,5%) rotate(20deg) scale(.98); } }
@keyframes paintDrift3 { 0% { transform:translate(-2%,0) rotate(-5deg) scale(1); } 50% { transform:translate(5%,-6%) rotate(-2deg) scale(1.05); } 100% { transform:translate(10%,2%) rotate(-7deg) scale(.98); } }
@keyframes lightSweep { 0% { transform:translateX(-120%) skewX(-20deg); opacity:0; } 10% { opacity:.4; } 90% { opacity:.4; } 100% { transform:translateX(220%) skewX(-20deg); opacity:0; } }
.logo-glitch-wrap { position:absolute; z-index:2; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.logo-gc,.logo-gm { position:absolute; font-family:'Orbitron',sans-serif; font-size:clamp(2.8rem,8vw,6rem); font-weight:900; letter-spacing:.04em; mix-blend-mode:difference; }
.logo-gc { color:var(--cyan); clip-path:polygon(0 0,100% 0,100% 42%,0 42%); animation:g1 10s infinite; opacity:.30; }
.logo-gm { color:var(--shu); clip-path:polygon(0 58%,100% 58%,100% 100%,0 100%); animation:g2 10s infinite; opacity:.22; }
@keyframes g1 { 0%,65%,100% { transform:translateX(0); opacity:0; } 67% { transform:translateX(-9px); opacity:.8; } 70% { transform:translateX(6px); opacity:.7; } 73% { transform:translateX(-4px); opacity:.65; } 76% { transform:translateX(7px); opacity:.5; } 79% { opacity:0; } 86% { transform:translateX(-4px); opacity:.5; } 88% { opacity:0; } }
@keyframes g2 { 0%,66%,100% { transform:translateX(0); opacity:0; } 68% { transform:translateX(9px); opacity:.8; } 71% { transform:translateX(-5px); opacity:.7; } 74% { transform:translateX(4px); opacity:.6; } 77% { opacity:0; } 87% { transform:translateX(5px); opacity:.5; } 89% { opacity:0; } }
.hero-ticker { position:absolute; z-index:3; bottom:0; left:0; right:0; border-top:1px solid rgba(255,255,255,.06); background:rgba(8,8,16,.5); backdrop-filter:blur(8px); overflow:hidden; white-space:nowrap; padding:10px 0; }
.ticker-track { display:inline-flex; gap:0; animation:tickerMove 30s linear infinite; }
.ticker-item { font-family:'Orbitron',sans-serif; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.28); padding:0 40px; }
.ticker-item span { color:var(--cyan); margin-right:6px; }
@keyframes tickerMove { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.releases { background:#181816; }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; margin-bottom:clamp(2.5rem,5vw,5rem); }
.release-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1rem; margin-bottom:2.4rem; }
.release-card { min-width:0; }
.release-card, .works-list li, .video-card { --rx:0deg; --ry:0deg; --spot-x:50%; --spot-y:50%; transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style:preserve-3d; will-change:transform; }
.release-card::after, .works-list li::after { position:absolute; inset:0; z-index:2; background:radial-gradient(circle at var(--spot-x) var(--spot-y),rgba(214,237,95,.2),transparent 45%); content:''; opacity:0; pointer-events:none; transition:opacity .25s; }
.release-card:hover::after, .works-list li:hover::after, .is-active::after { opacity:1; }
.release-art { display:block; aspect-ratio:1; overflow:hidden; background:#2a2926; }
.release-art img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.release-card:hover img { transform:scale(1.035); }
.release-meta { display:grid; gap:.28rem; padding:.75rem 0; }
.release-meta h3 { margin:0; font:1.1rem/1.05 var(--serif); }
.release-meta p, .release-meta time { margin:0; color:var(--muted); font-size:.65rem; letter-spacing:.06em; }
.release-listen { min-height:44px; display:inline-flex; align-items:center; width:max-content; font-size:.64rem; font-weight:700; letter-spacing:.12em; }
.text-link { display:inline-flex; align-items:center; gap:1rem; min-height:44px; border-bottom:1px solid var(--paper); font-size:.7rem; font-weight:700; letter-spacing:.12em; }
.featured-video { background:var(--paper); color:var(--ink); }
.featured-video .eyebrow { color:#56610f; }
.video-card { position:relative; display:block; width:min(100%,1100px); aspect-ratio:16/9; overflow:hidden; background:#292925; }
.video-card img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.video-card:hover img { transform:scale(1.02); }
.video-card-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(16,16,15,.45),rgba(16,16,15,.08)); }
.video-play { position:absolute; left:clamp(1rem,4vw,3rem); bottom:clamp(1rem,4vw,3rem); display:inline-flex; align-items:center; gap:1rem; min-height:48px; padding:.75rem 1rem; background:var(--paper); color:var(--ink); font-size:.67rem; font-weight:700; letter-spacing:.14em; }
.video-play b { font-size:.8rem; }
.featured-video .text-link { margin-top:1.7rem; }
.about { min-height:70vh; display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,.58fr); gap:4rem; background:#10100f; }
.about .section-heading, .works .section-heading, .process .section-heading, .follow .section-heading { display:block; }
.manifesto { max-width:44rem; font-size:clamp(1rem,1.4vw,1.25rem); color:var(--muted); }
.manifesto-large { color:var(--paper); font:clamp(2.6rem,5.4vw,6.3rem)/.98 var(--serif); letter-spacing:-.05em; }
.manifesto.is-revealed .manifesto-large { letter-spacing:-.07em; transform:translateY(0); }
.formula { margin-bottom:1.4rem; color:var(--accent); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; }
.works { background:#141412; }
.works-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.works-list li { display:flex; align-items:baseline; gap:1rem; min-height:88px; padding:1rem 0; border-bottom:1px solid var(--line); font:clamp(1.3rem,2.4vw,2.5rem)/1 var(--serif); }
.works-list li:nth-child(odd) { padding-right:2rem; }
.works-list li:nth-child(even) { padding-left:2rem; border-left:1px solid var(--line); }
.works-list li a { display:grid; grid-template-columns:2rem minmax(0,1fr) auto; align-items:baseline; gap:.65rem; width:100%; min-height:60px; }
.work-number { color:var(--accent); font:.67rem var(--sans); letter-spacing:.12em; }
.work-listen { font:.62rem var(--sans); font-weight:700; letter-spacing:.1em; white-space:nowrap; }
.process { background:#242420; }
.process-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3rem; max-width:78rem; font:clamp(1.25rem,2.7vw,3.2rem)/1.06 var(--serif); letter-spacing:-.035em; }
.process-grid .disclosure { color:var(--muted); }
.follow { min-height:70svh; background:var(--accent); color:var(--ink); }
.follow .eyebrow { color:inherit; }
.follow-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:4rem; border-top:1px solid rgba(16,16,15,.35); }
.follow-links a { display:flex; align-items:center; justify-content:space-between; min-height:74px; padding:.8rem 0; border-bottom:1px solid rgba(16,16,15,.35); font-size:clamp(1rem,2vw,1.5rem); font-weight:700; letter-spacing:.03em; }
.follow-links a:nth-child(odd) { padding-right:2rem; }
.follow-links a:nth-child(even) { padding-left:2rem; border-left:1px solid rgba(16,16,15,.35); }
footer { display:flex; justify-content:space-between; gap:1rem; padding:1rem clamp(1.2rem,6vw,7rem) max(1rem,env(safe-area-inset-bottom)); background:var(--ink); color:var(--muted); font-size:.6rem; letter-spacing:.08em; }
footer p { margin:0; }
[data-reveal] { opacity:1; transform:translateY(0); }
html.gsap-ready [data-reveal] { opacity:0; transform:translateY(30px); }
@media (max-width: 767px) { .site-header { min-height:64px; } nav { gap:.6rem; } nav a { font-size:.58rem; } .section { padding-top:5rem; padding-bottom:5rem; } .hero { min-height:100svh; } h1 { font-size:clamp(3rem,14vw,5rem); } .hero-idea { margin-bottom:1.2rem; } .hero-release { max-width:280px; } .section-heading { display:block; } .release-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem .8rem; } .release-card:first-child { grid-column:span 2; } .about { display:block; } .manifesto { margin-top:3rem; } .works-list, .follow-links, .process-grid { grid-template-columns:1fr; } .works-list li:nth-child(odd),.works-list li:nth-child(even),.follow-links a:nth-child(odd),.follow-links a:nth-child(even) { padding-left:0; padding-right:0; border-left:0; } .process-grid { gap:1.5rem; } footer { display:block; } footer p + p { margin-top:.6rem; } }
@media (max-width: 767px) { .menu-toggle { display:grid; place-content:center; gap:5px; width:44px; height:44px; padding:0; border:1px solid currentColor; border-radius:50%; background:transparent; color:inherit; } .menu-toggle span { display:block; width:15px; height:1px; background:currentColor; } .site-header nav { position:fixed; top:0; right:0; display:grid; align-content:center; width:min(82vw,320px); height:100svh; padding:5rem 2rem; background:var(--ink); color:var(--paper); transform:translateX(105%); transition:transform .3s ease; mix-blend-mode:normal; } .site-header.nav-open nav { transform:translateX(0); } .site-header nav a { min-height:54px; font-size:.85rem; } .site-header.nav-open + .menu-scrim { display:block; position:fixed; z-index:8; inset:0; border:0; background:rgba(0,0,0,.45); } .language-toggle { margin-left:auto; margin-right:.45rem; } .release-card, .works-list li, .video-card { transform:none; } }
@media (pointer: coarse), (prefers-reduced-motion: reduce) { .signal-cursor { display:none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .hero-signal { display:none; } }
@media (pointer: coarse) { .hero-subject-depth { transform:translate3d(0,calc(var(--subject-pointer-y,0px) + var(--subject-scroll-y,0px)),0) scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .hero-distortion,.hero-subject-depth,.hero-foreground-signal { display:none; } }
@media (min-width:769px) and (pointer:fine) { .hero-foreground-signal { display:none; } }
@media (max-width:768px) { .paint-s1 { width:120vw; height:18vh; top:8%; left:-42%; opacity:.58; } .paint-s2 { width:105vw; height:22vh; top:26%; right:-48%; opacity:.54; } .paint-s3 { width:100vw; height:12vh; left:-8%; bottom:16%; opacity:.46; } }
@media (prefers-reduced-motion: reduce) { .hero::before,.logo-glitch-wrap { display:none; } .paint-s1,.paint-s2,.paint-s3,.hero-ticker .ticker-track { animation:none !important; } }

/* Editorial lower sequence: intentionally still and typographic. */
html { overflow-x:clip; }
.about { min-height:82svh; grid-template-columns:minmax(10rem,.28fr) minmax(0,.72fr); align-items:start; gap:clamp(2rem,8vw,10rem); background:#10100f; }
.about .section-heading { margin:0; padding-top:.35rem; }
.about .section-heading .eyebrow { margin-bottom:.65rem; }
.about .section-heading h2 { color:var(--muted); font:clamp(.8rem,1.2vw,1rem)/1 var(--sans); font-weight:700; letter-spacing:.15em; }
.manifesto { align-self:center; max-width:min(100%,58rem); margin-top:clamp(4rem,15vh,12rem); color:var(--paper); }
.manifesto-large,.final-manifesto { display:grid; gap:.03em; margin:0; color:var(--paper); font:clamp(3.8rem,6.1vw,7rem)/.82 var(--serif); letter-spacing:-.075em; text-wrap:nowrap; }
.manifesto-large span,.final-manifesto span { display:block; white-space:nowrap; }
.manifesto .formula { margin:clamp(2rem,5vw,4.5rem) 0 0; }
.works { padding-top:clamp(7rem,13vw,13rem); padding-bottom:clamp(7rem,13vw,13rem); background:#141412; }
.works .section-heading { margin-bottom:clamp(3rem,7vw,7rem); }
.works-list { grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.8rem,1.6vw,1.6rem); border:0; }
.works-list .work-card { display:block; min-width:0; min-height:0; padding:0; border:0; font:inherit; }
.works-list .work-card::after { border:1px solid rgba(214,237,95,.45); background:transparent; }
.works-list .work-card:nth-child(odd),.works-list .work-card:nth-child(even) { padding:0; border:0; }
.works-list .work-art { display:block; width:100%; min-height:0; aspect-ratio:1; overflow:hidden; background:#292925; }
.works-list .work-art img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.works-list .work-card:hover .work-art img { transform:scale(1.025); }
.works-list .work-meta { display:grid; gap:.35rem; padding:1rem 0 .2rem; }
.works-list .work-meta h3 { margin:0; color:var(--paper); font:clamp(1.1rem,1.65vw,1.8rem)/.95 var(--serif); font-weight:400; }
.work-title-alt { margin:0; color:var(--muted); font:.64rem/1.2 var(--sans); letter-spacing:.1em; text-transform:uppercase; }
.works-list .work-listen { display:inline-flex; align-items:center; gap:.65rem; width:max-content; min-height:44px; padding:0; border:0; color:var(--accent); font:.63rem/1 var(--sans); font-weight:700; letter-spacing:.14em; }
.works-all { margin-top:clamp(3rem,6vw,5.5rem); }
.listen-connect { background:var(--paper); color:var(--ink); }
.listen-connect .section-heading { margin-bottom:clamp(3rem,7vw,7rem); }
.listen-connect .eyebrow { color:#56610f; }
.listen-connect-grid { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(15rem,.88fr); gap:clamp(3rem,9vw,11rem); align-items:start; }
.listen-label { margin:0 0 1.2rem; color:#56610f; font:.66rem/1 var(--sans); font-weight:700; letter-spacing:.16em; }
.streaming-copy { max-width:30rem; margin:0; font:clamp(1.5rem,2.8vw,3rem)/1.03 var(--serif); letter-spacing:-.04em; }
.platform-labels,.connect-directory ul { margin:clamp(2rem,4vw,3.6rem) 0; padding:0; list-style:none; }
.platform-labels { display:flex; flex-wrap:wrap; gap:.6rem .8rem; max-width:34rem; }
.platform-labels li { padding:.55rem .72rem; border:1px solid rgba(16,16,15,.28); font:.6rem/1 var(--sans); letter-spacing:.1em; }
.button-dark { background:var(--ink); color:var(--paper); }
.button-dark:hover { background:var(--accent); color:var(--ink); }
.connect-directory ul { margin-top:0; border-top:1px solid rgba(16,16,15,.3); }
.connect-directory li { border-bottom:1px solid rgba(16,16,15,.3); }
.connect-directory a,.pending-link { display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:52px; color:var(--ink); font:.72rem/1 var(--sans); font-weight:700; letter-spacing:.1em; }
.connect-directory a:hover { color:#56610f; }
.pending-link { color:rgba(16,16,15,.45); cursor:default; }
.pending-link small { font:.56rem/1 var(--sans); letter-spacing:.1em; }
footer#follow { display:grid; grid-template-columns:auto 1fr; align-items:start; gap:.8rem 2rem; padding:clamp(2rem,4vw,4rem) clamp(1.2rem,6vw,7rem) max(1.2rem,env(safe-area-inset-bottom)); background:var(--ink); color:var(--muted); font-size:.62rem; letter-spacing:.1em; }
.footer-eyebrow { grid-column:1 / -1; margin:0; color:var(--accent); font-size:.52rem; font-weight:700; letter-spacing:.16em; }
.footer-wordmark { color:var(--paper); font-weight:700; letter-spacing:.13em; }
footer details { grid-column:1 / -1; max-width:56rem; border-top:1px solid var(--line); padding-top:1rem; }
footer summary { width:max-content; max-width:100%; min-height:44px; display:flex; align-items:center; color:var(--paper); cursor:pointer; }
footer details div { display:grid; gap:.85rem; max-width:44rem; padding:.75rem 0 .25rem; line-height:1.65; }
footer details p { margin:0; }
@media (max-width:767px) { .about { display:grid; grid-template-columns:1fr; min-height:100svh; gap:0; } .about .section-heading { padding-top:0; } .about .section-heading h2 { font-size:.72rem; } .manifesto { align-self:center; margin-top:0; max-width:100%; } .manifesto-large { gap:.09em; font-size:clamp(2rem,8.4vw,3.15rem); line-height:.88; letter-spacing:-.07em; } .manifesto-large span { white-space:nowrap; } .manifesto .formula { margin-top:1.75rem; } .works-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem .8rem; } .works-list .work-card { transform:none; } .works-list .work-meta { padding-top:.7rem; } .works-list .work-meta h3 { font-size:1.2rem; } .work-title-alt { font-size:.55rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .listen-connect-grid { grid-template-columns:1fr; gap:3.5rem; } .streaming-copy { font-size:clamp(1.65rem,8vw,2.4rem); } .platform-labels { margin-bottom:2.25rem; } footer#follow { grid-template-columns:1fr; gap:1rem; } footer details { grid-column:auto; } }
/* Static, low-contrast editorial backgrounds: decorative only. */
.releases,.featured-video,.about,.works,.listen-connect { isolation:isolate; overflow:hidden; position:relative; }
.releases::before,.featured-video::before,.about::before,.works::before,.listen-connect::before { position:absolute; z-index:0; inset:0; background-repeat:no-repeat; background-size:cover; content:''; pointer-events:none; }
.releases > *,.featured-video > *,.about > *,.works > *,.listen-connect > * { position:relative; z-index:1; }
.releases::before { background-image:linear-gradient(110deg,rgba(8,14,14,.86),rgba(8,14,14,.65) 52%,rgba(8,14,14,.74)),image-set(url('section-backgrounds/section-02-tokyo-shitamachi.avif') type('image/avif'),url('section-backgrounds/section-02-tokyo-shitamachi.webp') type('image/webp')); background-position:center,50% 50%; }
.featured-video::before { background-image:linear-gradient(105deg,rgba(241,238,226,.89),rgba(241,238,226,.71) 62%,rgba(241,238,226,.8)),image-set(url('section-backgrounds/section-03-artistic-bouquet.avif') type('image/avif'),url('section-backgrounds/section-03-artistic-bouquet.webp') type('image/webp')); background-position:center,56% 48%; }
.about::before { background-image:linear-gradient(105deg,rgba(8,14,14,.86),rgba(8,14,14,.67) 58%,rgba(8,14,14,.78)),image-set(url('section-backgrounds/section-04-superhuman-echo.avif') type('image/avif'),url('section-backgrounds/section-04-superhuman-echo.webp') type('image/webp')); background-position:center,64% 50%; }
.works::before { background-image:linear-gradient(108deg,rgba(9,12,12,.89),rgba(9,12,12,.69) 58%,rgba(9,12,12,.83)),image-set(url('section-backgrounds/section-05-future-studio.avif') type('image/avif'),url('section-backgrounds/section-05-future-studio.webp') type('image/webp')); background-position:center,61% 50%; }
.listen-connect::before { background-image:linear-gradient(106deg,rgba(241,238,226,.9),rgba(241,238,226,.72) 58%,rgba(241,238,226,.84)),image-set(url('section-backgrounds/section-06-macintosh-desk.avif') type('image/avif'),url('section-backgrounds/section-06-macintosh-desk.webp') type('image/webp')); background-position:center,63% 50%; }
@media (max-width:767px) {
  .releases::before { background-image:linear-gradient(180deg,rgba(8,14,14,.85),rgba(8,14,14,.65) 54%,rgba(8,14,14,.84)),image-set(url('section-backgrounds/section-02-tokyo-shitamachi-mobile.avif') type('image/avif'),url('section-backgrounds/section-02-tokyo-shitamachi-mobile.webp') type('image/webp')); background-position:center,50% 50%; }
  .featured-video::before { background-image:linear-gradient(180deg,rgba(241,238,226,.89),rgba(241,238,226,.72) 54%,rgba(241,238,226,.86)),image-set(url('section-backgrounds/section-03-artistic-bouquet-mobile.avif') type('image/avif'),url('section-backgrounds/section-03-artistic-bouquet-mobile.webp') type('image/webp')); background-position:center,56% 48%; }
  .about::before { background-image:linear-gradient(180deg,rgba(8,14,14,.87),rgba(8,14,14,.67) 55%,rgba(8,14,14,.85)),image-set(url('section-backgrounds/section-04-superhuman-echo-mobile.avif') type('image/avif'),url('section-backgrounds/section-04-superhuman-echo-mobile.webp') type('image/webp')); background-position:center,66% 50%; }
  .works::before { background-image:linear-gradient(180deg,rgba(9,12,12,.89),rgba(9,12,12,.68) 54%,rgba(9,12,12,.84)),image-set(url('section-backgrounds/section-05-future-studio-mobile.avif') type('image/avif'),url('section-backgrounds/section-05-future-studio-mobile.webp') type('image/webp')); background-position:center,62% 50%; }
  .listen-connect::before { background-image:linear-gradient(180deg,rgba(241,238,226,.9),rgba(241,238,226,.72) 55%,rgba(241,238,226,.87)),image-set(url('section-backgrounds/section-06-macintosh-desk-mobile.avif') type('image/avif'),url('section-backgrounds/section-06-macintosh-desk-mobile.webp') type('image/webp')); background-position:center,64% 50%; }
}

/* Official Suno embed session surface. The iframe has an empty src until a track is selected. */
.suno-sessions { padding-top:clamp(7rem,13vw,13rem); padding-bottom:clamp(7rem,13vw,13rem); }
.suno-sessions .section-heading { margin-bottom:clamp(2.5rem,6vw,5rem); }
.suno-session-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.75rem,1.5vw,1.4rem); margin:0; padding:0; list-style:none; }
.suno-track-card { position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-rows:1fr auto; width:100%; min-height:13rem; padding:1rem; overflow:hidden; border:1px solid rgba(214,237,95,.3); background:#10100f; color:var(--paper); text-align:left; cursor:pointer; isolation:isolate; }
.suno-track-card::after { position:absolute; z-index:-1; inset:0; background:radial-gradient(circle at var(--spot-x,50%) var(--spot-y,50%),rgba(214,237,95,.16),transparent 52%); content:''; opacity:0; transition:opacity .25s ease; }
.suno-track-card:hover::after,.suno-track-card:focus-visible::after,.suno-track-card[aria-pressed="true"]::after { opacity:1; }
.suno-track-cover { position:absolute; z-index:-2; inset:0; background-position:center; background-repeat:no-repeat; background-size:cover; opacity:.72; transition:opacity .25s ease; }
.suno-track-card:hover .suno-track-cover,.suno-track-card:focus-visible .suno-track-cover,.suno-track-card[aria-pressed="true"] .suno-track-cover { opacity:.9; }
.suno-track-index,.suno-track-action { color:var(--accent); font:.61rem/1 var(--sans); font-weight:700; letter-spacing:.14em; }
.suno-track-title { align-self:end; max-width:14ch; font:clamp(1.15rem,1.75vw,1.75rem)/.95 var(--serif); letter-spacing:-.03em; }
.suno-track-action { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; min-height:44px; margin-top:1rem; }
.suno-all-tracks { margin-top:clamp(2.5rem,5vw,4rem); }
.suno-float-player { position:fixed; z-index:30; right:max(1rem,env(safe-area-inset-right)); bottom:max(1rem,env(safe-area-inset-bottom)); display:none; width:min(25rem,calc(100vw - 2rem)); overflow:hidden; border:1px solid rgba(214,237,95,.5); background:#10100f; box-shadow:0 1.25rem 4rem rgba(0,0,0,.38); color:var(--paper); }
.suno-float-player.is-open { display:block; }
.suno-float-bar { display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:0 .5rem 0 1rem; border-bottom:1px solid var(--line); }
.suno-float-bar p { margin:0; color:var(--accent); font:.62rem/1 var(--sans); font-weight:700; letter-spacing:.14em; }
.suno-float-bar div { display:flex; }
.suno-float-bar button { display:grid; width:44px; min-height:44px; place-items:center; border:0; background:transparent; color:var(--paper); font:1.15rem/1 var(--sans); cursor:pointer; }
.suno-float-bar button:hover,.suno-float-bar button:focus-visible { background:var(--accent); color:var(--ink); }
.suno-float-player iframe { display:block; width:100%; height:23rem; border:0; background:#171714; }
.suno-float-player > a { display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:0 1rem; color:var(--paper); font:.62rem/1 var(--sans); font-weight:700; letter-spacing:.12em; }
.suno-float-player > a:hover,.suno-float-player > a:focus-visible { background:var(--accent); color:var(--ink); }
.suno-float-player.is-minimized iframe,.suno-float-player.is-minimized > a { display:none; }
@media (max-width:767px) { .suno-session-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; } .suno-track-card { min-height:11.5rem; padding:.8rem; } .suno-track-title { font-size:1.12rem; } .suno-float-player { right:max(.75rem,env(safe-area-inset-right)); bottom:max(.75rem,env(safe-area-inset-bottom)); width:calc(100vw - 1.5rem); max-height:calc(100svh - 1.5rem); } .suno-float-player iframe { height:min(52svh,21rem); } }
@media (prefers-reduced-motion: reduce) { .suno-track-card::after,.suno-track-cover { transition:none; } }

/* Listen / Connect is deliberately one LinkCore choice surface, not invented platform links. */
.platform-chooser { display:block; max-width:36rem; margin-top:clamp(2rem,4vw,3.6rem); overflow:hidden; border:1px solid rgba(16,16,15,.28); background:rgba(241,238,226,.36); color:var(--ink); }
.streaming-copy { max-width:none; font-size:clamp(1.5rem,2.2vw,2.35rem); }
.streaming-copy > span { display:block; white-space:nowrap; }
.platform-cues { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:rgba(16,16,15,.2); }
.platform-cue { display:flex; align-items:center; gap:.7rem; min-height:68px; padding:.8rem; background:rgba(241,238,226,.72); font:.64rem/1.15 var(--sans); letter-spacing:.04em; }
.platform-cue svg { flex:0 0 auto; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; }
.platform-cue b { font-weight:700; }
.platform-chooser-footer { display:flex; align-items:center; justify-content:space-between; min-height:64px; padding:0 .85rem 0 1rem; background:var(--ink); color:var(--paper); font:.68rem/1 var(--sans); letter-spacing:.12em; }
.circle-arrow { display:grid; flex:0 0 auto; width:32px; height:32px; place-items:center; border:1px solid currentColor; border-radius:50%; font-size:1rem; line-height:1; transition:transform .22s ease,background .22s ease,color .22s ease; }
.platform-chooser:hover .circle-arrow,.platform-chooser:focus-visible .circle-arrow,.connect-directory a:hover .circle-arrow,.connect-directory a:focus-visible .circle-arrow { transform:translateX(3px); background:var(--accent); color:var(--ink); }
.connect-directory ul { margin-top:0; }
.connect-directory a,.pending-link { display:grid; grid-template-columns:24px minmax(0,1fr) 32px; justify-content:initial; min-height:64px; padding:.45rem 0; }
.connect-icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.45; }
.connect-directory a > span:nth-child(2),.pending-link > span:nth-child(2) { min-width:0; }
.pending-link .circle-arrow { border-color:currentColor; }
.pending-link small { display:block; margin-top:.25rem; }
@media (max-width:767px) { .platform-chooser { margin-top:1.8rem; } .streaming-copy > span { display:inline; white-space:normal; } .platform-cue { min-height:62px; padding:.7rem; font-size:.58rem; } .platform-chooser-footer { min-height:60px; } .connect-directory a,.pending-link { min-height:62px; } }
@media (prefers-reduced-motion: reduce) { .circle-arrow { transition:none; } }

/* Local official Suno artwork is deferred with native image loading; paint remains the card fallback. */
.suno-track-cover {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 38%;
  opacity:1;
  filter:saturate(.82) contrast(.93) brightness(.78);
}
.suno-track-card { background:var(--suno-paint,#10100f); }
.suno-track-card:hover .suno-track-cover,
.suno-track-card:focus-visible .suno-track-cover,
.suno-track-card[aria-pressed="true"] .suno-track-cover {
  opacity:1;
  filter:saturate(.96) contrast(.96) brightness(.86);
}
.suno-track-title { position:relative; text-shadow:0 2px 18px rgba(0,0,0,.9); }
.suno-track-index,.suno-track-action { position:relative; text-shadow:0 1px 10px rgba(0,0,0,.86); }
@media (prefers-reduced-motion: reduce) {
  .suno-track-cover { filter:saturate(.82) contrast(.93) brightness(.78); }
}
@media (max-width:767px) {
  .suno-track-title { max-width:100%; font-size:1rem; letter-spacing:-.055em; line-height:.98; }
}