*,:after,:before{box-sizing:border-box}:root{font-size:18px}body,html,main{height:100%;width:100%;position:relative}

body{margin:0;
--color-text:#fff;
--color-text-alt:#fff;
--color-title:#fff;
--color-bg:#dcdcdc;
--color-link:#000;
--color-link-hover:#000;

color:var(
--color-text);
background-color:
var(--color-bg);
--cursor-stroke:#e3154d;
--cursor-fill:none;
--cursor-stroke-width:1px;
--cursor-text:#000;
font-family:tenon,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale}a{text-decoration:underline;
color:var(--color-link);
outline:none}a:
focus,a:hover{text-decoration:none;color:
var(--color-link-hover);
outline:none}.unbutton{background:none;border:0;padding:0;margin:0;
font:inherit;cursor:pointer}

.unbutton:focus{outline:none}.js .loading:after,.js .loading:before{content:"";position:fixed;z-index:1000}.js .loading:before{top:0;left:0;width:100%;height:100%;

background:var(--color-bg)}
.js 
.loading:
after{top:50%;
left:50%;
width:60px;
height:60px;
margin:-30px 0 0 -30px;border-radius:50%;
opacity:.4;
background:var(--color-link);
animation:loaderAnim 

.7s linear infinite alternate forwards}
@keyframes loaderAnim{to{opacity:1;transform:scale3d(.5,.5,1)}}
.message{z-index:100;background:var(--color-text);color:var(--color-bg);padding:.5rem;font-size:.75rem;position:relative}.no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.frame{padding:1rem 5vw;position:relative;z-index:1000}.frame__title{font-size:1rem;margin:0 0 1rem;font-weight:400}.frame__links{display:inline}.frame__demos a:not(:last-child),.frame__links a:not(:last-child){margin-right:1rem}.frame__demos{margin:1rem 0}.frame__demo--current,.frame__demo--current:hover{color:var(--color-text);text-decoration:none}.content{display:flex;flex-direction:column;width:100vw;height:300px;justify-content:center;position:relative;align-items:center}

.grid{position:absolute;
width:120%;
height:120%;
top:-10%;
left:-10%;
display:grid;grid-template-columns:repeat(50,2%);
grid-template-rows:repeat(50,2%);
perspective:1000px}.grid--inactive{pointer-events:none}

.grid__item{grid-area:var(--grid-row)/var(--grid-column)/span 12/span 5}
.grid__item,.grid__item-img{position:relative;will-change:transform}
.grid__item-img{width:100%;height:100%;background-size:cover;background-position:50% 50%;border-radius:10px}
.char{will-change:transform}
.pos-1{--grid-row:10;--grid-column:1}
.pos-2{--grid-row:1;--grid-column:18}
.pos-3{--grid-row:1;--grid-column:29}
.pos-4{--grid-row:15;--grid-column:10}
.pos-5{--grid-row:17;--grid-column:25}
.pos-6{--grid-row:20;--grid-column:43}
.pos-7{--grid-row:35;--grid-column:5}
.pos-8{--grid-row:30;--grid-column:17}
.pos-9{--grid-row:28;--grid-column:34}
.pos-10{--grid-row:35;--grid-column:42}
.pos-11{--grid-row:1;--grid-column:44}
.pos-12{--grid-row:32;--grid-column:20}
.pos-13{--grid-row:22;--grid-column:2}
.pos-14{--grid-row:7;--grid-column:38}
.pos-15{--grid-row:6;--grid-column:4}
.pos-16{--grid-row:24;--grid-column:42}

.content__title{font-size:12vw;margin:0;line-height:1.2;position:relative;color:var(--color-title);text-transform:uppercase;pointer-events:none}.content__title-line{display:block;position:relative;overflow:hidden;line-height:1}.content__title-line--1{margin-left:-5vw}.content__title-line--2{margin-right:-5vw}

.preview{position:relative;pointer-events:none}.js 
.preview{width:100%;
height:100%;
position:absolute;
top:0;
left:0}
.preview__item{position:relative;
margin:0 auto;padding:0 5vw;
display:grid;
grid-template-rows:auto auto auto;
grid-template-columns:50% 50%;
grid-template-areas:"preview-back preview-back" "preview-img preview-title" "preview-content preview-content"}
.js 
.preview__item{perspective:1000px}
.js 
.preview__item:not(
.preview__item--open){position:absolute;
overflow:hidden;
height:0;
opacity:0}
.js 
.preview__item--open{pointer-events:auto}


.preview__item-back{
color: #FFFFFF;
grid-area:preview-back;
justify-self:start;
font-size: 1.2rem;
font-weight:500;
padding-left:90px;
margin-bottom:1rem;
}



.preview__item-title{
grid-area:preview-title;
font-family:dystopian,sans-serif;
font-size:12vw;
font-size:clamp(1.5rem,12vw,20vh);
margin:0;grid-column-start:1;
align-self:center;
padding-left:1rem;
position:relative;
overflow:hidden;
pointer-events:none}

