*,*:after,*:before{box-sizing:border-box}:root{font-size:16px}body{margin:0;--color-text:#dc6e25;--color-bg:#d6ae7b;--color-link:#000;--color-link-hover:#dc6e25;--aspect-ratio:1/1.5;--imgwidthmax:500px;--size-title:10rem;--font-weight-title:400;color:var(--color-text);background:#fc4a1a;background:-webkit-linear-gradient(to left,#f7b733,#fc4a1a);background:linear-gradient(to left,#f7b733,#fc4a1a);font-family:turquoise,serif;font-size:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.demo-2{--blendmode-title:difference;--size-title:12vw}a:hover,a:focus{color:var(--color-link-hover);outline:none}.page{display:grid;padding:7vw;max-width:1400px;margin:0 auto;grid-template-columns:100%;grid-template-areas:'header' 'meta' 'grid';will-change:transform}.page__title{grid-area:header;margin:0 0 1rem;font-size:inherit;font-weight:400}.credits{text-align:center;text-decoration:none}.credits--fixed{position:fixed;bottom:5vw;margin:0;left:5vw;width:90vw;text-align:right}.credits--fixed:before{content:'';background:currentColor;position:absolute;left:0;bottom:0;height:5rem;width:1px}.meta{grid-area:meta}.meta--center{justify-self:center;padding-top:20vh}.meta__links{display:flex;flex-wrap:wrap;line-height:1.5}.meta__links--column{flex-direction:column}.meta__links a{margin:0 1.5rem 0 0}.meta__demos{margin-top:1rem}.meta__demo{display:inline-block;margin-right:.75rem}.meta__demo--current{color:var(--color-link-hover);pointer-events:none}.content{grid-area:grid;margin:25vh 0 30vh}.content--offset{display:grid;grid-template-columns:repeat(2,minmax(100px,1fr));grid-gap:30vh 10vw}.content--full{width:100vw;justify-self:center}.content--padded{padding:0 10vw}.content__item{--imgwidth:calc(var(--imgwidthmax)*var(--aspect-ratio));width:var(--imgwidth);max-width:100%;position:relative;will-change:transform;margin-bottom:30vh;display:grid;grid-template-columns:50% 50%}.content__item--wide{grid-template-columns:20% 80%}.content__item--wide:nth-child(even){grid-template-columns:80% 20%}.content--center .content__item{margin:0 auto 60vh}.content__item--expand{width:100%;grid-template-columns:minmax(0,var(--imgwidth)) 1fr}.content__item--expand:nth-child(even){grid-template-columns:1fr minmax(0,var(--imgwidth))}.content--alternate .content__item{max-width:90vw}.content--offset .content__item{margin:0 auto 15vh}.content--offset .content__item:nth-child(even){align-self:end;margin-bottom:-20vh}.content--alternate .content__item:nth-child(even){margin-left:auto}.content__item-imgwrap{position:relative;--imgwidth:100%;margin:0 auto;grid-area:1/1/3/3;overflow:hidden;width:var(--imgwidth);padding-bottom:calc(var(--imgwidth)/(var(--aspect-ratio)));will-change:transform}.demo-2 .content__item-imgwrap{outline:1px solid transparent}.content__item--expand .content__item-imgwrap{grid-area:1/1/3/2}.content__item--expand:nth-child(even) .content__item-imgwrap{grid-area:1/2/3/3;justify-self:end}.content__item-img{--overflow:40px;height:calc(100% + (2*var(--overflow)));top:calc(-1*var(--overflow));width:100%;position:absolute;background-size:cover;background-position:50% 0;will-change:transform;opacity:.8}.content__item-img--t1{--overflow:60px}.content__item-img--t2{--overflow:80px}.content__item-img--t3{--overflow:120px}.content__item-number{opacity:.03;font-size:25vw;position:absolute;top:-7vw;right:-10vw;line-height:1}.content__item:nth-child(even) .content__item-number{right:auto;left:-7vw}.content__item-title{position:relative;font-size:var(--size-title);padding:0 3vw;margin:calc(var(--size-title)*-1/2) 0 0 0;align-self:start;line-height:1;font-family:var(--font-title);font-weight:var(--font-weight-title);color:var(--color-title);will-change:transform;mix-blend-mode:var(--blendmode-title)}.content--center .content__item-title{grid-area:1/1/3/3;margin:auto}.content__item-title--layer{padding:0;z-index:10;grid-area:1/1/2/3;width:100%;text-align:center}.content__item-description{grid-area:3/1/3/3;width:70%;position:relative;margin:0;padding:1rem 0 0;color:var(--color-description)}.content--alternate .content__item-title,.content__item--wide:nth-child(even) .content__item-description{grid-area:3/1/4/2;justify-self:start}.content--alternate .content__item:nth-child(even) .content__item-title,.content__item--wide .content__item-description{grid-area:3/2/4/3;justify-self:end;width:auto}.content__item--expand .content__item-description{grid-area:1/2/3/3;justify-self:start;align-self:start;padding:0 2rem;width:250px;font-size:.9rem}.content__item--expand:nth-child(even) .content__item-description{grid-area:1/1/3/2;justify-self:end;text-align:right}.content__item-deco{position:absolute;top:2rem;left:10vw;height:30%;width:1px;background:#d79612}.content__item-decobar{width:140%;height:25%;top:20%;left:-20%;position:absolute;background:#dd525a;mix-blend-mode:color-burn}@media screen and (min-width:53em){.page--layout-1{grid-template-columns:30% 70%;grid-template-areas:'header header' '...  meta' 'grid grid'}.page--layout-2{grid-template-columns:1fr 1fr;grid-template-areas:'header meta' '...  meta' 'grid grid'}}@media screen and (max-width:40em){.content__item--expand .content__item-imgwrap,.content__item--expand:nth-child(even) .content__item-imgwrap{grid-area:1/1/3/3}.content__item--expand .content__item-description,.content__item--expand:nth-child(even) .content__item-description,.content__item--wide .content__item-description,.content__item--wide:nth-child(even) .content__item-description{grid-area:3/1/4/3;padding:1rem 0;width:100%;text-align:left}.content__item--wide .content__item-description{padding:1rem}.content--alternate .content__item-title,.content--alternate .content__item:nth-child(even) .content__item-title{grid-area:1/1/4/2}}