@import url(https://use.typekit.net/fyt6bvn.css);@import url(https://use.typekit.net/lon4huw.css);@import url(https://unpkg.com/open-props/open-props.min.css);*,:after,:before{box-sizing:border-box}:root{--color-text:#fff;--color-text-alt:#72747299;--color-link:#ccc;--color-link-hover:#fff;--color-bg:#000;--padding-ver:0.5rem;--padding-hor:0.5rem;--cursor-stroke:#c11;font-size:16px}.demo-2{--color-text-alt:#c1c1c1cc}body{background-color:#000;color:#fff;font-weight:400;margin:0;width:100%}.js .loading:after,.js .loading:before{content:"";position:fixed;z-index:1000}.js .loading:before{background:#000;background:var(--color-bg);height:100%;left:0;top:0;width:100%}.js .loading:after{animation:loaderAnim .7s linear infinite forwards;background:#72747299;background:var(--color-text-alt);height:40px;left:50%;margin:-20px 0 0 -20px;opacity:.5;top:50%;width:40px}@keyframes loaderAnim{to{transform:rotate(1turn)}}a{color:#ccc;color:var(--color-link);cursor:pointer;text-decoration:none}a,a:hover{outline:none}a:hover{color:#fff;color:var(--color-link-hover)}a:focus{background:#d3d3d3;outline:none}a:focus:not(:focus-visible){background:#0000}a:focus-visible{background:#0000;outline:2px solid red}.unbutton{background:none;border:0;color:#fff;color:var(--color-text);cursor:pointer;font:inherit;margin:0;padding:0}.unbutton:focus{outline:none}main{display:grid;height:100vh;padding:0}.oh,main{position:relative}.oh{overflow:hidden}.oh,.oh__inner{display:inline-block}.oh__inner{will-change:transform}.frame{grid-gap:.5rem;display:grid;font-size:.75rem;grid-area:1/1/2/2;grid-template:"title" "prev" "sponsor" "nav"/100%;grid-template-rows:repeat(4,min-content);justify-content:start;justify-items:start;padding:.5rem;padding:var(--padding-hor) var(--padding-ver);padding-top:1.25rem;pointer-events:none;position:relative;text-transform:uppercase;width:100%;z-index:100}.frame a{pointer-events:auto}.frame a:not(.frame__title-back){overflow:hidden;position:relative;white-space:nowrap}.frame a:not(.frame__title-back):before{background:currentColor;content:"";height:1px;position:absolute;top:90%;transform-origin:0;transition:transform .3s;width:100%}.frame a:not(.frame__title-back):hover:before{transform:scaleX(0);transform-origin:100%}.frame__title{display:flex;grid-area:title}.frame__title-main{font-size:.75rem;font-weight:400;margin:0}.frame__title-back{align-items:flex-end;display:flex;position:relative}.frame__title-back span{display:none}.frame__title-back svg{fill:currentColor}.frame__prev{grid-area:prev}.frame__demos{display:flex;flex-wrap:wrap;gap:1.5rem;grid-area:nav;justify-self:stretch}.prime{display:flex;flex-direction:column;grid-area:1/1/2/2;padding:10rem .5rem 0;padding:10rem var(--padding-ver) 0;position:relative;z-index:30}.demo-2 .prime{will-change:clip-path}.content-open .prime{pointer-events:none}.intro{align-content:center;align-items:center;display:inline-flex;flex-wrap:wrap;font-family:articulat-cf,sans-serif;font-size:7.5vw;font-style:normal;font-weight:100;gap:0;grid-column:1/span 2;grid-row:1/span 3;letter-spacing:-.25vw;line-height:1.2}.intro .oh__inner{padding:0 1vw}.intro em.oh__inner{padding:0 2vw}.intro .image-wrap:first-child{padding-left:2vw}.intro em{font-family:miller-banner,serif;font-style:italic;font-weight:300}.intro--close{pointer-events:none}.image-wrap{aspect-ratio:1.75;position:relative;width:11vw}.image-wrap .image{height:100%;width:100%}.image{display:grid;overflow:hidden;place-items:center;position:relative;will-change:transform}.prime .image--bg{height:100%;left:0;position:absolute;top:0;width:100%}.image__inner{background-position:50% 50%;background-size:cover;height:100%;width:100%}.meta__title{display:flex;font-family:miller-banner,serif;font-size:clamp(1rem,5vw,2.25rem);font-style:italic;font-weight:300;justify-content:flex-end;margin:0}.meta__title .oh__inner{padding:0 .25rem}.nav-wrap{align-items:center;border-top:1px solid #72747299;border-top:1px solid var(--color-text-alt);display:grid;grid-template-areas:"logo social" "nav nav";grid-template-columns:1fr 1fr;margin-top:auto;padding:.5rem 0;padding:var(--padding-hor) 0;position:relative;will-change:transform}.demo-2 .nav-wrap{padding-bottom:calc(.5rem + 20px);padding-bottom:calc(var(--padding-hor) + 20px)}.logo{grid-area:logo}.logo__years{font-size:.75rem;line-height:1}.logo__title{font-family:articulat-cf,sans-serif;font-size:3rem;font-weight:100;line-height:1;margin:0}.logo__title,.nav{text-transform:uppercase}.nav{display:flex;flex-wrap:wrap;gap:1rem;grid-area:nav;padding-top:2rem}.nav__item{color:#72747299;color:var(--color-text-alt);display:flex;flex-direction:column;pointer-events:none}.nav__item--active{color:#fff;color:var(--color-text);pointer-events:auto}.social{display:flex;gap:1rem;grid-area:social;justify-self:end}.content{align-content:space-between;grid-area:1/1/2/2;grid-template-columns:100%;grid-template-rows:repeat(5,min-content);height:100%;justify-items:center;padding:.5rem}.content,.content__item{display:grid;position:relative}.content__item{grid-column-gap:4vw;align-items:center;grid-template-columns:1fr 215px;grid-template-rows:130px;justify-items:end;width:100%;z-index:20}.content__item:last-child{z-index:1}.content__item .image{grid-column:2}.content .image{height:100%;width:215px}.title-wrap{display:grid;grid-template-areas:"back ..." "number ..." "... title";grid-template-columns:auto auto;grid-template-rows:auto auto;opacity:0}.content__item--current .title-wrap{opacity:1}.title-wrap .oh__inner{transform:translateY(100%)}.back{stroke:#ccc;stroke:var(--color-link);fill:none;cursor:pointer;grid-area:back}.back svg{pointer-events:none}.content .back{opacity:0}.number{font-size:.65rem;grid-area:number;justify-self:end}.title{font-family:miller-banner,serif;font-size:4vw;font-style:italic;font-weight:300;grid-area:title;margin:0;text-transform:lowercase;white-space:nowrap}.title .oh__inner{padding:0 .5vw}.grid{grid-gap:1rem;align-content:center;grid-area:1/1/-1/-1;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);margin:auto;max-height:100vh;max-width:1100px;padding:.5rem;padding:var(--padding-ver) var(--padding-hor)}.grid,.grid__item{display:grid;width:100%}.grid__item{aspect-ratio:145/88;max-width:145px;overflow:hidden;place-items:center;position:relative;will-change:transform}.grid__item:first-child{grid-area:2/1}.grid__item:nth-child(2){grid-area:3/1}.grid__item:nth-child(3){grid-area:4/2}.grid__item:nth-child(4){grid-area:3/3}.grid__item:nth-child(5){grid-area:7/3}.grid__item:nth-child(6){grid-area:5/3}.grid__item:nth-child(7){grid-area:5/4}.grid__item:nth-child(8){grid-area:6/4}.grid__item:nth-child(9){grid-area:1/5}.grid__item:nth-child(10){grid-area:3/5}.grid__item:nth-child(11){grid-area:4/5}.grid__item:nth-child(12){grid-area:2/6}.grid__item:nth-child(13){grid-area:5/6}.grid__item:nth-child(14){grid-area:6/7}.grid__item .image{height:100%;width:100%}.view{stroke:#fff;align-items:center;aspect-ratio:1;border:1px solid #fff;border-radius:50%;cursor:pointer;display:flex;flex-direction:column;justify-content:center;text-align:left;text-align:center;width:14rem}.view__text{text-transform:uppercase}.view svg{margin-top:.5rem;transform:scale(-1)}.cursor{display:none}@media screen and (min-width:53em){:root{--padding-ver:2.5rem;--padding-hor:1rem}body{height:100%;overflow:hidden}.frame{grid-gap:2rem;align-content:space-between;grid-area:1/1/-1/-1;grid-template-areas:"title prev nav sponsor";grid-template-columns:auto auto 1fr auto;grid-template-rows:auto}.content__item{grid-template-columns:1fr 215px 1fr}.title-wrap{opacity:1}.frame__demos{justify-self:end;padding-right:5vw}.prime{padding-top:6rem}.nav-wrap{grid-template-areas:"logo nav ... social";grid-template-columns:20% 1fr 10% 10%}.nav{flex-wrap:wrap;gap:3vw;justify-content:center;padding:0}.nav__item:after{content:"...";display:block;font-size:1.15rem;font-weight:400;line-height:.9;text-align:center}}@media (any-pointer:fine){.cursor{display:block;left:0;pointer-events:none;position:fixed;top:0;z-index:10000}.cursor__inner{fill:none;stroke:#c11;stroke:var(--cursor-stroke);stroke-width:1.3px}.no-js .cursor{display:none}}main{overflow:hidden}body{--color-text:#fff;--color-text-menu:#000;--color-text-frame:#817f7f;--color-bg:#0c0c0c;--color-bg-menu:#ee8233;--color-link:#fff;--color-link-hover:#fff;--color-link-menu:#fff;--color-link-social:#ca5d2b;--border-radius:2rem;--menu-padding:1rem;--color-text-title:#ee8233;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-bg);color:var(--color-text);font-family:acumin-pro,sans-serif}.isOpen{opacity:0!important;transition:.6s}.isClosed{opacity:1!important;transition:.6s}.cover-wrap{pointer-events:none;z-index:100}.cover,.cover-wrap{display:grid;grid-area:1/1/2/2}.cover{overflow:hidden;transform:translateY(-100%)}.cover__inner{background-position:50% 50%;background-size:cover;transform:translateY(100%)}.cover,.cover-wrap,.cover__inner{will-change:transform}.menu{bottom:1rem;color:var(--color-text-menu);display:grid;grid-template-areas:"top""content";grid-template-rows:3rem 1fr;left:1rem;opacity:1;pointer-events:none;position:absolute;right:1rem;top:1rem;z-index:100}.menu--open,.menu__top{pointer-events:auto}.menu__top{align-items:center;border-radius:var(--border-radius);display:grid;grid-area:top;grid-template-areas:"title nav search";grid-template-columns:auto 1fr auto;justify-content:space-between;padding:0 var(--menu-padding);z-index:100}.menu_is_open{background:var(--color-bg-menu);transition-duration:.6s}.menu_is_closed{background:none;transition-duration:.6s}.menu__content-wrap{grid-area:content;margin-top:-1.35rem;overflow:hidden;position:relative}.menu__content{background:var(--color-bg-menu);border-radius:0 0 var(--border-radius) var(--border-radius);display:grid;grid-template-areas:"links links back" "tagline tagline tagline";grid-template-columns:auto 1fr auto;grid-template-rows:1fr auto;height:100%;justify-content:space-between;opacity:0;overflow:hidden;padding:0 var(--menu-padding);padding-bottom:1rem;transform:translateY(-100%);will-change:transform}.menu__back{align-self:start;grid-area:back;height:90px;margin-top:calc(5.5vh + 2rem);position:relative}.menu__back svg{fill:#000;display:block;height:100%;max-height:201px;transition:transform .3s}.menu__back:focus svg,.menu__back:hover svg{transform:translateY(-10px)}.menu__title{align-self:center;font-size:1.65rem;grid-area:title;justify-self:start;line-height:.5;margin:.15rem 0 0;text-transform:uppercase}.menu__tagline,.menu__title{font-family:kudryashev-d-excontrast-sans,sans-serif;font-weight:300;position:relative}.menu__tagline{align-self:end;font-size:6vw;grid-area:tagline;line-height:.8;margin:0;will-change:transform}.menu__nav-top{grid-area:nav;justify-self:center;overflow:hidden}.menu__nav-top a{margin:0 1rem}.menu__nav-content{align-self:start;display:flex;flex-wrap:wrap;grid-area:links;margin-top:5.5vh}.column{align-items:flex-start;display:flex;flex-direction:column;margin:0 1rem;min-width:15ch}.column__title{margin:1.5rem 0 .5rem}.menu__side{align-self:center;grid-area:search;justify-self:end;position:relative}.menu__social{align-items:flex-end;display:none;flex-direction:column;grid-area:social;justify-content:flex-end;position:relative}.menu__social-link{color:var(--color-link-social)}.menu__social-author,.menu__social-link:focus,.menu__social-link:hover{color:var(--color-link-menu)}.menu__social-author{font-family:kudryashev-d-excontrast-sans,sans-serif;font-size:2.5vw;font-weight:300;margin-top:2rem;will-change:transform}.menu__social-author:focus,.menu__social-author:hover{color:var(--color-link-social)}.search{white-space:nowrap}.search svg{margin-left:1rem;width:13px}.line-link{cursor:pointer;display:inline-block;font-size:.75rem;font-weight:400;overflow:hidden;position:relative;text-transform:uppercase;white-space:nowrap}.line-link,.line-link:focus,.line-link:hover{color:var(--color-link-menu)}.line-link:before{background:currentColor;content:"";height:1px;position:absolute;top:92%;transform:scaleX(0);transform-origin:0 50%;transition:transform .3s;width:100%}.line-link:hover:before{transform:scaleX(1);transform-origin:100% 50%}@media screen and (min-width:55.5em){body{--menu-padding:2rem}.menu{bottom:1rem;left:1.5rem;right:1.5rem;top:.5rem}.menu__top{grid-template-areas:"... nav ...";grid-template-columns:auto minmax(200px,417px) auto}.menu__content{grid-template-areas:"... ... links back ..." "tagline tagline social social social";grid-template-columns:5rem 10% minmax(200px,417px) 10% 5rem;grid-template-rows:1fr 10vh}.menu__tagline{font-size:17.5vw;font-size:clamp(1.5rem,17.5vh,8rem)}.menu__back{height:200px;margin-top:calc(5.5vh + 1.5rem)}.menu__social{display:flex}}.tiles__line{perspective:100vmin}.effect_img{height:100%;object-fit:cover;translate:0 0;width:100%}.tiles__line-img:not(:hover) img{transition:translate .2s}.tiles__line-img:hover img{translate:calc((var(--ratio-x) - .5)*20%) calc((var(--ratio-y) - .5)*20%)}.tiles__line-img{aspect-ratio:3/4;overflow:hidden;touch-action:none;transform-style:preserve-3d}.tiles__line-img:hover{transform:rotateX(calc((var(--ratio-y) - .5)*50deg)) rotateY(calc((var(--ratio-x) - .5)*-40deg))!important}.tiles__line-img:after{background:radial-gradient(circle at calc(var(--ratio-x)*100%) calc(var(--ratio-y)*100%),#ffffff80,#0000 50%);background-blend-mode:soft-light;background-repeat:no-repeat;content:"";inset:0;position:absolute;z-index:2}.tiles__line-img:before{background:url(https://assets.codepen.io/605876/code-icon-bg.svg) 0 0/18% 18%,linear-gradient(115deg,#0000 20%,var(--green-8) 30%,#0000 48% 52%,var(--indigo-8) 70%,#0000) 80% 80% /300% 300%;background-blend-mode:overlay;content:"";filter:brightness(2) contrast(1);inset:0;mix-blend-mode:color-dodge;opacity:.2;position:absolute;transition:opacity .2s;z-index:2}.tiles__line-img:hover:before{background-position:calc(var(--ratio-x)*10%) calc(var(--ratio-y)*10%),calc(80% + var(--ratio-x)*-50%) calc(80% + var(--ratio-y)*-50%);opacity:1}.container{margin:0 auto;padding:20px;text-align:center}.p0_25{padding:.25rem}.loading{clip-path:inset(0);filter:blur(10px)}.loaded{filter:blur(0);transition:filter .5s linear}
/*# sourceMappingURL=main.b86b1a2d.css.map*/