*{box-sizing:border-box}
body{margin:0;background:#FFFFFF;color:#111111;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}
a{color:#111111;text-decoration:none}
/* Hovered links get a black block with white text; the negative margin keeps the padding from shifting the layout */
.hl{padding:.04em .18em;margin:0 -.18em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
a:hover .hl,a:focus-visible .hl{background:#111111;color:#FFFFFF}
a:hover .hl *,a:focus-visible .hl *{color:#FFFFFF}
img,video{display:block;width:100%;height:auto}
video{background:#FFFFFF;object-fit:cover}
.tap{display:inline-flex;align-items:center;min-height:44px}
.muted{color:#6B6B6B}

/* Header */
.hdr{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:0 16px;padding:20px clamp(16px,3vw,40px);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.hdr .brand{justify-self:start;font-weight:500}
.hdr-mid{text-align:center}
.hdr nav{justify-self:end;display:flex;align-items:center;gap:10px;font-weight:500}
.hdr nav a[aria-current=page]{text-decoration:underline;text-underline-offset:6px}
/* Phones: name and title on the left, Selected projects with About underneath on the right */
@media (max-width:640px){
.hdr{grid-template-columns:minmax(0,1fr) auto;align-items:start;padding-top:16px;padding-bottom:16px}
.hdr .brand{grid-row:1;grid-column:1}
.hdr-mid{grid-row:2;grid-column:1;text-align:left}
.hdr nav{grid-row:1 / span 2;grid-column:2;flex-direction:column;align-items:flex-end;gap:0}
.hdr nav > span{display:none}
.hdr .tap{min-height:32px}
}

/* Footer */
footer{display:flex;flex-wrap:wrap;justify-content:center;gap:0 32px;padding:8px clamp(16px,3vw,40px) 24px;font-size:12px;font-style:italic;color:#707070}
footer span{display:inline-flex;align-items:center;gap:6px}
footer a{color:#707070}
@media (max-width:640px){footer{gap:0 20px}footer .tap{min-height:32px}}

/* Home */
.home{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}
.home footer{padding-bottom:16px}
.home main{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 16px}
.slide{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.slide[hidden]{display:none}
.stage{height:min(62vh,700px);width:100%;display:flex;align-items:center;justify-content:center}
.stage img,.stage video{max-width:100%;object-fit:cover}
.portrait{height:100%;width:auto}
.landscape{width:min(100%,1000px,calc(min(62vh,700px) * 1.2));height:auto}
.caption{text-align:center;font-size:13px;letter-spacing:.04em}
.home main{position:relative}
/* Phones: covers start just under the header with the caption right below, instead of floating in white space */
@media (max-width:640px){
.home main{align-items:flex-start;padding-top:64px}
.stage{height:auto}
.portrait{height:min(46vh,380px)}
.home .sticker-wrap{top:64px;height:0;transform:none}
.home .sticker{top:0;width:180px}
.home .sticker .sticker-body{font-size:20px}
}

/* "Site in progress" sticker: sits over the right edge of the wide cover images */
.sticker-wrap{position:absolute;left:16px;right:16px;top:50%;height:min(62vh,700px);transform:translateY(calc(-50% - 16px));pointer-events:none;z-index:2}
.sticker{position:absolute;top:26%;left:min(calc(50% + min(50%, 500px, min(62vh, 700px) * .6) + clamp(100px, 12.5vw, 170px) - 32px), calc(100% - clamp(100px, 12.5vw, 170px)));width:clamp(200px,25vw,340px);aspect-ratio:2 / 1;transform:translate(-50%,-50%) rotate(-12deg)}
.sticker-body{width:100%;height:100%;border-radius:50%;border:.15em solid #E8231A;color:#E8231A;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.08em;font-size:clamp(22px,2.7vw,38px);font-weight:700;line-height:1;letter-spacing:.02em;text-transform:uppercase;text-align:center;animation:sticker-sway 5s ease-in-out infinite}
/* The same sticker tucked just under a project title, overlapping its last line a little */
.title-sticker{width:clamp(200px,25vw,340px);aspect-ratio:2 / 1;margin:calc(clamp(100px,12.5vw,170px) * -.3) 0 0 clamp(24px,22%,200px);transform:rotate(-12deg);pointer-events:none}
@keyframes sticker-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

/* Construction guy, ladder and roller, standing on top of the footer */
.worksite{position:relative;flex-shrink:0;height:44px;margin:0 clamp(16px,3vw,40px);pointer-events:none;z-index:3}
.worksite svg,.worksite .paint{position:absolute;bottom:0;display:block}
.worksite svg{fill:#111111}
.worksite .white{fill:#FFFFFF}
.ladder{width:24px;height:84px}
.guy{width:36px;height:42px;pointer-events:auto}
.guy .red{fill:#E8231A}
.guy .bread{fill:#D9A85B}
.guy .lettuce{fill:#5FB83A}
.roller{width:12px;height:42px}
.roller-head{fill:#E8231A}
.paint{width:12px;height:0;background:#E8231A}
@media (max-width:640px){.worksite .ladder,.worksite .roller,.worksite .paint{display:none}}
@media (prefers-reduced-motion:reduce){.sticker-body{animation:none}}

/* Projects overview & about */
.page{padding:clamp(40px,6vw,88px) clamp(16px,3vw,40px) 96px}
.list-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:40px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.list-head h1{margin:0;font-size:13px;font-weight:500}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:56px 24px}
.card{display:flex;flex-direction:column;gap:12px}
.card img{aspect-ratio:3 / 4;object-fit:cover}
.card-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;letter-spacing:.04em}
.num{font-variant-numeric:tabular-nums}

.about{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(40px,6vw,96px);max-width:1200px;margin:0 auto;align-items:start}
.about img{aspect-ratio:2 / 3;object-fit:cover}
.about-side{display:flex;flex-direction:column;gap:56px}
.about-block{display:flex;flex-direction:column;gap:20px}
.about h1,.about h2{margin:0;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.about h2{color:#6B6B6B}
.lead{margin:0;font-size:22px;line-height:1.45;max-width:622px}
.cv{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;font-size:14px;line-height:1.55}
.cv.tight{gap:16px 24px}
.cv b{font-weight:500;display:block}
.cv p{margin:0;color:#444444;max-width:420px}

/* Project pages */
.project{padding:0 clamp(16px,3vw,40px)}
.intro{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:48px;padding:clamp(48px,7vw,112px) 0 clamp(48px,6vw,88px)}
.intro h1{margin:0;font-size:clamp(40px,5.5vw,80px);font-weight:400;line-height:1;letter-spacing:-.02em}
.intro-side{display:flex;flex-direction:column;gap:32px}
.copy{display:flex;flex-direction:column;gap:16px;max-width:560px;font-size:18px;line-height:1.6}
.copy p{margin:0}
.facts{margin:0;display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px 24px;font-size:13px;letter-spacing:.04em}
.facts dt{color:#6B6B6B;text-transform:uppercase;letter-spacing:.08em}
.facts dd{margin:0}
.media{display:flex;flex-direction:column;gap:24px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px}
.row.three{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.row.pair{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
@media (max-width:640px){.row.pair{grid-template-columns:minmax(0,1fr)}}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:48px 24px}
.gallery img{aspect-ratio:3 / 4;object-fit:cover}
figure{margin:0;display:flex;flex-direction:column;gap:12px}
figcaption{font-size:13px;letter-spacing:.04em}
.note{font-size:13px;line-height:1.5;letter-spacing:.02em;color:#6B6B6B;max-width:320px}
.r16x9{aspect-ratio:16 / 9}.r3x2{aspect-ratio:3 / 2}.r4x5{aspect-ratio:4 / 5}.r9x16{aspect-ratio:9 / 16;object-fit:cover}
.pnav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:64px 0 24px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}