
html:not(.js) .fan-controls{display:none}/* Five native project links: general fan composition inspired by Ask Phill, using only our assets. */
.studio-home .hero{height:185svh}.studio-home .hero-stage{height:calc(100svh - var(--nav-h));min-height:0}.studio-home .hero-copy{padding-bottom:clamp(70px,12vh,140px)}
.five-work{position:relative;padding:60px 0 30px;isolation:isolate;--fan-reveal:1;overflow:clip}.five-work .section-heading{border-top:1px solid var(--line);padding-top:24px;margin-bottom:10px}.five-work .section-heading h2{font-size:clamp(34px,4.5vw,68px)}.fan-subtitle{font-size:18px;line-height:1.45;color:var(--muted);margin:0 var(--pad) 30px;max-width:680px}.fan-track{list-style:none;position:relative;margin:35px auto 0;padding:0;width:calc(100% - 2*var(--pad));max-width:1350px;height:650px;perspective:1400px}.fan-card{position:absolute;left:calc(var(--i)*18%);top:calc(var(--top)*1px);width:28%;max-width:370px;margin:0;padding:0;z-index:var(--z);transform:translate3d(calc((2 - var(--i))*45px*(1 - var(--fan-reveal))),calc(80px*(1 - var(--fan-reveal))),0) rotate(calc(var(--rotation)*1deg*var(--fan-reveal)));transform-origin:50% 90%;opacity:calc(.25 + .75*var(--fan-reveal));transition:opacity .15s linear;will-change:auto}.fan-card:focus-within{z-index:45}.fan-card.is-settling{z-index:40}.fan-card.is-active{z-index:50}.fan-link{height:440px;display:block;position:relative;border-radius:12px;outline-offset:5px}.fan-link:before{content:"";position:absolute;inset:-18px -6px}.fan-surface{height:100%;display:flex;flex-direction:column;position:relative;pointer-events:none;border-radius:12px;padding:23px;box-shadow:inset 0 0 0 1px #3a3932,0 14px 40px #0006;color:var(--card-ink);background:var(--card-bg);transform:translate3d(var(--mx,0px),var(--my,0px),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-origin:center;transition:box-shadow .25s ease;outline-offset:5px}.fan-card.is-active .fan-surface,.fan-card:focus-within .fan-surface{box-shadow:inset 0 0 0 1px #ff4a2280,0 22px 65px #0009}.fan-top{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:10px;text-transform:uppercase;letter-spacing:.07em;line-height:1.4}.fan-top{color:#aaa69c}.fan-top>span:first-child{max-width:170px}.fan-top>span:last-child{color:var(--accent)}.fan-link h3{font-size:clamp(31px,3.3vw,49px);font-weight:620;letter-spacing:-.055em;line-height:1.02;margin:24px 0 0}.fan-full-name{color:#aaa69c;font-size:12px;margin:8px 0 0;max-width:200px;min-height:34px;line-height:1.3}.fan-image{margin-top:auto;height:210px;padding:10px;border-radius:7px;background:#10110f;display:flex;align-items:center;justify-content:center;overflow:hidden}.fan-image img{width:100%;height:100%;object-fit:contain}.fan-caption{margin-top:13px;display:flex;justify-content:space-between;gap:18px;color:#b3b0a6;font-size:11px;border-top:1px solid #3a3932;padding-top:11px;line-height:1.3}.fan-card:hover .fan-caption>span:last-child,.fan-card:focus-within .fan-caption>span:last-child{color:var(--accent)}.fan-coway{--card-bg:#171715;--card-ink:#f2f0ea}.fan-hp{--card-bg:#1c1c19;--card-ink:#f2f0ea}.fan-hub{--card-bg:#22221e;--card-ink:#f2f0ea}.fan-jcf{--card-bg:#191917;--card-ink:#f2f0ea}.fan-youtube{--card-bg:#20201c;--card-ink:#f2f0ea}.fan-hp .fan-image{height:225px}.fan-hp .fan-image img{width:auto;max-width:100%;object-fit:contain}.fan-hub .fan-image{background:#10110f}.fan-hub .fan-image img{height:auto}.fan-youtube .fan-image{background:#10110f}.fan-foot{display:flex;justify-content:space-between;align-items:center;gap:25px;margin:5px var(--pad) 0;border-bottom:1px solid var(--line);padding-bottom:30px}.fan-foot p{color:var(--muted);font-size:13px}.fan-controls{display:none}.fan-intro-note{font-size:12px;color:var(--muted)}
@media(min-width:761px) and (max-width:1100px){.fan-track{height:560px}.fan-link{height:365px}.fan-surface{padding:16px}.fan-image{height:165px}.fan-hp .fan-image{height:175px}.fan-top{font-size:8px}.fan-link h3{font-size:34px;margin-top:18px}.fan-full-name{font-size:10px}.fan-caption{font-size:10px}}
@media(min-width:1700px){.fan-track{height:690px}.fan-link{height:475px}.fan-image{height:235px}}
@media(max-width:760px){.studio-home .hero{height:145svh}.studio-home .hero-stage{height:calc(100svh - var(--nav-h));min-height:0}.studio-home .hero-copy{padding:65px var(--pad) 65px}.five-work{padding-top:40px;overflow:clip}.five-work .section-heading h2{font-size:42px}.fan-subtitle{font-size:17px;margin-bottom:10px}.fan-track{display:flex;position:relative;gap:17px;width:100%;max-width:none;height:auto;margin-top:22px;padding:15px var(--pad) 28px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding-left:var(--pad);overscroll-behavior-x:contain;perspective:none;scrollbar-width:thin;scrollbar-color:#756c5e #25231d}.fan-track:after{content:"";flex:0 0 calc(100% - min(82%,330px))}.fan-card{position:relative;left:auto;top:auto;flex:0 0 82%;width:82%;max-width:330px;transform:none!important;opacity:1!important;scroll-snap-align:start;z-index:auto!important}.fan-link{height:425px;padding:0;transform:none!important;box-shadow:none}.fan-surface{padding:23px;transform:none!important;box-shadow:none}.fan-link h3{font-size:45px}.fan-top{font-size:10px}.fan-image{height:205px}.fan-hp .fan-image{height:220px}.fan-full-name{font-size:12px}.fan-caption{font-size:11px}.fan-foot{display:block;margin-top:20px}.fan-foot p{font-size:13px;max-width:290px}.fan-foot .text-link{margin-top:14px}.fan-controls{display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);gap:16px;margin-top:12px}.fan-controls p{font-size:12px;color:var(--muted);margin:0}.fan-buttons{display:flex;gap:12px;align-items:center}.fan-buttons button{display:grid;place-items:center;width:44px;height:44px;background:transparent;color:var(--ink);border:1px solid #706b5f;border-radius:50%}.fan-buttons button:disabled{opacity:.35;cursor:default}.fan-position{font-size:12px;color:var(--muted);min-width:45px;text-align:center}.nojs-note{font-size:13px;margin:12px var(--pad);color:var(--muted)}}
@media(prefers-reduced-motion:reduce){.fan-card{transform:rotate(calc(var(--rotation)*1deg));opacity:1}.fan-link,.fan-surface{transform:none!important}.fan-card:focus-within{z-index:30}}
.card-image.hp{background:#cad8ef}.card-image.hub{background:#e6e1d4}.card-image.youtube{background:#dc4b34}.card-image.hp img{max-height:380px;width:auto}.card-image.hub img{height:auto} .work-grid .card-image{min-height:0}
/* The stable native anchor owns hit testing; GSAP alone moves its inner surface. */
.five-work:not(.fan-motion-ready) .fan-surface{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
.five-work:not(.fan-motion-ready) .fan-card:hover,.five-work:not(.fan-motion-ready) .fan-card:focus-within{z-index:50}
.five-work:not(.fan-motion-ready) .fan-card:hover .fan-surface,.five-work:not(.fan-motion-ready) .fan-card:focus-within .fan-surface{transform:translateY(-14px)}
.fan-motion-ready .fan-surface{transition-property:box-shadow}
@media(max-width:760px){.fan-link:before{inset:0}.fan-surface{transform:none!important}}
@media(prefers-reduced-motion:reduce){.fan-surface{transform:none!important;transition:none!important}}
