@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,
span,
a,
input,
select,
textarea {
  margin: 0;
  padding: 0;
  font-weight: normal !important;
  font-size: var(--primary-font-size) !important;
  line-height: var(--primary-line-height) !important;
}

:root {
  --primary-color: #222222; 
  --primary-bg-color: #f8f8f5;
  --primary-invbg-color: #090909;	
  --primary-font-size: 20px !important;
  --primary-small-size: 18px !important;
  --primary-micro-size: 15px !important;	
  --primary-line-height: 1.2em !important;	
  --primary-large-size: 5.5vw !important;	
  --primary-accent-color: #e4e5e0;	 	
  --player-height: 100px;
  --local-player-height: 40px;	
}

body {
  background: var(--primary-bg-color);
  color: var(--primary-color);	
  text-align: left;
  display: flex;
  font-family: "FT1", sans-serif;
  font-size: var(--primary-font-size) !important;	
  line-height: var(--primary-line-height) !important;
  font-weight: normal !important;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  margin: 0; 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  overflow-x: hidden; 
}

html, body {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto !important;
}

.transition-fade {
    transition: .01s;
    opacity: 1;
	/*transition-delay: .5s;*/
}

html.is-animating .transition-fade {
    opacity: 0;
}

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

@font-face {
  font-family: "FT1";
  src: url("OptimaLTStd Medium.otf") format("opentype");
}

@font-face {
  font-family: "FT2";
  src: url("OptimaLTStd Medium.otf") format("opentype");
}

a {
  color: var(--primary-color);	
  text-decoration: none;
  font-size: var(--primary-font-size) !important;
  line-height: var(--primary-line-height) !important;
  font-weight: normal !important;
}

.lazyload,
.lazyloading {
  opacity: 0;
}

.lazyloaded {
  opacity: 1;
  transition: opacity 350ms;
}

h1, h2 { 
  font-family: "FT2";	
  margin: 0;
  padding: 0;	
  font-weight: normal !important;
  line-height: var(--primary-line-height) !important;
  letter-spacing: 0;
  font-size: var(--primary-font-size) !important;	
  text-align: left;
}

.tinyType {font-size: var(--primary-small-size) !important;	}	
.microType {font-size: var(--primary-micro-size) !important;	}	
		

/* ==========================================
   1. GLOBAL HEADER AUDIO PLAYER STYLES
   ========================================== */

#primeBounds {
  position: fixed;
  bottom: 7em;
  right: 7em;
  width: 500px;
  border:1px solid #111111;
  z-index: 9999;
  pointer-events: none;
	
}

#player {
  width: 100%;
  height: 40px;
  position: relative;
  top: 0;
  left: 0;
  will-change: transform, height;
  overflow: hidden; 
  border-radius: 0px;
  cursor: pointer;
  
  /* --- NEW: Force Hardware Acceleration --- */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
}

#progressContainer {
  position: relative;
  width: 100%;
  height: 100%; 
  margin-top: 0;
  cursor: pointer;
  background: white;
  z-index: 1;
}

#progressContainer::before {
  content: "";
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;
  bottom: -100px;
  background: transparent;
  z-index: 2;
  pointer-events: auto;
}

#playhead {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  display: block;
  background: var(--primary-accent-color); 
  z-index: 4;
  
  /* --- NEW: Optimize GSAP X transform --- */
  will-change: transform;
  transform: translateZ(0);
}

/* --- NEW: Grouped Progress Bars for GPU Hinting --- */
#progress, 
.local-progress, 
.progress-fill {
  will-change: width;
  transform: translateZ(0);
}

#progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%; 
  width: 0%;
  background-color: var(--primary-accent-color);
  border: none !important;
  transition: background-color 0.3s ease; /* (Width is handled by GSAP) */
}

#dropdownControls {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  z-index: 3;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  padding: 0px;
  gap: 10px;
  box-sizing: border-box;
  pointer-events: none;
}

#flipperContainer {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  pointer-events: auto;
  
  /* --- NEW: Smooth out the GSAP hover reverse --- */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.controlPad {
  position: absolute;
  top: 0;
  left: 1em;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  pointer-events: none;
  transform: translateZ(0);
}

#titleContainer {
  max-width: 100%;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  padding-right: 15px;
  pointer-events: auto;
}

#titleHolder {
  margin: 0;
  padding: 0;
  height: 100%;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  
  /* --- NEW: Anti-jitter for rolling text --- */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  text-rendering: optimizeLegibility;
}

#title {
  display: inline-block;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  font-family: "FT2", sans-serif;
  font-size: var(--primary-font-size) !important;
}

.controller {
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s ease;
}

