@charset "utf-8";

address,
article,
aside,
button,
blockquote,
body,
dd,
dialog,
dl,
dt,
fieldset,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
li,
nav,
ol,
p,
pre,
section,
td,
th,
tr,
ul {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}


 @font-face {
  font-family: "Romain";
  src: url("BioRhymeExpanded-Light.otf")
    format("opentype");
}


@font-face {
  font-family: "Intro_Zenith_2";
  src: url("Pilat Extended Thin.otf");
}

@font-face {
  font-family: "Zenith_2";
  src: url("Pilat Extended Light.otf");
}

@font-face {
  font-family: "Zenith_Light";
  src: url("TwentyTwo-Light-v1.otf");
}

@font-face {
  font-family: "Zenith_Muni";
  src: url("TwentyTwoBioX-Light.otf");
}

@font-face {
  font-family: "Zenith";
  src: url("Pilat Extended Bold.otf");
}

/*#d4cdb9;*/
:root {
  --active-text: #2b2623;
  --active-subText:  #2b2623;
  --active-background: #e8e3d3;
  --zenith-font: "Zenith_2";
  --blend-mode: multiply;
  --logo-spacing: -.1em;
  --h2NoH-spacing: -.05em;	
  --vert-fill: #e8e3d3;
  --horiz-fill: #e8e3d3;
  --lH2-display: none !important;	
  --thum-ovrly: rgba(232, 227, 211, 0.9);
  --thum-strp:  rgba(232, 227, 211, 0.3);  
  --menu-back:	rgba(232, 227, 211, 0.3);
  --invert-set: none;
   --h2NoH-scale: 37px;
 
}

html.dark-mode, body.dark-mode {
  --active-text: #b8b4a3;
  --active-subText: #827f72;
  --active-background: #120f0d;
  --zenith-font: "Zenith"; 
  --blend-mode: lighten;
  --logo-spacing: -.05em;	
  --h2NoH-spacing: 0em;		
  --vert-fill:  #b8b4a3;	
  --horiz-fill: #b8b4a3;	
  --lH2-display: flex !important;	
  --thum-ovrly: rgba(18, 15, 13, 0.9);
  --thum-strp: rgba(18, 15, 13, 0.3);  	
  --menu-back: rgba(18, 15, 13, 0.8);
  --invert-set: none; 
  --h2NoH-scale: 35px;
 

}

.archive-theme {
  --active-text: #b8b4a3 !important;
  --active-subText: #827f72 !important;
  color: var(--active-text) !important; 
}

.archive-theme * {
  color: var(--active-text) !important;
}

.inverElement  {
  mix-blend-mode: var(--invert-set) !important;
}




html, body {
  position: relative; 
  min-height: 100dvh; 
  background-color: var(--active-background);
}


.intro-wrapper {background-color: var(--active-background); z-index:100000; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1px; height:100dvh; width:100vw; position:fixed; pointer-events:none; text-align:center;}

body {
  color: var(--active-text);
  margin: 0;
  font-family: "Romain";
  touch-action: pan-y !important; 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;		
}


.vert {fill:var(--vert-fill);}
.horiz {fill:var(--horiz-fill);}


.refHolder, .grounder, .imgContainer, .imgContainerFull, .slide, 
.projectsContainer, .itemsContainer, .scrollHolder, .gsap-overlay {
  background: var(--active-background);
}

.imgContainer img, .imgContainer video, .imgPly {
  mix-blend-mode: var(--blend-mode);
}


.logoHolder {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  color: var(--active-text);
  transition: color 0.2s ease; 
}

.xmenu__head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height:100dvh;	
  width:98vw;	
  gap: 0px;
  cursor: pointer;
}

h2 {
  font-family: var(--zenith-font);
  font-weight: 300;
  font-size: 5.25vw;
  transform: scaleY(.5);	
  line-height: 8em;
  text-transform:uppercase;
  letter-spacing: var(--logo-spacing);
}


.mode-toggle {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.mode-toggle {
  width: 32px;  /* Shrunk down from 60px */
  height: 16px; /* Adjusted to fit the 10px ball + padding + borders */
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  position: fixed;
  top: 20px;
  right: 20px;
  cursor: pointer;
  z-index: 9999;
  box-sizing: border-box; /* Keeps the border math clean */
}

.toggle-ball {
  width: 10px;
  height: 10px;
  background-color: #b8b4a3; /* Set to your root/light-mode color */
  border-radius: 50%;
  position: absolute;
  top: 2px; 
  left: 2px;
  pointer-events: none; 
  transform: translateX(0px); /* Explicitly set starting position */
}

/* Add this to handle the dark mode state */
body.dark-mode .toggle-ball {
  background-color: #ffffff; /* Dark mode color */
  transform: translateX(14px); /* Moves the ball */
}



button {
  font-family: "Romain";
  font-weight: 300;
  font-size: .8vw;
  line-height: 1.5em;
  letter-spacing: 0.1em;
  text-align:center;
  text-transform:uppercase;	
  color: #b8b6a7;
}





a {
  color: var(--active-text);
  transition: color 0.2s ease;
  text-decoration:none !important;	
}





.lazyload,
.lazyloading {
	opacity: 0;
}
.lazyloaded {
	opacity: 1;
	transition: opacity 500ms;
}

/* ==========================================================================
   1. SWUP MAIN CONTAINER SETUP
   ========================================================================== */

/* The main wrapper. We force a minimum height so the page doesn't 
   collapse upward into a 0px height when the old content fades out. */
#swup {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden; 
}

