:root{color-scheme:light;--ink:#20382f;--muted:#65716b;--line:#d7ddd6;--paper:#f5f5ef;--accent:#244f3e;font-family:Arial,Helvetica,sans-serif;font-size:14px;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:3px}button{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid #b65d32;outline-offset:4px}button{cursor:pointer}button:disabled{cursor:wait;opacity:.5}[hidden]{display:none!important}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:66px;padding:10px max(22px,calc((100vw - 1480px)/2));border-bottom:1px solid var(--line);background:#fafaf5}
.brand{display:flex;align-items:center;gap:18px;text-decoration:none}.brand img{display:block;width:68px;height:auto}.brand span{font-size:12px;color:var(--muted)}nav{display:flex;gap:24px;align-items:center}nav a{font-size:13px;text-decoration:none;padding:8px 0}nav a[aria-current=page]{box-shadow:0 2px var(--accent)}
main{width:min(1480px,calc(100% - 44px));margin:0 auto}.page-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:20px 0 14px}.page-top h1{font-size:22px;font-weight:500;margin:0;letter-spacing:-.4px}.page-top p{margin:0;color:var(--muted);font-size:12px}
.paper-work{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}.gallery-main{grid-column:2;grid-row:1;min-width:0}.paper-work-stage{position:relative;height:clamp(410px,calc(100svh - 195px),1100px);background:transparent;border:0;border-radius:0;padding:0;overflow:hidden}.paper-work-stage canvas{width:100%;height:100%;display:block}#work-status{position:absolute;bottom:0;margin:0;padding:12px;background:#fff9e8;width:100%;font-size:13px}
.gallery-bar{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:12px 0}.paper-work-caption h2{font-size:16px;font-weight:500;margin:3px 0 0}.paper-work-caption p{font-size:11px;color:var(--muted);margin:0}.paper-work-controls{display:flex;gap:12px;align-items:center;flex-shrink:0}.paper-work-controls button{background:transparent;border:1px solid #c5cec5;padding:8px 13px;border-radius:3px;color:var(--ink)}.paper-work-controls button:last-child{background:var(--accent);border-color:var(--accent);color:#fff}#work-count{font-size:11px;color:var(--muted);white-space:nowrap}
.gallery-index{grid-column:1;grid-row:1}.index-label{margin:0 0 10px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}.paper-work-picker{display:grid;gap:5px}.paper-work-picker button{display:flex;align-items:center;gap:10px;text-align:left;padding:5px;border:1px solid transparent;border-radius:3px;background:transparent;color:var(--ink);min-height:49px}.paper-work-picker button:hover{background:#e9eee5}.paper-work-picker button[aria-current=true]{background:#e5ebdf;border-color:#b6c4af}.paper-work-picker img{width:49px;height:37px;object-fit:cover;border-radius:2px;flex-shrink:0}.paper-work-picker span{font-size:12px;line-height:1.25}
.studio-summary{display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px;border-top:1px solid var(--line);padding:20px 0;margin-top:14px}.studio-summary h2{font-size:13px;font-weight:600;margin:0 0 7px}.studio-summary p{font-size:13px;line-height:1.6;margin:0;color:var(--muted);max-width:42ch}.studio-summary a{color:var(--ink)}
footer{width:min(1480px,calc(100% - 44px));margin:0 auto;border-top:1px solid var(--line);padding:14px 0 20px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted)}footer p{margin:0}footer a{text-decoration:none}
.info-page{max-width:1080px;margin:32px auto 40px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px}.info-page h1{font-size:26px;font-weight:500;margin:0;letter-spacing:-.5px}.info-body{max-width:740px}.info-body p{line-height:1.65;margin:0 0 16px;max-width:65ch}.info-body h2{font-size:16px;margin:24px 0 10px;font-weight:600}.info-body h2:first-child{margin-top:0}.service-list{margin:0}.service-list>div{display:grid;grid-template-columns:165px 1fr;gap:20px;padding:14px 0;border-bottom:1px solid var(--line)}.service-list>div:first-child{padding-top:0}.service-list dt{font-weight:600}.service-list dd{margin:0;color:var(--muted);line-height:1.6}.email-link{font-size:19px}.info-photo{display:block;width:100%;max-height:270px;object-fit:cover;margin:20px 0;border-radius:3px}
.fallback-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}.fallback-grid figure{margin:0}.fallback-grid img{width:100%;height:210px;object-fit:cover}.fallback-grid figcaption{font-size:12px;padding:7px 0}
@media(min-width:2000px){main,.site-header,footer{max-width:1760px}.site-header{width:calc(100% - 80px);margin:0 auto;padding:10px 0}main,footer{width:calc(100% - 80px)}.paper-work{grid-template-columns:250px 1fr}.paper-work-stage{height:clamp(650px,calc(100svh - 195px),1150px)}}
@media(max-width:800px){.brand span{display:none}.paper-work{grid-template-columns:165px minmax(0,1fr);gap:15px}.paper-work-picker span{font-size:11px}.paper-work-picker img{width:38px;height:34px}.gallery-bar{align-items:flex-start;flex-direction:column;gap:10px}.studio-summary{gap:20px}.info-page{grid-template-columns:150px 1fr}.service-list>div{grid-template-columns:1fr;gap:5px}}
@media(max-width:580px){.site-header{padding:10px 16px;min-height:58px}.brand img{width:58px}nav{gap:18px}nav a{font-size:12px}main,footer{width:calc(100% - 28px)}.page-top{padding:17px 0 12px}.page-top h1{font-size:20px}.page-top p{font-size:11px}.paper-work{display:flex;flex-direction:column;gap:8px}.gallery-main,.gallery-index{width:100%}.paper-work-stage{height:clamp(350px,56svh,560px)}.gallery-bar{flex-direction:row;align-items:center;gap:10px;padding:10px 0}.paper-work-caption h2{font-size:14px}.paper-work-caption p{font-size:10px}.paper-work-controls{gap:6px}.paper-work-controls button{padding:8px 10px;font-size:12px}#work-count{display:none}.index-label{display:none}.paper-work-picker{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.paper-work-picker button{padding:3px;min-height:0;display:block}.paper-work-picker img{width:100%;height:42px}.paper-work-picker span{display:none}.studio-summary{grid-template-columns:1fr;gap:14px;padding:17px 0;margin-top:18px}.studio-summary h2{margin-bottom:4px}.studio-summary p{max-width:none}.info-page{display:block;margin:24px 0 32px}.info-page h1{font-size:24px;margin-bottom:20px}.info-body{font-size:14px}.fallback-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fallback-grid img{height:150px}footer{font-size:10px;gap:12px}}

/* Home, categorized examples, and contact share the same compact layout. */
.site-header{min-height:86px;padding-top:8px;padding-bottom:8px}.brand img{width:116px}.brand span{font-size:12px}
.home-intro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.8fr);gap:clamp(28px,4vw,64px);align-items:center;margin:28px 0 32px}.home-image{margin:0;min-width:0}.home-image img{display:block;width:100%;height:clamp(380px,65vh,690px);object-fit:cover;border-radius:4px}.home-image figcaption{font-size:11px;color:var(--muted);margin-top:8px}.home-copy{max-width:470px}.home-copy h1{font-size:29px;font-weight:500;margin:0 0 14px}.home-copy h2{font-size:15px;margin:22px 0 8px}.home-copy p,.home-copy li{font-size:14px;line-height:1.7}.home-copy p{margin:0}.home-copy ul{margin:0;padding-left:18px}.home-links{display:flex;align-items:center;gap:22px;margin-top:24px}.primary-link{display:inline-block;background:var(--accent);color:white;padding:11px 17px;text-decoration:none;border-radius:3px}.home-copy section{scroll-margin-top:20px}

