*{box-sizing:border-box}html,body{margin:0;background:#090909;color:#e2dfd8;font-family:"Helvetica Neue","PingFang SC",sans-serif}body{overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #ed573f;outline-offset:5px}header{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;border-bottom:1px solid #292929;position:relative;z-index:5;background:#090909}.brand{font-size:25px;font-weight:700;letter-spacing:-1.4px}.brand sup{font-size:10px;margin-left:5px}nav{display:flex;gap:8px}nav button{padding:10px 16px;background:none;border:1px solid #383838;font-size:12px}nav button[aria-pressed=true]{background:#dedbd3;color:#141414;border-color:#dedbd3}.intro{position:absolute;top:118px;left:4%;pointer-events:none;z-index:3}.intro>p:first-child{font-size:9px;letter-spacing:.19em;color:#c46a57}h1{font-weight:400;font-size:clamp(27px,3vw,46px);letter-spacing:-.04em;margin:18px 0 12px}h1 span{display:block;font-size:11px;letter-spacing:.18em;margin-top:18px;color:#797773}.subtitle{font-size:12px;color:#86837e;letter-spacing:.12em}#stage{height:calc(100svh - 146px);position:relative;overflow:hidden;perspective:1200px;touch-action:none;cursor:grab;background:radial-gradient(ellipse at 50% 80%,#24201d55,transparent 65%)}#stage.dragging{cursor:grabbing}#world{position:absolute;left:50%;top:58%;width:0;height:0;transform-style:preserve-3d}.card{position:absolute;padding:0;border:1px solid #7774;background:#111;width:230px;left:-115px;top:-100px;text-align:left;backface-visibility:hidden;box-shadow:0 16px 50px #0008;transition:filter .2s,border-color .2s;overflow:hidden}.card:hover{border-color:#c6816b;filter:brightness(1.25)}.card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;pointer-events:none}.card label{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;font-size:9px;color:#a5a19a;pointer-events:none;letter-spacing:.1em}.card label b{font-weight:400;color:#ddd}.ring #world{transform:rotateX(-7deg)}.shelf #world{width:min(1100px,90vw);left:50%;top:80px;height:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:32px 20px;transform:translateX(-50%) rotateX(8deg)!important;transform-origin:center top}.shelf .card{position:relative;width:100%;left:auto;top:auto;box-shadow:0 25px 30px #000,0 2px 0 #8b746b55}.shelf .card:nth-child(3n+2){transform:translateY(26px)}.shelf{overflow-y:auto!important;touch-action:pan-y!important;padding-bottom:100px}.shelf .card label{font-size:8px}.shelf~footer{}body:has(.shelf) .intro{position:relative;top:auto;left:auto;margin:25px 4% 0}body:has(.shelf) #stage{height:calc(100svh - 325px)}footer{height:60px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 4%;border-top:1px solid #292929;font-size:10px;color:#99958e;position:relative;z-index:4;background:#090909}#reset{background:none;border:0;font-size:11px}dialog{background:#101010;color:#e8e2d7;border:1px solid #45413d;padding:45px 22px 20px;width:min(900px,95vw);max-height:95svh}dialog::backdrop{background:#000d;backdrop-filter:blur(12px)}dialog video{width:100%;max-height:68svh;background:black;display:block}#close{position:absolute;right:15px;top:12px;background:none;border:0;font-size:12px}.film-caption{display:flex;justify-content:space-between;align-items:center;gap:15px}.film-caption h2{font-size:16px;font-weight:400}.film-caption p{font-size:10px;color:#aaa}@media(max-width:700px){header{height:110px;align-items:start;padding-top:17px;flex-direction:column;padding-bottom:12px;gap:12px}.brand{font-size:21px}nav{width:100%}nav button{font-size:10px;flex:1;padding:8px 6px}.intro{top:136px}.subtitle{display:none}#stage{height:calc(100svh - 175px)}footer{height:65px;flex-wrap:wrap;gap:5px;padding-top:10px;padding-bottom:10px;font-size:9px}footer>span:last-child{width:100%;font-size:8px}.shelf #world{grid-template-columns:repeat(3,1fr);gap:20px 12px;top:40px}.shelf .card label{padding:7px 5px;font-size:7px}.film-caption{display:block}body:has(.shelf) #stage{height:calc(100svh - 342px)}}
.ring #world{top:43%}
.intro{z-index:4}

.cover-pending{aspect-ratio:4/3;background:#1b211a;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;color:#cecbbd}.cover-pending span{font-size:8px;letter-spacing:.1em}.cover-pending strong{font-size:23px;font-weight:400}.cover-pending small{font-size:9px;color:#999b8b}

/* Gallery embedded in the 6th 01 films section. */
body.embedded header{height:62px;justify-content:flex-start;padding:10px 18px;flex-direction:row;align-items:center;background:#090909}
body.embedded .brand,body.embedded .intro{display:none}
body.embedded #stage,body.embedded:has(.shelf) #stage{height:calc(100svh - 122px)}
body.embedded .ring #world{top:42%}


body.embedded footer{height:60px}
body.embedded .shelf #world{top:30px}
body.embedded .card label b{overflow-wrap:anywhere}
@media(max-width:700px){body.embedded header{padding:10px;height:60px}body.embedded #stage,body.embedded:has(.shelf) #stage{height:calc(100svh - 125px)}body.embedded footer{height:65px}}

/* Elliptical image band: camera setback, visible back faces and pointer tilt. */
.ring .ring-tilt{position:absolute;left:50%;top:42%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
#stage.ring{perspective:1300px;perspective-origin:50% 38%;touch-action:pan-y}
.ring #world,body.embedded .ring #world{left:0;top:0;transform-style:preserve-3d}
.ring .card{backface-visibility:visible;border:0;box-shadow:none;background:#000;overflow:hidden}
.ring .card img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;filter:brightness(.92);transition:filter .25s,transform .3s}
.ring .card label{display:none}.ring .card:hover{filter:none}
.ring .card:hover img{filter:brightness(1.15);transform:scale(1.07)}
.ring.ring-hover .card:not(:hover) img{filter:brightness(.4)}

#stage:not(.ring) .ring-tilt{display:contents}

/* Readable information outside the rotating image band. */
.film-info{position:absolute;z-index:6;left:50%;bottom:18px;transform:translateX(-50%);width:min(680px,90%);padding:18px 22px;background:rgba(9,9,9,.94);border:0;box-shadow:none;cursor:auto;touch-action:pan-y}
.film-info[hidden]{display:none}
.film-info h2{font-size:19px;font-weight:400;margin:0 0 10px;letter-spacing:.03em}
.film-info p{font-size:13px;line-height:1.8;color:#bdbab3;white-space:pre-line;margin:0;max-height:160px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.film-info a{display:inline-block;font-size:10px;color:#c6816b;margin-top:12px;letter-spacing:.1em}
.ring.ring-hover .card.is-active img{filter:brightness(1.15);transform:scale(1.07)}
@media(max-width:700px){.film-info{bottom:10px;padding:14px 16px}.film-info h2{font-size:16px}.film-info p{font-size:12px;max-height:120px}}

/* Keep scrolling available without a visible scrollbar rail. */
html,body,#stage,.film-info p{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,#stage::-webkit-scrollbar,.film-info p::-webkit-scrollbar{display:none}

/* BRAT: immediate central preview. */
.ring-preview{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) scale(.88);width:min(44vw,620px);aspect-ratio:4/3;opacity:0;transition:opacity .28s,transform .32s cubic-bezier(.2,.8,.2,1);pointer-events:none;z-index:4;overflow:hidden}
.ring-preview img{width:100%;height:100%;object-fit:cover;display:block}
.ring.ring-hover .ring-preview{opacity:1;transform:translate(-50%,-50%) scale(1)}
#stage:not(.ring) .ring-preview{display:none}
.film-info{pointer-events:auto;background:linear-gradient(transparent,#090909e8 24%);padding-top:28px}
.film-info p{max-height:min(220px,32svh);overflow-y:auto;display:block;-webkit-line-clamp:unset;overscroll-behavior:contain}
.film-info a{display:none}
@media(max-width:720px){.ring-preview{display:none}}

/* Seamless gallery surface, with an immediate title below the ring. */
html,body,body.embedded header,header,footer{background:#060606}
header,footer{border:0}
#stage{background:none;border:0;box-shadow:none}
.hover-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:14px;letter-spacing:.12em;color:#eee;pointer-events:none;text-align:center;max-width:54%;}

.film-info h2{display:none}
@media(max-width:700px){.hover-title{font-size:12px;max-width:90%;width:90%}}

/* View switch at the upper right of the works area. */
header nav{margin-left:auto;justify-content:flex-end}
body.embedded header{justify-content:flex-end}
@media(max-width:700px){header nav{width:auto;align-self:flex-end}nav button{flex:initial;padding:8px 14px}}

.shelf .card label b{overflow-wrap:anywhere;line-height:1.5}.hover-title{overflow-wrap:anywhere}html[lang="en"] .hover-title{letter-spacing:.04em}

/* Raise the view controls slightly within the toolbar. */
header nav{transform:translateY(-8px)}

/* Lift the ring and its central preview together. */
.ring .ring-tilt{top:calc(42% - 192px)}
.ring-preview{top:calc(46% - 192px)}

/* Controls live beside the parent section heading; retain the ring geometry. */
body.embedded header{visibility:hidden;pointer-events:none}

/* Keep the full 4:3 preview within the viewport and attach the introduction below it. */
.ring-preview,.ring.ring-hover .ring-preview{top:var(--preview-top,12px);width:var(--preview-width,440px);height:auto;aspect-ratio:4/3;transform:translateX(-50%);transition:opacity .28s; background:#060606}
.ring-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none}
.ring .film-info{top:var(--intro-top);bottom:auto;width:var(--preview-width,440px);padding:0;background:rgba(6,6,6,.94);transform:translateX(-50%)}
.ring .film-info p{max-height:var(--intro-height,160px);font-size:13px;line-height:1.8;overflow-y:auto}

/* The grid shares the same complete cover and introduction preview. */
#stage.shelf .ring-preview{display:block;top:var(--preview-top,12px);width:var(--preview-width,440px);height:auto;aspect-ratio:4/3;transform:translateX(-50%);transition:opacity .28s;background:#060606}
#stage.shelf.ring-hover .ring-preview{opacity:1;transform:translateX(-50%)}
.shelf.ring-hover .card:not(:hover){filter:brightness(.4)}
.shelf .film-info{top:var(--intro-top);bottom:auto;width:var(--preview-width,440px);padding:0;background:rgba(6,6,6,.94);transform:translateX(-50%)}
.shelf .film-info p{max-height:var(--intro-height,160px);font-size:13px;line-height:1.8;overflow-y:auto}

/* Preview owns its hit area: never select cards through the enlarged cover. */
.ring-preview{visibility:hidden;pointer-events:none}
#stage.ring-hover .ring-preview{visibility:visible;pointer-events:auto;cursor:pointer}
#stage.ring.ring-hover .ring-preview,.ring .film-info{cursor:grab;user-select:none;-webkit-user-select:none}
#stage.ring.dragging,#stage.ring.dragging *{cursor:grabbing!important;user-select:none}
.ring .ring-tilt{z-index:0}
#stage.shelf #world{z-index:0}
@media(max-width:720px){#stage.ring .ring-preview{display:block}}

/* Explicit dimensions avoid percentage image heights resolving to intrinsic size. */
#stage .ring-preview,#stage.ring-hover .ring-preview{height:var(--preview-height);min-height:0;max-height:none;aspect-ratio:auto;padding:0;border:0;background:transparent}
#stage .ring-preview img{position:absolute;inset:0;display:block;width:var(--preview-width);height:var(--preview-height);max-width:none;max-height:none;margin:0;padding:0;border:0;object-fit:cover;object-position:center;aspect-ratio:auto}

/* Isolate the 3D band from the flat preview: depth must not cross overlay layers. */
#stage.ring{perspective:none}
.ring .ring-scene{position:absolute;inset:0;z-index:0;isolation:isolate;perspective:1300px;perspective-origin:50% 38%;overflow:hidden}
.shelf .ring-scene{display:contents}
#stage .ring-preview{z-index:10;isolation:isolate;opacity:0;transition:none}
#stage.ring-hover .ring-preview{opacity:1}
#stage .film-info{z-index:11}


/* Red numeric rain stays behind the film band. */
.digital-rain{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.75;mask-image:linear-gradient(transparent,#000 12%,#000 82%,transparent)}
.shelf .digital-rain{display:block}
.ring .ring-scene{z-index:1}
.ring-hover .digital-rain{opacity:.3}

/* Fit the complete orbit within narrow and portrait viewports. */
.ring.portrait-layout .ring-tilt{top:24%}
.ring.portrait-layout .ring-scene{perspective-origin:50% 24%}

.touch-preview{position:fixed;inset:0;margin:auto;width:min(92vw,540px);max-height:86dvh;padding:42px 18px 22px;border:1px solid #34302e;background:#0b0b0b;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;color:#e2dfd8}
.touch-preview::backdrop{background:#000c;backdrop-filter:blur(5px)}
.touch-preview>img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.touch-preview>h2{font-size:20px;line-height:1.4;margin:18px 0 12px}
.touch-preview>p{font-size:14px;line-height:1.85;white-space:pre-line;margin:0 0 22px}
.touch-preview>a{display:block;padding:14px;border:1px solid #8a342e;text-align:center;font-size:14px}
.touch-preview>.touch-close{position:absolute;right:5px;top:0;width:44px;height:40px;background:transparent;border:0;font-size:28px}

/* Grid reading layout: give long introductions the full preview height. */
#stage.shelf.grid-reading .ring-preview{left:6%;transform:none}
#stage.shelf.grid-reading .film-info{left:50%;transform:none;width:44%;padding:0 18px 0 24px;background:rgba(6,6,6,.97)}
#stage.shelf.grid-reading .film-info p{font-size:14px;line-height:1.95;max-height:var(--intro-height);padding-right:12px;scrollbar-width:thin;scrollbar-color:#6e3733 #171313;overscroll-behavior:contain}
#stage.shelf.grid-reading .film-info p::-webkit-scrollbar{display:block;width:4px}
#stage.shelf.grid-reading .film-info p::-webkit-scrollbar-thumb{background:#6e3733;border-radius:4px}
#stage.shelf.grid-reading .film-info::before{content:"";position:absolute;right:100%;top:0;width:24px;height:100%}