/* ==========================================================================
   2. SWUP FADE ANIMATION
   ========================================================================== */

/* The base state of your page content */
.transition-fade {
    transition: opacity 0ms, transform 0ms;
    opacity: 1;
    transform: translateY(0);
    
    /* Hardware acceleration to prevent Safari flickering */
    backface-visibility: hidden; 
    will-change: opacity, transform;
}

/* The state of your page content WHILE it is transitioning.
   Swup automatically adds 'is-animating' to the <html> tag. */
html.is-animating .transition-fade {
    opacity: 0;
    /* Optional: Add a very slight movement (like translateY(10px)) here 
       if you want the page to subtly drop as it fades out! */
}

.micro {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
 color: var(--active-text);
  transition: color 0.2s ease;
}


/* SECTIONS */
.section-title {
  display: none; /* used for text source only */
}

.titler {
  display: none;
}

.contextTitler {
  display: none;
}

.contextTitler2 {
  display: none;
}





.section {
  width:100vw;
  position:relative; 
  height:auto;
  pointer-events:none;
  padding:0;
  margin:0;
}



.logoHolder .block {
  will-change: transform, opacity;
}

.justified {
  text-align: justify;
  text-align-last: center;
}

/* XMENU BASE */
.xmenu {
  width: 98vw; /* overwritten dynamically by JS per section */
  /*margin: 3rem auto;*/
  border-radius: 0px;
  overflow: hidden;
  will-change: transform;
  /*background:rgba(9,9,9,.8);*/
  /*-webkit-backdrop-filter: blur(30px);*/
  pointer-events:auto;
}





.xmenu__wrap {	
  position:absolute;	
  height: 0;
  overflow: hidden;
  border-top: none;
  border-bottom: none;
  will-change: height;
  contain: layout;
  width:100vw;		
}

.xmenu__list {
  list-style: none;
  margin: 0;
}

.xmenu__item {
  font-family: "Romain";
  overflow: hidden;
  line-height:1.75em;	
  /*border-bottom: 1px solid #1c1b1c;*/
}

.xmenu__btn {
  width: 100%;
  text-align: center;
  font-family: "Romain";
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: inherit;
  border: 0;
  cursor: pointer;
}

.xmenu__btn:hover {
  /*background: rgba(255, 255, 255, 0.03);*/
}

  .xmenu__item h2 {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
  }

  .date_footer {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
  }


/* SUBMENU WRAP */
.subwrap {
  height: 0;
  overflow: hidden;
  will-change: height;
  contain: layout;
}

.sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: justify;
  text-align-last: center;
  font-weight: 300;
  font-size: 1.5vw;
  line-height: 1.25em;
  letter-spacing: 0.1em;
}

.sublink {
  display: block;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
}



.menuHolder2{
position:fixed; 
  top:2.5vh; 
  left:0; 
  display:flex;
  width:100vw; 
  justify-content:center; 
  align-items:center; 
  z-index:1001;
}

.menuHolder{
position:fixed; 
  top:0; 
  left:0; 
  display:flex;
  width:100vw; 
  height:100dvh;
  flex-wrap:wrap;	
  justify-content:center; 
  align-items:center; 
  z-index:99999 !important;
  pointer-events:none;
}

.menuHolder.menu-open {
  z-index: 1000;
}

.secondaryMenu {
  cursor:pointer;
  opacity:.3;
}




.slides-container {
  isolation: isolate;
  z-index: 1; 
  position: relative;
  top:0;
  left:0;	
  display: flex;
  flex: 1;
  height:100dvh;
  width:100vw;		
  will-change:transform;
  overflow:hidden !important;	
  -webkit-backface-visibility: hidden;
}


.slide {
  position: absolute;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height:100dvh;
  width: 100vw;	
  overflow: hidden; /* Recommended for parallax */
}

.slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform, filter; /* Optimizes performance */
}


.slide video {

width:auto; height:90vh; max-width:100vw; object-fit:cover; mix-blend-mode:lighten;

}	
	
.prevButton{
  position:absolute;
  left:0;
  top:0;
  width:10vw;
  height:100%;
  opacity:0;
  z-index:10;
  cursor:pointer;
}

.nextButton{
   position:absolute;
  right:0;
   top:0;
  width:10vw; 
  height:100%;
  opacity:0;
  z-index:10;
  cursor:pointer;
}

.captioner1 {
	display:none;
}









.logoFixed2 {
	position:fixed; 
	bottom:0; 
	height:90vh; 
	width:100%; 
	display:flex;  
	align-content:center; 
	justify-content:space-evenly;
 	flex-wrap:wrap;
	gap:20px;
	padding-bottom: env(safe-area-inset-bottom);
}

.bioClass {
padding-left:25%; padding-right:25%;	
}

.descrContain {
	width:40vw; height:auto; padding-top:0vh; padding-bottom:0vh;
}

.mobileHidden {
	display:none;
}


.bigType {opacity:0;}

.curtain1 {background: #120f0d; pointer-events:none; z-index:2000; position:fixed; height:100dvh; width:100vw; display:flex; align-items:center; justify-content:center;}





.mainframe 	{}
.mainframe.is-hidden {opacity:0 !important; }




#captionName {
  width:100vw;	
  display: flex;
  align-items: center;
  font-feature-settings: "tnum"; 
  font-variant-numeric: tabular-nums; /* Monospace numbers prevent jumping */
  line-height: 1; 
  overflow: hidden; /* Safety for the whole container */
}