.contact-simple{max-width:620px;margin:38px 0 48px}.contact-simple h1{font-size:26px;font-weight:500;margin:0 0 20px}.contact-simple p{font-size:14px;line-height:1.7;max-width:54ch;margin:20px 0}.email-link{font-size:20px}
.paper-work{grid-template-columns:minmax(0,1fr) 240px;gap:16px 24px;margin-bottom:22px}.gallery-filter-bar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px}.gallery-main{grid-column:1;grid-row:2}.paper-work-stage{height:clamp(400px,calc(100svh - 280px),1000px)}.project-aside{grid-column:2;grid-row:2;align-self:center;min-width:0}.project-aside h2{font-size:21px;line-height:1.2;font-weight:500;margin:8px 0 14px}#work-category{font-size:11px;letter-spacing:.04em;color:var(--muted);margin:0}#work-description{font-size:14px;line-height:1.65;margin:0 0 18px}#original-image{font-size:12px}.project-aside .paper-work-controls{margin-top:28px;gap:10px}.project-aside .paper-work-controls button{padding:9px 12px}.project-aside #work-count{display:inline;font-size:11px}
#gallery-filters{display:flex;gap:6px;flex-wrap:wrap}#gallery-filters button{font-size:12px;border:1px solid var(--line);background:transparent;color:var(--ink);padding:8px 12px;border-radius:3px}#gallery-filters button[aria-pressed=true]{background:var(--accent);color:white;border-color:var(--accent)}#category-count{font-size:11px;white-space:nowrap;color:var(--muted)}
.paper-work-picker{grid-column:1/-1;display:flex;gap:7px;overflow-x:auto;padding:2px 0 8px}.paper-work-picker button{flex:0 0 100px;display:block;padding:4px;min-height:0}.paper-work-picker img{width:90px;height:58px;object-fit:cover}.paper-work-picker span{display:block;font-size:10px;line-height:1.3;padding-top:5px;white-space:normal}
@media(min-width:2000px){.paper-work-stage{height:clamp(650px,calc(100svh - 280px),1100px)}.home-intro{grid-template-columns:1.4fr 1fr}.home-copy{max-width:520px}}
@media(max-width:900px){.home-intro{grid-template-columns:1fr 1fr;gap:24px}.paper-work{grid-template-columns:minmax(0,1fr) 195px;gap:14px}.project-aside h2{font-size:18px}.project-aside .paper-work-controls{gap:6px}.project-aside .paper-work-controls button{padding:8px}.brand span{display:none}}
@media(max-width:620px){.site-header{min-height:76px}.brand img{width:96px}nav{gap:16px}.home-intro{display:flex;flex-direction:column;gap:18px;margin:18px 0 26px;align-items:stretch}.home-image img{height:clamp(250px,42vh,360px)}.home-copy{max-width:none}.home-copy h1{font-size:25px}.home-copy h2{margin-top:18px}.home-links{margin-top:20px}.paper-work{display:flex;flex-direction:column;gap:12px}.gallery-filter-bar{width:100%;align-items:flex-start}#category-count{display:none}#gallery-filters{gap:5px}#gallery-filters button{font-size:11px;padding:7px 9px}.gallery-main{width:100%}.paper-work-stage{height:clamp(350px,54svh,550px)}.project-aside{width:100%;align-self:stretch;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start}.project-aside h2{font-size:18px;margin:5px 0 8px}#work-description{font-size:13px;margin-bottom:10px}.project-aside .paper-work-controls{margin:0;gap:6px}.project-aside #work-count{display:none}.paper-work-picker{width:100%;gap:5px}.paper-work-picker button{flex-basis:76px}.paper-work-picker img{width:66px;height:48px}.paper-work-picker span{font-size:10px}.contact-simple{margin:26px 0 34px}.email-link{font-size:18px}}
@media(prefers-reduced-motion:reduce){#project-detail{transition:none}}

/* Let the image consume the space left by the actual controls and footer. */
@media(min-width:621px) and (min-height:600px){
.examples-page{height:100svh;display:flex;flex-direction:column}
.examples-page .site-header,.examples-page footer{flex-shrink:0}
.examples-page main:has(.paper-work:not([hidden])){flex:1;min-height:0;display:flex;flex-direction:column}
.examples-page .page-top{flex-shrink:0;padding:12px 0}
.examples-page .paper-work{flex:1;min-height:0;grid-template-rows:auto minmax(0,1fr) auto;gap:10px 24px;margin-bottom:8px}
.examples-page .gallery-main{height:100%;min-height:0}
.examples-page .paper-work-stage{height:100%;min-height:0}
.examples-page .paper-work-picker{padding-bottom:2px}
.examples-page footer{padding:10px 0}
}

/* Gallery fallback is for missing JavaScript/WebGL; keep it out of the first paint. */
.gallery-js #work-fallback{display:none!important}
.home-image-frame{position:relative;overflow:hidden;border-radius:4px}
.home-image-frame img{border-radius:0}
.home-fold{position:absolute;inset:0;width:100%;height:100%;display:block}
.home-motion .home-image-frame > img{visibility:hidden}
@media(prefers-reduced-motion:reduce){.home-motion .home-image-frame > img{visibility:visible}}

/* Flat assembly: each page element arrives from a different direction. */
.home-motion .brand{animation:home-piece-left .34s cubic-bezier(.2,.8,.2,1) both}
.home-motion .site-header nav{animation:home-piece-top .34s cubic-bezier(.2,.8,.2,1) .06s both}
.home-motion .home-copy > h1{animation:home-piece-right .38s cubic-bezier(.2,.8,.2,1) .12s both}
.home-motion .home-copy > p{animation:home-piece-bottom .38s cubic-bezier(.2,.8,.2,1) .18s both}
.home-motion .home-copy > #services{animation:home-piece-left .38s cubic-bezier(.2,.8,.2,1) .23s both}
.home-motion .home-copy > #about{animation:home-piece-right .38s cubic-bezier(.2,.8,.2,1) .28s both}
.home-motion .home-links{animation:home-piece-bottom .36s cubic-bezier(.2,.8,.2,1) .32s both}
.home-motion footer{animation:home-piece-bottom .38s cubic-bezier(.2,.8,.2,1) .2s both}
@keyframes home-piece-left{from{opacity:0;transform:translateX(-35px)}to{opacity:1;transform:none}}
@keyframes home-piece-right{from{opacity:0;transform:translateX(35px)}to{opacity:1;transform:none}}
@keyframes home-piece-top{from{opacity:0;transform:translateY(-23px)}to{opacity:1;transform:none}}
@keyframes home-piece-bottom{from{opacity:0;transform:translateY(23px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.home-motion .brand,.home-motion .site-header nav,.home-motion .home-copy > *,.home-motion footer{animation:none}}


/* Longer project stories and the services/about pages. */
.home-intro{align-items:start}
.home-copy > p + p{margin-top:12px}
.home-copy .section-link{margin-top:8px;font-size:12px}
.home-image figcaption{font-size:13px;line-height:1.65;margin-top:12px;max-width:76ch}
.home-image figcaption strong{color:var(--ink);font-weight:600}
.home-image figcaption p{margin:6px 0 0}
.info-body .service-list + h2{margin-top:28px}
footer{flex-wrap:wrap;align-items:center}
.footer-links{gap:18px}
.footer-links a{font-size:11px;padding:0}
.fallback-grid figcaption{line-height:1.6}
.fallback-grid figcaption p{margin:5px 0 0;color:var(--muted)}
@media(min-width:621px) and (min-height:600px){
  .examples-page .project-aside{max-height:100%;overflow-y:auto;padding-right:4px}
}
@media(max-width:620px){
  .page-top{flex-wrap:wrap;gap:5px}
  .project-aside{grid-template-columns:1fr}
  .project-aside .paper-work-controls{justify-content:flex-start}
}