:root{--black:#0a0a09;--ivory:#f0efe9;--orange:#ff4b16}*{box-sizing:border-box}body{margin:0;background:var(--black);color:var(--ivory);font-family:Manrope,Arial,sans-serif}.portfolio-header{padding:22px 4vw;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff33}.portfolio-header a{color:inherit;text-decoration:none;font:700 11px DM Mono,monospace}.portfolio-header a:last-child{color:var(--orange)}.portfolio-intro{padding:11vh 4vw 7vh}.portfolio-intro p{font:11px DM Mono,monospace;color:#aaa}.portfolio-intro h1{max-width:900px;margin:14px 0 0;font-size:clamp(52px,9vw,140px);line-height:.82;letter-spacing:-.075em}.photo-grid{padding:0 4vw 8vw;columns:3 280px;column-gap:16px}.photo-grid img{display:block;width:100%;height:auto;margin:0 0 16px;break-inside:avoid}.video-grid{padding:0 4vw 8vw;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}.video-card{position:relative;aspect-ratio:16/10;overflow:hidden;background:#171717}.video-card img{width:100%;height:100%;object-fit:cover}.play-video{position:absolute;left:18px;bottom:18px;border:0;border-radius:999px;background:var(--ivory);color:var(--black);padding:12px 16px;font:700 10px DM Mono,monospace;cursor:pointer}.play-video i{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:7px;border-radius:50%;background:var(--orange);color:#fff;font-style:normal}.video-modal{position:fixed;z-index:10;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:6vw;background:#050505ed;opacity:0;visibility:hidden;transition:.25s}.video-modal.open{opacity:1;visibility:visible}.video-close{position:absolute;top:22px;right:24px;border:1px solid #fff5;border-radius:30px;background:none;color:#fff;padding:11px 16px;font:10px DM Mono,monospace;cursor:pointer}.video-frame{width:min(1100px,100%);aspect-ratio:16/9;background:#111}.video-frame iframe{width:100%;height:100%;border:0}@media(max-width:600px){.portfolio-header{padding:16px 20px;gap:16px}.portfolio-header a{font-size:9px;white-space:nowrap}.portfolio-intro{padding:62px 20px 36px}.portfolio-intro p{font-size:9px}.portfolio-intro h1{font-size:17vw;line-height:.84}.photo-grid{columns:2 150px;padding:0 12px 32px;column-gap:8px}.photo-grid img{margin-bottom:8px}.video-grid{grid-template-columns:1fr;padding:0 20px 40px;gap:14px}.video-card{aspect-ratio:4/3}.play-video{left:12px;bottom:12px;padding:10px 13px;font-size:9px}.video-close{top:14px;right:14px}.video-modal{padding:16px}}