/* 2. The Mask (The window we see through) */
.ticker-wrap {
  position: relative;
  display: inline-flex;
  overflow: hidden;    
  font-size: 10px;
  height: 1.75em; /* VISUAL HEIGHT: Adjust to match your font size exactly */
}

/* 3. The Columns (Holds the sliding track) */
.ticker-digit-column {
  position: relative;
  display: inline-block;
  width: 1em; /* Fixed width for stability */
  height: 100%;
  overflow: hidden;
}

/* 4. The Track (The moving strip of numbers) */
.ticker-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* We will animate 'transform' on this element */
}

/* 5. The Numbers inside the track */
.ticker-num {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  letter-spacing:.1em;	
  height: 1.75em; /* Must match .ticker-wrap height exactly */
  width: 100%;
}


#captionTitle {
  /* No fixed height here anymore. JS will animate it. */
  overflow: hidden;
  position: relative;
  display: block;
  width: 100%;
  will-change: height; /* Performance optimization */
}

/* 2. The Moving Strip */
.title-track {
  position: absolute;
  top: 0; 
  left: 0; 
  width: 100%;
  display: block;
}

/* 3. The Individual Items */
.title-inner {
  /* Remove fixed height. Let the text define it. */
  padding: 0.25em 0; /* Optional: adds breathing room */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; /* Allows multi-line text to stack properly */
  text-align: center;
}

h1 {	
  color: var(--active-subText);	
  font-weight: 300;
  font-size: 10px;
  line-height: 1.75em;
  letter-spacing: 0.1em;
  text-align:center;
  text-transform:uppercase;
}

h1 a {	
  color: var(--active-subText);	
}






.hugeType {
  font-family: var(--zenith-font);
  font-weight: 300;
  font-size: 10.25vw;
  transform: scaleY(.5);	
  line-height: 1em;
  letter-spacing: -.05em; 
  text-transform:uppercase;
}




.alt_2{

  font-family: "Zenith_2";
  font-weight: 300;
  font-size: 3vw;
  transform: scaleY(.5);	
  line-height: 8em;
  letter-spacing: 0em; 
  text-transform:uppercase;
}

.alt_22Intro {
	
  font-family: "Zenith_Muni";
  font-weight: 300;
  font-size: .7em;
  line-height: .7em;
  letter-spacing: .15em; 
  text-transform:uppercase;
	
}

.alt_Mini{

  font-family: "Zenith_2";
  font-weight: 300;
  font-size: 1.15vh;
  transform: scaleY(.5);	
  line-height: 1em;
  letter-spacing: .25em; 
  text-transform:uppercase;
}

.alt_22Light {
	
  font-family: "Zenith_Muni";
  font-size: .9em;
  line-height: .9em;
  letter-spacing: .15em; 
  text-transform:uppercase;
	
}	
	
 

.topMenu {
	position:absolute; top:10vh; width:100vw; display:flex; justify-content:center; z-index:1000;  pointer-events:none;
    transform: translateZ(0); 
    -webkit-transform: translateZ(0);
    will-change: transform;
}  

.menuTYPE {
  font-family: var(--zenith-font);
  font-weight: 300;
  font-size: 1.5vw;
  transform: scaleY(.5);	
  line-height: 2em;
  letter-spacing: -0.03em; 
  text-transform:uppercase;
}	

.caroDetails {
	position:absolute; bottom:2em; left:0; flex-direction:column; width:100vw; display:flex; justify-content:center; z-index:1000; gap:0px;
}



.blinky {}


.footerMatter {
    will-change: opacity; /* Since you are fading the container */
}


.footerMatter > * {
    will-change: transform; /* Since you are moving them with y: 40 */
    /* Optional: helps with text anti-aliasing during movement on some screens */
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden;
}




/* Keep imgHolder as the "controller" of the size */
.imgHolder_marQ {
  position: relative;
  width: 45vw; /* Starts at 50vw */
  height: auto;
  overflow: hidden;
  margin: 0;
  padding: 0;
  display: flex;
  
  /* IMPORTANT: Change this to auto so we can click it, 
     or rely on the child to capture the click. 
     'auto' is safer for interaction. */
  pointer-events: auto; 
  cursor: pointer; /* Default cursor */
  will-change: width, row-gap; 
  backface-visibility: hidden;	
}


	
/* Keep imgHolder as the "controller" of the size */
.imgHolder {
  position: relative;
  width: 80vw; /* Starts at 50vw */
  height: auto;
  max-height:70dvh;	
  max-width:80vw;	
  overflow: hidden;
  margin: 0;
  padding: 0;
  display: flex;
  
  /* IMPORTANT: Change this to auto so we can click it, 
     or rely on the child to capture the click. 
     'auto' is safer for interaction. */
  pointer-events: auto; 
  cursor: zoom-in; /* Default cursor */
  will-change: width, row-gap; 
  backface-visibility: hidden;	
}

/* Make the inner container fill the holder */
.imgContainer {
  position: relative;
  width: 100%; /* CHANGED from 50vw */
  height: auto;
  overflow: hidden;
  margin: 0;
  padding: 0;
  pointer-events: none; /* Let the click pass through to the holder */
}

/* Make the image fill the container */
.imgContainer img {
  display: block;
  width: 100%; /* CHANGED from 50vw */
  height: auto;
  max-height: none;
}

.imgContainer video {
  display: block;
  width: 100vw;
  height: auto;
  object-fit:contain;
}

