*,*:before,*:after{
    box-sizing:border-box;
}
html,body{
    margin:0;
    height:100%;
}
a{
    text-decoration:inherit;
    color:inherit;
}
 p,h1,h2,h3,h4,h5,h6{
    margin:0;
    font-size:inherit;
    font-weight:inherit;
    color:#231F20;
}
ul,ol{
    margin:0;
    padding:0;
    list-style-type:none;
}
 img,video{
    display:inline-block;
    border:0;
    max-width:100%;
    height:auto;
    vertical-align:middle;
}
figure{
    margin:0;
}
 @font-face {
     font-family: "Aeonik";
     src: url('Aeonik-Regular.woff2') format('woff2'),
          url('Aeonik-Regular.woff') format('woff');
     font-weight: normal;
    font-style: normal;
    font-display: swap;
}
 @font-face {
     font-family: "Reckless Neue";
     src: url('RecklessNeue-Regular.woff2') format('woff2'), 
          url('RecklessNeue-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
 :root {
     --font-size-base: 16px;
     --padding: 20px;
}
 @media all and (min-width: 1500px){
     :root {
         --font-size-base: calc( 16px + 0.05vw);
         --padding: calc( 20px + 0.05vw);
    }
}
 ::selection {
     background-color: transparent;
}
 html {
     -webkit-text-size-adjust : 100%;
     font-size: var(--font-size-base);
     -webkit-font-smoothing: subpixel-antialiased;
     font-smoothing: subpixel-antialiased;
}


body.loading {
    overflow: hidden;
    
}


 body {
     perspective-origin: 50% 0%;
     height: 100%;
     height: auto;
    overflow: auto;
    perspective: none;
}
 a {
     text-decoration: underline;
     text-decoration-color: rgba(0,0,0,0.1);
     text-underline-offset: 0.1em;
}
 body.ready {
}
 body.done {
    /*background: white;
    */
     overflow: auto;
     perspective: none;
}
 body.done .content-container, body.done .content {
    /*overflow: initial;
    */
     position: relative;
     overflow: visible;
}
/*body.done .content {
     position: relative;
}
 body.done .content-container{
     overflow: visible;
}
*/
 body.done .content-container.ready{
     transition: none;
     padding-top: 280vh;
     padding-top: 185vh;
     padding-top: 0;
     height: auto;
}
 body.done main {
    /*position: sticky;
    top: var(--padding);
    */
}
 body.done footer .logo.sticky {
     position: sticky;
     top: calc(100vh - 4vw);
}
 .frame {
     font-size: var(--font-size-base);
     line-height: 1.2;
    /*overflow: hidden;
    */
    /*background: white;
    */
    /*position: absolute;
    */
     font-family: "Aeonik";
     letter-spacing: -0.015em;
     word-spacing: -0.03em;
     position: relative;
}
 footer, main {
     width: 100%;
     height: 100%;
     display: flex;
}
 main {
     padding: 0 calc(var(--padding) / 2);
}
 body.done .main-container {
    overflow: hidden;
     height: calc(100vh - 4.35rem);
     cursor: e-resize;
}
 body.done main {
     position: sticky;
     height: 100%;
     height: max(45vw,70vh);
     top: var(--padding);
}
 @media all and (orientation: portrait) {
     body.done .main-container {
         height: 107vw;
        /*overflow: visible;
        */
    }
     body.done main {
         height: 88vw;
        /*position: sticky;
         top: var(--padding);
        */
        /*overflow: hidden;
        */
    }
}
 footer {
     align-items: flex-end;
     padding: var(--padding);
}

 body.done footer {
     align-content: space-between;
     flex-wrap: wrap;
     max-height: 150vh;
     position: relative;
     min-height:100vh;
}
 @media all and (orientation: portrait){
     body.done footer {
        /*min-height: 150vh;
        */
        /*max-height: 130vh;
        */
    }
}
 .footer-grid {
     grid-template-columns: repeat(24,1fr);
     grid-column-gap: var(--padding);
     grid-row-gap: calc(var(--padding) * 2);
    /*display: none;
    */
     position: absolute;
     top: var(--padding);
     top: 110vh;
     top: calc(100vh - 4.5rem + var(--padding) * 2);
    /*opacity: 0;
    */
     margin-top: 0;
     display: grid;
    /*transition: margin-top 0.35s, opacity 0.35s;
    */
    /*transition-delay: ;
    */
     width: 100%;
     left: 0;
     padding: 0 var(--padding);
}
 .footer-grid.hide {
    /*margin-top: 12rem;
    */
}
 @media all and (orientation: portrait ){
     .footer-grid {
         top: calc(107vw + var(--padding) * 2);
    }
}
 body.done .footer-grid {
     opacity: 1;
     margin-top: 0;
     top: var(--padding);
}
 .footer-grid div p::selection, .footer-grid div a::selection, .footer-grid div h1::selection, .footer-grid div h2::selection {
     background-color: rgba(0,0,0,0.99);
     color: white;
}
 .footer-grid div {
     padding-right: calc(var(--padding) * 2);
     margin-top: -0.25rem;
     max-width: 54ch;
}
 .footer-grid div:nth-child(1){
     grid-column-start: span 9;
}
 .footer-grid div:nth-child(n+2){
     grid-column-start: span 5;
}
 @media all and (orientation: portrait){
     .footer-grid div:nth-child(4) {
         grid-column-start: span 9;
         order: 1;
         position: sticky;
        top: var(--padding);
    }
     .footer-grid div:nth-child(1) {
         grid-column-start: span 15;
         order: 2;
    }
     .footer-grid div:nth-child(3) {
         grid-column-start: span 8;
         order: 4;
         grid-column-end: 25;
         opacity: 0;
    }
     .footer-grid div:nth-child(2) {
         grid-column-start: span 7;
         order: 4;
         grid-column-end: 17;
         opacity: 0;
    }
     body.done .footer-grid div:nth-child(2), body.done .footer-grid div:nth-child(3) {
         opacity: 1;
    }
     .footer-grid div {
         padding-right: var(--padding);
    }
}
 body.done .footer-grid {
     display: grid;
}
 .logo {
     width: 100%;
     position: absolute;
     bottom: 5px;
     left: 0;
     padding: var(--padding);
}
 .logo.white {
     z-index: -1;
     transition: opacity 0.25s ease-in;
     padding: var(--padding);
     position: absolute;
     bottom: 0;
     left: 0;
     display: none;
     width: 100%;
}
 body.loaded .logo.white.abs {
     display: block;
}
 .logo.white.fixed {
     position: fixed;
     display: block;
     top: 50vh;
     left: 50%;
     width: 19.795vw;
    height: 2.3vw;
     padding: 0;
     transform: translate(-50%,-100%);
     display: none;
}
 body.loaded .logo.white.fixed {
     display: none;
}
 .logo.white.ready {
     transform: translate(-50%,200%);
}
 @media all and (orientation: portrait) {
     .logo.white.fixed {
         top: 50svh;
         width: 47.5vw;
        height: 6.3vw;
    }
}
/*.logo.white img {
     position: absolute;
}
*/
 body.done .logo.white {
     display: none;
}
 body.done .logo.sticky {
     position: sticky;
     top: calc(100vh - 4vw);
     bottom: unset;
     padding: 0;
     margin-top: 29rem;
}
 @media (orientation: portrait) {
     body.done .logo.sticky {
         margin-top: 81vh;
    }

}
 .logo.placeholder {
     position: absolute;
     opacity: 0;
     visibility: hidden;
}
 body.done .logo.placeholder {
     position: relative;
     padding: 0;
}
 .frame {
     overflow: visible;
     opacity: 0;
   -webkit-animation:  myAnim 2s cubic-bezier(0.87, 0, 0.13, 1)  1 normal forwards;
	        animation: myAnim 2s cubic-bezier(0.87, 0, 0.13, 1)  1 normal forwards;
}
 .frame.ready {
  overflow: hidden;
}

@keyframes myAnim {
	0% {
		opacity: 0;
		transform: translateY(400px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

#preloader {
   transition: transform 1s ease-out;
   transform: translateY(0);
    opacity: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}


 .content-container {
    /*clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    */
     padding-top: 0;
     transition: padding-top .75s cubic-bezier(0.8,0,1,0.2);
     background: white;
     height: 0;
     overflow: hidden;
    transition: none;
    padding-top: 280vh;
    padding-top: 185vh;
    padding-top: 0;
    height: auto;
}
 @media all and (orientation: portrait){
     body.done .content-container {
         border-radius: calc(var(--padding) / 2);
    }
}
 .content-container.ready {
    /*padding-top: 111vw;
    */
     padding-top: 190vh;
}
 .content {
     position: absolute;
     display: flex;
     flex-direction: column;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     overflow: hidden;
     gap: 20px;
}
 main {
     transition: grid-template-columns 0.3s ease-in-out;
     display: grid;
     grid-template-columns: 9fr 15fr 0fr 0fr 0fr 0fr 0fr 0fr;
     gap: 0;
     height: 100%;
    /*overflow-x: hidden;
    */
}
 @media all and (orientation: portrait){
     main {
         height: 80vh;
    }
}
/* main:has(.grid-item.interactive:nth-child(1):hover){
     grid-template-columns: 15fr 9fr 0fr;
}
 main:has(.grid-item.interactive:nth-child(2):hover){
     grid-template-columns: 9fr 15fr 0fr;
}
 */
/* main:has(.grid-item.zoom:nth-child(1)){
     grid-template-columns: 24fr 0fr 0fr;
}
 main:has(.grid-item.zoom:nth-child(2)){
     grid-template-columns: 0fr 24fr 0fr;
}
*/
 .grid-item {
     position: relative;
     width: 100%;
     height: 100%;
     transition: opacity 0.1s, visibility 0.1s;
}
 figure {
    width: 100%;
     padding: 0 calc(var(--padding) / 2);
     background: white;
}
 .hide {
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.15s, visibility 0.15s;
}
 .grid-item.hide {
     overflow: hidden;
}
 img, video {
     max-width: none;
     width: 100%;
}
 figure.rounded .media-container img, figure.rounded .media-container video {
     border-radius: calc(var(--padding) / 2);
}
 figure .media-container img, figure .media-container video {
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;
     transition: opacity 0.5s;
     background: white;
         max-height: 820px;
}
 body.done figure .media-container {
     background-color: transparent !important;
}
 .no-abs figure .media-container {
     padding-bottom: 0 !important;
     height: auto;
     background-color: transparent !important;
}
 @media (orientation: portrait) {
    
    .no-abs figure .media-container {
     padding-bottom: 2px !important;
     }
}
 .no-abs figure .media-container img, .no-abs figure .media-container video {
     position: relative;
}
 figure img, figure video {
     object-fit: fill;
     max-height: none;
     object-position: top left;
}
 .grid-item.ready figure img, .grid-item.ready figure video {
     opacity: 1;
}
 figure .media-container {
     position: relative;
     width: 100%;
     height: 0;
     padding-bottom: 100%;
}
 figure.rounded .media-container {
     border-radius: calc(var(--padding) / 2);
     overflow: hidden;
}
 figcaption {
     padding-top: calc(var(--padding) * 0.375);
     margin-top: -0.25rem;
     transition: none;
     position: absolute;;
     font-size: 0.8em;
     letter-spacing: -0.01em;
     font-family: "Aeonik";
     color:#231F20;
}
figcaption p {
    font-family: "Reckless Neue";
}
 .hide.grid-item figcaption {
     opacity: 0;
}
 span.description {
     opacity: 0.3;
}
 @media all and (orientation: portrait){
     :root {
         --padding: 10px;
         --font-size-base: 12px;
    }
     .content-container.ready {
         padding-top: 100svh;
         padding-top: 110vh;
         padding-top: 116svh;
    }
     span.description {
         display: none;
    }
     
     body.done .content-container.ready {
        /*padding-top: 220vh;
        */
    }
}
 @media all and (orientation: portrait) and (max-width: 374px) {
     :root {
         --padding: 2.7vw;
         --font-size-base: 3.1vw;
    }
}
 @media (orientation: portrait) and (min-width: 500px) {
     :root {
         --padding: 12px;
         --font-size-base: 15px;
    }
}
 .hide-desktop {
     display: none;
}
 @media all and (orientation: portrait){
     .hide-mobile {
         display: none;
    }
     .hide-desktop {
         display: block;
    }
     main.hide-desktop {
         display: grid;
    }
}
 .footer-link {
     position: absolute;
     width: 100%;
     height: 1.5rem;
     top: 0;
     cursor: s-resize;
}
 @media all and (orientation: portrait){
     .footer-link {
         display: none;
    }
}
 p + p:before, h1 + p:before, h2 + p:before {
     content: '\a';
     display: block;
     white-space: pre;
}