:root{--ink:#202020;--muted:#737373;--line:#efefef;--well:#f0f0f0}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{max-width:1280px;margin:0 auto;background:#fff;color:var(--ink);font-family:Inter,"Helvetica Neue",Arial,sans-serif;font-weight:400}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:400}
.skip-link{position:fixed;z-index:20;top:8px;left:8px;padding:10px 14px;background:#111;color:#fff;transform:translateY(-150%)}.skip-link:focus{transform:none}
.navigation{height:84px;padding:31px 46px 0 32px;display:flex;justify-content:space-between;position:relative;font-size:15px;line-height:20px}.navigation::after{content:"";position:absolute;left:50%;top:80px;width:100vw;height:1px;background:var(--line);transform:translateX(-50%)}.wordmark{font-weight:500}.navigation nav{display:flex;gap:48px}.navigation a:hover,.navigation a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.hero{height:660px;display:flex;align-items:center;padding:0 32px}.hero h1{max-width:1051px;font-size:48px;line-height:1.2;letter-spacing:1px}.hero .muted{color:var(--muted)}
.work{padding:0 32px 64px}.section-head{height:105px;border-top:1px solid var(--line);display:flex;align-items:center;gap:0}.section-head h2{font-size:22px;line-height:35px;font-weight:500}.section-head img{width:38px;height:38px}
.project-link{display:grid;grid-template-columns:572px 608px;gap:36px;align-items:center;min-height:470px;padding:42px 0}.project-copy{padding-top:1px}.project h3{font-size:36px;line-height:1.2;font-weight:500}.project p{margin-top:24px;font-size:18px;line-height:1.2;color:var(--muted)}.project-media{position:relative;width:608px;height:380px;border-radius:8px;overflow:hidden;background:var(--well)}.project-cover{width:100%;height:100%;object-fit:cover}.project-hover{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .25s ease}.project-media:hover .project-hover,.project-link:focus-visible .project-hover{opacity:1}.codem-hover{background:#1d0000}.codem-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}.codem-logo{position:relative;width:200px;height:32px}.codem-logo img{position:absolute;max-width:none}.codem-logo img:nth-child(1){width:38.912px;height:31.686px;left:-1px;top:0}.codem-logo img:nth-child(2){width:56.771px;height:27.726px;left:52.18px;top:1.98px}.codem-logo img:nth-child(3){width:86.493px;height:22.589px;left:113.57px;top:3.3px}.linkol-hover{background:#1d0000}.linkol-hover img{width:200px;height:58px;object-fit:cover}.gabriel-hover{background:#d3dff5}.gabriel-hover img{width:200px;height:82px;object-fit:cover}
.project-link:hover .project-copy h3,.project-link:focus-visible .project-copy h3{text-decoration:underline;text-underline-offset:4px}
footer{height:97px;border-top:1px solid var(--line);padding:42px 32px 0;font-size:12px;line-height:18px}
@media(max-width:1279px){.project-link{grid-template-columns:minmax(0,1fr) minmax(0,50%)}.project-media{width:100%;height:auto;aspect-ratio:608/380}.hero h1{font-size:clamp(36px,3.75vw,48px)}}
@media(max-width:700px){.navigation{height:72px;padding:23px 20px 0}.navigation::after{top:68px}.navigation nav{gap:24px}.hero{height:auto;min-height:480px;padding:95px 20px}.hero h1{font-size:clamp(29px,6.4vw,42px);letter-spacing:0}.work{padding:0 20px 64px}.section-head{height:84px;padding-top:0}.project-link{grid-template-columns:1fr;gap:30px;padding:45px 0;min-height:0}.project h3{font-size:32px}.project p{font-size:16px;margin-top:12px}.project-media{width:100%}footer{padding:32px 20px 0;height:90px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.project-hover{transition:none}}