.imgArchiveContainer {
  position: relative;
  width: 100vw; /* CHANGED from 50vw */
  height: auto;
  overflow: hidden;
  margin: 0;
  padding: 0;
  pointer-events: none; /* Let the click pass through to the holder */
}

.imgArchiveContainer img {
  position: relative;
  width: 100%; /* CHANGED from 50vw */
  height: auto;
  overflow: hidden;
  margin: 0;
  padding: 0;
  pointer-events: none; /* Let the click pass through to the holder */
}



.imgContainerFull {
  position: relative;
  width: 100vw;
  overflow: hidden;
  margin: 0;
  padding: 0;
  pointer-events:auto;
  cursor:pointer;
}

.imgContainerFull img {
  display: block;
  width: 100%;
  height: auto;
}  

.imgContainerFull video {
  display: block;
  width: 100%;
  height: auto;
  object-fit:contain;
} 


.projectsContainer {
padding-top:0; position:relative; height:auto; align-items:flex-start; display: flex; flex-direction:column; z-index:10000 !important;
}

.itemsContainer {
padding-top:0; position:relative; height:100dvh; justify-content:center; align-items:center; display: flex; pointer-events:none; z-index:1; 
}


.scrollHolder {position:relative; z-index:1; display:flex; width:100vw; flex-direction:column; column-gap: 0px;
	row-gap: 450px; align-items:flex-end; justify-content:center;}

.plusPlus {
  font-family: "Zenith_2";
  font-weight: 300;
  font-size: 2vw;
  line-height: 1em;
  text-transform:uppercase;
}

#main-gallery-loop {display:flex; width:100vw; flex-direction:column; column-gap: 0px;
	row-gap: 100px; align-items:center; justify-content:center;
	will-change: width, row-gap; 
	backface-visibility: hidden;
}

.menuHolder, .tagHolder, .cornerBlink, .menuHead {
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    will-change: opacity, visibility;
}


.gridHolder{
	box-sizing: border-box; width: 100vw; padding: 2.5vw 2.5vw; min-height: 100dvh; position:relative; gap:100px; display:grid; grid-template-columns: repeat(5, 1fr); align-content: start; align-items: center;
}



.status-sequence-container {
  position: relative;
}

.status-sequence-container .slide {
  position: absolute;
  top: 0;
  left: 0;
  background:red;	
  width: 100%;
  opacity: 0; /* Hidden by default */
  margin: 0;
}

#sequence-target {
    max-width:80vw;
    text-align: left !important; /* Force Left Align */
    opacity: 1;
}

/* 2. The Lines (<br> breaks): Stack vertically, but align content left */
.is-line {
    display: block !important;
    width: 100%;
    text-align: left !important; /* Force Left Align */
}

/* 3. The Characters: Sit side-by-side */
.is-char {
    display: inline-block !important;
    white-space: pre; /* Keeps natural spacing */
    vertical-align: middle;
}







.imageGridButton {
	position:fixed; display:flex; gap:10px; bottom:2em; right:4.25em; z-index:9999999 !important; margin:2em;
}

.cornerBlink {cursor:pointer; margin:3.5em;  position: fixed; bottom:0; right:0; z-index:999999 !important;}


.cornerMenu {
  cursor: pointer;
  margin: 2em;
  gap: 10px;
  display: flex;
  align-items: flex-end; /* Changed to flex-end for proper bottom alignment */
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999999 !important;
}

.cornerMenu-Ticker, 
.cornerMenu-Nav {
    margin: 3.5em;
    position: fixed; 
    bottom: 0; 
    left: 0; 
    transform: translateZ(0); 
}

.cornerMenu-Ticker { z-index: 999999; }
.cornerMenu-Nav { z-index: 999998; }



/* Prep the specific animating elements for the GPU */
.miniHolder, 
.secondaryHolder, 
.alt_Mini {
    will-change: transform, opacity;
    backface-visibility: hidden; /* Prevents text flickering during motion */
}

/* --- Core Layout --- */
.h2NoH {
  font-family: var(--zenith-font);
  font-weight: 300;
  font-size:  var(--h2NoH-scale);
  transform: scaleY(.5);
  transform-origin: bottom left; 
  line-height: 1em;
  letter-spacing: var(--h2NoH-spacing);
  text-transform: uppercase;
  margin: 0;
  display: flex; 
  flex-direction: row;
  align-items: flex-end;
  overflow: hidden; 
  cursor: pointer;
  white-space: nowrap;
  padding-right: 0.2em; 
}




.itemSlider {
  position: relative; 
  z-index: 100000 !important;	
  display: flex;
  overflow-x: auto;
  overflow-y:hidden;	
  
  /* Switch back to mandatory if you want it to 'lock' perfectly 
     despite the huge gap */
  scroll-snap-type: x mandatory; 
  scroll-behavior: smooth;
  
  width: 100%; 
  max-width: 100vw;
  height: 70vh;

  /* Remove GAP - we will use margin on the slides instead */
  gap: 0; 
  
  /* Scroll padding helps the browser 'aim' for the center */
  scroll-padding: 0;

  box-sizing: border-box;
  scrollbar-width: none;
}

.itemSlide {
  flex: 0 0 100vw; 
  width: 100vw;
  height: 70vh;
  scroll-snap-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 150px; 
  box-sizing: border-box;
  overflow: hidden; /* Encapsulates any weirdness */
}

.itemSlideImg {
  /* This ensures the image is never taller than 70vh 
     and never wider than the (100vw - 300px) space */
  max-height: 60vh;
  max-width: 100%; 
  width: auto;
  height: auto; 
  object-fit: contain;
}


