@font-face{font-family:"Signal";src:url(/assets/AtcommSignalSans-Display.woff2?v=20261022-type-scale&work=b07b5b96b2d1) format("woff2");font-weight:400 900;font-display:swap}
:root{--graphite:#0C0D0F;--ignite:#FF3D1F;--pearl:#F3F1EE;--silver:#8A8D91;--amber:#FFB070;
 --display:"Signal","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;--body:"AtcommText","PingFang SC","Noto Sans SC","Source Han Sans SC","Microsoft YaHei",system-ui,sans-serif;
 --nav:"AtcommText","PingFang SC","Noto Sans SC","Source Han Sans SC","Microsoft YaHei",system-ui,sans-serif;--small-text:18px;
 --pad:clamp(20px,5vw,80px);--rule-y:72px;--ease:cubic-bezier(.2,.7,.2,1);--gap:12px}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--graphite)}body{font-family:var(--body);font-weight:400;font-synthesis:none;color:var(--pearl);line-height:1.6;font-size:var(--small-text);overflow-x:hidden}
a{color:inherit}
b,strong{font-weight:inherit}img{display:block}:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--pearl);color:var(--graphite);padding:8px 14px;z-index:99}.skip:focus{left:8px}
#grain{position:fixed;inset:-50%;z-index:50;pointer-events:none;opacity:.085;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
header{position:fixed;top:0;left:0;right:0;height:var(--rule-y);z-index:40;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);background:rgba(12,13,15,.9);backdrop-filter:blur(10px)}
header::after{content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:0;height:1px;background:currentColor;opacity:.28}
.logo img{height:30px;width:auto}nav{display:flex;gap:clamp(14px,2.4vw,34px);font-family:var(--nav);font-size:14px;letter-spacing:.04em}nav a{text-decoration:none;opacity:.86}nav a[aria-current]{opacity:1;color:var(--ignite)}
@media (max-width:700px){nav .opt{display:none}}
.head{padding:calc(var(--rule-y) + 7vh) var(--pad) 5vh;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.head h1{font-family:var(--display);font-weight:800;font-size:clamp(40px,5.6vw,96px);line-height:1.04;letter-spacing:-.02em}
.head h1 em{font-style:normal;color:var(--ignite)}
.filt{display:none;gap:6px;font-size:var(--small-text)}.js-work .filt{display:flex}
.filt button{font:inherit;color:inherit;background:none;border:1px solid rgba(243,241,238,.28);border-radius:999px;padding:8px 16px;cursor:pointer;opacity:.8}
.filt button[aria-pressed=true]{border-color:var(--ignite);color:var(--ignite);opacity:1}
/* the wall: same card language as the homepage wall. Chosen work is larger and named; the rest is a dense wall. */
.wall{list-style:none;display:grid;grid-template-columns:repeat(30,1fr);gap:var(--gap);padding:0 var(--pad) 10vh}
.c{grid-column:span 6;min-width:0}.c.sel{grid-column:span 10}
.c a{all:unset;display:block;width:100%;cursor:pointer;position:relative}
.c a:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.ph{display:block;position:relative;aspect-ratio:5/6;border-radius:12px;overflow:hidden;background:#000;transition:filter .45s var(--ease),opacity .45s var(--ease)}
.ph img{width:100%;height:100%;object-fit:cover;object-position:var(--focus)}
[data-k="angus"] .ph img,[data-k="extra"] .ph img{object-fit:contain}
.cap{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;font-size:var(--small-text);line-height:1.35;overflow-wrap:anywhere;background:linear-gradient(transparent,rgba(0,0,0,.82));border-radius:0 0 12px 12px;opacity:0;transform:translateY(6px);transition:.35s var(--ease)}
html[lang=zh-CN] .cap{display:block;text-wrap:balance}
.cap b{display:block;font-weight:600;font-size:var(--small-text);letter-spacing:.14em;opacity:.78;margin-bottom:2px}
.c.sel .cap{position:static;opacity:1;transform:none;background:none;padding:14px 2px 22px;font-size:var(--small-text)}
.c.sel .cap b{color:var(--ignite);opacity:1}
.more{grid-column:1/-1;display:flex;align-items:center;gap:16px;margin:5vh 0 1vh;font-size:var(--small-text);letter-spacing:.14em;color:rgba(243,241,238,.62)}
.more::after{content:"";flex:1;height:1px;background:rgba(243,241,238,.16)}
@media (hover:hover){
 .wall:has(.c a:hover) .c:not(:has(a:hover)) .ph{filter:grayscale(1) brightness(.5);opacity:.7}
 .c a:hover .cap{opacity:1;transform:none}}
.c a:focus-visible .cap{opacity:1;transform:none}
.c.media-failed .cap,body:not(.js-work) .c:not(.sel) .cap{opacity:1;transform:none}
.wall:has(.c a:focus-visible) .c:not(:has(a:focus-visible)) .ph{filter:grayscale(1) brightness(.5);opacity:.7}
.wall.only .c:not(.sel),.wall.only .more{display:none}
@media (max-width:760px){
 .wall{grid-template-columns:repeat(2,1fr);gap:8px;padding:0 var(--pad) 8vh}
 .c{grid-column:auto}.c.sel{grid-column:1/-1}
 .c.sel .ph{aspect-ratio:auto}.c.sel .ph img{height:auto}
 .cap{position:static;opacity:1;transform:none;background:none;padding:10px 4px 14px;font-size:var(--small-text)}
 .cap b{font-size:var(--small-text)}
 .c.sel .cap{padding:10px 4px 18px;font-size:var(--small-text)}.more{margin:3vh 0 1vh}}
footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:0 var(--pad);padding:22px 0 48px;font-size:var(--small-text);color:rgba(243,241,238,.62);border-top:1px solid rgba(243,241,238,.14)}
body>footer>a{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
/* detail: the whole work, never cropped */
dialog{border:0;padding:0;background:transparent;color:var(--pearl);max-width:min(1200px,94vw);width:100%;margin:auto;--duo:calc((min(1200px,94vw) - 12px) / 2.528)}
dialog::backdrop{background:rgba(6,6,8,.9);backdrop-filter:blur(6px)}
.dlg{display:grid;gap:22px}
.dlg .work{border-radius:12px;overflow:hidden;background:#000}.dlg .work img{width:100%;height:auto;max-height:60svh;object-fit:contain}
/* two works shown side by side at one height: the Bai Lu poster (3:4) opens, the KV (16:9) answers */
.dlg .work.duo{display:flex;justify-content:center;gap:12px;background:none;border-radius:0}
.dlg .work.duo img{width:auto;height:min(60svh,var(--duo));max-height:none;border-radius:12px}
.dlg .meta{font-size:var(--small-text);letter-spacing:.14em;opacity:.78}
.dlg h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,52px);line-height:1.1;margin-top:6px}
.dlg .txt{display:grid;grid-template-columns:5fr 7fr;gap:36px;border-top:2px solid var(--ignite);padding-top:18px}
.dlg .txt.single{grid-template-columns:1fr}
.dlg [hidden]{display:none}
.dlg .ch{font-size:var(--small-text);line-height:1.8;opacity:.8}.dlg .idea{font-family:var(--display);font-weight:700;font-size:clamp(19px,1.8vw,26px);line-height:1.4}
.dlg .idea.long{font-family:var(--body);font-weight:400;font-size:var(--small-text);line-height:1.75}
.dlg>:last-child{padding-bottom:28px}
dialog .close{position:fixed;top:18px;right:22px;min-width:44px;min-height:44px;font:inherit;font-size:28px;line-height:1;color:var(--pearl);background:none;border:0;cursor:pointer;padding:8px}
@media (max-width:760px){.dlg .txt{grid-template-columns:1fr;gap:12px}dialog{margin:64px auto 0;max-height:calc(100svh - 64px)}}
@media (max-width:560px){.dlg .work.duo{flex-direction:column}.dlg .work.duo img{width:100%;height:auto}}
@media (prefers-reduced-motion:reduce){.ph,.ph img,.cap{transition:none}}

/* Nine supporting works fill three desktop rows; the final mobile work spans both columns. */
.c:not(.sel){grid-column:span 10}
@media(max-width:760px){.c:not(.sel){grid-column:auto}.c:not(.sel):last-child{grid-column:1/-1}.c:not(.sel):last-child .ph{aspect-ratio:16/9}}


.cap b,.dlg .meta,.dlg .ch,.dlg .idea,.filt,footer{font-family:var(--body);font-weight:400}

/* Shared stage navigation: the menu takes over only when the desktop links no longer fit. */
header{height:auto;min-height:72px;flex-wrap:wrap;column-gap:16px;padding-block:14px}
header .logo{display:flex;align-items:center;flex:none;min-width:44px;min-height:44px}
header .stage-nav{align-items:center;flex:0 1 auto;flex-wrap:wrap;justify-content:flex-end;min-width:0}
header .stage-nav a{display:flex;align-items:center;flex:none;min-width:44px;min-height:44px;white-space:nowrap}
header .stage-nav a.opt{display:flex}
header .stage-nav #motion-toggle{flex:none;white-space:nowrap}
header .stage-nav a[aria-current]{opacity:1;color:var(--ignite);text-decoration:underline;text-underline-offset:7px}
body.ink-dark:not(.nav-open) header .stage-nav a[aria-current]{color:var(--scarlet)}
header .stage-nav .nav-contact{text-decoration:underline;text-underline-offset:7px;text-decoration-color:var(--ignite)}
header .nav-toggle{display:none;align-items:center;justify-content:center;flex-direction:column;gap:6px;min-width:44px;min-height:44px;padding:10px;border:0;background:none;color:inherit;cursor:pointer}
header .nav-toggle span{display:block;width:23px;height:2px;background:currentColor}
header .nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
header .nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

@media(max-width:960px){
  html.js-nav header .nav-toggle{display:flex}
  html.js-nav header .stage-nav{display:none;position:fixed;top:var(--rule-y);left:0;right:0;height:calc(100dvh - var(--rule-y));overflow-y:auto;align-items:stretch;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;gap:0;padding:20px var(--pad) max(24px,env(safe-area-inset-bottom));background:var(--graphite);color:var(--pearl);border-top:1px solid rgba(243,241,238,.25);font-size:clamp(18px,4vw,25px);letter-spacing:0}
  html.js-nav header .stage-nav.open{display:flex}
  html.js-nav header .stage-nav a{width:100%;min-height:56px;white-space:normal;border-bottom:1px solid rgba(243,241,238,.18)}
  html.js-nav header .stage-nav a[aria-current]{border-bottom-color:var(--ignite)}
  html.js-nav header .stage-nav a[hreflang]{margin-top:12px;border-bottom:0;font-size:18px}
  html.js-nav header .stage-nav #motion-toggle:not([hidden]){display:flex;align-items:center;width:100%;min-height:56px;text-align:left;font-size:18px;border-top:1px solid rgba(243,241,238,.18)}
  body.nav-open{overflow:hidden}
  body.nav-open header{color:var(--pearl);background:var(--graphite)}
  body.nav-open header .logo img{filter:none}
  html:not(.js-nav) header{position:relative;height:auto;min-height:var(--rule-y);flex-wrap:wrap;padding-block:12px}
  html:not(.js-nav) header .stage-nav{width:100%;flex-wrap:wrap;gap:0 16px}
  html:not(.js-nav) header .stage-nav a{min-height:44px}
}

@font-face{font-family:AtcommText;src:url(/assets/NotoSansSC-Website.woff2?v=20261022-type-scale&work=cfb8959b3206) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:AtcommText;src:url(/assets/NotoSansSC-Website-600.woff2?v=20261022-type-scale&work=dd91f831bf95) format("woff2");font-weight:600;font-display:swap}
.logo img{filter:brightness(0) invert(1)}
footer nav{display:flex;flex-wrap:wrap;gap:12px 18px;font-family:var(--body);font-size:18px}
footer nav a{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
.source-language{display:block;font-size:var(--small-text);letter-spacing:0;opacity:.82}
.dlg .work img{max-width:min(100%,var(--source-width,100%));max-height:min(60svh,var(--source-height,60svh));margin-inline:auto}
.dlg .work.duo img{height:min(60svh,407px,var(--duo),var(--source-height,407px));max-height:none;max-width:min(100%,var(--source-width,100%))}
.dlg .award{font-size:var(--small-text);color:var(--amber)}
.dlg .detail-link{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:5px}
@media(max-width:560px){.dlg .work.duo img{width:auto;height:auto;max-width:min(100%,var(--source-width,100%));max-height:min(50svh,var(--source-height,50svh))}}