.menu{--accent:#b4aa98;--wash:#f1efea;color:#30312f;background:#fff;font-family:Arial,Helvetica,sans-serif}
.landing-frame{position:absolute;inset:12px;border:1px solid #e5e4e0;pointer-events:none}
.menu .landing-header{left:5%;right:5%;top:20px;height:56px;border:0;font-size:9px;letter-spacing:.16em}
.wordmark{font-size:17px;letter-spacing:-.045em;font-weight:700;color:inherit;text-decoration:none}.wordmark span{display:block;margin-top:8px;font-size:7px;letter-spacing:.23em;font-weight:400}
.menu button{color:inherit;cursor:pointer}.replay{border:0;background:none;font-size:8px;letter-spacing:.12em}.edition{color:#777}
.material-stage{position:absolute;inset:90px 6% 165px;display:grid;grid-template-columns:1fr 1fr;align-items:center;max-width:1350px;margin:auto}
.material-art{position:relative;aspect-ratio:1;max-height:100%;width:100%;isolation:isolate;transform:translate(var(--px,0),var(--py,0));transition:transform 1s ease-out}
.material-art:before{content:'';position:absolute;width:67%;height:67%;left:17%;top:18%;border-radius:50%;background:var(--wash);transition:background 1s;z-index:-1}
.material-object{position:absolute;inset:-5% 0 0;width:100%;height:100%;overflow:visible;opacity:0;transform:translateY(35px) rotate(-5deg) scale(.9);transition:opacity .55s,transform 1s cubic-bezier(.2,.7,.15,1)}
.object-shadow{fill:#000;opacity:.055;filter:blur(8px)}
.menu[data-material=flooring] .object-flooring,.menu[data-material=tiling] .object-tiling,.menu[data-material=millwork] .object-millwork,.menu[data-material=paint] .object-paint{opacity:1;transform:translateY(0) rotate(0) scale(1)}
.orbit{position:absolute;width:73%;height:73%;border:1px solid var(--accent);opacity:.38;left:12%;top:13%;transform:rotate(25deg);transition:border-color 1s}.orbit-two{width:60%;height:60%;left:19%;top:20%;transform:rotate(-16deg);opacity:.2}
.floating-mark{position:absolute;border:1px solid var(--accent);width:22px;height:22px;animation:material-float 7s ease-in-out infinite;transition:border-color 1s}.mark-one{top:5%;left:40%;transform:rotate(25deg)}.mark-two{bottom:10%;right:14%;width:14px;height:14px;animation-delay:-3s}.mark-three{border:0;left:8%;top:64%;font-size:26px;font-weight:200;color:var(--accent);animation-delay:-5s}
.drawing-caption{position:absolute;bottom:0;left:32%;font-size:7px;letter-spacing:.2em;color:#90908b}
.material-copy{position:relative;padding-left:6%;padding-bottom:25px;z-index:2}
.material-eyebrow{font-size:9px;letter-spacing:.2em;color:#878780;margin:0 0 26px}
.material-copy h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(36px,4.5vw,76px);font-weight:400;letter-spacing:-.045em;line-height:1.13;margin:0 0 24px;white-space:nowrap}
.material-copy em{font-weight:400;font-style:normal;position:relative}.material-copy em:after{content:'';position:absolute;left:0;right:0;bottom:3px;height:7px;background:var(--accent);opacity:.3;z-index:-1;transition:background 1s}
.material-description{max-width:310px;font-size:12px;line-height:1.9;color:#85857f;margin-bottom:30px}
.material-discover{display:flex;align-items:center;gap:26px;border:0;background:none;font-size:8px;letter-spacing:.17em;padding:0}.material-discover span{width:43px;height:43px;display:grid;place-items:center;border:1px solid #c8c7c1;border-radius:50%;outline:1px solid #e8e7e1;outline-offset:5px;font-size:16px;transition:transform .3s}.material-discover:hover span{transform:rotate(45deg)}
.menu .material-nav{position:absolute;inset:auto 22% 83px;display:flex;flex-direction:row;justify-content:center;gap:0;align-items:stretch}
.material-nav button{background:none;border:0;border-bottom:1px solid #dddcd6;padding:14px 25px 17px;font-family:Georgia,serif;font-size:17px;position:relative;white-space:nowrap;transition:color .3s}
.material-nav small{font:8px Arial,sans-serif;color:#aaa;margin-right:11px}.material-nav button:after{content:'';position:absolute;height:2px;bottom:-1px;left:50%;right:50%;background:var(--accent);transition:left .5s,right .5s}.material-nav button[aria-pressed=true]:after{left:0;right:0}.material-nav button[aria-pressed=false]{color:#9a9a94}.material-nav button:hover{color:#30312f}
.material-footer{position:absolute;bottom:33px;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;font-size:7px;letter-spacing:.16em;color:#93938d}.material-footer div{display:flex;align-items:center;gap:20px}.material-footer button{border:0;background:none;font-size:18px;font-weight:300;padding:5px 10px}
.menu[data-material=tiling]{--accent:#90aba0;--wash:#edf2ef}.menu[data-material=millwork]{--accent:#b88966;--wash:#f5eee8}.menu[data-material=paint]{--accent:#91a3bb;--wash:#edf0f5}
.menu.active .plank{animation:plank-float 6s ease-in-out infinite;animation-delay:calc(var(--i)*-.8s)}
.joinery-right{animation:joinery-float 7s ease-in-out infinite}.roller{animation:roller-float 7s ease-in-out infinite}.tile{opacity:.97}
.material-copy.changing{animation:copy-in .65s both}.menu.revealing .material-stage{animation:landing-in 1.2s both}.menu.revealing .material-nav{animation:landing-in 1.2s .15s both}
@keyframes material-float{50%{translate:0 -10px;rotate:12deg}}@keyframes plank-float{50%{translate:0 -12px}}@keyframes joinery-float{50%{translate:-18px 11px}}@keyframes roller-float{50%{translate:0 24px}}@keyframes copy-in{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes landing-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.menu button:focus-visible,.wordmark:focus-visible{outline:2px solid #555;outline-offset:5px}
.material-detail{border:1px solid #deded7;background:#fff;color:#30312f;width:min(520px,90vw);padding:55px;box-sizing:border-box}.material-detail::backdrop{background:#ffffffb8;backdrop-filter:blur(10px)}.detail-close{position:absolute;right:20px;top:14px;border:0;background:none;font-size:26px}.detail-label{font-size:8px;letter-spacing:.18em;color:#888}.material-detail h2{font:48px Georgia,serif;margin:24px 0}.detail-body{font-size:14px;line-height:1.9;color:#777}.detail-tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.detail-tags span{border:1px solid #deded7;padding:8px;font-size:9px;letter-spacing:.05em}.detail-next{border:0;background:none;padding:12px 0;font-size:9px;letter-spacing:.12em}
@media(max-width:700px){.landing-frame{inset:7px}.menu .landing-header{top:13px;left:7%;right:7%}.edition{display:none}.wordmark{font-size:14px}.replay{font-size:7px}.material-stage{inset:70px 7% 149px;display:flex;flex-direction:column;justify-content:center;gap:10px}.material-art{width:min(85%,330px);height:auto;max-height:52%;flex:0 1 auto}.material-copy{padding:0;text-align:center}.material-eyebrow{margin:0 0 12px;font-size:8px}.material-copy h1{font-size:clamp(30px,7.8vw,44px);margin-bottom:12px}.material-description{font-size:10px;margin:0 auto 15px;max-width:245px}.material-discover{margin:auto;font-size:7px;gap:20px}.material-discover span{width:30px;height:30px;font-size:13px}.menu .material-nav{left:8%;right:8%;bottom:76px}.material-nav button{flex:1;padding:12px 5px;font-size:14px}.material-nav small{display:block;margin:0 0 7px;font-size:7px}.material-footer{bottom:25px;left:8%;right:8%}.material-footer>span{font-size:6px;max-width:65px;line-height:1.8}.material-footer div{gap:7px}.drawing-caption{font-size:6px}.material-detail{padding:35px}.material-detail h2{font-size:40px}}
@media(max-height:620px) and (min-width:701px){.material-stage{inset:65px 10% 120px}.material-art{max-width:360px;justify-self:end}.material-copy h1{font-size:40px}.material-eyebrow{margin-bottom:14px}.material-description{margin-bottom:17px}.menu .material-nav{bottom:63px}.material-footer{bottom:19px}}
@media(prefers-reduced-motion:reduce){.menu *, .menu *:before,.menu *:after{animation:none!important;transition:none!important}}

/* Dark material gallery. */
.menu{--accent:#b4aa98;--wash:#191917;background:#080909;color:#eeeee8;color-scheme:dark}
.landing-frame{border-color:#292b29}
.edition,.material-eyebrow,.drawing-caption{color:#969a92}
.material-description{color:#a5a8a0}
.material-copy em:after{opacity:.22}
.orbit{opacity:.32}.orbit-two{opacity:.18}
.object-shadow{opacity:.35}
.material-discover span{border-color:#62665c;outline-color:#292d26}
.material-nav button{border-bottom-color:#33372f}
.material-nav small{color:#969b8d}
.material-nav button[aria-pressed=false]{color:#8e9386}
.material-nav button:hover,.material-nav button[aria-pressed=true]{color:#f1f2e9}
.material-footer{color:#969b8d}
.menu[data-material=tiling]{--accent:#90aba0;--wash:#131d19}
.menu[data-material=millwork]{--accent:#b88966;--wash:#201912}
.menu[data-material=paint]{--accent:#91a3bb;--wash:#151b24}
.menu button:focus-visible,.wordmark:focus-visible{outline-color:#dedfce}
.material-detail{background:#101210;color:#eeeee8;border-color:#42473c}
.material-detail::backdrop{background:#000b}
.detail-label,.detail-body{color:#a5aa9a}
.detail-tags span{border-color:#42473c}
.menu.revealing{animation:dark-gallery-in .9s both}
@keyframes dark-gallery-in{from{opacity:0}to{opacity:1}}
.contact-menu{position:absolute;right:6%;bottom:100px;background:none;border:0;border-bottom:1px solid #62665c;padding:9px 0;font:15px Georgia,serif}
.contact-email{color:#eeeee8;text-decoration:none;border-bottom:1px solid #62665c;padding-bottom:8px;font-size:clamp(16px,4vw,24px)}
.contact-email:hover{color:#b4aa98}
@media(max-width:700px){.contact-menu{top:77px;right:8%;bottom:auto;font-size:12px;padding:4px 0}}