.sectionReveal2 {
    display: block;
    clear: both;
	z-index:0; 
    position: relative;
    pointer-events: none;
    width: 100vw; /* Force width */
    height: 40vh;
    visibility: visible; /* Ensure it's not hidden */
    background: transparent; /* Keep it invisible to the eye */
}



.thumb-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: 100002 !important;
    
    /* Hide initially - GSAP autoAlpha will handle this */
    opacity: 0;
    visibility: hidden; 
	background: var(--thum-ovrly);
}

/* The Strip: Layout only */
.thumb-strip {
    position: absolute;
    top: 50%; /* We will center this using GSAP yPercent */
    right: 5vw;
    width: 80px;
    height: auto; 
    max-height: 60vh;
    
    /* Styling */
    backdrop-filter: none;
    border-radius: 20px;
    padding: 15px;
    
    /* Flex layout for content */
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    background: var(--thum-strp);
    /* Hide Scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.thumb-strip::-webkit-scrollbar { display: none; }

.overlay-backdrop {
    position: absolute;
    width: 100%; height: 100%;
    top:0; left:0;
    z-index: -1;
}

/* 1. The Anchor Tag Container */
.thumb-item {
    display: block;        /* essential to hold width */
    width: 100%;           /* forces it to fill the 120px strip */
    flex-shrink: 0;        /* prevents flexbox from squishing it */
    margin-bottom: 15px;   /* spacing between items */
    
    /* Optional: Reset borders/padding from global styles */
    border: none;
    padding: 0;
    box-sizing: border-box;
    transition: transform 0.2s ease;
	 opacity:.9;
}

/* 2. The Image Itself */
.thumb-item img {
    display: block;        /* removes that annoying 3px gap at bottom of images */
    width: 100%;           /* fills the anchor tag */
    height: auto;          /* maintains aspect ratio */
    /* Optional: If you want them to be uniform squares instead */
    /* aspect-ratio: 1 / 1; */
    /* object-fit: cover; */
    border-radius: 4px;    /* subtle rounding on the image itself */
	opacity:.9;
}

/* Hover Effect */
.thumb-item:hover {
	 opacity:1;
    transform: scale(1.05);
    z-index: 2;            /* brings it above neighbors during scale */
}



/* The fixed overlay */
.gsap-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; /* 100vh physically bleeds behind the Safari UI */
    z-index: 100001 !important;
    opacity: 0;
    visibility: hidden; 
    display: flex;
    flex-direction: column;
    background: var(--active-background);
}

.scroll-snap-container {
    display: flex;
    flex-direction: column; 
    width: 100%;
    height: 100%; 
    overflow-y: auto; 
    overflow-x: hidden; 
    scrollbar-width: none; 
    background: var(--active-background);
}

/* Individual Images inside Overlay */
.overlay-image-slide {
    width: 100vw;
    height: 100vh; /* Forces the slide to perfectly match the screen */
    flex: 0 0 100vh; /* Prevents flexbox from collapsing the height */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--active-background);
}

.overlay-image-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* THIS IS THE MAGIC BULLET: Zooms image to kill the black bars */
    mix-blend-mode: var(--blend-mode);
}

.overlay-close {
    position: absolute;
    top: max(20px, env(safe-area-inset-top)); /* Keeps button safe from iPhone notch */
    right: 20px;
    color: white;
    background: transparent;
    border: 1px solid white;
    padding: 10px 20px;
    cursor: pointer;
    z-index: 10000;
}



.gridCounter {
    display: flex;
    overflow: hidden; /* This hides the 0-9 that aren't active */
    height: 1.1em;    /* Match your font's line-height */
    line-height: 1.1em;
    font-variant-numeric: tabular-nums; /* Keeps digits same width */
}

/* Each individual digit's window */
.digit-strip {
    display: inline-block;
    height: 1.1em;
    overflow: hidden;
}

/* The long vertical column of 0-9 */
.digit-container {
    display: flex;
    flex-direction: column; /* Stacks 0-9 vertically */
    transition: transform 0.7s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

/* Individual number styling */
.digit-container span {
    display: block;
    height: 1.1em; /* Must match the container height exactly */
    text-align: center;
}


.secondaryHolder {
    display: none;
    opacity: 0;
}

.subTitleHolder {
	width:60vw;
}
.subdDetailsHolder {
	width:35vw;
	pointer-events:auto !important;
	z-index:1000;
}

.type-reveal {
  visibility: hidden; 
}


.relative-container {
	position:relative;
    width: 100vw;
	height:auto;
    min-height: 100dvh;
	z-index:100;
	background: var(--active-background);
	
}

.snap-container {
	position:relative;
    display: flex;
    flex-direction: column; /* Stacks items vertically */
    width: 100vw;
    height: 100dvh;
    overflow-y: auto;       /* Allow vertical scrolling */
    overflow-x: hidden;     /* Hide horizontal scrolling */
    /*scroll-snap-type: y mandatory; /* Snap vertically */
    /*-webkit-overflow-scrolling: touch;*/
    scrollbar-width: none; 
	gap: 1000px;
	z-index:100;
	background: var(--active-background);
	
}

/* Individual Images inside Overlay */
.snap-image-slide {
    flex: 0 0 100dvh;      /* Force 100% viewport height */
    width: 100vw;
    height: 100dvh;
    scroll-snap-align: start; /* Snap to top */
    display: flex;
    align-items: center;
    justify-content: center;
	background: var(--active-background);
}





.loader-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--active-background);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100003 !important; 
}

