*{box-sizing:border-box}html,body{margin:0;min-height:100%;}body{min-height:100vh}.surface{position:fixed;inset:0;overflow:hidden;z-index:-1}.mat .surface{background-color:#35673a;background-image:repeating-linear-gradient(17deg,transparent 0 2px,#ffffff06 3px,transparent 4px 7px),repeating-linear-gradient(102deg,transparent 0 3px,#102c1610 4px,transparent 5px 9px),radial-gradient(ellipse at 35% 25%,#66825a66,transparent 55%),radial-gradient(ellipse at 70% 80%,#193e2477,transparent 65%)}.mat .grid{position:absolute;inset:0;background-image:linear-gradient(#d7d19d99 1px,transparent 2px),linear-gradient(90deg,#d7d19d99 1px,transparent 2px);background-size:88px 88px;opacity:.8}

/* Paper-like wear is generated in the browser, so the surface stays sharp at every size. */
.mat .surface{background-color:#386b3c;background-image:radial-gradient(ellipse at 20% 25%,#72906455,transparent 55%),radial-gradient(ellipse at 80% 80%,#173e2355,transparent 58%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");background-blend-mode:normal,normal,soft-light}
.mat .surface:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.2;background-image:repeating-linear-gradient(163deg,transparent 0 73px,#c6c9a9 74px,transparent 75px 143px),repeating-linear-gradient(24deg,transparent 0 119px,#102e1a 120px,transparent 121px 213px);mix-blend-mode:soft-light}
.mat .grid{inset:0;border:0;opacity:.8;background-image:linear-gradient(#ddd7a5aa 1px,transparent 2px),linear-gradient(90deg,#ddd7a5aa 1px,transparent 2px);background-size:88px 88px}
/* Anchor both repeating grid layers to the center of the viewport. */
.mat .grid{background-position:center center}
.mat .surface:after{content:none}
/* Layered procedural fibers and pigment variation. */
.mat .grid{background-image:linear-gradient(#d6d3a8b0 1px,transparent 2px),linear-gradient(90deg,#d6d3a8b0 1px,transparent 2px);filter:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='rough'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.16' numOctaves='3' seed='4' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='2.4' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/svg%3E%23rough")}

.mat .grid{filter:url(#rough-grid)}

/* Straight lines with fine paper-like variation in the ink coverage. */
.mat .grid{filter:none;opacity:.86;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' seed='12' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.2 -.15'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23paper)'/%3E%3C/svg%3E");mask-size:160px 160px;mask-repeat:repeat}
.mat .grid{background-image:linear-gradient(#d6d3a8b0 2px,transparent 2px),linear-gradient(90deg,#d6d3a8b0 2px,transparent 2px)}
.mat .grid{background-image:linear-gradient(#d6d3a8b0 4px,transparent 4px),linear-gradient(90deg,#d6d3a8b0 4px,transparent 4px)}
.mat .grid{background-image:linear-gradient(#d6d3a8b0 3px,transparent 3px),linear-gradient(90deg,#d6d3a8b0 3px,transparent 3px)}

.hero{min-height:100svh;display:grid;place-items:center;padding:2rem}.hero h1{font-family:Inter,Arial,sans-serif;font-weight:800;font-size:clamp(3rem,8vw,8rem);line-height:1;letter-spacing:-.055em;text-align:center;max-width:1100px;color:#f9f7e9;margin:0}
::selection{background-color:#fff;color:#35673a}
::-moz-selection{background-color:#fff;color:#35673a}
.hero h1{font-family:'Batica Sans',Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.hero h1{font-family:Futura,'Futura PT',sans-serif;font-weight:700}
.hero h1{letter-spacing:normal}
.hero h1{font-size:96px}
@media(max-width:767px){.hero h1{font-size:48px}}
body.mat{color:#f9f7e9;font-family:Futura,'Futura PT',system-ui,sans-serif}.work{padding:5rem 0 9rem;overflow:hidden}.work-head{display:flex;align-items:end;justify-content:space-between;padding:0 5vw 2rem}.work-head h2{font-size:clamp(2.5rem,5vw,5rem);margin:0}.controls{display:flex;gap:.5rem}.controls button{border:1px solid #f9f7e9;background:transparent;color:#fff;border-radius:50%;width:52px;height:52px;font-size:24px;cursor:pointer}.film{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:52px 5vw;background-color:#20201b;background-image:repeating-linear-gradient(90deg,transparent 0 16px,#f0e9d4 16px 35px,transparent 35px 56px),repeating-linear-gradient(90deg,transparent 0 16px,#f0e9d4 16px 35px,transparent 35px 56px);background-size:auto 15px,auto 15px;background-repeat:repeat-x;background-position:top 18px left,bottom 18px left;box-shadow:0 14px 28px #10241555}.frame{flex:0 0 min(440px,78vw);scroll-snap-align:start;color:#f9f7e9;text-decoration:none}.frame img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:saturate(.85)}.frame-info{padding:16px 4px 4px}.frame-info span,.eyebrow{font:600 12px/1.5 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.12em}.frame-info h3{font-size:28px;margin:8px 0}.project{max-width:1400px;margin:auto;padding:40px 5vw 100px}.back{display:inline-block;color:inherit;text-decoration:none;font:600 14px system-ui,sans-serif}.project-intro{padding:100px 0 70px}.project h1{font-size:clamp(50px,8vw,110px);line-height:1;margin:16px 0 45px}.project-copy{max-width:720px;font:20px/1.6 system-ui,sans-serif}.gallery{display:grid;gap:24px}.gallery img{display:block;width:100%;height:auto}.end{margin-top:60px}@media(max-width:767px){.work{padding:3rem 0 5rem}.work-head{align-items:center}.project-intro{padding:70px 0 40px}.project-copy{font-size:17px}.gallery{gap:12px}}
/* The heading and the moving film form one naturally sized composition. */
.hero{min-height:0;padding:clamp(100px,18vh,200px) 2rem 64px}
.work{padding:0 0 100px;overflow:hidden}
.film{display:block;overflow:hidden;padding:0;background:none;box-shadow:none}
.film-track{display:flex;width:max-content;animation:film-roll 110s linear infinite;filter:drop-shadow(0 14px 14px #10241555)}
.film-strip{display:flex;gap:12px;flex:none;padding:52px 6px;background-color:#20201b;background-image:repeating-linear-gradient(90deg,transparent 0 16px,#f0e9d4 16px 35px,transparent 35px 56px),repeating-linear-gradient(90deg,transparent 0 16px,#f0e9d4 16px 35px,transparent 35px 56px);background-size:auto 15px,auto 15px;background-repeat:repeat-x;background-position:top 18px left,bottom 18px left}
.film:hover .film-track,.film:focus-within .film-track{animation-play-state:paused}
@keyframes film-roll{to{transform:translateX(-50%)}}
@media(max-width:767px){.hero{padding:100px 24px 48px}.work{padding:0 0 64px}.film-strip{padding-top:44px;padding-bottom:44px}}
@media(prefers-reduced-motion:reduce){.film-track{animation:none}.film{overflow-x:auto}}
.about-link{margin-top:28px;color:inherit;font:600 16px/1.4 system-ui,sans-serif;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:5px}.about-link:hover{opacity:.7}.about-link:focus-visible,.back:focus-visible,.about-contact:focus-visible{outline:2px solid currentColor;outline-offset:5px}.about-page .project-intro{padding-bottom:80px}.about-details{border-top:1px solid #f9f7e980;padding-top:36px}.about-details h2{font-size:clamp(32px,4vw,56px);margin:0 0 36px}.about-capabilities{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}.about-capabilities h3{font-size:24px;margin:0 0 14px}.about-capabilities p{font:16px/1.6 system-ui,sans-serif;max-width:360px}.about-contact{display:inline-block;color:inherit;font-size:28px;font-weight:700;margin-top:80px;text-decoration-thickness:1px;text-underline-offset:8px}@media(max-width:767px){.about-capabilities{grid-template-columns:1fr;gap:24px}.about-contact{margin-top:50px}}