@font-face{font-family:Instrument;src:url('/fonts/instrument-sans.ttf') format('truetype');font-weight:100 900;font-display:swap}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:#f7f7f7;color:#222;font-family:Instrument,sans-serif;font-size:16px;line-height:1.5}::selection{background:#222;color:white}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid #222;outline-offset:6px}svg{width:18px;height:18px;flex-shrink:0}header,main,footer{max-width:1440px;margin:auto;padding-inline:64px}header{display:flex;justify-content:space-between;align-items:center;padding-top:35px;padding-bottom:35px}.wordmark{font-size:22px;font-weight:600;letter-spacing:-.03em}.wordmark span{display:block;font-size:12px;font-weight:400;letter-spacing:0;color:#636363;margin-top:3px}nav{display:flex;gap:30px;font-size:14px}nav a{display:flex;align-items:center;gap:7px}nav svg{width:12px}nav a:hover{text-decoration:underline;text-underline-offset:5px}.intro{display:grid;grid-template-columns:1.3fr 1fr;gap:70px;align-items:end;padding:74px 0 80px}h1,h2,h3,p{margin:0}h1{font-size:clamp(44px,4.8vw,68px);font-weight:500;line-height:1.06;letter-spacing:-.04em;text-wrap:balance}.intro-copy{max-width:370px;padding-bottom:4px}.intro-copy p{color:#555;font-size:17px;line-height:1.6}.text-link{display:inline-flex;align-items:center;gap:12px;margin-top:24px;font-size:15px;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;padding-bottom:3px;transition:background-size 180ms ease}.text-link:hover{background-size:100% 1px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.section-heading h2{font-size:16px;font-weight:500}.section-heading span,.meta{font-size:13px;color:#636363}.projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:52px 30px}.project{min-width:0}.media{height:365px;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#eceeea}.media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 260ms cubic-bezier(.2,0,0,1)}.setward .media{background:#e6e9e3;padding:32px 0 32px 32px}.setward .media img{height:auto;object-fit:contain;object-position:left;width:110%;max-width:none;border-radius:6px;flex-shrink:0;transform:translateX(10px)}.ohhi .media{background:#7c58f6}.ohhi .media img{height:100%;width:auto;object-fit:contain}.project:hover .media img{transform:scale(1.015)}.project.setward:hover .media img{transform:translateX(10px) scale(1.015)}.caption{display:flex;justify-content:space-between;gap:18px;margin-top:17px}.caption h3{font-weight:500;font-size:21px;letter-spacing:-.025em}.caption p{font-size:14px;color:#555;margin:5px 0}.caption svg{margin-top:7px}.meta{display:block;margin-top:6px;font-size:12px}.spacelingo .media{background:#e5e7eb}.spacelingo .media img{object-fit:contain;padding:24px}.metal-engine .media{background:#141414}.about{display:grid;grid-template-columns:1.25fr 1fr;gap:30px;padding:110px 0 95px;margin-top:70px;border-top:1px solid #dededc}h2{font-size:38px;line-height:1.12;font-weight:500;letter-spacing:-.03em}.about-copy{font-size:19px;line-height:1.55;max-width:490px}.experience{margin-top:40px}.experience h3{font-weight:500;font-size:14px;margin-bottom:20px}.experience>div{padding:17px 0;border-top:1px solid #dededc;display:grid;grid-template-columns:1fr 1fr;gap:6px}.experience strong{font-weight:500}.experience span{font-size:14px;color:#555;text-align:right}.experience p{grid-column:1/-1;font-size:14px;color:#636363}.contact{padding:55px 0 90px}.contact h2{font-size:clamp(32px,4vw,52px)}.contact>a{display:inline-flex;align-items:center;gap:20px;margin-top:25px;font-size:20px;border-bottom:1px solid #222;padding-bottom:5px}footer{display:flex;justify-content:space-between;align-items:center;padding-block:28px;border-top:1px solid #dededc;font-size:13px}footer span{color:#636363}footer a{display:flex;align-items:center;gap:8px}footer svg{width:13px}.skip{position:absolute;left:20px;top:-100px;background:white;padding:12px}.skip:focus{top:10px}.back{display:inline-block;font-size:14px;margin:35px 0;text-decoration:underline;text-underline-offset:5px}.project-intro{padding:30px 0 48px}.project-intro>p{font-size:24px;margin-top:20px;color:#555}.detail-meta{display:flex;gap:35px;margin-top:30px;font-size:14px;color:#636363}.detail-media{margin:0;background:#eceeea;border-radius:12px;padding:30px;text-align:center}.detail-media img{max-width:100%;max-height:750px;object-fit:contain}.detail-media.ohhi{background:#7c58f6}.detail-media.ohhi figcaption{color:white}figcaption{font-size:13px;margin-top:16px;color:#555}article{max-width:700px;margin:55px auto;font-size:19px;line-height:1.7}article p+p{margin-top:25px}.project-links{display:flex;gap:30px;flex-wrap:wrap}@media(min-width:1500px){.media{height:420px}}@media(max-width:800px){header,main,footer{padding-inline:24px}header{align-items:flex-start}.wordmark span{display:none}nav{gap:15px;font-size:13px}nav svg{display:none}.intro{gap:30px;grid-template-columns:1fr;padding:45px 0 55px}.intro-copy{max-width:480px}.projects{gap:35px 20px}.media{height:290px}.section-heading span{display:none}.about{grid-template-columns:1fr;gap:35px;padding:60px 0;margin-top:50px}.contact{padding:30px 0 70px}}@media(max-width:540px){header{flex-wrap:wrap;gap:23px;padding-block:25px}nav{width:100%;justify-content:space-between}.intro{padding-top:25px}.projects{grid-template-columns:1fr;gap:38px}.media{height:310px}.ohhi .media{height:360px}.caption h3{font-size:22px}h2{font-size:32px}.detail-meta{flex-direction:column;gap:8px}.project-intro>p{font-size:21px}.detail-media{padding:14px}.contact>a{font-size:18px}footer span{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
.project-entry{position:relative;min-width:0}.project-entry[hidden]{display:none}.project-entry>.project{display:block}.projects{row-gap:66px}.archive-link{display:flex;align-items:center;justify-content:space-between;gap:20px;border-block:1px solid #dededc;margin-top:58px;padding:24px 0}.archive-link>span{color:#636363;font-size:14px}.archive-link strong{display:flex;align-items:center;gap:16px;font-size:18px;font-weight:500}.archive-link:hover strong{text-decoration:underline;text-underline-offset:5px}.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 48px}.filters button{font:inherit;font-size:14px;color:#555;background:transparent;border:1px solid #dededc;border-radius:24px;padding:9px 16px;cursor:pointer}.filters button span{font-size:11px;margin-left:8px;opacity:.7}.filters button[aria-pressed=true]{background:#222;border-color:#222;color:white}.filters button:focus-visible{outline:2px solid #222;outline-offset:3px}.collection{padding-bottom:80px}.collection .media{height:300px}.squeeki .media img{object-fit:contain}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:540px){.archive-link{align-items:flex-start;flex-direction:column;gap:10px}.projects{row-gap:62px}}
/* Keep both Ohhi captures in the same full-frame, centered canvas. */
.project.ohhi .media img{width:100%;height:100%;object-fit:contain;object-position:center;padding:0;transform:none;background:#7c58f6}
.squeeki .media video{object-fit:contain;background:#eceeea}
.project.ohhi .media{background:#e4e8df}.project.ohhi .media img,.project.ohhi .media video{width:100%;height:100%;object-fit:cover;object-position:center 35%;background:#e4e8df}.demo-player.ohhi{display:flex;justify-content:center;background:#e4e8df;padding:24px;border-radius:16px;margin-top:0}.demo-player.ohhi video{display:block;width:auto;max-width:100%;height:min(72vh,740px);border-radius:10px;background:#e4e8df}.project-gallery{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:850px;margin:60px auto}.project-gallery figure{margin:0;text-align:center}.project-gallery img{display:block;width:100%;max-height:620px;object-fit:contain;border-radius:12px}.project-gallery figcaption{margin-top:18px}@media(max-width:540px){.project-gallery{gap:14px}.project-gallery figcaption{font-size:12px}.demo-player.ohhi{padding:12px}}
/* Work leads the page; introductions stay brief. */
.intro{display:block;padding:42px 0 48px}.intro h1{font-size:clamp(32px,3.4vw,46px);letter-spacing:-.035em}.intro>p{font-size:16px;color:#636363;margin-top:15px}.media{position:relative}.media .alternate{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 280ms ease;background:inherit;padding:20px}.project:hover .alternate,.project:focus-visible .alternate{opacity:1}.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 180ms ease}.playing .media video{opacity:1}.preview-hint{position:absolute;bottom:14px;left:14px;padding:6px 10px;background:#222;color:white;border-radius:6px;font-size:12px;transition:opacity 180ms ease}.playing .preview-hint{opacity:0}.spacelingo .media{background:#eee9da}.spacelingo .media img{height:100%;width:auto;padding:0;object-fit:contain}.setward .media .alternate{width:100%;height:100%;object-fit:contain;transform:none;background:#e6e9e3}.demo-player{margin-top:30px}.demo-player video{width:100%;max-height:750px;background:#141414;border-radius:12px}@media(hover:none){.preview-hint{display:none}}@media(prefers-reduced-motion:reduce){.media .alternate{transition:none}.preview-hint{display:none}}

/* Shared card proportions across featured work and the collection. */
.projects .media{height:auto;aspect-ratio:4/3}

/* Profile links stay visible beside the primary navigation. */
header{gap:24px}nav{flex-wrap:wrap;align-items:center;gap:22px}
.profile-link{text-decoration:underline;text-underline-offset:5px;text-decoration-color:#aaa}
a:hover{text-decoration-color:currentColor}.archive-link strong{text-decoration:underline;text-underline-offset:5px}.text-link{text-decoration:underline;text-underline-offset:5px}
.work-experience{margin-top:88px;padding-top:55px;border-top:1px solid #dededc}
.experience-list{margin-top:36px}.experience-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:48px;padding:32px 0;border-top:1px solid #dededc}
.experience-row h3{font-size:25px;line-height:1.2;font-weight:500;letter-spacing:-.025em}.experience-role{margin-top:10px;font-size:14px;color:#636363}.experience-row>div>p:not(.experience-role){font-size:17px;line-height:1.65;color:#555;max-width:650px}.experience-row .text-link{margin-top:15px}
.about{margin-top:65px;padding-top:55px}
@media(max-width:800px){header{flex-wrap:wrap}nav{gap:16px}.experience-row{gap:24px;grid-template-columns:1fr}.work-experience{margin-top:60px}.experience-row h3{font-size:23px}}
@media(max-width:540px){nav{justify-content:flex-start;gap:16px 20px}}

/* Anchor destinations remain visible below the sticky cat ledge. */
html{scroll-padding-top:142px}
@media(max-width:800px){html{scroll-padding-top:115px}}

.project.ohhi .media img{object-position:center 43%}

.project.spacelingo .media{background:#eceeea}
.project.spacelingo .media .alternate{width:100%;height:100%;object-fit:contain;padding:0;background:#eceeea}
.detail-media.spacelingo{background:#eceeea}

/* Keep the complete promotional screenshot visible throughout the image preview. */
.project.spacelingo .media img,.project.spacelingo:hover .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;padding:0;transform:none}

/* The surrounding canvas follows the current screenshot, not a fixed color. */
.project.spacelingo .media img.screenshot-backdrop,.project.spacelingo:hover .media img.screenshot-backdrop{object-fit:cover;filter:blur(28px);transform:scale(1.18);opacity:.8;pointer-events:none}
.project.spacelingo .media img:not(.screenshot-backdrop){z-index:1}

/* Temporary Setward cover: production photography, without a slideshow. */
.project.setward .media{padding:0;background:#25292a}
.project.setward .media img,.project.setward:hover .media img{width:100%;height:100%;object-fit:cover;object-position:center 65%;border-radius:0;transform:none}
.project-gallery:has(>figure:only-child){grid-template-columns:1fr;max-width:1100px}

.project.setward .media{padding:18px;background:#e6e9e3}
.project.setward .media img,.project.setward:hover .media img{width:100%;height:100%;object-fit:contain;object-position:center;transform:none;border-radius:6px}