.portfolio-page{font-family:Inter,Arial,sans-serif}.portfolio-page .background-art{position:fixed;height:100vh}.portfolio-intro{position:relative;padding:35px 0 70px}.portfolio-intro h1{font-size:clamp(48px,5.8vw,104px);letter-spacing:-.06em;font-weight:800;line-height:1;text-transform:uppercase;margin:0 0 27px}.portfolio-intro h1:before{content:'';display:block;width:50px;height:2px;background:#111;margin-bottom:32px}.portfolio-intro>p{font-size:clamp(18px,1.5vw,27px);line-height:1.3;letter-spacing:-.03em;margin:0}.portfolio-orbit{position:absolute;top:45%;right:28%;width:26%;height:1px;background:#777;z-index:-1}.portfolio-orbit:before,.portfolio-orbit:after{content:'';position:absolute;top:-6px;width:12px;height:12px;background:#111;border-radius:50%}.portfolio-orbit:after{right:0}.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.portfolio-case{min-width:0}.portfolio-frame{border:1.7px solid #111;border-radius:43px;padding:12px;position:relative;background:#fafafa66}.portfolio-frame:before{content:'';position:absolute;inset:7px;border:1px solid #111;border-radius:36px;pointer-events:none}.portfolio-player{position:relative;aspect-ratio:2.08;background:#080808;color:#fff;border-radius:31px;overflow:hidden}.portfolio-player video{display:block;width:100%;height:100%;object-fit:contain;background:#000}.portfolio-poster{position:absolute;inset:0;pointer-events:none;overflow:hidden}.portfolio-poster img{position:absolute;max-width:none;height:auto}.portfolio-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:2px solid #fff;border-radius:50%;background:#0003;color:#fff;display:grid;place-items:center;width:16%;aspect-ratio:1;font-size:25px;padding-left:7px}.portfolio-player:not(.started) .portfolio-play{opacity:0}.portfolio-player:not(.started) .portfolio-play:focus-visible{opacity:1}.portfolio-player.started .portfolio-poster,.portfolio-player.playing .portfolio-play{display:none}.portfolio-controls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:7px;padding:15px 12px 7px;background:linear-gradient(transparent,#000e)}.portfolio-controls button{padding:0;border:0;background:none;color:#fff;min-width:22px;height:28px;font-size:19px}.portfolio-seek{appearance:none;flex:1;min-width:18px;height:2px;background:#ffffffb3;accent-color:#fff}.portfolio-seek::-webkit-slider-thumb{appearance:none;width:10px;height:10px;border-radius:50%;background:#fff}.portfolio-time{font-size:10px;font-weight:600;white-space:nowrap}.portfolio-player:not(.enhanced) :is(.portfolio-poster,.portfolio-play,.portfolio-controls){display:none}.portfolio-caption{display:flex;align-items:center;justify-content:space-between;padding:12px 23px 0;gap:12px}.portfolio-caption h2{font-size:clamp(20px,1.5vw,28px);line-height:1.1;letter-spacing:-.04em;margin:0 0 4px;font-weight:750}.portfolio-caption p{font-size:clamp(15px,1.15vw,21px);line-height:1.15;letter-spacing:-.03em;margin:0 0 7px}.portfolio-tag{display:inline-block;padding:4px 22px;border:1px solid #929292;border-radius:99px;font-size:clamp(13px,.95vw,18px);line-height:1}.portfolio-open{flex:none;border:1px solid #111;border-radius:50%;width:47px;height:47px;font-size:32px;font-weight:300;background:transparent;position:relative}.portfolio-open:before{content:'';position:absolute;left:-18px;top:-12px;bottom:-12px;width:1px;background:#777}.portfolio-baseline{height:1px;background:#111;margin:23px 8px 0;position:relative}.portfolio-baseline:before,.portfolio-baseline:after{content:'';position:absolute;top:-8px;width:16px;height:16px;border:1.5px solid #111;background:#fafafa;border-radius:50%}.portfolio-baseline:before{left:-8px}.portfolio-baseline:after{right:-8px}.portfolio-error{position:absolute;inset:20%;background:#000e;padding:12px;font-size:14px}.portfolio-error a{text-decoration:underline}.portfolio-player:fullscreen,.portfolio-player.expanded{aspect-ratio:auto;width:100vw;height:100vh;border-radius:0}.portfolio-player.expanded{position:fixed;inset:0;z-index:10000}.portfolio-player:fullscreen .portfolio-controls,.portfolio-player.expanded .portfolio-controls{max-width:900px;margin:auto}.portfolio-player:fullscreen .portfolio-play,.portfolio-player.expanded .portfolio-play{width:90px}.portfolio-window{overflow:hidden}
@media(hover:hover) and (pointer:fine){.portfolio-intro p,.portfolio-caption :is(h2,p,span),.portfolio-open{transition:scale .25s}.portfolio-intro p:hover,.portfolio-caption :is(h2,p,span):hover,.portfolio-open:hover{scale:1.018}.cursor-enabled .portfolio-player:fullscreen,.cursor-enabled .portfolio-player:fullscreen *{cursor:auto!important}}
@media(max-width:1150px){.portfolio-caption{padding:12px 12px 0}.portfolio-open{width:35px;height:35px;font-size:26px}.portfolio-open:before{left:-9px}.portfolio-frame{padding:10px;border-radius:32px}.portfolio-frame:before{inset:5px;border-radius:27px}.portfolio-player{border-radius:24px}.portfolio-controls{gap:3px;padding-left:8px;padding-right:8px}.portfolio-controls button{min-width:18px;font-size:16px}.portfolio-time{font-size:9px}.portfolio-intro{padding-bottom:45px}.portfolio-intro>p br{display:none}.portfolio-intro>p{max-width:760px}}
@media(max-width:850px){.portfolio-grid{grid-template-columns:1fr;gap:32px;max-width:650px;margin:auto}.portfolio-intro h1{font-size:9vw}.portfolio-intro>p{font-size:21px}.portfolio-caption h2{font-size:25px}.portfolio-caption p{font-size:19px}.portfolio-tag{font-size:16px}.portfolio-time{font-size:12px}.portfolio-controls{gap:10px;padding:20px 18px 12px}.portfolio-controls button{font-size:22px;width:28px}.portfolio-open{width:44px;height:44px}.portfolio-intro{padding-top:30px}.portfolio-intro h1:before{margin-bottom:25px}}
@media(max-width:450px){.portfolio-intro>p{font-size:18px}.portfolio-intro h1{font-size:11vw}.portfolio-controls{gap:5px;padding:16px 9px 5px}.portfolio-controls button{width:22px;font-size:18px}.portfolio-time{font-size:10px}.portfolio-caption{padding-left:10px;padding-right:10px}.portfolio-caption h2{font-size:22px}.portfolio-caption p{font-size:17px}.portfolio-open{width:36px;height:36px}.portfolio-tag{font-size:14px}}
@media(prefers-reduced-motion:reduce){.portfolio-page *{transition:none!important}.portfolio-page *:hover{scale:1!important}}
.portfolio-player:not(.started) .portfolio-controls{background:#080808}