:root {
  --glass-bg-color: 255, 255, 255; 
  --glass-opacity: 0.4; 
  --glass-blur: 10px; 
  --glass-radius: 8px; 
}

* {
  box-sizing: border-box;
  outline: none;
}

html,
body {
  font-family: var(--main-font, "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: 19px;
  height: 100%;
  margin: 0;
  padding: 0;
}

p,
h1,
h2 {
  padding: 0 1rem;
}

body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.post-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
}

.post-container .post {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 20vw; 
  height: 35vh; 
}

.post-container .post .inner {
  pointer-events: auto;
  display: inline-block;
  padding: 0;
  position: relative;
  z-index: 2;
  background-color: #fff;
}

.post-container .post img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  background: #111;
  display: block;
}


#site-title {
  position: fixed;
  top: 2rem;
  left: 2rem;
  z-index: 9999;
  display: inline-block;
  margin: 0;
  
  font-family: var(--main-font, "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: clamp(1.6rem, 1.9vw, 2.1rem); 
  font-weight: 300; 
  letter-spacing: 0.02em; 
  line-height: 1;
  padding: 0 var(--text-box-px, 15px); 
  background-color: transparent; 
  background-image: linear-gradient(#ffffff, #ffffff); 
  background-size: 100% var(--text-box-py, 75%); 
  background-position: center; 
  background-repeat: no-repeat;
  color: #000000;
  border: none; 
  
  opacity: 1;
  transition: opacity 0.4s ease;
}

#site-title img {
  max-height: 2.5rem; 
  width: auto;
  display: block;
}

#site-title.is-hidden {
  opacity: 0;
  pointer-events: none;
}

#contact-section,
#contact-btn { 
  position: fixed; 
  bottom: 3rem; 
  left: 50%; 
  transform: translateX(-50%); 
  display: inline-block;
  z-index: 9999; 
  opacity: 0; 
  pointer-events: none; 
  transition: opacity 0.4s ease, transform 0.2s ease; 
  
  text-decoration: none;
  font-family: var(--main-font, "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 var(--text-box-px, 15px); 
  background-color: transparent; 
  background-image: linear-gradient(#ffffff, #ffffff); 
  background-size: 100% var(--text-box-py, 75%); 
  background-position: center; 
  background-repeat: no-repeat;
  color: #000000;
  border: none; 
}

#contact-section.is-visible {
  opacity: 1;
  pointer-events: auto;
}

#contact-section:hover {
  transform: translateX(-50%) scale(1.1); 
}

.info-tab {
  padding: 0.7rem 1rem;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  background: #ffffff; 
  color: #000000; 

  font-family: var(--main-font, "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.02em;

  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: translateY(0);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.post-container .post:hover .info-tab {
  opacity: 1;
  transform: translateY(10px);
}

.post-container .post .inner:hover .info-tab {
  transform: translateY(calc(100%));
}


#global-audio-btn { 
  position: fixed; 
  top: 2rem; 
  left: 50%; 
  transform: translateX(-50%); 
  display: inline-block;
  z-index: 9999; 
  
  font-family: var(--main-font, "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: 1rem; 
  font-weight: 500; 
  letter-spacing: 0.1em; 
  padding: 0 var(--text-box-px, 15px);
  background-color: transparent; 
  background-image: linear-gradient(#ffffff, #ffffff); 
  background-size: 100% var(--text-box-py, 75%); 
  background-position: center; 
  background-repeat: no-repeat;
  color: #000000;
  border: none; 
  
  cursor: pointer; 
  transition: opacity 0.3s ease; 
}

#global-audio-btn:hover { 
  opacity: 0.6; 
}

.play-btn {
  background: none;
  border: none;
  color: #000000;
  font-size: 1rem; 
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s ease;
}

.play-btn:hover {
  transform: scale(1.2); 
}

.desc-panel {
  position: absolute;
  top: 0;
  height: auto;
  min-height: 100%;
  width: var(--desc-panel-width, 18vw); 

  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  padding: 1.5rem 0; 

  font-family: var(--main-font, "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: var(--desc-font-size, 0.9rem);
  line-height: 1.6; 
  color: #111;

  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition-property: opacity;
  transition-duration: var(--side-text-fade-out, 0.5s);
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  overflow: visible; 
}

.desc-panel span {
  color: #000000;
  

  padding: 0 var(--text-box-px, 15px); 
  
  display: inline; 

  box-decoration-break: clone;
  box-shadow: none; 
  white-space: normal; 


  background-color: transparent; 
  background-image: linear-gradient(#ffffff, #ffffff); 
  background-size: 100% var(--text-box-py, 100%); 
  background-position: center; 
  background-repeat: no-repeat;
}

.img-link-wrapper {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  cursor: pointer;
  transition: opacity 0.3s ease;
}


.post[data-side="left"] .desc-panel {
  left: calc(100% + 15px); 
  text-align: left !important; 
}
.post[data-side="left"].show-desc .desc-panel {
  opacity: 1;
  transition-duration: var(--side-text-fade-in, 0.5s);
}


.post[data-side="right"] .desc-panel {
  right: calc(100% + 15px);
  text-align: right !important;
  padding-right: var(--text-box-px, 15px);
  clip-path: inset(-100% 0 -100% -100%); 
}
.post[data-side="right"] .desc-panel span {
  padding-right: 0 !important; 
  box-shadow: 20px 0 0 var(--desc-shadow-height, 0px) #ffffff !important; 
}
.post[data-side="right"].show-desc .desc-panel {
  opacity: 1;
  transition-duration: var(--side-text-fade-in, 0.5s);
}