.controller:hover {
  opacity: 1;
}

.directionals {
  opacity: 1;
}

#timer {
  margin: 0;
  padding: 0;
  line-height: 1;
  font-family: "FT1", sans-serif;
  font-size: var(--primary-font-size) !important;
}

/* ==========================================
   2. CONTAINER & STACKED COLUMN LAYOUT
   ========================================== */

.entries-container {
  position:relative;	
  width: 95vw !important;
  background: var(--primary-bg-color);
  max-width: 95vw !important;
  margin: 0 auto !important;
  margin-left: 2.5vw !important;	
  padding: 0 !important;	
  display: flex !important;
  flex-direction: column !important;
  gap: 100px; /* Universal 100px gap between each entry article */
  box-sizing: border-box;
  z-index:5 !important;	
  min-height:100dvh;	
}	

.entry-item {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 100px; /* Universal 100px gap between the blocks (images, audio, video) WITHIN the entry */
  padding: 0 !important; /* Forces 0 padding */
  box-sizing: border-box;
}

.entry-block {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 0px;
  padding: 0 !important;
  box-sizing: border-box;
	
	/* GPU acceleration */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;


  /* Prevent CSS transitions from fighting GSAP tick frames */
  transition: none !important;
}


/* ==========================================
   REPEATER LAYOUTS (Images & Tracks)
   ========================================== */

/* 1. Image Repeater Container */
.entry-gallery {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 100px; /* Treats each repeated image block as its own entry */
  padding: 0 !important;
  box-sizing: border-box;
}


.entry-gallery,
.entry-documents-container {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 100px;
  padding: 0 !important; /* Fixed: was -.5em */
  box-sizing: border-box;
}

.document-entry-link,
.entry-meta-info a {
  color: var(--primary-color);
  text-decoration: underline !important;
  text-underline-offset: 1px;       /* Adds the padding below the text */
  text-decoration-thickness: 1px;   /* Sets the line weight */
  border-bottom: none !important;   /* Clear the full-width border */
}

/* 2. Track Repeater Container (Higher Specificity) */
.trackSummary.entry-block {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 100px !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Fallback: Forces space directly on the injected track items */
.trackSummary .mItem:not(:last-child) {
  margin-bottom: 100px !important;
}


/* ------------------------------------------
   3. MEDIA & EXPANDABLE IMAGES/VIDEOS
------------------------------------------ */
.expandable-media,
.gallery-item img,
.entry-video video,
.mixcloud-cover-line .mix-image {
  width: 20% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover;
  cursor: pointer;
}

/* Expands media to 100vw across screen bounds on click */
.expandable-media.expanded,
.gallery-item img.expanded,
.entry-video video.expanded,
.mixcloud-cover-line .mix-image.expanded {
  width: 100% !important;
  max-width: 100% !important;
  position: relative;
  z-index: 10;
}

.media-caption,
.media-size {
  display: block;
  width: 100%;
}

.media-size {
  padding:0em !important;		
  opacity: 1;
}

/* ------------------------------------------
   4. LOCAL MP3 TRACK PLAYER STACK
------------------------------------------ */
.trackSummary {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.trackSummary .mItem {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 0px;
  padding: 0px 0;
  border: none !important;
}

.trackSummary .mItem > span {
  width: 100% !important;
  display: block;
  font-size: var(--primary-font-size) !important;
}

.summary-timer {
  width: 100% !important;
  text-align: left !important;
  opacity: 1;
}

.summary-unmute-btn {
  width: fit-content;
  cursor: pointer;
  padding: 0;
  border: none;
  background: transparent;
}

/* --- Local MP3 Progress Bar (Hidden unless track is .active) --- */
.local-progress-container {
  display: none; /* Hidden by default */
  width: 40% !important;
  padding-top:1em;
  padding-bottom:1em;	
  margin-top: .5em;    
  margin-bottom: .5em;	
  height: var(--local-player-height) !important;
  border:1px solid #111111;	
  background: white;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.mItem.active .local-progress-container {
  display: block; /* Shown only when active */
}

.local-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background-color: var(--primary-accent-color);
}

/* ------------------------------------------
   5. MIXCLOUD PLAYER STACK
------------------------------------------ */
.mixcloud-custom-player {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 0px;
}

.mixcloud-cover-line {
  width: 100%;
  display: block;
}

.mixcloud-cover-line .mix-image {
  height: auto;
  display: block;
  object-fit: cover;
}

.mix-meta {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.mix-title {
  display: block;
}

.mix-user {
  display: block;
  opacity: 1;
}

.time-display {
  display: block;
  width: 100%;
  opacity: 1;
}

.mixcloud-custom-player .playPause {
  cursor: pointer;
  width: fit-content;
  border: none;
  background: transparent;
}

/* --- Mixcloud Progress Bar --- */
.mixcloud-custom-player .progress-area {
  display: none; 
  width: 40% !important;		
  height: var(--local-player-height) !important;
  border:1px solid #111111;	
  background: white;
  position: relative;
  padding-top: 1em;     /* Restored padding to match local mp3 */
  padding-bottom: 1em;  
  margin-top: .5em;    
  margin-bottom: .5em;  	
  cursor: pointer;
  overflow: hidden;     /* Added to match local mp3 */
}

.mixcloud-custom-player.active .progress-area {
  display: block; 
}

.progress-area {
  width: 40% !important;
  height: var(--local-player-height) !important;
  background: white;
  position: relative;
  padding-top: 1em;     /* Restored padding */
  padding-bottom: 1em;  
  cursor: pointer;
  overflow: hidden;     /* Added to match local mp3 */
}

.progress-track {
  width: 100%;
  height: 100%;
  position: absolute;   /* Changed from relative to absolute */
  top: 0;               /* Added */
  left: 0;              /* Added */
}

.progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background-color: var(--primary-accent-color);
}

/* --- Controls Row Wrapper --- */
.player-controls-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-start;
  gap: 10px; /* Adjust this to add more/less space between timer and button */
  width: 100%;
}

.player-controls-row .summary-timer,
.player-controls-row .time-display {
  width: auto !important;
}


.dynamicTitle {
  display: inline-flex;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1;
}

.dynamicTitle-inner {
  display: inline-block;
  will-change: transform, opacity;
}

/* Default State */
#controlsToggle .icon-close { 
    display: none; 
}

