*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f4f3ef;color:#111;font-family:Arial,'Helvetica Neue',sans-serif;transition:color .3s}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}header{position:fixed;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:34px 4vw;z-index:5;pointer-events:none}header>*{pointer-events:auto}header a{font-size:18px;font-weight:700;line-height:1.05;letter-spacing:-.5px}.menu{border:0;border-radius:3px;background:#111;color:#fff;padding:13px 18px;font-size:11px;letter-spacing:1px}.menu span{margin-left:22px}.backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.backdrop img{position:absolute;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .45s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}.backdrop img.visible{opacity:1;transform:scale(1)}.backdrop:after{content:'';position:absolute;inset:0;background:#000;opacity:0;transition:opacity .35s}body.preview .backdrop:after{opacity:.12}body.preview{color:white}body.preview .menu{background:white;color:#111}main{padding:150px 4vw 55px}.intro{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start;gap:40px}.intro>p{font-size:11px;line-height:1.6;margin-top:10px}h1{font-size:clamp(44px,6vw,100px);letter-spacing:-.065em;line-height:.96;font-weight:500;margin:0}.note{text-align:right}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8vw;margin-top:115px}.label{height:145px;transition:opacity .3s}.label small{font-size:10px}.label h2{font-size:18px;line-height:1.08;margin:16px 0 23px;font-weight:500;letter-spacing:-.4px}.label p{font-size:10px;line-height:1.3}.card{display:block;padding:0;border:1px solid transparent;border-radius:3px;background:transparent;width:170px;text-align:left;overflow:hidden;transition:opacity .3s,border-color .3s,transform .3s}.card img{display:block;width:100%;height:175px;object-fit:cover}.card span{display:flex;justify-content:space-between;padding:10px 12px;background:#fff;color:#111;font-size:10px;max-height:0;padding-block:0;opacity:0;transition:max-height .25s,padding .25s,opacity .25s}.card.active{border-color:white;transform:translateY(-3px)}.card.active span{max-height:36px;padding-block:10px;opacity:1}body.preview article:not(.active) .label,body.preview article:not(.active) .card{opacity:.18}body.preview .intro{opacity:.3}.intro{transition:opacity .3s}footer{margin:30px 4vw;font-size:10px;display:flex;justify-content:space-between}nav{position:fixed;z-index:6;right:0;top:0;height:100dvh;width:min(340px,88vw);padding:140px 35px 40px;background:#fff;color:#111;box-shadow:-20px 0 80px #0002}nav a{display:block;font-size:32px;margin-bottom:30px}nav button{background:none;border:0;padding:15px 0;margin-top:40px}.card:focus-visible,.menu:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:5px}@media(max-width:650px){header{padding:25px 6vw}main{padding:130px 6vw 20px}.intro{grid-template-columns:1fr 1fr;gap:20px}.intro>p:first-child{grid-column:1/-1}.intro h1{font-size:52px}.grid{gap:55px;grid-template-columns:1fr;margin-top:70px}.grid article{display:grid;grid-template-columns:1fr 150px;gap:20px}.card{width:150px}.card img{height:150px}.label{height:auto}footer{margin:40px 6vw}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}
@media(min-width:651px){.intro{grid-template-columns:1fr 1.4fr 1fr}h1{font-size:clamp(44px,5vw,80px)}main{padding-top:135px}.grid{margin-top:90px}}