@font-face{font-family:Anton;src:url('/assets/Anton.woff2?v=20260919') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Oswald;src:url('/assets/Oswald.woff2?v=20260919') format('woff2');font-weight:300;font-display:swap}
:root{color-scheme:dark;--paper:#f5f2ea;--muted:#bbb8ae;--charcoal:#242421;--rule:#55544b;--gutter:4.5vw}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--charcoal);color:var(--paper);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{color:inherit;font:inherit;cursor:pointer}a:focus-visible,button:focus-visible,.gallery-track:focus-visible{outline:2px solid #f8e4b5;outline-offset:7px}button:disabled{cursor:default;opacity:.3}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:1rem;top:-5rem;background:var(--paper);color:var(--charcoal);padding:1rem;z-index:20}.skip-link:focus{top:1rem}.site-header{height:90px;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.identity{font-size:clamp(20px,2.1vw,32px);letter-spacing:-.06em;font-weight:600}.site-header nav{font-size:14px;text-transform:uppercase;letter-spacing:.18em}.site-header nav a:hover{text-decoration:underline;text-underline-offset:6px}.home-scene{position:relative;min-height:100svh;aspect-ratio:16/9;max-height:none;background:linear-gradient(#0002,#0002),url('/assets/terrain.jpg') center/cover}.home .site-header{position:absolute;top:0;width:100%;height:12.5%}.home main{min-height:100svh;aspect-ratio:16/9;display:flex;align-items:center}.project-composition{width:100%;padding:0 5.35%;transform:translateY(-.25vw)}.project-line{display:flex;align-items:baseline;gap:2.1vw;margin-bottom:1.15vw}.project-name{display:inline-flex;align-items:flex-start;white-space:nowrap;transition:opacity .2s;text-shadow:0 2px 16px #0002}.project-name span{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:6.32vw;line-height:1.06;letter-spacing:.006em}.project-name small{font-family:Oswald,'Arial Narrow',sans-serif;font-size:1.46vw;font-weight:300;line-height:1;margin-left:.65vw;padding-top:.2vw;text-transform:uppercase}.project-composition:has(a:hover) a:not(:hover){opacity:.55}.home-footer{position:absolute;bottom:5.7%;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;font-size:12px;text-transform:uppercase;letter-spacing:.16em}.hero{height:clamp(180px,19vw,290px);position:relative;background:#191a17;overflow:hidden}.hero video{width:100%;height:100%;display:block;object-fit:cover;object-position:center}.video-toggle{position:absolute;right:var(--gutter);bottom:14px;border:1px solid #ffffff65;background:#151512b8;padding:8px 12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}.editorial{padding:38px var(--gutter) 42px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.5fr) minmax(0,.8fr);gap:3.4vw;align-items:start}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.14em;margin:0 0 13px;color:var(--muted)}.project-heading h1{font-family:Anton,Impact,sans-serif;font-size:clamp(36px,4.05vw,66px);line-height:1.04;letter-spacing:0;font-weight:400;margin:0 0 13px;overflow-wrap:anywhere}.project-heading h2{font-family:Oswald,'Arial Narrow',sans-serif;font-size:clamp(17px,1.5vw,23px);font-weight:300;line-height:1.3;max-width:25ch;margin:0}.project-copy{font-size:16px;line-height:1.6;color:#e0ddd5}.project-copy p{margin:0 0 16px}.project-copy p:last-child{margin-bottom:0}.metadata{margin:0;font-size:13px;line-height:1.4}.metadata>div{margin-bottom:12px}.metadata dt{color:#aaa79d;font-size:12px;margin-bottom:3px}.metadata dd{margin:0}.gallery{padding-bottom:34px}.gallery-bar{display:flex;justify-content:space-between;align-items:center;margin:0 var(--gutter) 16px;border-top:1px solid var(--rule);padding-top:14px}.gallery-bar .eyebrow{margin:0}.gallery-navigation{display:flex;align-items:center;gap:12px}.counter{font-size:12px;letter-spacing:.1em;margin-right:12px;font-variant-numeric:tabular-nums}.gallery-navigation button{background:none;border:1px solid var(--rule);width:42px;height:34px;font-size:22px;line-height:1}.gallery-navigation button:hover{background:var(--paper);color:var(--charcoal)}.gallery-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 14vw;overscroll-behavior-x:contain}.gallery-track::-webkit-scrollbar{display:none}.slide{flex:0 0 72vw;height:clamp(260px,34vw,540px);margin:0;scroll-snap-align:center;scroll-snap-stop:always;background:#1b1b18;display:flex;align-items:center;justify-content:center}.slide img{display:block;width:100%;height:100%;object-fit:contain}.project-footer{margin:0 var(--gutter);border-top:1px solid var(--rule);padding:28px 0 36px;display:flex;justify-content:space-between;align-items:center;font-size:14px}.project-footer a:hover{text-decoration:underline;text-underline-offset:5px}.project-footer strong{font-family:Anton,sans-serif;font-weight:400;font-size:24px;margin-left:18px}.project-footer span{font-size:24px;margin-left:12px}.not-found{padding:10vh var(--gutter)}
@media(min-aspect-ratio:16/9){.home-scene,.home main{min-height:56.25vw}}
@media(max-width:900px){.editorial{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:28px}.metadata{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;border-top:1px solid var(--rule);padding-top:20px}.project-heading h1{font-size:5.5vw}.hero{height:210px}}
@media(max-width:600px){:root{--gutter:6vw}.site-header{height:74px}.identity{font-size:23px}.site-header nav{font-size:12px}.home-scene,.home main{aspect-ratio:auto;min-height:100svh}.home .site-header{height:82px}.home-scene{background-position:45% center}.project-composition{padding:115px 6vw 120px;transform:none}.project-line{display:contents}.project-name{margin:0 4vw 3vw 0}.project-name span{font-size:12.8vw;line-height:1.15}.project-name small{font-size:3.2vw;line-height:1.1;margin-left:1.2vw;padding-top:1vw}.home-footer{bottom:30px;font-size:10px;letter-spacing:.09em}.editorial{display:block;padding-top:27px}.project-heading{margin-bottom:24px}.project-heading h1{font-size:clamp(36px,10vw,55px);overflow-wrap:normal}.project-heading h2{max-width:100%;font-size:20px}.project-copy{font-size:16px;line-height:1.6}.metadata{display:grid;grid-template-columns:1fr 1fr;margin-top:26px;gap:12px 24px}.metadata>div{margin-bottom:0}.metadata>div:last-child{grid-column:1/-1}.hero{height:170px}.slide{flex-basis:82vw;height:57vw;min-height:230px}.gallery-track{padding:0 9vw;gap:10px}.gallery-bar{gap:10px}.gallery-navigation{gap:7px}.gallery-navigation button{height:40px;width:40px}.counter{margin-right:0}.project-footer strong{display:block;font-size:23px;margin:7px 0 0}.project-footer span{display:none}.project-footer>a:last-child{text-align:right}.video-toggle{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Keep the 16:9 scene from imposing an oversized intrinsic width in tall windows. */
.home-scene{width:100%;height:max(100svh,56.25vw);aspect-ratio:auto}.home main{width:100%;height:100%;min-height:0;aspect-ratio:auto}
@media(max-width:600px){.home-scene{height:auto;min-height:100svh}.home main{min-height:100svh;height:auto}}
/* Image-sized frames remove letterboxing without cropping the artwork. */
.slide{flex:0 0 auto;width:calc(clamp(260px,34vw,540px) * var(--image-ratio));background:transparent}
.slide img{width:100%;height:100%;object-fit:fill}
.identity{letter-spacing:-.035em}
.project-footer a{display:flex;align-items:center;gap:14px}
.project-footer strong,.project-footer span{display:inline-block;margin:0}
.editorial-layout-measure{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;z-index:-1}
@media(max-width:600px){.slide{height:44vw;min-height:0;width:calc(44vw * var(--image-ratio))}.project-footer a{gap:8px}.project-footer strong{font-size:20px}.project-footer span{display:inline-block;font-size:22px}}
/* Brighter 1970s tones: tobacco, parchment, burnt orange and golden ochre. */
:root{--paper:#fff0d3;--muted:#dbc19a;--charcoal:#66523d;--rule:#ac8860;--accent:#f1b761}
body{background:var(--charcoal);color:var(--paper)}
.site-header{background:transparent!important;position:absolute;top:0;left:0;width:100%;z-index:3}
.project .hero{margin-top:0;height:calc(clamp(180px,19vw,290px) + 90px)}
.site-header .identity,.contact-link{text-shadow:0 1px 12px #21180db3}
.contact-link{font-family:Oswald,sans-serif;font-size:16px;letter-spacing:.12em;text-transform:uppercase}
.project-copy{color:#ffeed5}.metadata dt{color:#dbc19a}
.home-scene{background-image:linear-gradient(#c7903a08,#c7903a08),url('/assets/terrain.jpg')}
a,button{opacity:.58;transition:opacity .18s ease,color .18s ease}
a:hover,a:active,a:focus-visible,button:hover,button:active,button:focus-visible{opacity:1}
.project-composition:has(a:hover) a:not(:hover){opacity:.58}
.skip-link:focus{opacity:1}.video-toggle{background:transparent;border:0;text-shadow:0 1px 6px #000}
.gallery-navigation button{border:0;background:transparent}.gallery-navigation button:hover{background:transparent;color:var(--accent)}
.contact-page{padding:170px var(--gutter) 80px;display:grid;grid-template-columns:1fr 1fr;gap:9vw;max-width:1500px;margin:auto}
.contact-intro h1{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(64px,8vw,120px);line-height:1;margin:20px 0 48px;color:#ffd491}
.contact-details{max-width:32ch;font-size:18px;line-height:1.6}.contact-details a{display:block;margin-top:12px}
#contact-form{display:flex;flex-direction:column;padding-top:10px}#contact-form label{font-size:14px;letter-spacing:.07em;margin-bottom:10px}
#contact-form input,#contact-form textarea{font:inherit;font-size:18px;color:var(--paper);background:transparent;border:0;border-bottom:1px solid var(--rule);padding:12px 0 16px;margin-bottom:30px;border-radius:0;width:100%;resize:vertical}
#contact-form input::placeholder,#contact-form textarea::placeholder{color:#dbc19a;opacity:.7}#contact-form input:focus,#contact-form textarea:focus{outline:0;border-bottom-color:var(--paper)}
#contact-form button{align-self:flex-start;background:transparent;border:0;padding:0;font-family:Oswald,sans-serif;font-size:25px;text-transform:uppercase;letter-spacing:.04em}#contact-form button span{margin-left:24px}.form-note,#form-status{font-size:14px;color:var(--muted);line-height:1.5}
@media(max-width:900px){.project .hero{height:300px}}
@media(max-width:600px){.project .hero{height:244px}.contact-page{grid-template-columns:1fr;padding-top:125px;gap:40px}.contact-intro h1{margin-bottom:25px}.contact-details{font-size:16px}.contact-link{font-size:14px}.site-header .identity{font-size:23px}}
.site-header .identity{font-family:Oswald,'Arial Narrow',sans-serif;font-weight:300;font-size:16px;letter-spacing:.12em;text-transform:uppercase}
.copyright{padding:0 var(--gutter) 28px;font-size:12px;letter-spacing:.1em;color:var(--muted)}
@media(max-width:600px){.site-header .identity{font-size:14px}}
/* Soft backdrop for header readability, with no hard panel edge. */
.site-header{isolation:isolate}
.site-header::before{content:"";position:absolute;inset:0 0 auto;height:calc(150% + 210px);z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(31,25,18,.72) 0%,rgba(31,25,18,.48) 42%,rgba(31,25,18,0) 100%);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 15%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 15%,transparent 100%)}
@media(max-width:600px){.site-header::before{height:calc(150% + 142.5px)}}
/* Services introduction on the contact page follows the editorial page rhythm. */
.contact-services{grid-column:1/-1;padding-bottom:42px;border-bottom:1px solid var(--rule)}
.services-intro{display:grid;grid-template-columns:1fr 2fr;gap:4vw;align-items:start;margin-bottom:44px}
.services-intro .eyebrow{padding-top:8px}
.services-intro>p{font-family:Oswald,'Arial Narrow',sans-serif;font-weight:300;font-size:clamp(28px,3.1vw,46px);line-height:1.25;margin:0;max-width:36ch}
.services-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4vw}
.services-columns h3{font-family:Oswald,'Arial Narrow',sans-serif;font-size:25px;text-transform:uppercase;font-weight:300;letter-spacing:.025em;margin:0 0 17px}
.services-columns p{font-size:16px;line-height:1.6;margin:0 0 18px}
.services-columns .service-skills{font-size:13px;line-height:1.7;color:var(--muted);margin:0}
.contact-page{row-gap:58px}
@media(max-width:600px){.services-intro{grid-template-columns:1fr;gap:10px;margin-bottom:30px}.services-columns{grid-template-columns:1fr;gap:28px}.contact-services{padding-bottom:32px}.services-columns h3{margin-bottom:10px}.contact-page{row-gap:40px}}
/* Contact environment: top-down shoreline with cream polygon mesh. */
body.contact{background:#38443d;isolation:isolate}
body.contact::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,rgba(19,32,29,.76),rgba(43,34,24,.66)),url('/assets/shoreline-perspective.jpg') center/cover no-repeat}
.contact .contact-page,.contact .copyright{position:relative}
.contact .contact-services{border-color:rgba(255,240,211,.35)}
.contact #contact-form input,.contact #contact-form textarea{border-bottom-color:rgba(255,240,211,.5)}
.contact #contact-form input:focus,.contact #contact-form textarea:focus{border-bottom-color:var(--paper)}
.hero-text{display:flex;align-items:flex-end;padding:0 var(--gutter) 32px;background:transparent}
.hero-text a{font-family:Oswald,'Arial Narrow',sans-serif;font-weight:300;font-size:24px;letter-spacing:.04em}
.hero-text a span{margin-left:16px}
/* Shared header geometry on every route, including the homepage. */
.site-header,.home .site-header{height:90px;padding:0 var(--gutter);top:0;left:0;width:100%;align-items:center}
@media(max-width:600px){.site-header,.home .site-header{height:74px}}
.hero-still img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 55%}
.hero-collage{background:radial-gradient(ellipse at 50% 100%,#9b8059 0%,#4e4637 65%,#302e27 100%)}
.interface-stack{position:absolute;inset:80px 0 0;perspective:1300px}
.interface-layer{position:absolute;width:42%;max-width:660px;height:auto;aspect-ratio:16/9;object-fit:contain;border:1px solid #d5c29955;box-shadow:0 22px 40px #15130fcc;transform-origin:center}
.layer-0{left:8%;top:8%;transform:rotate(-9deg) rotateY(12deg);z-index:1}
.layer-1{right:8%;top:2%;transform:rotate(9deg) rotateY(-12deg);z-index:2}
.layer-2{left:29%;top:17%;transform:rotate(-2deg);z-index:3}
.project-external{font-family:Oswald,sans-serif;letter-spacing:.05em;text-transform:uppercase}
@media(max-width:600px){.interface-stack{top:82px}.interface-layer{width:62%}.layer-0{left:-7%;top:4%}.layer-1{right:-7%;top:4%}.layer-2{left:19%;top:23%}}
/* Stretch the terrain with cover. Avoid aspect-ratio+svh (Safari width bug)
   and a second body background (that tiles). */
body.home{overflow-x:hidden;background:var(--charcoal)}
.home-scene{
width:100%;max-width:100%;aspect-ratio:auto;overflow:hidden;
background-color:var(--charcoal);
background-image:linear-gradient(#c7903a08,#c7903a08),url('/assets/terrain.jpg');
background-position:center;background-repeat:no-repeat;background-size:cover
}
@media(min-width:601px){
.home-scene{min-height:100svh;height:100svh}
.home main{position:relative;width:100%;min-height:100svh;height:100%;aspect-ratio:auto;display:flex;align-items:center}
}
@media(max-width:600px){
.home-scene{height:auto;min-height:100svh}
.home main{min-height:100svh;height:auto}
}