:root { --canvas:#f5f5f3; --ink:#0d0d0d; --soft-ink:#565654; --line:#d7d7d3; --mist:#e8e8e4; --lime:#d3ff3e; --serif:"Playfair Display",Georgia,serif; --sans:"Manrope",Arial,sans-serif; --mono:"DM Mono",monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--canvas); color:var(--ink); font-family:var(--sans); font-size:14px; line-height:1.5; } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } .shell { width:min(100% - 56px,1560px); margin-inline:auto; }
.skip-link { position:fixed; z-index:10; top:-60px; left:16px; padding:9px 12px; background:var(--ink); color:white; transition:top .2s; } .skip-link:focus { top:16px; }
.site-header { position:sticky; z-index:5; top:0; background:color-mix(in srgb,var(--canvas) 90%,transparent); backdrop-filter:blur(18px); transition:transform .45s cubic-bezier(.22,.61,.36,1); } .site-header.is-hidden { transform:translateY(-100%); }
.nav { height:84px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); } .wordmark { font-size:21px; font-weight:600; letter-spacing:-.09em; } .wordmark span { margin-left:3px; vertical-align:top; font:8px/1 var(--mono); letter-spacing:0; } .nav-links { display:flex; gap:34px; font-size:12px; } .nav-links a,.footer a { transition:opacity .25s; } .nav-links a:hover,.footer a:hover { opacity:.45; } .availability { justify-self:end; font:10px var(--mono); text-transform:uppercase; letter-spacing:.02em; } .availability i { display:inline-block; width:7px; height:7px; margin:0 7px 1px 0; border-radius:50%; background:#90af00; animation:blink 2s ease-in-out infinite; }
.kicker { margin:0; color:var(--soft-ink); font:10px/1.2 var(--mono); letter-spacing:.02em; text-transform:uppercase; }
.hero { min-height:min(795px,calc(100svh - 84px)); padding:clamp(90px,10vw,160px) 0 55px; display:grid; grid-template-columns:1.7fr .55fr; gap:50px; align-items:center; } .hero-copy h1,h2 { margin:0; font-size:clamp(64px,8.5vw,145px); font-weight:500; letter-spacing:-.075em; line-height:.84; } h2 { font-size:clamp(48px,6.15vw,102px); } em { font-family:var(--serif); font-weight:500; letter-spacing:-.09em; } .hero-copy h1 { margin-top:clamp(55px,9vw,130px); } .hero-intro { display:flex; justify-content:space-between; align-items:end; gap:30px; max-width:680px; margin-top:clamp(48px,8vw,120px); } .hero-intro p { max-width:278px; margin:0; font-size:15px; line-height:1.55; } .arrow-link { display:inline-block; padding-bottom:8px; border-bottom:1px solid currentColor; white-space:nowrap; font-size:12px; transition:opacity .25s; } .arrow-link:hover { opacity:.5; } .arrow-link span { margin-left:20px; font-size:17px; }
.hero-art { position:relative; min-height:0; aspect-ratio:1; overflow:hidden; background:#f5f3f0; } .hero-art img { width:100%; height:100%; object-fit:contain; object-position:center; }
.statement { background:var(--ink); color:var(--canvas); } .statement-inner { min-height:360px; padding:65px 0; display:flex; justify-content:space-between; align-items:end; } .statement p { margin:0; font-size:clamp(42px,5vw,82px); font-weight:500; letter-spacing:-.07em; line-height:.91; } .statement span { font:9px var(--mono); color:#9a9a94; }
.work { padding:clamp(100px,14vw,220px) 0; } .section-intro { display:grid; grid-template-columns:1fr 1fr; align-items:end; margin-bottom:clamp(60px,9vw,140px); } .section-intro h2 { grid-column:2; } .section-intro > p:last-child { grid-column:2; margin:35px 0 0; max-width:180px; color:var(--soft-ink); font-size:13px; } .kicker span { opacity:.65; }
.projects { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(72px,11vw,175px) clamp(16px,2.6vw,42px); } .project--one { grid-column:1 / span 8; } .project--two { grid-column:9 / span 4; margin-top:clamp(80px,13vw,200px); } .project--three { grid-column:1 / span 5; } .project--four { grid-column:7 / span 6; margin-top:clamp(40px,8vw,130px); } .project--five { grid-column:4 / span 3; margin-top:clamp(0px,3vw,48px); }
.project-carousel { position:relative; overflow:hidden; aspect-ratio:16 / 9; background:var(--mist); isolation:isolate; } .carousel-slide { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transform:scale(1.025); transition:opacity .65s ease,transform 1.6s cubic-bezier(.2,.68,.2,1); } .carousel-slide.is-active { opacity:1; transform:scale(1); z-index:1; } .project--one .project-carousel { aspect-ratio:16 / 10; } .project--one .carousel-slide,.project--one .carousel-slide.is-active { transform:none; } .carousel-status { position:absolute; z-index:2; right:13px; bottom:12px; display:flex; gap:5px; color:white; font:9px var(--mono); text-shadow:0 1px 8px rgba(0,0,0,.22); } .carousel-status span:first-child::after { content:"/"; margin-left:5px; }
.project-caption { display:flex; justify-content:space-between; gap:12px; padding-top:13px; margin-top:14px; border-top:1px solid var(--line); } .project-caption h3,.project-caption p { margin:0; } .project-caption h3 { font-size:13px; font-weight:600; letter-spacing:-.02em; } .project-caption p { color:var(--soft-ink); font:9px var(--mono); text-align:right; text-transform:uppercase; } .project-caption p span { margin-left:9px; }
.about { padding:clamp(100px,14vw,220px) 0; color:var(--canvas); background:#151514; } .about-grid { display:grid; grid-template-columns:1fr 2fr; } .about .kicker { color:#8f8f89; } .about-copy { max-width:805px; } .about-copy h2 { font-size:clamp(50px,6vw,103px); } .about-copy > p { max-width:480px; margin:44px 0 0; color:#ccccc7; font-size:clamp(15px,1.3vw,18px); line-height:1.55; } .about-copy > p + p { margin-top:16px; } .light { margin-top:50px; }
.services { padding:clamp(105px,14vw,220px) 0; } .service-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--ink); } .service-list li { min-height:130px; padding:27px 0; display:grid; grid-template-columns:1fr 2fr 1.3fr; gap:24px; align-items:baseline; border-bottom:1px solid var(--line); } .service-list span { color:var(--soft-ink); font:10px var(--mono); } .service-list h3,.service-list p { margin:0; } .service-list h3 { font-size:clamp(24px,2.3vw,37px); font-weight:500; letter-spacing:-.06em; line-height:1; } .service-list p { max-width:245px; color:var(--soft-ink); font-size:12px; }
.contact { background:var(--lime); padding:clamp(100px,14vw,220px) 0; } .contact h2 { margin-top:55px; font-size:clamp(65px,8vw,137px); } .contact-email { display:inline-block; margin-top:clamp(55px,8vw,120px); padding-bottom:10px; border-bottom:1px solid var(--ink); font-size:clamp(19px,2.1vw,33px); font-weight:500; letter-spacing:-.06em; } .contact-email span { margin-left:30px; } .footer { min-height:104px; display:flex; justify-content:space-between; align-items:center; gap:20px; color:var(--soft-ink); font:9px var(--mono); text-transform:uppercase; } .footer div { display:flex; gap:20px; }
.reveal { opacity:0; transform:translateY(20px); transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1); } .reveal.is-visible { opacity:1; transform:translateY(0); } @keyframes blink { 50% { opacity:.35; } }
@media (max-width:720px) { .shell { width:min(100% - 32px,1560px); } .nav { height:68px; grid-template-columns:1fr auto; } .nav-links { display:none; } .availability { font-size:8px; } .hero { min-height:calc(100svh - 68px); padding-top:72px; grid-template-columns:1fr; align-items:stretch; align-content:space-between; gap:55px; } .hero-copy h1 { margin-top:63px; font-size:clamp(58px,16vw,88px); } .hero-intro { align-items:start; flex-direction:column; margin-top:55px; } .hero-art { min-height:180px; } .statement-inner { min-height:275px; align-items:start; flex-direction:column; justify-content:space-between; } .statement p { font-size:42px; } .section-intro { grid-template-columns:1fr; gap:34px; margin-bottom:58px; } .section-intro h2,.section-intro > p:last-child { grid-column:1; } .section-intro > p:last-child { margin-top:0; } .projects { grid-template-columns:1fr 1fr; gap:58px 14px; } .project--one,.project--two,.project--three,.project--four,.project--five { grid-column:auto; margin-top:0; } .project--one,.project--four { grid-column:span 2; } .project-caption { display:block; } .project-caption p { margin-top:5px; text-align:left; } .about-grid { grid-template-columns:1fr; gap:38px; } .about-copy > p { margin-top:34px; } .service-list li { min-height:auto; grid-template-columns:28px 1fr; gap:7px 12px; } .service-list p { grid-column:2; margin-top:4px; } .footer { min-height:140px; padding:25px 0; flex-direction:column; justify-content:center; align-items:flex-start; gap:14px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .reveal { opacity:1; transform:none; } }