@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');

:root { --bg:#fafaf8; --ink:#20201e; --muted:#777773; --line:#deded9; --orange:#ff5a1f; --yellow:#ffd45e; --page-pad:clamp(20px,8vw,130px); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:Manrope,Arial,sans-serif; font-size:16px; line-height:1.5; }
a { color:inherit; text-decoration:none; }
.header { height:72px; padding:0 var(--page-pad); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:rgba(250,250,248,.93); backdrop-filter:blur(8px); z-index:2; }
.name,.header nav,.eyebrow,.section-head,.project-number,.portrait-caption { font:500 10px/1.4 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.13em; }
.name { display:inline-flex; align-items:center; gap:9px; }
.name img { width:20px; height:20px; object-fit:contain; }
.header nav { display:flex; gap:26px; color:var(--muted); }.header nav a:hover,.project-link:hover,.text-link:hover { color:var(--orange); }
.hero,.work,.about,footer { padding-left:var(--page-pad); padding-right:var(--page-pad); }
.hero { min-height:650px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(310px,.75fr); gap:clamp(34px,7vw,120px); align-items:center; padding-top:80px; padding-bottom:80px; overflow:hidden; }
.eyebrow { color:var(--muted); margin:0 0 28px; }.hero h1 { font-size:clamp(54px,7vw,112px); line-height:.94; letter-spacing:-.07em; margin:0; max-width:8ch; }.hero h1 i { color:var(--orange); font-style:normal; }
.intro { color:var(--muted); max-width:44ch; margin:34px 0 27px; font-size:17px; }.text-link,.project-link { font:500 11px/1.3 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--ink); padding-bottom:5px; display:inline-block; }.text-link span,.project-link span { color:var(--orange); margin-left:7px; }
.portrait-wrap { height:450px; position:relative; display:flex; justify-content:center; align-items:flex-end; background:#f2f5e9; overflow:hidden; }.portrait-wrap img { height:105%; width:auto; position:relative; z-index:1; object-fit:contain; transition:transform .28s ease; }.portrait-wrap:hover img,.portrait-wrap:focus-visible img { transform:scale(1.035); }.portrait-wrap:focus-visible { outline:2px solid var(--orange); outline-offset:4px; }.sun { position:absolute; z-index:2; top:44px; right:50px; color:var(--orange); font-size:96px; transform:rotate(-15deg); }
.work { padding-top:85px; padding-bottom:110px; }.section-head { display:flex; justify-content:space-between; padding-bottom:13px; border-bottom:1px solid var(--ink); margin-bottom:30px; }.section-head p { margin:0; }.section-head span { color:var(--muted); }
.project img { width:100%; display:block; aspect-ratio:4/3; object-fit:cover; transition:transform .45s ease; }.featured .image-link img { aspect-ratio:16/9; object-position:center; }.image-link { overflow:hidden; display:block; background:#ecece7; }.image-link:hover img { transform:scale(1.025); }.project-info { display:grid; grid-template-columns:1.1fr .8fr auto; gap:26px; padding:21px 0 65px; align-items:start; }.project-number { color:var(--orange); margin:0 0 9px; }.project h2 { font-size:clamp(24px,3vw,43px); letter-spacing:-.055em; line-height:1; margin:0 0 10px; }.project p:not(.project-number) { color:var(--muted); margin:0; max-width:29ch; font-size:14px; }.project-link { align-self:start; white-space:nowrap; }
.project-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:54px 32px; align-items:start; }.project-grid .project img { aspect-ratio:4/5; }.project-grid .make-it-count-project img { aspect-ratio:16/9; object-position:center 42%; } .project-grid .mac-project img { aspect-ratio:6/7; object-position:center 70%; }.project-grid .offset { margin-top:110px; }.project-grid .small { width:70%; }.project-grid .small img { aspect-ratio:4/3; }.project-grid .project h2 { font-size:28px; margin-top:8px; }
.project-grid .project .project-link { margin-top:16px; }
.about { background:#eceee5; padding-top:100px; padding-bottom:105px; }.about-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:70px; align-items:start; }.about h2,footer h2 { font-size:clamp(35px,4.7vw,72px); line-height:.98; letter-spacing:-.065em; margin:0; max-width:12ch; }.about-grid p { color:var(--muted); max-width:32ch; margin:0 0 28px; }
footer { background:var(--ink); color:#f8f8f4; padding-top:100px; padding-bottom:28px; }footer .eyebrow { color:#aaa9a4; }footer h2 { max-width:16ch; margin-bottom:42px; }.email { font-size:clamp(22px,3vw,44px); letter-spacing:-.045em; border-bottom:1px solid #777; padding-bottom:8px; }.email span { color:var(--orange); }.footer-line { display:flex; justify-content:space-between; color:#aaa9a4; font:400 10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.1em; margin-top:110px; }.footer-line a:hover { color:#fff; }
@media(max-width:720px) { .header { height:62px; }.header nav { gap:15px; font-size:9px; }.hero { grid-template-columns:1fr; min-height:0; padding-top:54px; padding-bottom:54px; }.hero h1 { font-size:60px; }.portrait-wrap { height:310px; margin-top:20px; }.portrait-wrap img { height:100%; }.sun { right:22px; top:20px; font-size:70px; }.work { padding-top:56px; padding-bottom:70px; }.project-info { grid-template-columns:1fr; gap:14px; padding-bottom:54px; }.project-grid { grid-template-columns:1fr; gap:55px; }.project-grid .offset { margin-top:0; }.project-grid .small { width:100%; }.project-grid .project h2 { font-size:28px; }.about { padding-top:65px; padding-bottom:68px; }.about-grid { grid-template-columns:1fr; gap:28px; }.about h2,footer h2 { font-size:42px; }.about-grid p { font-size:15px; }footer { padding-top:66px; }.footer-line { margin-top:75px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.image-link:hover img { transform:none; } }


/* Preserve both models in the wide LiftLab homepage thumbnail. */
.project-grid .liftlab-project { width:85%; }
.project-grid .liftlab-project img { aspect-ratio:3 / 2; object-fit:cover; object-position:82% center; }
@media(max-width:720px) { .project-grid .liftlab-project { width:100%; } }