.preview__item-imgwrap{
width:100px;
height:150px;
border-radius:10px;
overflow:hidden;
grid-area:preview-img;
transform-origin:50% 100%}

.preview__item-img{
width:50%;
height:50%;
background-size:cover;
background-position:50% 50%}


.preview__item-content{grid-area:preview-content;max-width:calc(1100px - 10vh);min-height:440px;line-height:1.3}

.preview__item-meta{color:var(--color-text-alt);text-transform:uppercase;font-size:.857rem;padding:1rem 0 0}
.preview__item-meta span{display:block}
.preview__item-info{display:block;color:var(--color-link);margin:1rem 0}
.preview__item-button{color:#fff;border:0;border-radius:2rem;text-transform:uppercase;font:inherit;font-size:.875rem;font-weight:500;background:#000;padding:1rem 2rem;display:inline-block;cursor:pointer;margin-bottom:1rem}
.preview__item-button:active,
.preview__item-button:focus,
.preview__item-button:hover{outline:none;background:var(--color-link)}.cursor{display:none}@media screen and (min-width:53em){body,html,main{overflow:hidden}.message{display:none}.frame{position:fixed;z-index:100;top:0;left:0;display:grid;align-content:space-between;width:100%;max-width:none;height:100%;padding:1rem 1.5rem;grid-gap:6vw;pointer-events:none;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto auto;grid-template-areas:"title links ..." "... ... ..." "... ... ..."}.frame__title-wrap{grid-area:title;display:flex}.frame__title{margin:0}.frame__tagline{position:relative;margin:0 0 0 1rem;padding:0 0 0 1rem;opacity:.5}.frame__demos{margin:0;grid-area:demos;justify-self:end}.frame__links{grid-area:links;padding:0}.frame a{pointer-events:auto}.content{height:100%}
.preview__item{height:100%;width:80vw;grid-template-columns:47% 53%;grid-template-rows:minmax(max(5rem,18vh),1fr) auto auto 1fr;grid-template-areas:"... ..." "preview-back ..." "preview-title preview-title" "preview-img preview-content"}


.preview__item-title{
justify-self:center;
padding:0}

.preview__item-meta{padding:1rem 0}
.preview__item-info{margin:1rem 0 3rem}

.preview__item-imgwrap{width:100%;
height:100%;
grid-row-start:3;
border-radius:10px 10px 0 0}

.preview__item-content{padding:0 0 0 4rem}}@media (any-pointer:fine){
.cursor{display:block;width:100%;height:100%;z-index:9999}.cursor,.cursor__svg{position:absolute;top:0;left:0;pointer-events:none}.cursor__svg-circle{fill:var(--cursor-fill);stroke:var(--cursor-stroke);stroke-width:var(--cursor-stroke-width)}.cursor__text{position:absolute;top:1.875rem;left:80px;font-size:.857rem;text-transform:uppercase;font-weight:500;fill:var(--cursor-text)}}.splitting .char,.splitting .word{display:inline-block}.splitting .char{position:relative}.splitting .char:after,.splitting .char:before{content:attr(data-char);position:absolute;top:0;left:0;visibility:hidden;transition:inherit;user-select:none}.splitting{--word-center:calc(var(--word-total)/2 - 0.5);--char-center:calc(var(--char-total)/2 - 0.5);--line-center:calc(var(--line-total)/2 - 0.5)}.splitting .word{--word-percent:calc(var(--word-index)/var(--word-total));--line-percent:calc(var(--line-index)/var(--line-total))}.splitting .char{--char-percent:calc(var(--char-index)/var(--char-total));--char-offset:calc(var(--char-index) - var(--char-center));--distance:calc(var(--char-offset)*var(--char-offset)/var(--char-center));--distance-sine:calc(var(--char-offset)/var(--char-center));--distance-percent:calc(var(--distance)/var(--char-center))}.splitting.cells img{width:100%;display:block}@supports (display:grid){.splitting.cells{position:relative;overflow:hidden;background-size:cover;visibility:hidden}.splitting .cell-grid{background:inherit;position:absolute;top:0;left:0;width:100%;height:100%;display:grid;grid-template:repeat(var(--row-total),1fr)/repeat(var(--col-total),1fr)}.splitting .cell{background:inherit;position:relative;overflow:hidden}.splitting .cell-inner{background:inherit;position:absolute;visibility:visible;width:calc(100%*var(--col-total));height:calc(100%*var(--row-total));left:calc(-100%*var(--col-index));top:calc(-100%*var(--row-index))}.splitting .cell{--center-x:calc(var(--col-total)/2 - 0.5);--center-y:calc(var(--row-total)/2 - 0.5);--offset-x:calc(var(--col-index) - var(--center-x));--offset-y:calc(var(--row-index) - var(--center-y));--distance-x:calc(var(--offset-x)*var(--offset-x)/var(--center-x));--distance-y:calc(var(--offset-y)*var(--offset-y)/var(--center-y))}}