@import url(https://db.onlinewebfonts.com/c/7d349f3b93cd47712cf75443b05965bf?family=Neue+Haas+Unica+W1G+Medium);
bodycopy, bodycopy * {font-size: calc(var(--font-scale)* var(--font-size))}
bodycopy * {border-width: 0}
*{box-sizing: border-box}

/* #preloader-2{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:transparent;
    display: flex;
    align-items: center;
justify-content: center;
z-index: 9999;

transition: opacity 3s ease;
}

#preloader-2 video{
width: 100%;
height: 100%;
object-fit: cover;

} */

element.style {
--font-scale: 1.5
}
body, body * {font-size: calc(var(--font-scale)* var(--font-size))}

body{
border-width:0;
background-color: rgb(238,238,238);
--font-size: 12px;
--font-scale: 1;
--lineHeight-default: 1.65;
font-weight: 500;
color:rgba(0, 0, 0, 0.85);
font-family:'Diatype Medium';
font-style: normal;
line-height: 1.3;
letter-spacing: 0em;
display: block;
font-variation-settings: 'slnt' 0, 'MONO' 0;
margin: 0;
padding: 0;
}

.intro{
    color: rgba(0,0,0,0.85)
}
.page-content{
    text-align: left;
    padding: 10px;
}

Inherited from div#E01.page-
style attribute{
    --pin-padding-top: 0px;
    --pin-padding-bottom: 0px;
}

.three-columns {
    display: grid;
    grid-template-columns: 1.8fr 5fr 5fr;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
}

.col{
    padding: 0;
}

.column-image{
    width: 100%;
    height: auto;
    display: block;
}


.page{
    --split-backdrop-height: calc(var(--veiwport-height)/2);
    --split-content-height: calc(var(--viewport-height)- var(--split-backdrop-height));
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    max-width: 100%;
    width: 100%;
    flex: 0;
    mix-blend-mode: var(--page-mix, normal);
}
::slotted(column-unit[slot="0"]){
    --column-width: 107px;
}

@font-face {
    font-family: 'Diatype Medium';
    src: url('font/ABC\ Diatype\ Medium.woff') format('woff');
}

@font-face {
    font-family: 'Sofia';
    src: url('font/SofiaSansCondensed-Regular.woff') format('woff');
}

a {
  text-decoration: none;
  color: rgba(0,0,0,0.85);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.email-link {
  display: inline-flex;       /* align icon + text */
  align-items: baseline;      /* keep arrow aligned with text baseline */
  gap: 4px;                   /* space between icon and text */
  text-decoration: none;
  color:rgba(0,0,0,0.85);
  /* do NOT set font-size here, inherit it from surrounding text */
}

.email-link .email-icon {
  display: block;             /* remove inline spacing */
  width: 12px;                /* fixed arrow size */
  height: 12px;
  flex-shrink: 0;
}

.digital-link {
  display: inline-flex;       /* align icon + text */
  align-items: center;      /* keep arrow aligned with text baseline */
  gap: 4px;                   /* space between icon and text */
  text-decoration: none;
  color:rgba(0,0,0,0.85);
  /* do NOT set font-size here, inherit it from surrounding text */
}

.digital-link .digital-icon {
  display: block;             /* remove inline spacing */
  width: 36px;                /* fixed arrow size */
  height: 36px;
  flex-shrink: 0;
}

h2{
    /*font-size:calc(var(--font-scale)*var(--font-size));
    --font-size: 36px;*/
    font-size: 40px;
    font-family: "Sofia";
    font-style: normal;
    font-weight: 400;
    margin:0;
    color: rgba(0,0,0,0.85);
    line-height: 1.1;
    letter-spacing: 0;
    font-variation-settings:'wdth' 75, 'slnt' 0;
   }

   h2 a{
    cursor: pointer;
    text-decoration: none;
    align-items: center;
}

/*:root{
    --overlay-open-duration: 0.8s;
    --overlay-open-easing: ease-in-out;
    --overlay-open-transform: translate3d(25.22390625px, 0, 0);
}
*/

.overlay{
    position: fixed;
    inset:0;
    background: rgba(0,0,0,0);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
    z-index:999;
}

.overlay.active {
    /*display:block;*/
    opacity: 1;
    pointer-events: auto;
}


.slide-panel{
    position:fixed;
    background-color: #E3D74E;
    top:0;
    right: 0;
    width: 80%;
    height: 100vh;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 1rem;
    /*var(--overlay-open-duration) var(--overlay-open-easing);*/
    /*transition: right 0.8s ease-in-out;*/
    /* display: flex; */
    flex-direction: row;
    padding: 1rem;
    z-index: 1000;
    overflow-y:auto;
}

.overlay.active .slide-panel{
    transform: translateX(0);
    /*right:0;*/
}

.close-btn{
    position: absolute;
    display: hidden;
    align-self: flex-end;
    background: none;
    border:none;
    cursor: pointer;
}

.panel-content{
    display: contents;
    /*grid-template-columns: 4fr 8fr;
    gap: 1rem;
    flex: 1;*/
}

.bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 9997;
}

.bg.active{
    opacity: 1;
    pointer-events: auto;
    
}

/*
.zoom-figure{
    /* display: inline-block; 
    text-align: left;
    position: relative;
}
*/

.zoomable{
    cursor: zoom-in;
    position: relative;
    transition: transform 0.3s ease, z-index 0s 0.4s;
    /* transition: transform 0.8s ease, top 0.5s ease, left 0.5s ease ;
    position: relative;
    transform-origin: center center; */
    z-index: 1;
    /* display: block; */
}

.zoomable.zoomed{
    cursor:zoom-out;
    position: fixed;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%) scale(var(--zoom-scale));
    /* transform-origin: center center; */
    max-width: none;
    max-height: none;
    /*transform: scale(1.8);*/
    z-index: 10000;
    transition: transform 0.3s, z-index 0s;
    
}

