.hero{min-height:min(960px,100svh)}.name-line>span{animation-duration:1.35s}.name-line:nth-child(2)>span{animation-delay:.18s}.hero-meta{animation:fade .8s .45s both}.hero-bottom{animation-delay:.65s}.hero-rule{animation:fade .8s .9s both}
.name-line .motion-mark{position:relative;width:170px;height:130px;overflow:visible;margin-right:7%;flex-shrink:0;animation:fade 1s .7s both;line-height:1;font-family:'Barlow Condensed',Impact,sans-serif;font-size:100px;letter-spacing:-.08em;font-weight:600}.mark-face,.mark-trail{position:absolute;left:20px;top:0}.mark-face{color:var(--accent);animation:mark-settle 6s 1.6s cubic-bezier(.65,0,.35,1) infinite}.mark-trail{color:transparent;-webkit-text-stroke:1px #d5ed9750;transform:translate(-12px,8px)}.mark-caption{position:absolute;bottom:0;left:0;font:8px 'DM Sans',Arial,sans-serif;letter-spacing:.15em;white-space:nowrap;color:var(--muted)}@keyframes mark-settle{0%,55%,100%{transform:translate(0,0)}68%{transform:translate(10px,-7px)}82%{transform:translate(-12px,8px)}}
.motion-toggle{background:none;border:0;color:var(--muted);font:inherit;letter-spacing:inherit;padding:0}.motion-toggle:hover{color:var(--accent)}
.project{position:relative;min-height:0;padding:100px 0 75px;row-gap:45px;grid-template-columns:.85fr 1.4fr}.project.reverse{grid-template-columns:1.4fr .85fr}.project-copy>*{opacity:0;translate:0 22px;transition:opacity .8s,translate 1s cubic-bezier(.16,1,.3,1)}.project.visible .project-copy>*{opacity:1;translate:0 0}.project.visible h3{transition-delay:.1s}.project.visible .project-copy>p{transition-delay:.18s}.project.visible .credits{transition-delay:.24s}.project.visible .watch{transition-delay:.3s}
.project-copy h3{font-size:clamp(60px,6.5vw,102px)}.project-copy h3 span{font-family:'DM Sans',Arial,sans-serif;font-size:.35em;font-weight:400;letter-spacing:-.04em;margin:20px 0 0;line-height:1.1;color:var(--text)}.project-copy p{line-height:1.7;max-width:280px}.credits{font-size:10px;line-height:1.8;color:var(--muted);margin-top:25px}.credits strong{display:block;font-size:8px;font-weight:500;letter-spacing:.12em;color:var(--accent);margin-bottom:5px}
.project .project-media{aspect-ratio:16/9;opacity:0;translate:0 48px;clip-path:inset(8% 0 8% 0);transition:opacity 1s .12s,translate 1.2s .12s cubic-bezier(.16,1,.3,1),clip-path 1.3s .12s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.2,.7,.2,1)}.project.visible .project-media{opacity:1;translate:0 0;clip-path:inset(0)}.project-media video{object-fit:contain}.project.vertical{min-height:700px}.vertical .project-media{aspect-ratio:9/16;max-width:340px;justify-self:center}.project-foot{grid-column:1/-1;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.12em;color:#8e9384}.project-foot>span:last-child{color:var(--accent)}.project-media .media-label{font-size:8px;max-width:70%;line-height:1.5}.project-media:hover .play{background:var(--accent);color:var(--bg);border-color:var(--accent)}.play{transition:background .3s,color .3s}.project-copy .watch{width:155px}.section-label{align-items:center}
@media(max-width:700px){.hero{min-height:90svh}.name-line .motion-mark{width:72px;height:74px;font-size:62px;margin-right:2%}.mark-face,.mark-trail{left:6px}.mark-trail{transform:translate(-5px,4px)}.mark-caption{display:none}.project,.project.vertical{min-height:0;padding:55px 0 30px;gap:26px}.project-copy h3{font-size:68px}.project-copy h3 span{font-size:25px;margin:12px 0}.project-copy p{display:block;max-width:290px;font-size:12px}.credits{margin-top:18px}.project .project-media{aspect-ratio:16/9}.project.vertical .project-media{aspect-ratio:9/16;width:80%;max-width:320px;align-self:center}.project-foot{font-size:7px;gap:10px}.project-foot>span:last-child{display:none}.project-copy .watch{margin-top:18px}.motion-toggle{font-size:8px}.media-label{left:14px;bottom:15px}.project-media .play{width:30px;height:30px;right:14px;bottom:12px}.about{padding-top:80px}}
@media(prefers-reduced-motion:reduce){.project .project-copy>*,.project .project-media{opacity:1;translate:none;clip-path:none}.name-line .motion-mark,.mark-face{animation:none}}