.logo {
 opacity: 0; 
}

.alt_INTRO{

  font-family: "Intro_Zenith_2";
  font-weight: 300;
  font-size: 12.5vh;
  transform: scaleY(.5);	
  line-height: 8em;
  letter-spacing: -.125em;
  text-transform:uppercase;
  padding-right:.15em;	
}



.menu {
  /* Remove transform: translateY(100%); */
  /* Remove the backface/preserve-3d properties as they can bug out iOS Safari blurs */
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  box-sizing: border-box; 
  background: var(--menu-back) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  will-change: opacity; /* Only changing opacity now */
  overscroll-behavior: contain; 
}

.main-menu {
  z-index: 100002 !important;
}

.secondary-menu {
  z-index: 100003 !important;
 
}

.third-menu {
  z-index: 100004 !important;
 
 
}







.footerItems {position:fixed; right:5vw; width:90vw; bottom:0; height:50vh; display:flex; align-items:center; justify-content:space-between; will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;}



.menuItem {cursor:poiter !important;}
.projects, .presents {
  cursor: pointer !important;
}



.bigMenu{

  font-family: "Zenith_2";
  font-weight: 300;
  font-size: 20px;
  transform: scaleY(.5);	
  line-height: 1.2em;
  letter-spacing: .25em; 
  text-transform:uppercase;
}	



.menuMargin {margin-top: 5vh; margin-bottom:7.5vh; gap:10px; width:100%; display:flex; justify-content:center; align-items:center; flex-direction:column; }




.custom-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    visibility: hidden; 
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* NEW: Prep the wrapper for fading */
    will-change: opacity, visibility;
}

.lightbox-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #120f0d;
    cursor: pointer;
}

.lightbox-content {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; 
    /* NEW: Prep the container for your Y and Scale animations */
    will-change: transform;
    /* NEW: Smooth out scaling artifacts */
    backface-visibility: hidden; 
}

#lightbox-img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    backface-visibility: hidden;
    will-change: transform, opacity;
    transform: translateZ(0);
	pointer-events: auto;
}

.lightbox-project-btn {
    position: absolute;
    color: var(--active-text);
    text-transform: uppercase;
    text-decoration: none;
    pointer-events: auto;
    /* NEW: Prep the button for your Y and Scale animations */
    will-change: transform;
    backface-visibility: hidden;
}

.lightbox-close {
    /* Add styles if needed */
}



.pageIntervals {position:relative; height:125px;}



.carousel-wrapper {
    width: 100vw;
    height: 100vh;
    overflow: hidden; 
    position: relative;
    touch-action: none;
	z-index:1000;
	background-color: var(--active-background);
}

.slide-container {
    position: relative; /* Changed from flex */
    width: 100%;
    height: 100%;
}

.snap-image-slide-wrapper, 
.slide-image-slide-wrapper {
    position: absolute; /* Stack all slides on top of each other */
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%; 
    margin: 0; 
    display: block;
    text-decoration: none;
    opacity: 0; /* Hidden by default, GSAP will reveal the first one */
}

.slide-image-slide, 
.imgHolder, 
.imgContainer {
   	display:flex;
	align-items:center;
	justify-content:center;
    width: 100%;
    height: 100%;
}





@media only screen and (max-height: 1000px) {
	
	
.pageIntervals {position:relative; height:100px;}		
	

.alt_22Light {
	
  font-family: "Zenith_Muni";
  font-size: 13px;
  line-height: 1em;
  letter-spacing: .15em; 
  text-transform:uppercase;
	
}		
	
.alt_Mini{

  font-family: "Zenith_2";
  font-weight: 300;
  font-size: 1.15vw;
  transform: scaleY(.5);	
  line-height: 1em;
  letter-spacing: .25em; 
  text-transform:uppercase;
}	
	
h2 {
  font-family: var(--zenith-font);
  font-weight: 300;
  font-size: 3.25vw;
  transform: scaleY(.5);	
  line-height: 8em;
  text-transform:uppercase;
  letter-spacing: var(--logo-spacing);
}
	
	
.h2NoH {
  font-family: var(--zenith-font);
  font-size: 1.75em;
  line-height: 1em;
}	
	
	
.imgContainer {
  position: relative;
  width: auto; /* CHANGED from 50vw */
  height:  60vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  pointer-events: none; /* Let the click pass through to the holder */
}

/* Make the image fill the container */
.imgContainer img {
  display: block;
  width: auto; /* CHANGED from 50vw */
  height: 60vh;
  max-height: none;
}	
	
/* Keep imgHolder as the "controller" of the size */
.imgHolder_marQ {
  position: relative;
  width: auto; /* Starts at 50vw */
  height: 60vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  display: flex;
  pointer-events: auto; 
  cursor: pointer; /* Default cursor */
  will-change: width, row-gap; 
  backface-visibility: hidden;	
}


	
/* Keep imgHolder as the "controller" of the size */
.imgHolder {
  position: relative;
  width: auto; /* Starts at 50vw */
  height: 60vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  display: flex;
  pointer-events: auto; 
  cursor: zoom-in; /* Default cursor */
  will-change: width, row-gap; 
  backface-visibility: hidden;	
}	
	
	
.footerItems {position:fixed; right:5vw; width:90vw; bottom:0; height:90vh; display:flex; align-items:center; justify-content:space-between; will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;}
	
.sectionReveal2 {
    display: block;
    clear: both;
	z-index:0; 
    position: relative;
    pointer-events: none;
    width: 100vw; /* Force width */
    height: 90vh;
    visibility: visible; /* Ensure it's not hidden */
    background: transparent; /* Keep it invisible to the eye */
}
	
	



	
}









