.studio-page-visual:has(.about-art){background:transparent;overflow:visible}
.about-art{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;isolation:isolate;--look-x:0px;--look-y:0px;--light-x:60%;--light-y:35%;background:radial-gradient(ellipse at 55% 45%,#26332d70,transparent 68%)}
.about-art-corner{position:absolute;width:19px;height:19px;border-color:#b7bba34d;z-index:5;pointer-events:none}
.about-art-corner--tl{top:5%;left:4%;border-top:1px solid;border-left:1px solid}.about-art-corner--br{bottom:5%;right:4%;border-bottom:1px solid;border-right:1px solid}
.film-orbit{position:absolute;left:-15%;width:130%;transform-style:preserve-3d;transition:translate .7s ease;translate:var(--look-x) var(--look-y);box-shadow:0 20px 35px #0008}
.film-orbit--front{top:44%;transform:perspective(850px) rotateY(-15deg) rotateZ(-14deg);z-index:2}
.film-orbit--back{top:14%;transform:perspective(850px) rotateY(18deg) rotateZ(16deg);opacity:.5;filter:saturate(.55);z-index:1}
.film-track{display:flex;width:max-content;animation:film-travel 48s linear infinite}
.film-orbit--back .film-track{animation-direction:reverse;animation-duration:64s}
.film-sequence{display:flex;flex-shrink:0;background:#111713;padding-block:16px 20px;position:relative;border-block:1px solid #979b7355}
.film-sequence::before,.film-sequence::after{content:'';position:absolute;left:0;right:0;height:7px;background:repeating-linear-gradient(90deg,transparent 0 7px,#acb3a0b0 7px 16px,transparent 16px 25px)}
.film-sequence::before{top:4px}.film-sequence::after{bottom:5px}
.film-frame{width:170px;margin-inline:5px;position:relative;background:#25312b;overflow:hidden}
.film-frame img{width:100%;height:110px;object-fit:cover;filter:saturate(.65) contrast(1.05)}
.film-frame>span{position:absolute;bottom:3px;left:6px;font:8px monospace;color:#f0e9d1;text-shadow:0 1px 3px #000}
.about-art--film{mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.about-art-caption{position:absolute;bottom:8%;right:9%;text-align:right;display:flex;flex-direction:column;gap:3px;font-size:10px;letter-spacing:.22em;z-index:3}
.about-art-caption strong{font-size:20px;letter-spacing:-.02em;font-weight:500;color:#ddd7c8}
@keyframes film-travel{to{transform:translateX(-50%)}}
.about-art.is-paused .film-track{animation-play-state:paused}
.about-art--collage{perspective:1000px}
.collage-orbit{position:absolute;inset:10% 12%;border:1px solid #9eaa8b35;border-radius:50%;transform:rotate(-25deg) scaleY(.78)}
.collage-frame{position:absolute;width:48%;padding:7px 7px 11px;background:#bbb8a8;box-shadow:0 18px 34px #0009;transition:transform .65s ease;transform:translate3d(calc(var(--look-x) * var(--depth)),calc(var(--look-y) * var(--depth)),0) rotate(var(--angle))}
.collage-frame--1{left:8%;top:13%;--angle:-12deg;--depth:-.6;filter:brightness(.72);z-index:1}
.collage-frame--2{right:7%;top:27%;--angle:10deg;--depth:.6;z-index:2}
.collage-frame--3{left:15%;top:46%;--angle:-5deg;--depth:1.2;z-index:3}
.collage-frame-photo{aspect-ratio:3/2;overflow:hidden;background:#18251f}
.collage-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.65)}
.collage-frame>span{display:flex;justify-content:space-between;gap:6px;padding-top:8px;color:#333b33;font:6px monospace;letter-spacing:.06em}.collage-frame b{font-weight:400}
.collage-note{position:absolute;right:8%;bottom:7%;font-size:clamp(11px,1.3vw,18px);color:#c7c5af;font-style:italic;letter-spacing:-.02em;z-index:4}
.about-art--type{background:radial-gradient(ellipse at var(--light-x) var(--light-y),#66745738,transparent 65%);container-type:inline-size}
.type-art-grid{position:absolute;inset:7%;background:linear-gradient(#b3bd9a0b 1px,transparent 1px),linear-gradient(90deg,#b3bd9a0b 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse,#000,transparent 75%)}
.type-art-word,.type-art-outline{position:absolute;top:12%;left:16%;font-family:Arial,Helvetica,sans-serif;font-size:clamp(75px,24cqi,175px);font-weight:900;letter-spacing:-.09em;line-height:.75;transition:transform .65s ease}
.type-art-word{color:#dad6c6;transform:translate(var(--look-x),var(--look-y));text-shadow:3px 3px #555f4c,7px 7px #343e33,13px 15px 22px #000a;z-index:2}
.type-art-outline{left:24%;top:17%;color:transparent;-webkit-text-stroke:1px #b5b99a50;transform:translate(calc(var(--look-x) * -.6),calc(var(--look-y) * -.6));z-index:1}
.type-art-word>span{display:block;font-size:8px;font-weight:400;line-height:2;letter-spacing:.32em;margin-top:25px;text-shadow:none}
.type-art-light{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle at var(--light-x) var(--light-y),#e4efbc26,transparent 40%);mix-blend-mode:screen}
.type-art-studio{position:absolute;bottom:9%;left:16%;font:8px monospace;letter-spacing:.1em;color:#b4baaa}
@media(max-width:1100px){.film-frame{width:140px}.film-frame img{height:90px}.about-art-caption{bottom:5%}.about-art-caption strong{font-size:17px}}
@media(max-width:800px){.about-art{max-width:600px;margin-inline:auto}.studio-page-visual:has(.about-art){aspect-ratio:auto}.film-frame{width:150px}.film-frame img{height:100px}.about-art-caption strong{font-size:20px}.collage-note{font-size:11px;bottom:1%}.collage-frame--3{top:43%}}
@media(max-width:420px){.film-frame{width:125px}.film-frame img{height:78px}.film-sequence{padding-block:13px 16px}.film-sequence::before,.film-sequence::after{height:5px}.film-sequence::before{top:3px}.film-sequence::after{bottom:4px}.about-art-caption{bottom:4%}.about-art-caption strong{font-size:16px}.collage-frame{padding:5px 5px 8px}.collage-frame>span{font-size:5px;padding-top:6px}}
@media(prefers-reduced-motion:reduce){.film-track{animation:none}.film-orbit,.collage-frame,.type-art-word,.type-art-outline{transition:none;transform:none;translate:none}.film-orbit--front{transform:rotate(-12deg)}.film-orbit--back{transform:rotate(14deg)}.collage-frame{transform:rotate(var(--angle))}}