.zoomable.zoomed video{
    width: auto;
    height: auto;
    
}

.morph{
    position: fixed;
    top: 0;left: 0;
    width: calc(100vw - 10px);
    height: 100vh;
    overflow: hidden;
    z-index: -1;
}

/*
@keyframes morph-shape{
    0%{
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    25%{
        clip-path: polygon(5% 0%, 95% 0%, 100% 95%, 0% 100%);
    }

    50%{
        clip-path: polygon(0% 5%, 100% 0%, 95% 100%, 0% 95%);
    }

    75%{
        clip-path: polygon(5% 5%, 95% 0%, 100% 95%, 0% 100%);
    }

    100%{
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}
*/

#preloader {
    position: fixed;
    inset: 0;
    background:white;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /*opacity: 1;*/
    /*transition: opacity 3.5s ease;*/
}

#preloader canvas{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    
}

/*
.preload-img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transition: clip-path 3s ease-in-out, opacity 1.5s ease-in-out;
    opacity: 0;
    transition: opacity 3.5s ease;
}
*/

.preload-img.active{
    opacity: 1;
    animation: morph-shape 3s infinite alternate ease;
}
.preloader-text{
    position: relative;
    font-family: sofia;
    font-size: 36px;
    color: white;
    text-align: center;
    z-index: 10000;
}

.caption{
    font-size: 11px;
    font-family: 'Diatype Medium';
    color: rgba(0,0,0,0.6);
    z-index: 999;
    
}

.audio-player {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 30px;
    width: 100%;
    height: 35px;
    font-family: 'Diatype Medium';
    border: 1.5px solid rgba(0,0,0,0.2);
}

.play-btn {
    color: #222;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-left: -9px;
}

.divider {
    width: 1.5px;
    height: 100%;
    background-color:rgba(0,0,0,0.2);
    margin: 0 12px;
    margin-left: -6px;
}

.audio-caption{
    flex: 1;
    color: rgba(0,0,0,0.6);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.free-container{
    position: relative;
    width: 100%;
    
}

.figure1{
   top: 0;
   left: 0;
}

.figure2{
    top: 243px;
    left: 0;
}

.figure3{
    top: 455px;

}

.figure4{
    top: 270px;
    left: 310px ;
}

.figure5{
    top: 0;
    left: 310px;
}



/*
.col-3 .free-container .img6{
    position: absolute;
    transform: translateY(-60px);
    transform: translateX(0px);
}
*/

.free-container figure {
  position: absolute;
  margin: 0;
  
  text-align: left;
}


.image-stack-container{
    position: relative;
    width: 100%;
    height: auto;
}

.image-stack{
    position: relative;
    width: 100%;
    height: auto;
    /* perspective: 1500px; */
}

/* .image-stack.stacked-img{
filter: brightness(0%);

}

.image-stack.stacked-img:last-child{
  filter: brightness(100%);
} */

.stacked-img{
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    transition: transform 0.8s ease-in-out, opacity 0.8s ease;
    /* transform-origin: top; */
    /* backface-visibility: hidden; */
    /* opacity:1; */
    /* box-shadow: 0 10px 20px rgba(0,0,0,0.2); */

}

.stacked-img.active{
    opacity: 0;
    transform: translateY(50px) rotate(5deg);
    /* transform: rotateX(-160deg) skewX(-20deg) scale(1.05); */
}

/* .stacked-img:nth-child(1){z-index:1; transform:(0,0); left: 30px;top: 20px;}  */
.stacked-img:nth-child(1){z-index:2; transform:(0,0); left: 30px;top: -100px;} 
.stacked-img:nth-child(2){z-index:3; transform:(0,0); left: 110px;top: 65px;} 
.stacked-img:nth-child(3){z-index:4; transform:(0,0); left: 150px;top: -5px;} 
.stacked-img:nth-child(4){z-index:5; transform:(0,0); left: 20px;top: -20px;} 
.stacked-img:nth-child(5){z-index:6; transform:(0,0); left: 50px;top: 30px;} 


.art-caption{
    position: absolute;
    bottom: -420px;
    left: 78%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.2);
    color: #fff;
    padding: 4px 6px;
    /* border-radius: 50px; */
    font-family: 'Diatype Medium';
    font-size: 12px;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 100;
  
}

/* #art-caption{
    white-space: pre-line;
} */

.art-intro{
    position: relative;
    width: 580px;
    top: 80%;
}

.ending{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    animation: ending  linear forwards;
    animation-timeline: view();
    animation-range: entry;
    
}

.ending video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    margin: 0;
    padding: 0;
    display: block;
    z-index: 1;
}

@keyframes ending{
 0%{
    opacity: 0.3; transform: translatey(100px);
 }
 50%{
    opacity: 0,3;
 }

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

.bg-story{
    position: absolute;
    color: white;
    background: rgba(0,0,0,0.2);
    padding: 20px;
    font-size: 14px;
    font-family: 'Diatype Medium';
    top: 30%;
    left: 30%;
    text-align: left;
    width: 45%;
    display: block;
    z-index: 10000;

}

.footer {
  text-align: center;      
  font-size: 10px;        /* slightly smaller */
  color: #666;              /* subtle grey */
  padding: 20px;            /* space inside */
  position: fixed;          /* stays at the bottom */
  bottom: -10px;
  right: 0;
  width: 100%;
  background: transparent;  /* or add a background color if you want */
}
body.no-scroll{
    overflow: hidden;
}