@media only screen and (max-width: 800px) {

	
.intro-wrapper {background-color: var(--active-background); z-index:100000; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1px; height:100dvh; width:100vw; top:0; position:absolute; pointer-events:none; text-align:center;}
	
	
.alt_22Intro {
	
  font-family: "Zenith_Muni";
  font-weight: 300;
  font-size: .6em;
  line-height: .6em;
  letter-spacing: .15em; 
  text-transform:uppercase;
	
}	
	
.alt_22Light {
	
  font-family: "Zenith_Muni";;
  font-weight: 300;
  font-size: 11px;
  line-height: 1em;
  letter-spacing: .15em; 
  text-transform:uppercase;
	
}	
		
	
/* Keep imgHolder as the "controller" of the size */
.imgHolder {
  position: relative;
  width: 70vw; /* Starts at 50vw */
  height: auto;
  max-height:70dvh;
  max-width:70dvw;	
  overflow: hidden;
  margin: 0;
  padding: 0;
  display: flex;
  
  /* IMPORTANT: Change this to auto so we can click it, 
     or rely on the child to capture the click. 
     'auto' is safer for interaction. */
  pointer-events: auto; 
  cursor: zoom-in; /* Default cursor */
  will-change: width, row-gap; 
  backface-visibility: hidden;	
}


/* Make the inner container fill the holder */
.imgContainer {
  position: relative;
  width: 100%; /* CHANGED from 50vw */
  height: auto;
  margin: 0;
  padding: 0;
  pointer-events: none; /* Let the click pass through to the holder */
}

/* Make the image fill the container */
.imgContainer img {
  display: block;
  width: 100%; /* CHANGED from 50vw */
  height: auto;
  max-height: none;
}
		
	
	
.carousel-wrapper {
    width: 100vw;
    height: 100dvh; /* Swapped to dvh */
    overflow: hidden; 
    position: relative;
    touch-action: none;
	z-index:1000;
	background-color: var(--active-background);
}

.slide-container {
    display: flex;
    flex-direction: column; 
    height: max-content;
    width: 100%;
    will-change: transform; /* Hardware acceleration for mobile */
}

.snap-image-slide-wrapper, 
.slide-image-slide-wrapper {
    flex: 0 0 auto;
    width: 100vw; 
    height: 100dvh; /* Swapped to dvh */
    margin: 0; 
    display: block;
    text-decoration: none;
}

/* Ensure images fill the space */
.slide-image-slide, 
.imgHolder, 
.imgContainer {
	display:flex;
	align-items:center;
	justify-content:center;
    width: 100%;
    height: 100%;
}	
	

	.pageIntervals {position:relative; height:45px;}	
	
h2 {
  font-family: var(--zenith-font);
  font-weight: 300;
  font-size: 5.25vw;
  transform: scaleY(.5);	
  line-height: 14em;
  text-transform:uppercase;
  letter-spacing: var(--logo-spacing);
}	



.bigMenu{

  font-family: "Zenith_2";
  font-weight: 300;
  font-size: 15px;
  transform: scaleY(.5);	
  line-height: 1.2em;
  letter-spacing: .25em; 
  text-transform:uppercase;
}		
	
.menuMargin {margin-top: 5vh; margin-bottom:7vh;  width:100%; display:flex; justify-content:center; align-items:center; flex-direction:column; }
	
	
	
.itemSlider {
  position: relative; 
  z-index: 100000 !important;	
  display: flex;
  overflow-x: auto;
  overflow-y:hidden;	
  
  /* Switch back to mandatory if you want it to 'lock' perfectly 
     despite the huge gap */
  scroll-snap-type: x mandatory; 
  scroll-behavior: smooth;
  
  width: 100%; 
  max-width: 100vw;
  height: 100vh;

  /* Remove GAP - we will use margin on the slides instead */
  gap: 0; 
  
  /* Scroll padding helps the browser 'aim' for the center */
  scroll-padding: 0;

  box-sizing: border-box;
  scrollbar-width: none;
}

.itemSlide {
  flex: 0 0 100vw; 
  width: 100vw;
  height: 100vh;
  scroll-snap-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px; 
  box-sizing: border-box;
  overflow: hidden; /* Encapsulates any weirdness */
}

.itemSlideImg {
 
  width: 70vw !important;
  height: auto !important; 
  object-fit: contain;
}

	
	
.sectionReveal2 {
    display: block;
    clear: both;
	z-index:0; 
    position: relative;
    pointer-events: none;
    width: 100vw; /* Force width */
    height: 90vh;
    visibility: visible; /* Ensure it's not hidden */
    background: transparent; /* Keep it invisible to the eye */
}	
	
.footerItems {position:fixed; right:5vw; width:90vw; bottom:0; height:90vh; gap:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;}	
	
.alt_INTRO{

  font-family: "Intro_Zenith_2";
  font-weight: 300;
  font-size: 10vw;
  transform: scaleY(.5);	
  line-height: 8em;
  letter-spacing: -.075em;
  text-transform:uppercase;
  padding-right:.15em;	
}

	
	
	.status-sequence-container{
		display:none;
	}	
	
.subTitleHolder {
	width:70vw;
}
.subdDetailsHolder {
	width:55vw;
}	
	
h1 {	
  font-weight: 300;
  font-size: 6px;
  line-height: 1.75em;
  letter-spacing: 0.1em;
  text-align:center;
  text-transform:uppercase;
}	
	
.alt_2{

  font-family: "Zenith_2";
  font-weight: 300;
  font-size: 4.5vw;
  transform: scaleY(.5);	
  line-height: 8em;
  letter-spacing: 0em; 
  text-transform:uppercase;
}	
	
.imageGridButton {
	position:fixed; display:flex; gap:5px; padding-bottom: env(safe-area-inset-bottom);  bottom:1.8em; right:3.25em; margin:0;
}	
	
.gridHolder{
	box-sizing: border-box; width: 100vw; padding: 2.5vw 2.5vw; min-height: 100dvh; position:relative; gap:55px; display:grid; grid-template-columns: repeat(4, 1fr); align-content: start; align-items: center;
}

.cornerBlink {padding-bottom: env(safe-area-inset-bottom); cursor:pointer; margin:0em;  position: fixed; bottom:1.25em; right:.75em;}
	
.cornerMenu-Ticker, 
.cornerMenu-Nav {
    margin: 1.25em;
    position: fixed; 
    bottom: .65em; 
    left: 0; 
}
	

.main-menu {
  z-index: 100002 !important;
}
	
	
.cornerMenu-Ticker { z-index: 999999; }
.cornerMenu-Nav { z-index: 999998; }

/* Prep the specific animating elements for the GPU */
.miniHolder, 
.secondaryHolder, 
.alt_Mini {
    will-change: transform, opacity;
    backface-visibility: hidden; /* Prevents text flickering during motion */
}
	
	
.alt_Mini{

  font-family: "Zenith_2";
  font-weight: 300;
  font-size: 3.15vw;
  transform: scaleY(.5);	
  line-height: 1em;
  letter-spacing: .25em; 
  text-transform:uppercase;
}	
	
.h2NoH {
  font-family: var(--zenith-font);
  font-size: 4vw;
  line-height: 1em;
}

	

	
/* The Strip: Layout only */
.thumb-strip {
    position: absolute;
    top: 50%; /* We will center this using GSAP yPercent */
    right: 5vw;
    width: 80px;
    height: auto; 
    max-height: 70vh;
    
    /* Styling */
    backdrop-filter: none;
    border-radius: 20px;
    padding: 15px;
    
    /* Flex layout for content */
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    background: var(--thum-strp);
    /* Hide Scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.thumb-strip::-webkit-scrollbar { display: none; }

.overlay-backdrop {
    position: absolute;
    width: 100%; height: 100%;
    top:0; left:0;
    z-index: -1;
}

/* 1. The Anchor Tag Container */
.thumb-item {
    display: block;        /* essential to hold width */
    width: 100%;           /* forces it to fill the 120px strip */
    flex-shrink: 0;        /* prevents flexbox from squishing it */
    margin-bottom: 7.5px;   /* spacing between items */
    
    /* Optional: Reset borders/padding from global styles */
    border: none;
    padding: 0;
    box-sizing: border-box;
    transition: transform 0.2s ease;
	 opacity:.6;
}

/* 2. The Image Itself */
.thumb-item img {
    display: block;        /* removes that annoying 3px gap at bottom of images */
    width: 100%;           /* fills the anchor tag */
    height: auto;          /* maintains aspect ratio */
    /* Optional: If you want them to be uniform squares instead */
    /* aspect-ratio: 1 / 1; */
    /* object-fit: cover; */
    border-radius: 4px;    /* subtle rounding on the image itself */
}

/* Hover Effect */
.thumb-item:hover {
	 opacity:1;
    transform: scale(1.05);
    z-index: 2;            /* brings it above neighbors during scale */
}
	
	

/* Keep imgHolder as the "controller" of the size */
.imgHolder_marQ {
  position: relative;
  width: 45vw; /* Starts at 50vw */
  height: auto;
  margin: 0;
  padding: 0;
  display: flex;
  
  /* IMPORTANT: Change this to auto so we can click it, 
     or rely on the child to capture the click. 
     'auto' is safer for interaction. */
  pointer-events: auto; 
  cursor: pointer; /* Default cursor */
  will-change: width, row-gap; 
  backface-visibility: hidden;	
}


	

	
.gsap-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; /* 100vh physically bleeds behind the Safari UI */
    z-index: 100001 !important;
    opacity: 0;
    visibility: hidden; 
    display: flex;
    flex-direction: column;
    background: var(--active-background);
}

.scroll-snap-container {
    display: flex;
    flex-direction: column; 
    width: 100%;
    height: 100%; 
    overflow-y: auto; 
    overflow-x: hidden; 
    scrollbar-width: none; 
    background: var(--active-background);
}

/* Individual Images inside Overlay */
.overlay-image-slide {
    width: 100vw;
    height: 100vh; /* Forces the slide to perfectly match the screen */
    flex: 0 0 100vh; /* Prevents flexbox from collapsing the height */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--active-background);
}

.overlay-image-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* THIS IS THE MAGIC BULLET: Zooms image to kill the black bars */
    mix-blend-mode: var(--blend-mode);
}

.overlay-close {
    position: absolute;
    top: max(20px, env(safe-area-inset-top)); /* Keeps button safe from iPhone notch */
    right: 20px;
    color: white;
    background: transparent;
    border: 1px solid white;
    padding: 10px 20px;
    cursor: pointer;
    z-index: 10000;
}
	
	

}