:root{--bg:#f5f4ef;--ink:#14232b;--muted:#637276;--line:#cbd3d0;--accent:#607b7b}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit}button{font:inherit}.shell{width:min(100% - 112px,1216px);margin-inline:auto}.skip{position:absolute;top:-100px;left:16px;background:var(--ink);color:white;padding:12px;z-index:5}.skip:focus{top:12px}
.site-header{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-family:Manrope,sans-serif;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.brand span{color:var(--accent)}.site-header nav a{text-decoration:none;font-size:12px;font-weight:600}.site-header nav span{margin-left:9px}
.hero{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:70px;align-items:center;padding-block:85px 100px}.hero h1{font-family:Manrope,sans-serif;font-size:clamp(60px,6.4vw,86px);font-weight:600;letter-spacing:-.062em;line-height:1.09;margin:0}.hero h1 em{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.055em;color:var(--accent)}.hero-copy p{font-size:17px;line-height:1.65;color:var(--muted);max-width:485px;margin:30px 0 0}.portrait{margin:0;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:#ddd9d3}.portrait img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.projects{padding-bottom:50px}.section-heading{border-top:1px solid var(--ink);padding-top:24px;display:flex;align-items:center;justify-content:space-between}.section-heading h2{font-family:Manrope,sans-serif;font-size:38px;line-height:1.1;font-weight:600;letter-spacing:-.045em;margin:0}.section-heading>span{font-family:Georgia,serif;font-size:25px;color:var(--accent)}.project{padding:60px 0 70px;border-bottom:1px solid var(--line)}.project:last-child{border-bottom:0}.project-copy{display:grid;grid-template-columns:1fr 1.25fr;gap:0 65px;align-items:start;margin-bottom:30px}.project h3{font-family:Manrope,sans-serif;font-size:36px;line-height:1.12;font-weight:600;letter-spacing:-.045em;margin:0;max-width:430px}.project-copy p{font-size:16px;line-height:1.65;color:#53656a;margin:0;max-width:620px}.stack{grid-column:2;list-style:none;display:flex;flex-wrap:wrap;gap:7px 0;padding:0;margin:18px 0 0;color:#647772}.stack li{font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap}.stack li:not(:last-child)::after{content:'·';margin-inline:10px;color:#9ca9a4}
.project-preview{min-width:0}.preview-main{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:2/1;background:#e8ebe7;border:1px solid #d4dbd5;border-radius:4px;overflow:hidden}.preview-main img{display:block;width:100%;height:100%;object-fit:contain}.preview-main:focus-visible,.preview-thumb:focus-visible,.shot:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.preview-thumbs{display:flex;justify-content:center;gap:10px;margin-top:14px}.preview-thumb{padding:0;width:104px;aspect-ratio:2/1;background:#e8ebe7;border:1px solid transparent;border-radius:2px;overflow:hidden;cursor:pointer;opacity:.56;transition:opacity .15s,border-color .15s}.preview-thumb img{width:100%;height:100%;object-fit:contain;display:block}.preview-thumb.active,.preview-thumb:hover{opacity:1}.preview-thumb.active{border-color:#607b7b;outline:2px solid var(--bg);outline-offset:-3px}
.mobile-screens{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:900px;margin:38px auto 0;padding:34px;background:#eae8e7;border-radius:4px}.mobile-screens .shot{display:block;overflow:hidden;border-radius:21px;border:1px solid #d7d8d5;background:#f8f7f4;box-shadow:0 12px 25px #243b3410}.mobile-screens img{display:block;width:100%;height:auto}
footer{border-top:1px solid var(--line);padding-block:25px 30px;color:var(--muted);font-size:11px}
@media(max-width:1050px){.shell{width:calc(100% - 64px)}.hero{grid-template-columns:minmax(0,1fr) 280px;gap:40px}.hero h1{font-size:65px}.project-copy{gap:0 35px}.project h3{font-size:32px}}
@media(max-width:720px){.shell{width:calc(100% - 40px)}.site-header{height:70px}.brand{font-size:10px;letter-spacing:.1em}.hero{display:flex;flex-direction:column;align-items:stretch;gap:34px;padding:62px 0 65px}.hero h1{font-size:clamp(43px,10.7vw,64px);letter-spacing:-.055em;line-height:1.1}.hero-copy p{font-size:15px;line-height:1.65;max-width:360px;margin-top:22px}.portrait{width:76%;max-width:320px;align-self:flex-end;aspect-ratio:4/5}.section-heading{padding-top:22px}.section-heading h2{font-size:32px}.project{padding:43px 0 48px}.project-copy{display:block;margin-bottom:24px}.project h3{font-size:31px;max-width:340px}.project-copy p{font-size:14px;line-height:1.65;margin-top:18px}.stack{margin-top:15px;gap:5px 0}.stack li{font-size:11px}.stack li:not(:last-child)::after{margin-inline:7px}.preview-main{aspect-ratio:1.75}.preview-thumbs{margin-top:10px;gap:8px}.preview-thumb{width:88px}.mobile-screens{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;gap:16px;padding:22px;margin-top:26px;border-radius:3px}.mobile-screens .shot{flex:0 0 79%;scroll-snap-align:center;border-radius:19px;box-shadow:none}footer{padding-block:22px 28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.preview-thumb{transition:none}}