/* RESET */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}



p { 
  font-family: "source-code-pro", monospace;
font-weight: 400;
font-style: normal;
}


h1, h2, h3, p {
  margin: 10px;
}


/* homepage */ 

.splash {
  position: relative;
  height: 350vh;
}

.splash-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.splash-img,
.splash-img img {
  width: 100%;
  height: 100%;
}

.splash-img img {
  display: block;
  object-fit: cover;
}

.splash-text { 
  position: absolute;
  top: 70%;
  left: 5%;
  transform: translateY(-50%);
  opacity: 0;
  color: whitesmoke;
  text-align: left;
  font-size: large;
  background: #47BEE7;
padding: 20px;
max-width: 700px;
}

.splash-text p:not(:last-child) {
  margin-bottom: 20px;
}

.hero-img {
  transition: opacity 0.2s linear;
}

.green-flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #63ff00;
  opacity: 0;
}

.green-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #4327B9;
  font-family: "ellograph-cf", monospace;
  text-align: center;
  font-size: xx-large;
}

.tunnel-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.tunnel-img,
.tunnel-img img {
  width: 100%;
  height: 100%;
}

.tunnel-img img {
  object-fit: cover;
  display: block;
}


.tunnel-text {
  position: absolute;
  top: 30%;                 
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: whitesmoke;
  font-size: xx-large;
  font-family: "ellograph-cf", monospace;
}

.circle-row {
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translateX(-50%);
  
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 15px;
}

.green-circle {
  width: 125px;
  height: 125px;
  background: #63ff00;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  max-width: 60%;
  object-fit: contain;
  height: auto;
}

.logo-environment { 
  max-width: 70%;
  object-fit: contain;
  height: auto;
  justify-content: center;
  align-items: center;  
}

.logo-human-connection { 

  max-width: 70%;
  object-fit: contain;
  height: auto;
  justify-content: center;
  align-items: center;  
  }

.circle-row {
  gap: 5%;
}

.page-head { 
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  color: #4327B9;
  font-size: xx-large;
}

/* story pages */ 

.menu-button {
  background: none;
  border: none;
  cursor: pointer;
}

.menu-button span {
  display: block;
  width: 30px;
  height: 3px;
  background-color: white;
  margin: 5px 0;
  border-radius: 0.5px;
}

.menu-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
} 

.site-header {
  background-color: #4327B9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-sizing: border-box;
}

.site-title {
  color: white;
  text-decoration: none;
  font-family: "ellograph-cf", monospace;
  font-size: medium;
}

.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  z-index: 1500;
  transition: opacity 0.3s ease;
}



.nav-overlay.open {
  opacity: 1;
  pointer-events: auto;
}


.side-nav {
  position: absolute;
  top: 0;
  right: -65%;
  width: 65%;
  height: 100%;
  background-color: #4327B9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  transition: right 0.5s ease;
  align-items: flex-start;
  padding-left: 120px;
}

.nav-overlay.open .side-nav {
  right: 0;
}

.offscreen-nav-link {
  color: #63ff00;
  text-decoration: none;
  font-family: "ellograph-cf", monospace;
  font-size: xx-large;
  margin: 20px 0;
  text-align: center;
}

/* page styling*/ 

.story-page, .home{
  background-color: #4327B9;
}


.story-hero {
  position: relative;
  height: 125vh;
}

.page-still {
  position: sticky;
  top: 60px; /* nav height */
  height: calc(100vh - 60px);
  overflow: hidden;
}

.page-still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-pull-quote {
  position: absolute;
  left: 5%;
  bottom: 15%;
  max-width: 700px;
  padding: 30px;
  background: #47BEE7;
  color: whitesmoke;
  font-family: "source-code-pro", monospace;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.page-pull-quote.visible {
  opacity: 1;
  transform: translateY(0);
}

.page-overview {
  max-width: 700px;
  margin: 60px auto;
  padding: 30px;

  background-color: #4327B9;
  color: #63ff00;
  font-family: "source-code-pro", monospace;
  font-size: x-large;
  text-align: left;
}

.page-overview p {
  line-height: 1.6;
}

.page-overview p:not(:last-child) {
  margin-bottom: 20px;
}

.page-video {
  max-width: 90%;
  min-height: 500px;
  margin-top: 40px;
  margin-bottom: 40px;
  margin: 40px auto; 
}

.page-video {
  max-width: 900px;
  margin: 60px auto;
}

.page-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  display: block;
   border-radius: 12px;
}

