@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');

*{box-sizing:border-box;}
body{font-family:'Manrope',sans-serif;background:linear-gradient(90deg,#ffffff,#dedede);margin:0;font-weight:400;}
a{color:black;}
a:hover{filter:blur(2px);}
.site-title{font-size:1.3rem;text-transform:uppercase;}
::selection{background:grey;color:black;}
main{font-size:1.2em;margin-left:15dvw;padding:1rem;max-height:calc(100dvh - 2rem);}
img{max-width:100%;}
p{margin:1rem 0;}


#masthead{width:15dvw;position:fixed;top:0;left:0;height:100dvh;font-size:1rem;padding:1rem;overflow-y:auto;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none;}
#masthead::-webkit-scrollbar{display:none;}
#masthead a{text-decoration:none;color:black;}
#masthead ul{padding:0;list-style:none;}
#masthead ul.sub-menu{padding-left:0.5rem;}
a[aria-current="page"]{filter:blur(2px);}
#masthead li{margin-top:0.25rem;}
.menu>li,.menu>li>.sub-menu>li{margin:0.5rem 0; overflow-wrap: break-word;
  word-break: break-word;}
.menu a:hover{filter:blur(2px);}
.menu > .menu-item > a{text-transform:uppercase;}
#menu .sub-menu {display: none;}
#menu .menu-item-has-children.open > .sub-menu {display: block;}
/* OPEN ACTIVE PROJECT TREE */
#menu .current-menu-item > .sub-menu, #menu .current-menu-ancestor > .sub-menu, #menu .current-menu-parent > .sub-menu { display: block; }
#mobilemenutrigger{display:none;cursor:pointer;z-index:998;color:black!important;-webkit-tap-highlight-color: transparent!important;}
#mobilemenu{position:fixed;top:0;left:0;background:white;z-index:999;padding:1rem;display:none;width:100dvw;height:100dvh;background:linear-gradient(90deg,#ffffff,#dedede);font-size:1.2rem;}
#mobilemenu ul{margin:0;}
#menu{display:block;}



.work-cols{display:flex;flex-flow:row nowrap;width:100%;gap:2rem;max-height:calc(100dvh - 2rem);overflow:hidden;}
.work-col img{width:100%;height:auto;}
.left,.right{width:50%;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none;}
.left::-webkit-scrollbar,.right::-webkit-scrollbar{display:none;}

.work-title{font-size:3rem;margin:0;line-height:1em;}
.right .work-gallery-item{margin-bottom:0.5rem;}
.right figcaption{font-size:.75rem;}
.right img{cursor:zoom-in;}
figcaption{font-weight:normal;}
.caption{font-size:.75rem;}
.entry-title{margin-top:0;}

.open-inspo,.close-inspo{border:2px solid black;font-family:'Manrope',sans-serif;background:transparent;color:black;border-radius:15px;cursor:pointer;padding:0.1rem 0.5rem;display:block;margin:1rem 0;font-weight:bold;background:white;}

.inspo-gallery-info{display:none;z-index:9999;}
.inspo-gallery{display:none;z-index:-9;}
.inspo-gallery{width:100dvw;height:100dvh;position:fixed;top:0;left:0;display:none;overflow:hidden;}
.inspo-gallery .work-gallery-item{filter:blur(10px);transition: all ease-in-out 1s;text-align:left;font-size:0.8rem;text-shadow:0px 0px 16px white;display:block;padding:0.5rem;}
.inspo-gallery .work-gallery-item > .image { display: block; }
.inspo-gallery .work-gallery-item:hover{filter:blur(0);transition:1s;}
.inspo-gallery .work-gallery { position: relative; width: 100%; height: 100%; }
.inspo-gallery .work-gallery-item .image{min-width:15rem;width:15rem;height:15rem;}


/* floating items */
.inspo-gallery .work-gallery-item {
  position: absolute;

  /* random placement via CSS vars */
  left: var(--x);
  top: var(--y);

  animation: var(--anim) var(--dur) linear infinite;
  animation-delay: var(--delay);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.inspo-gallery .work-gallery-item:hover {
  animation-play-state: paused;
  z-index: 20;
}

.inspo-gallery .work-gallery-item.dragging {
  animation: none !important;
  cursor: grabbing;
  z-index: 1000;
}


/* caption positioned OUTSIDE layout */
.inspo-gallery figcaption {
  position: absolute;
  top: 0;
  left: 16rem; /* image width (250px) + gap */
  width: 20rem;
  height:16rem;
  padding:1rem;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

/* show on hover */
.inspo-gallery .work-gallery-item:hover figcaption {
  opacity: 1;
}

@keyframes floatA {
  0%   { transform: translate(0,0) rotate(0deg); }
  25%  { transform: translate(40px,-60px) rotate(4deg); }
  50%  { transform: translate(-30px,40px) rotate(-4deg); }
  75%  { transform: translate(50px,10px) rotate(3deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}

@keyframes floatB {
  0%   { transform: translate(0,0) rotate(0deg); }
  25%  { transform: translate(-50px,30px) rotate(-5deg); }
  50%  { transform: translate(60px,-40px) rotate(5deg); }
  75%  { transform: translate(-20px,-30px) rotate(-3deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}

@keyframes floatC {
  0%   { transform: translate(0,0); }
  33%  { transform: translate(30px,60px); }
  66%  { transform: translate(-60px,-20px); }
  100% { transform: translate(0,0); }
}

#c{position:fixed;inset:0;display:block;height:100dvh;width:100dvw;pointer-events:none;z-index:999;mix-blend-mode:difference;}

/* LIGHTBOX — SAME USABLE SIZE AS .inspo-gallery */

.lightbox-overlay{display:none;position:fixed;inset:0;z-index:1000;padding:1rem;left:15dvw;}
.lightbox-content{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;height:calc(100dvh - 2rem);width:100%;margin:0 auto;}
.lightbox-content p{margin:0!important;}
.lightbox-content img{flex:1;min-height:0;width:auto;max-width:100%;object-fit:contain;}
.lightbox-text{color:#000;}
.lightbox-title{font-size:.75rem;padding-top:1rem;}
.lightbox-desc{display:none!important;}
.lightbox-close{position:fixed;top:0;right:0;font-size:2rem;line-height:1;padding:0.5rem 0.75rem;background:none;border:none;cursor:pointer;z-index:1010;}
.lightbox-counter{position:fixed;right:1rem;bottom:1rem;}

@media screen and (max-width: 1200px){
	#menu{display:none;}
	#mobilemenutrigger{display:block;}
	.lightbox-close{right:1rem!important;top:0.75rem!important;padding:0!important;color:black!important;-webkit-tap-highlight-color: transparent;}
	#masthead{width:100%;display:flex;flex-flow:row nowrap;justify-content:space-between;height:auto;background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 100%);}
	main{max-height:auto;margin:0;margin-top:3rem;}
	.work-cols{max-height:auto;overflow:unset;flex-wrap:wrap;}
	.left,.right{width:100%}
	.lightbox-overlay{left:0;}
	.inspo-gallery .work-gallery-item{filter:none!important;}
	.inspo-gallery{position:relative;min-height:100dvh;width:100%;height:auto;}
	.inspo-gallery figcaption, .inspo-gallery .work-gallery-item { position:relative; left:unset;top:unset;opacity:1;word-break:break-word;width:auto;height:auto;margin:0;padding:0;}
	.inspo-gallery figcaption {font-size:1.2em;margin:1rem 0;}
	.inspo-gallery figcaption .caption{}
	.inspo-gallery{overflow:unset;}
	.inspo-gallery .work-gallery-item .image{width:100%;height:auto;aspect-ratio:1;padding:0;}
}