@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Noto+Serif+SC:wght@600;700;900&family=Space+Mono:wght@400;700&display=swap');
:root{--ink:#10110f;--paper:#eeeae1;--acid:#d7ff36;--muted:#aaa79f;--line:#ffffff2b;--serif:"Noto Serif SC","Songti SC",serif;--sans:"DM Sans","PingFang SC",sans-serif;--mono:"Space Mono",ui-monospace,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font:14px/1.6 var(--sans);background-image:none;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:50;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='.6'/%3E%3C/svg%3E")}
.skip{position:fixed;top:8px;left:8px;z-index:100;transform:translateY(-150%);padding:10px 14px;background:var(--acid);color:var(--ink)}.skip:focus{transform:none}
.top{position:sticky;top:0;z-index:20;height:76px;display:grid;grid-template-columns:1fr auto;align-items:center;padding:0 3vw;background:#10110fe8;border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:10px;color:var(--paper);font:700 10px var(--mono);letter-spacing:.11em}.brand:before{content:"J";display:grid;place-items:center;width:30px;height:30px;background:var(--acid);color:var(--ink);font:700 18px var(--sans)}
.nav{margin-left:auto;display:flex;align-items:center;gap:22px}.nav a{padding:8px 0;color:var(--paper);border:0;text-decoration:none;font:10px var(--mono);letter-spacing:.08em}.nav a:hover,.nav a:focus-visible{color:var(--acid);outline:none}.nav .active{padding:10px 14px;background:transparent;color:var(--acid);border:1px solid #d7ff3660}
.wrap{width:min(1440px,92vw);margin:auto;padding:0 0 100px}
.intro{position:relative;min-height:66vh;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.45fr);gap:5vw;align-items:end;padding:90px 0 72px;border-bottom:1px solid var(--line);overflow:hidden}
.intro:after{content:"09";position:absolute;right:-.04em;bottom:-.22em;color:transparent;-webkit-text-stroke:1px #ffffff18;font:900 min(34vw,510px)/1 var(--serif);letter-spacing:-.12em;z-index:-1}
.intro-copy{position:relative;z-index:2}.kicker{color:var(--acid);font:10px var(--mono);letter-spacing:.15em}.intro h1{max-width:1000px;margin:22px 0 0;color:var(--paper);font:900 clamp(62px,8.8vw,138px)/.9 var(--serif);letter-spacing:-.075em;text-wrap:balance}.intro h1 em{display:block;color:var(--acid);font-style:normal}
.intro-note{align-self:end;max-width:31em;padding:18px 0 0;border-top:1px solid #ffffff55;color:#c2c0b8;font-size:15px;line-height:1.75}.intro-note strong{display:block;margin-bottom:10px;color:var(--paper);font:10px var(--mono);letter-spacing:.12em}
.catalog-head{display:grid;grid-template-columns:1fr 1fr;align-items:end;padding:82px 0 34px}.catalog-head span{color:var(--acid);font:10px var(--mono);letter-spacing:.14em}.catalog-head p{justify-self:end;max-width:33em;margin:0;color:var(--muted);text-align:right;line-height:1.7}
.wall{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;columns:auto}
.card,.card:nth-child(even),.card.featured{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;width:auto;min-height:560px;margin:0;color:#fff;text-decoration:none;background:#151612;border:1px solid #ffffff20;box-shadow:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease}
.card:nth-child(1){grid-column:span 8;min-height:720px}.card:nth-child(2){grid-column:span 4}.card:nth-child(3){grid-column:span 4}.card:nth-child(4){grid-column:span 8}.card:nth-child(5),.card:nth-child(6),.card:nth-child(7){grid-column:span 4;min-height:620px}.card:nth-child(8){grid-column:span 7;min-height:660px}.card:nth-child(9){grid-column:span 5;min-height:660px}
.card:hover{transform:translateY(-5px);border-color:#d7ff3680;box-shadow:none}.card:active{transform:translateY(-1px) scale(.995)}.card:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.cover{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;object-position:center top;filter:saturate(.82) contrast(1.05);transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s ease}.card:hover .cover{transform:scale(1.035);filter:saturate(1) contrast(1.04)}
.card:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,#090a0908 0%,#090a0920 35%,#090a09e8 78%,#090a09fa 100%)}.card:after{content:"";position:absolute;inset:0;z-index:-1;border:0;pointer-events:none;background:linear-gradient(120deg,transparent 55%,#d7ff3609)}
.visual,.featured .visual{position:absolute;inset:0;min-height:0;padding:22px;display:flex;flex-direction:column;justify-content:space-between}.visual small{align-self:flex-start;padding:6px 8px;color:var(--acid);background:#10110fc9;border:1px solid #d7ff3650;backdrop-filter:blur(8px);font:9px var(--mono);letter-spacing:.12em}.visual b{max-width:88%;color:#fff;font:700 clamp(32px,4vw,64px)/.92 var(--serif);letter-spacing:-.055em;text-shadow:0 3px 20px #000}.body{position:relative;padding:24px;z-index:2}.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}.tags span{padding:3px 6px;color:#d9d7cf;border:1px solid #ffffff50;background:#0003;font:8px var(--mono);letter-spacing:.04em}.body h2{margin:0 0 10px;color:#fff;font:700 clamp(23px,2.2vw,34px)/1.12 var(--serif);letter-spacing:-.035em;text-wrap:balance}.body p{max-width:58ch;margin:0;color:#ffffffb8;font-size:13px;line-height:1.7;text-wrap:pretty}.foot{display:flex;justify-content:space-between;margin-top:20px;padding-top:13px;border-top:1px solid #ffffff55;color:var(--paper);font:700 10px var(--mono);letter-spacing:.06em}.card:hover .foot{color:var(--acid)}
.visual b{display:none}
.card .body{background:linear-gradient(180deg,transparent 0,#090a09c9 18%,#090a09f2 100%)}
.note{display:flex;justify-content:space-between;margin:50px 0 0;padding:20px 0 0;color:var(--muted);border-top:1px solid var(--line);font:10px var(--mono);letter-spacing:.06em}.note:after{content:"SHANGHAI · 2026";color:var(--paper)}
@media(max-width:980px){.intro{grid-template-columns:1fr;min-height:auto;padding:76px 0 56px}.intro-note{max-width:40em}.catalog-head{padding-top:60px}.card:nth-child(n){grid-column:span 6;min-height:560px}.card:nth-child(1){grid-column:span 12;min-height:660px}}
@media(max-width:640px){.top{height:64px;padding:0 14px}.brand{font-size:0}.brand:before{width:28px;height:28px}.nav{gap:10px}.nav a{font-size:9px}.nav .active{padding:8px 9px}.wrap{width:calc(100% - 28px);padding-bottom:64px}.intro{padding:58px 0 42px;gap:34px}.intro:after{bottom:-.08em;font-size:62vw}.intro h1{margin-top:18px;font-size:clamp(47px,14.5vw,66px);line-height:.96}.intro-note{font-size:13px;line-height:1.7}.catalog-head{grid-template-columns:1fr;gap:12px;padding:50px 0 24px}.catalog-head p{justify-self:start;text-align:left;font-size:12px}.wall{grid-template-columns:1fr;gap:12px}.card:nth-child(n),.card:nth-child(1){grid-column:auto;min-height:500px}.card:nth-child(1){min-height:580px}.card:nth-child(5),.card:nth-child(6),.card:nth-child(7){min-height:520px}.visual,.featured .visual{padding:18px}.visual b{font-size:clamp(34px,12vw,52px)}.body{padding:20px}.body h2{font-size:clamp(24px,7.5vw,31px)}.body p{font-size:12px}.note{gap:20px;line-height:1.6}.note:after{text-align:right}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,.cover{transition:none!important}}