.headline { 
  font-family: "ellograph-cf", monospace;
  color:#63ff00;
  text-align: center;
  font-size: xx-large;
}

.about-overview { 
  line-height: 1.6;
    font-family: "source-code-pro", monospace; 
    max-width: 700px;
  padding: 30px;
  text-align: left;
  color: whitesmoke;
  font-size: x-large;
}

.video-overview {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

/* Make each section take half the width */
.about-overview,
.page-video {
  flex: 1;
}

/* Make iframe responsive */
.page-video iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.about-overview p:not(:last-child) {
  margin-bottom: 20px;
}

.team-section-head { 
   font-family: "ellograph-cf", monospace;
  color:#63ff00;
  text-align: center;
  font-size: xx-large;
}

.team-member {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}

.member-info {
  flex: 1;
}

.headshot img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  object-position: center;
  margin-left: 20px;
}

.headshot img.elaine-headshot { 
  object-position: 50% 15%;
}

.headshot img.kg-headshot { 
  object-position: 50% 25%;
}

.headshot img.madeleine-headshot { 
  object-position: 50% 0%;
}

.headshot img.ben-headshot { 
  object-position: 50% 20%;
}

.headshot img.jeffrey-headshot { 
  object-position: 50% 10%;
}

.headshot img.aaliyah-headshot { 
  object-position: 50% 15%;
}

.headshot img.claire-headshot { 
  object-position: 50% 20%;
}

.headshot img.maeson-headshot { 
  object-position: 50% 20%;
}

.headshot img.caroline-headshot { 
  object-position: 50% 35%;
}

.headshot img.morgan-headshot { 
  object-position: 50% 20%;
}

.headshot img.jess-headshot { 
  object-position: 80%;
}
.name { 
  font-family: "ellograph-cf", monospace;
  color:#63ff00;
  text-align: left;
  font: large;
}

.title { 
  font-family: "ellograph-cf", monospace;
  color:#63ff00;
  text-align: left;
  font-size: medium;

}

.bio { 
  font-family: "source-code-pro", monospace; 
  text-decoration: italic;
  color: whitesmoke;
  text-align: left;
  font-size: medium;
}

.home .menu-button {
  display: none;
}


/* adjustments for mobile */

@media (max-width: 768px) {


  html,
body {
  overflow-x: hidden;
}

.about-overview {
  max-width: 700px;
  margin: 0 auto;
}

 .video-overview {
    flex-direction: column;
  }

* {
  box-sizing: border-box;
}

.splash {
   display: none !important;
  }

  .splash-inner {
    position: relative;
    min-height: 200vh;
    overflow: visible;
  }

  .green-flash {
    position: absolute;
    top: 100vh;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 1 !important;
    background: #63ff00;
    z-index: 10;
  }

  .green-text {
    position: absolute;
    z-index: 11;
  }


  .splash-text {
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    font-size: 0.9rem;
  }

  .tunnel-section {
    height: 100svh;
    overflow:visible;
    
  }

   .circle-row {
    flex-wrap: wrap;
    width: 70%;
    gap: 28px;
    position: absolute;
    top: 42%;
  }

  .green-circle {
    width: 70px;
    height: 70px;
    display: flex;
   align-items: center;
    justify-content: center;
  }

    .side-nav {
    width: 100%;
    right: -100%; 
    padding: 30px;
  }

  .nav-overlay.open .side-nav {
    right: 0;
  }

  .offscreen-nav-link {
    font-size: 2rem; 
    margin: 15px 0;
    text-align: center;
  }

  .side-nav {
    align-items: center; 
  }

 .story-hero {
    height: 100vh;
  }

  .page-still {
    height: calc(100vh - 60px);
  }

  .page-still img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
 .page-pull-quote {
    left: 50%;
    transform: translateX(-50%) translateY(40px);
    text-align: center;
    width: 85%;
  }

  .page-pull-quote.visible {
    transform: translateX(-50%) translateY(0);
  }

  .story-hero {
  position: relative;
  height: 125vh;
}
.story-hero {
  position: relative;
  height: 125vh;
}
 .page-still img.environment-still { 
  object-position: 4% center;
    width: 100%;
  height: 100%;
  object-fit: cover;
 }

 .page-still img.human-connection-still { 
  object-position: 4% center;
  width: 100%;
  height: 100%;
  object-fit: cover;
 }

   .team-member {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  
  .headshot img {
     margin-left: 5px;
     margin-right: 5px;

  }
   
    .page-video {
    width: 90%;
    margin: 40px auto;
  }

  .page-video iframe {
    border-radius: 8px;
  }
  
}