:root{font-family:Arial,Helvetica,sans-serif;font-synthesis:none;color:#24392d;background:#4f4630;--muted:#58665a;--line:#ccd4c8}*{box-sizing:border-box}body{margin:0}html{scroll-behavior:smooth;scroll-padding-top:32px}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}a,button,summary{touch-action:manipulation;outline-offset:6px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #345c3c}p{line-height:1.6;text-wrap:pretty}h1,h2,h3{font-weight:400;margin:0;letter-spacing:-.05em}a:hover,button:hover{text-decoration:underline;text-underline-offset:6px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip{position:fixed;top:10px;left:10px;z-index:20;background:white;padding:15px;transform:translateY(-160%)}.skip:focus{transform:none}.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:700px;height:100vh;height:100dvh;max-height:none;background:#dce2d6;overflow:hidden}.hero-picture{display:contents}.hero-image{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center}.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(245,247,237,.64),rgba(239,244,231,.53) 28%,rgba(237,243,231,.44) 60%,rgba(244,247,238,.93));pointer-events:none}.header{padding:29px 4.5vw;display:flex;justify-content:center}.header nav{display:flex;gap:42px}.header a{display:flex;min-height:44px;align-items:center;font-size:14px}.intro{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px 24px 85px}.intro h1{font-size:clamp(90px,12.4vw,190px);line-height:1;letter-spacing:-.075em;margin-left:-.05em}.intro p{font-size:clamp(21px,2.1vw,32px);line-height:1.35;letter-spacing:-.035em;margin:24px 0 0}.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding:30px 4.5vw 38px}.hero-bottom p{font-size:14px;line-height:1.65;margin:0}.hero-bottom p span{color:#4b5d4d;font-size:12px}.hero-links{display:flex;gap:33px;align-items:center}.hero-links a,.hero-links button{min-height:44px;display:inline-flex;align-items:center;gap:13px;font-size:14px}.hero-links a:last-child{margin-left:35px}.body-content{max-width:1360px;padding:0 7vw;margin:auto}.section{padding:105px 0}.about,.contact{display:grid;grid-template-columns:1fr 1.25fr;gap:70px}.section h2{font-size:clamp(38px,4.5vw,62px);line-height:1.05}.about-copy p{font-size:17px;color:var(--muted);margin:22px 0;max-width:600px}.about-copy .lead{font-size:clamp(23px,2.4vw,32px);line-height:1.4;color:#24392d;letter-spacing:-.035em;margin-top:0}.text-link{display:inline-flex;align-items:center;gap:15px;min-height:44px;font-size:14px;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}.work{border-top:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:49px}.section-heading p{font-size:14px;color:var(--muted);margin:0}.project{display:grid;grid-template-columns:1fr 2.05fr;gap:38px;border-top:1px solid var(--line);padding:32px 0}.project h3{font-size:29px}.project p{font-size:16px;margin:0;color:var(--muted)}.project summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:25px;min-height:48px;font-size:13px;margin-top:12px;width:fit-content}.project summary::-webkit-details-marker{display:none}.project summary:hover{text-decoration:none}.project summary:hover .summary-label{text-decoration:underline;text-underline-offset:5px}.project summary .summary-icon{font-size:20px;font-weight:300}.project details[open] summary .summary-icon{transform:rotate(45deg)}.detail-body{padding:12px 0 0}.detail-body p{font-size:14px;margin-bottom:16px}.contact{border-top:1px solid var(--line);padding-top:70px;padding-bottom:75px}.contact p{font-size:19px;color:var(--muted);max-width:490px;margin:0 0 20px}footer{border-top:1px solid var(--line);display:flex;gap:25px;align-items:center;padding:22px 0 30px;font-size:12px;color:var(--muted)}footer a{margin-left:auto;padding:15px 0}.emgs[hidden]{display:none}
@media(min-width:1600px){.body-content{padding-inline:80px}}
@media(max-width:800px){.hero{min-height:0;max-height:none;height:100vh;height:100dvh}.header{padding:20px 24px}.header nav{gap:32px}.intro{padding-bottom:65px}.intro h1{font-size:clamp(85px,17vw,132px)}.hero-bottom{padding:20px 27px 30px;gap:22px}.hero-links{gap:20px}.hero-links a:last-child{display:none}.hero-bottom p{font-size:12px}.hero-bottom p span{font-size:10px}.body-content{padding:0 30px}.section{padding:65px 0}.about,.contact{grid-template-columns:1fr;gap:30px}.about h2 br{display:none}.about-copy .lead{max-width:580px}.section-heading{display:block;margin-bottom:30px}.section-heading p{margin-top:18px}.project{grid-template-columns:.8fr 1.2fr;gap:20px}.contact p{font-size:18px}}
@media(max-width:500px){.hero{min-height:0}.hero-image{object-position:center}.hero:after{background:linear-gradient(180deg,#f2f5eeb0,#eff4e7a6 40%,#eff4e770 65%,#f4f7eeee)}.header{padding-top:max(17px,env(safe-area-inset-top))}.header a{font-size:13px}.intro{padding-bottom:55px}.intro h1{font-size:clamp(82px,23vw,115px)}.intro p{font-size:23px;line-height:1.4;margin-top:22px}.hero-bottom{flex-direction:column;align-items:stretch;gap:18px;padding:15px 26px max(24px,env(safe-area-inset-bottom))}.hero-bottom p{font-size:13px}.hero-bottom p span{font-size:11px}.hero-links{justify-content:space-between;border-top:1px solid #68786466;padding-top:6px;gap:20px}.hero-links a:last-child{display:inline-flex;margin:0}.hero-links a,.hero-links button{font-size:13px;gap:10px}.body-content{padding:0 25px}.section{padding:52px 0}.section h2{font-size:40px}.about-copy p{font-size:16px}.about-copy .lead{font-size:25px}.project{grid-template-columns:1fr;gap:16px;padding:26px 0}.project h3{font-size:28px}.project p{font-size:15px}.contact p{font-size:17px}footer{flex-wrap:wrap;gap:10px 20px}footer span:first-child{flex-basis:100%}footer a{padding:12px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Stronger type contrast without changing the photograph or its overlay. */
.intro{color:#14291b}.intro h1{font-weight:600}.intro p{font-weight:500;}.contact-email{font-size:clamp(16px,2vw,22px);overflow-wrap:anywhere}

/* Readable supporting headline and optional approach detail. */
.intro p{font-weight:700;color:#102517;max-width:850px}
.approach{margin:22px 0 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.approach summary{list-style:none;cursor:pointer;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:15px}
.approach summary::-webkit-details-marker{display:none}.approach summary:hover{text-decoration:underline;text-underline-offset:5px}.approach summary span{font-size:22px;font-weight:400}.approach[open] summary span{transform:rotate(45deg)}.approach-body{padding:0 0 8px}.approach-body p{font-size:16px}.approach-body p:first-child{margin-top:8px}.contact p+p{margin-top:24px}
@media(max-width:500px){.intro p{font-size:21px;max-width:340px}.intro p br{display:none}}

/* Local tonal adjustment behind the statement; no letter shadow or glass. */
.intro .hero-statement{position:relative;isolation:isolate;width:fit-content;max-width:calc(100vw - 48px);font-weight:400;text-shadow:none;margin-top:25px;line-height:1.4}
.hero-statement:before{content:"";position:absolute;z-index:-1;inset:-38px -65px;pointer-events:none;background:radial-gradient(ellipse at center,rgba(246,248,240,.72) 0%,rgba(246,248,240,.52) 35%,rgba(246,248,240,.17) 60%,rgba(246,248,240,0) 75%)}
.hero-statement strong{display:block;font-size:clamp(25px,2.4vw,36px);font-weight:600;letter-spacing:-.035em}
.hero-statement span{display:block;font-size:clamp(17px,1.65vw,25px);font-weight:500;letter-spacing:-.02em;margin-top:5px}
@media(max-width:500px){.intro .hero-statement{max-width:330px}.hero-statement strong{font-size:26px}.hero-statement span{font-size:19px;max-width:290px;margin:8px auto 0}.hero-statement:before{inset:-32px -25px}}

/* Selected photographic treatment. */
.hero-statement:before{display:none}
body[data-treatment=tint] .hero:after{background:rgba(13,28,18,.51)}
body[data-treatment=tint] .hero,body[data-treatment=tint] .intro,body[data-treatment=tint] .intro p,body[data-treatment=tint] .hero-bottom p span{color:#faf9f1}
body[data-treatment=tint] .hero-links{border-color:#faf9f155}
.hero a:focus-visible,.hero button:focus-visible{outline-color:#faf9f1}

/* Full-width neutral section comparison; photographic hero is unchanged. */
.body-content{max-width:none;padding:0;margin:0;background:#fff;color:#292a28;--muted:#595a57;--line:#d4d5d1}
.body-content>.section,.body-content>footer{padding-left:max(7vw,calc((100% - 1140px)/2));padding-right:max(7vw,calc((100% - 1140px)/2))}
.about{background:#fff;border:0}.about-copy .lead{color:inherit}.work{background:#efefec;border-top:0}.contact{background:#292a28;color:#f3efe5;border-top:0;--muted:#d5d1c7;--line:#53544f}.contact p{color:var(--muted)}
.body-content>footer{background:#292a28;color:#d5d1c7;border-color:#53544f}
body[data-sections=dark] .body-content{background:#292a28;color:#f3efe5;--muted:#d5d1c7;--line:#53544f}
body[data-sections=dark] .about,body[data-sections=dark] .work{background:#292a28;color:#f3efe5}
body[data-sections=dark] .work,body[data-sections=dark] .contact{border-top:1px solid #53544f}
.body-content a:focus-visible,.body-content button:focus-visible,.body-content summary:focus-visible{outline-color:currentColor}
@media(max-width:800px){.body-content>.section,.body-content>footer{padding-left:30px;padding-right:30px}}
@media(max-width:500px){.body-content>.section,.body-content>footer{padding-left:25px;padding-right:25px}}

.approach{border:0;margin:30px 0 12px}.approach h3{font-size:21px;line-height:1.3;letter-spacing:-.025em;margin-bottom:15px}.approach-body{padding:0}.approach-body p{font-size:17px}

/* Project grouping through space, without horizontal rules. */
.work .project{border:0;padding:0}
.work .project+.project{margin-top:64px}
@media(max-width:500px){.work .project+.project{margin-top:48px}}

/* Alternate flat palettes. No effects or changes to the hero. */
body[data-sections=muted]{--about-bg:#dce7ed;--work-bg:#eee4d3;--contact-bg:#d7b8b4;--palette-text:#292b30;--palette-muted:#4d4d52;--contact-text:#292b30;--contact-muted:#464348;--palette-line:#a59a92;--contact-line:#ac8e8a}
body[data-sections=earth]{--about-bg:#e8ddc9;--work-bg:#cba58e;--contact-bg:#502b36;--palette-text:#302822;--palette-muted:#40322b;--contact-text:#f4eadb;--contact-muted:#ded0c6;--palette-line:#aa8c77;--contact-line:#79515a}
body[data-sections=surprise]{--about-bg:#eee6ad;--work-bg:#bdcbd6;--contact-bg:#263745;--palette-text:#26323a;--palette-muted:#43515a;--contact-text:#f6edbd;--contact-muted:#dedbc6;--palette-line:#909c9f;--contact-line:#53616a}
body:is([data-sections=muted],[data-sections=earth],[data-sections=surprise]) .body-content{color:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line)}
body:is([data-sections=muted],[data-sections=earth],[data-sections=surprise]) .about{background:var(--about-bg)}
body:is([data-sections=muted],[data-sections=earth],[data-sections=surprise]) .work{background:var(--work-bg)}
body:is([data-sections=muted],[data-sections=earth],[data-sections=surprise]) .contact{background:var(--contact-bg);color:var(--contact-text);--muted:var(--contact-muted);--line:var(--contact-line)}
body:is([data-sections=muted],[data-sections=earth],[data-sections=surprise]) .body-content>footer{background:var(--contact-bg);color:var(--contact-muted);border-color:var(--contact-line)}

.body-content .section h2{transform-origin:left center}

/* Self-hosted typeface comparisons. */














body[data-font=source]{font-family:"Source Sans 3",Arial,sans-serif}
body[data-font=roboto]{font-family:"Roboto",Arial,sans-serif}
body[data-font=open]{font-family:"Open Sans",Arial,sans-serif}
body[data-font=lato]{font-family:"Lato",Arial,sans-serif}

/* Keep the welcome toast just below navigation at every screen size. */
.intro-copy{position:static;max-width:100%}
.intro-copy .hero-statement{margin-inline:auto}
.email-copy .contact-email{text-align:left;max-width:100%}
.email-icon{position:relative;display:block;flex:0 0 20px;width:20px;height:20px}
.email-icon svg{position:absolute;inset:0;width:20px;height:20px;transform-origin:center;transition:opacity 180ms ease,transform 180ms ease}
.contact-email .copy-icon{opacity:1;transform:scale(1)}
.contact-email .copied-icon{opacity:0;transform:scale(.65)}
.contact-email .copied-icon path{stroke-dasharray:22;stroke-dashoffset:0}
.contact-email[data-copied=true] .copy-icon{opacity:0;transform:scale(.65)}
.contact-email[data-copied=true] .copied-icon{opacity:1;transform:scale(1)}
.contact-email:focus-visible{outline-color:#f4eadb}
@media(prefers-reduced-motion:reduce){.email-icon svg{transition:none}}
.intro .emgs{position:absolute;z-index:5;top:112px;left:50%;width:360px;max-width:calc(100vw - 48px);display:flex;align-items:center;gap:14px;padding:19px 18px 19px 24px;text-align:left;background:#502b36;color:#f4eadb;border:1px solid #7f5260;border-radius:16px;box-shadow:inset 0 1px 0 #f4eadb15,0 16px 40px #17120f40,0 3px 10px #17120f24;transform:translateX(-50%);transform-origin:top center;animation:emgs-pop 480ms cubic-bezier(.2,.8,.2,1) both}
.intro .emgs[hidden]{display:none}
.emgs-message{flex:1;min-width:0}
.emgs-message strong{display:block;font-size:16px;font-weight:600;line-height:1.4;letter-spacing:-.015em}
.intro .emgs .emgs-message p{font-size:14px;font-weight:400;line-height:1.5;letter-spacing:0;color:#ded0c6;margin:6px 0 0}
.emgs .emgs-close{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;margin:0 -6px 0 0;border:1px solid #f4eadb12;border-radius:50%;background:#f4eadb08;color:#ded0c6;transition:background 150ms,color 150ms}
.emgs .emgs-close:hover{background:#70424f;color:#fff6ec;text-decoration:none}
.emgs .emgs-close:focus-visible{outline:2px solid #f4eadb;outline-offset:2px}
.intro .emgs.is-closing{transform-origin:center;animation:emgs-poof 360ms ease-in-out both;pointer-events:none}
@keyframes emgs-pop{0%{opacity:0;transform:translate(-50%,12px) scale(.78)}65%{opacity:1;transform:translate(-50%,0) scale(1.045)}82%{transform:translate(-50%,0) scale(.99)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes emgs-poof{0%{opacity:1;transform:translate(-50%,0) scale(1)}28%{opacity:1;transform:translate(-50%,0) scale(.94,1.04)}48%{opacity:1;transform:translate(-50%,0) scale(1.09,.98)}76%{opacity:.8;transform:translate(-50%,0) scale(.2)}100%{opacity:0;transform:translate(-50%,0) scale(0)}}
.emgs-burst{position:absolute;z-index:6;left:50%;width:0;height:0;pointer-events:none}
.emgs-burst i{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:#f4eadb;box-shadow:0 0 4px #f4eadb30;animation:emgs-speck 300ms 150ms cubic-bezier(.15,.7,.3,1) both}
@keyframes emgs-speck{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translate(var(--burst-x),var(--burst-y)) scale(0)}}
@media(max-width:800px){body[data-emgs=true] .intro{padding-top:100px}.intro-copy{position:static}.intro .emgs{top:94px;bottom:auto;width:320px;transform-origin:top center}}
@media(max-width:500px){.intro .emgs{top:calc(max(17px,env(safe-area-inset-top)) + 74px);padding:17px 14px 17px 19px}}
@media(prefers-reduced-motion:reduce){.intro .emgs,.intro .emgs.is-closing{animation:none}.emgs .emgs-close{transition:none}.emgs-burst{display:none}}

/* The resume stays over the original website, with a light blur behind it. */
body.resume-open{overflow:hidden}
.resume-viewer{position:fixed;inset:0;z-index:100;margin:0;width:100%;height:100vh;height:100dvh;max-width:none;max-height:none;border:0;padding:0;background:transparent;color:#f4eadb;overflow:hidden;overscroll-behavior:contain;touch-action:none}
.resume-viewer[open]{display:block}
.resume-viewer::backdrop{background:transparent}
.resume-backdrop{position:absolute;inset:0;background:rgba(20,16,13,.16);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none}
.resume-viewer.is-closing .resume-document,.resume-viewer.is-closing .resume-actions{pointer-events:none}
.resume-actions{position:absolute;z-index:2;top:max(18px,env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right));display:flex;align-items:center;gap:10px}
.resume-control{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#502b36;color:#f4eadb;box-shadow:0 3px 14px #17120f24;transition:background 150ms,transform 150ms}
.resume-control:hover{background:#70424f;text-decoration:none}
.resume-control:active{transform:scale(.92)}
.resume-control:focus-visible{outline:2px solid #f4eadb;outline-offset:3px}
.resume-document{position:relative;height:100%;overflow:hidden;overscroll-behavior:contain;color:#f4eadb;touch-action:none}
.resume-document:focus-visible{outline:2px solid #f4eadb;outline-offset:-4px}
.resume-stage{position:absolute;inset:84px max(24px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.resume-stage.is-zoomed{cursor:grab}
.resume-stage.is-dragging{cursor:grabbing}
.resume-pages{position:absolute;top:50%;left:50%;display:flex;flex-direction:column;gap:24px;align-items:center;width:900px;max-width:none;margin:0;transform-origin:0 0;will-change:transform}
.resume-page{width:100%;background:white;box-shadow:0 8px 36px #17120f30;position:relative}
.resume-page img{display:block;width:100%;height:auto;-webkit-user-drag:none}
.resume-status{text-align:center;margin:12vh auto;max-width:330px;font-size:16px;line-height:1.6}
.resume-status[hidden]{display:none}
@media(max-width:500px){.resume-actions{top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));gap:8px}.resume-stage{inset:76px max(12px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.resume-pages{gap:16px}}
@media(prefers-reduced-motion:reduce){.resume-control{transition:none}}

/* Drawn arrows keep the same stroke on every browser, including iOS. */
.link-arrow{display:inline-block;flex:none;width:24px;height:24px;vertical-align:middle}
footer a{display:inline-flex;align-items:center;gap:10px}
@media(max-width:800px){.intro{min-height:0}}
@media(max-width:500px) and (max-height:650px){.intro{padding-bottom:24px}.intro h1{font-size:82px}.intro .hero-statement{margin-top:18px}.hero-statement strong{font-size:24px}.hero-statement span{font-size:17px}.hero-bottom{gap:10px;padding-top:10px;padding-bottom:max(16px,env(safe-area-inset-bottom))}}

/* Extend the photo beyond the large viewport for translucent mobile controls.
   Use the stable small viewport for content so collapsing browser controls
   cannot move the text or links during a scroll. */
@media(max-width:800px),(hover:none) and (pointer:coarse){
 .hero{--browser-bleed:max(64px,env(safe-area-inset-bottom,0px));height:calc(100vh + var(--browser-bleed));height:calc(100lvh + var(--browser-bleed));padding-bottom:var(--browser-bleed);padding-bottom:calc(max(0px,100lvh - 100svh) + var(--browser-bleed))}
}

/* Safari paints its own status-bar fill; match the photograph's upper edge. */
@media(max-width:800px),(hover:none) and (pointer:coarse){
 body[data-treatment=tint] .hero:after{background:linear-gradient(to bottom,#4f4630,rgba(13,28,18,.51) 64px)}
}