.posters-project { background:#000; color:#fff; font-family:Arial,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif; }
.posters-project :is(h2,h3,p,figure) { margin:0; }
.posters-project button,.posters-project a { color:inherit; font:inherit; }
.posters-project a { text-decoration:none; }
.posters-project img { display:block; width:100%; height:auto; border-radius:var(--surface-radius); }
.poster-wrap { width:min(90%,1360px); margin-inline:auto; }
.posters-project :is(button,a):focus-visible { outline:1px solid #fff; outline-offset:5px; }
.poster-art { --hover-x:50%; --hover-y:50%; display:block; position:relative; padding:0; border:0; background:transparent; border-radius:var(--surface-radius); overflow:hidden; cursor:pointer; }
.poster-art::after { content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; padding:1px; opacity:0; pointer-events:none; background:radial-gradient(210px circle at var(--hover-x) var(--hover-y),#ffffffb3,#ffffff30 48%,#ffffff09 85%); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; transition:opacity .28s ease; }
@media (hover:hover) and (pointer:fine) { .poster-art:is(:hover,:focus-visible)::after { opacity:1; } }
.poster-orbit { --orbit-radius:clamp(130px,22vw,300px); --orbit-card-width:clamp(62px,8vw,116px); position:relative; height:clamp(420px,78svh,780px); overflow:clip; isolation:isolate; }
.poster-orbit-perspective { position:absolute; inset:0; perspective:1200px; }
.poster-orbit-tilt { position:absolute; left:50%; top:49%; transform:rotateX(32deg) rotateZ(-12deg); transform-style:preserve-3d; }
.poster-orbit-ring { transform-style:preserve-3d; }
.poster-orbit-card { position:absolute; left:0; top:0; width:var(--orbit-card-width); height:calc(var(--orbit-card-width) * 1.35); margin-left:calc(var(--orbit-card-width) * -.5); margin-top:calc(var(--orbit-card-width) * -.675); transform:rotateY(var(--orbit-angle)) translateZ(var(--orbit-radius)); }
.poster-orbit-card img { width:100%; height:100%; object-fit:cover; }
.posters-project .poster-orbit-title { position:absolute; top:49%; left:50%; transform:translate(-50%,-50%); width:max-content; max-width:90%; z-index:3; font-size:clamp(48px,7.8vw,116px); line-height:1; font-weight:500; letter-spacing:-.055em; text-align:center; }
.poster-orbit-links { position:absolute; bottom:36px; left:0; right:0; z-index:3; display:flex; justify-content:center; gap:32px; font-size:14px; color:#aaa; }
.poster-section-heading { padding-block:80px 46px; }
.posters-project .poster-section-heading h2 { font-size:clamp(46px,5.2vw,80px); line-height:1.05; font-weight:500; letter-spacing:-.045em; }
.poster-section-heading h2 .poster-heading-subtitle { font-size:.72em; }
.poster-visual-scroll { background:#000; }
.poster-visual-stage { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; padding:60px 5%; }
.poster-visual-loop { display:contents; }
.poster-visual-loop:focus-visible { outline:1px solid #ffffff40; outline-offset:5px; border-radius:var(--surface-radius); }
.poster-visual-layer .poster-art { width:100%; }
.poster-visual-caption { display:none; }
.posters-project[data-motion-mode="scroll"] .poster-visual-stage { position:relative; height:100svh; min-height:500px; box-sizing:border-box; display:flex; justify-content:center; padding:0 0 64px; overflow:clip; }
.posters-project[data-motion-mode="scroll"] .poster-visual-loop { --flip-card-height:min(64svh,580px); position:relative; display:block; width:min(78%,calc(64svh * .75 + 160px),720px); height:100%; perspective:1200px; touch-action:pan-y; }
.posters-project[data-motion-mode="scroll"] .poster-visual-layer { position:absolute; inset:0; display:grid; place-items:center; transform-style:preserve-3d; pointer-events:none; }
.posters-project[data-motion-mode="scroll"] .poster-visual-layer .poster-art { width:min(78%,calc(var(--flip-card-height) * var(--poster-aspect))); backface-visibility:hidden; will-change:transform; user-select:none; -webkit-user-select:none; }
.posters-project[data-motion-mode="scroll"] .poster-visual-layer .poster-art::before { content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none; background:#000; opacity:var(--flip-shade,0); }
.poster-visual-layer img { -webkit-user-drag:none; }
.posters-project[data-motion-mode="scroll"] .poster-visual-caption { display:flex; position:absolute; bottom:22px; left:5%; right:5%; flex-direction:column; justify-content:center; align-items:center; gap:10px; font-size:13px; color:#aaa; }
.poster-visual-pagination { display:flex; align-items:center; justify-content:center; gap:2px; }
.poster-visual-pagination button { display:grid; place-items:center; width:20px; height:20px; padding:0; border:0; background:transparent; border-radius:50%; cursor:pointer; }
.poster-visual-pagination button::before { content:""; width:5px; height:5px; border-radius:50%; background:#ffffff40; transition:background .2s,transform .2s; }
.poster-visual-pagination button[aria-pressed="true"]::before { background:#fff; transform:scale(1.4); }
.poster-commercial { padding-bottom:90px; }
.poster-commercial-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); align-items:start; gap:clamp(12px,1.5vw,24px); perspective:1200px; }
.poster-commercial-column { display:grid; gap:clamp(12px,1.5vw,24px); padding-top:calc(var(--column-depth) * clamp(24px,4vw,64px)); }
.poster-commercial-cell { perspective:1000px; }
.poster-commercial-cell .poster-art { width:100%; transform-origin:50% 100%; }
.poster-portraits { --portrait-size:clamp(220px,30vw,440px); overflow:clip; padding-bottom:100px; }
.poster-portrait-title { display:flex; justify-content:center; align-items:center; height:220px; pointer-events:none; }
.posters-project[data-motion-mode="scroll"] .poster-portrait-title { position:sticky; top:0; height:100svh; margin-bottom:-100svh; z-index:3; mix-blend-mode:exclusion; }
.posters-project .poster-portrait-title h3 { font-size:clamp(52px,8vw,128px); line-height:1; font-weight:500; letter-spacing:-.055em; pointer-events:auto; }
.poster-portrait-grid { position:relative; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:var(--portrait-size); gap:clamp(32px,6vw,96px) clamp(16px,2vw,32px); padding-block:80px; }
.poster-portrait-cell { grid-column:var(--portrait-column) / span 3; grid-row:var(--portrait-row); display:flex; justify-content:center; align-items:center; }
.poster-portrait-cell .poster-art { width:min(100%,calc(var(--portrait-size) * var(--poster-aspect))); }
.posters-lightbox { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; box-sizing:border-box; padding:70px 60px 80px; border:0; margin:0; background:#000; color:#fff; overflow:hidden; }
.posters-lightbox::backdrop { background:#000; }
.poster-viewer-stage { height:100%; display:flex; align-items:center; justify-content:center; }
.poster-viewer-stage img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
.poster-arrow { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #ffffff65; border-radius:50%; background:transparent; font-size:22px!important; line-height:1; cursor:pointer; }
.poster-close { position:absolute; right:24px; top:20px; font-size:30px!important; }
.poster-viewer-nav { position:absolute; bottom:22px; left:24px; right:24px; display:flex; align-items:center; justify-content:space-between; }
@media (max-width:700px) {
 .poster-orbit { --orbit-radius:clamp(126px,30vw,210px); --orbit-card-width:clamp(54px,12vw,84px); height:clamp(400px,68svh,580px); }
 .poster-orbit-title { font-size:clamp(44px,9vw,66px)!important; }
 .poster-orbit-links { gap:24px; bottom:22px; font-size:12px; }
 .poster-section-heading { padding-block:60px 32px; }
 .poster-visual-stage { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
 .posters-project[data-motion-mode="scroll"] .poster-visual-loop { --flip-card-height:min(60svh,calc(72vw / .75)); width:82%; }
 .poster-commercial-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
 .poster-commercial-column { display:contents; }
 .poster-portraits { --portrait-size:clamp(200px,65vw,340px); padding-bottom:60px; }
 .poster-portrait-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 20px; padding-block:60px; }
 .poster-portrait-cell { grid-column:auto; grid-row:auto; }
 .poster-portrait-title h3 { font-size:clamp(44px,12vw,74px)!important; }
 .posters-lightbox { padding:70px 18px 80px; }
}
@media (prefers-reduced-motion:reduce) { .poster-art::after { transition:none; } }