/* Open State */
#controlsToggle.is-open .icon-ellipsis { 
    display: none; 
}
#controlsToggle.is-open .icon-close { 
    display: block; 
}

/* ==========================================
   6. MEDIA QUERIES
   ========================================== */
@media only screen and (max-width: 800px) {
  :root {
    --primary-font-size: 17px !important;
    --primary-line-height: 1.2em !important;
    --player-height: 80px;
	--primary-small-size: 12px !important;
	--primary-micro-size: 15px !important;  
    --local-player-height: 20px;
  }
	

#primeBounds {
  position: fixed;
  bottom: 4em;
  left: 10%;
  width: 80%;
  z-index: 9999;
  pointer-events: none;
}	
	
#player {
  width: 100%;
  height: 30px;
  position: relative;
  top: 0;
  left: 0;
  will-change: transform, height;
  overflow: hidden; 
  border-radius: 0px;
  cursor: pointer;
  
  /* --- NEW: Force Hardware Acceleration --- */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
}	
	
.expandable-media,
.gallery-item img,
.entry-video video,
.mixcloud-cover-line .mix-image {
  width: 30% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover;
  cursor: pointer;
}	
	
.entries-container {
  width: 95vw !important;
  max-width: 95vw !important;
  margin: 0 auto !important;
  margin-left: 2.5vw !important;	
  padding: 0 !important;	
  display: flex !important;
  flex-direction: column !important;
  gap: 100px; /* Universal 100px gap between each entry article */
  box-sizing: border-box;
}	
	
	
.local-progress-container {
  display: none; /* Hidden by default */
  width: 70% !important;
  padding-top:1em;
  padding-bottom:1em;	
  margin-top: .5em;    
  border:1px solid #111111;		
  margin-bottom: .5em;	
  height: var(--local-player-height) !important;
  background: white !important;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}	
	
.mixcloud-custom-player .progress-area {
  display: none; 
  width: 70% !important;		
  height: var(--local-player-height) !important;
  border:1px solid #111111;	
  background: white;
  position: relative;
  padding-top: 1em;     /* Restored padding to match local mp3 */
  padding-bottom: 1em;  
  margin-top: .5em;    
  margin-bottom: .5em;  	
  cursor: pointer;
  overflow: hidden;     /* Added to match local mp3 */
}	
	
.progress-area {
  width: 70% !important;
  height: var(--local-player-height) !important;
  border:1px solid #111111;	
  background: white;
  position: relative;
  padding-top: 1em;     /* Restored padding */
  padding-bottom: 1em;  
  cursor: pointer;
  overflow: hidden;     /* Added to match local mp3 */
}
	
	

  h1, h2 { 
    font-family: "FT2";	
    font-size: var(--primary-font-size) !important;	
    line-height: var(--primary-line-height) !important;
  }
	
	.tinyType {font-size: var(--primary-small-size) !important;	}	
	.microType {font-size: var(--primary-micro-size) !important;	}	
	
}