body {
  margin: 0;
  height: 100vh;
  background: linear-gradient(to bottom, #f5f5f5, #dbe4e4);
  font-family: 'FoundryGridnik', sans-serif;
  overflow: hidden;
  position: relative;
  color: rgb(119, 112, 33);
}

.site-title {
  position: absolute;
  top: 1.5rem;
  left: 2rem;
  font-size: 5rem;
  letter-spacing: 0.03em;
  color: #222;
  z-index: 10;
  line-height: 1.4;
}

.flying-container {
  position: absolute;
  text-align: center;
  transform: translate(-50%, -50%);
}

.label-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px; /* expands clickable area */
  cursor: pointer;
}

.flying-object {
  width: 270px;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 1;
}

.label-wrapper:hover .flying-object {
  transform: scale(1.1);
}

.footnote {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  color: #111;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  text-align: center;
  line-height: 1.2;
  color: rgb(119, 112, 33);
}

.sub-label {
  display: block;
  font-size: 0.7rem;
  color: rgb(119, 112, 33);
  margin-top: 2px;
  letter-spacing: 0.03em;
}

.label-wrapper:hover .footnote {
  opacity: 1;
}

.path1 { animation: move1 150s linear infinite; }
.path2 { animation: move2 170s linear infinite; }
.path3 { animation: move3 120s linear infinite; }
.path4 { animation: move4 140s linear infinite; }
.path5 { animation: move5 160s linear infinite; }
.path6 { animation: move6 180s linear infinite; }


@keyframes move1 {
  0%   { top: 12%; left: 12%; }
  25%  { top: 88%; left: 95%; }
  50%  { top: 78%; left: 92%; }
  75%  { top: 32%; left: 22%; }
  100% { top: 10%; left: 15%; }

}  
@keyframes move2 {
  0% { top: 82%; left: 22%; }
  25% { top: 92%; left: 88%; }
  50% { top: 22%; left: 62%; }
  75% { top: 52%; left: 22%; }
  100% { top: 72%; left: 22%; }
}
@keyframes move3 {
  0% { top: 15%; left: 82%; }
  25% { top: 32%; left: 10%; }
  50% { top: 72%; left: 42%; }
  75% { top: 32%; left: 82%; }
  100% { top: 12%; left: 82%; }
}
@keyframes move4 {
  0% { top: 62%; left: 72%; }
  25% { top: 42%; left: 12%; }
  50% { top: 22%; left: 82%; }
  75% { top: 52%; left: 62%; }
  100% { top: 62%; left: 72%; }
}
@keyframes move5 {
  0% { top: 32%; left: 52%; }
  25% { top: 72%; left: 12%; }
  50% { top: 42%; left: 88%; }
  75% { top: 22%; left: 22%; }
  100% { top: 32%; left: 52%; }
}
@keyframes move6 {
  0% { top: 22%; left: 32%; }
  25% { top: 88%; left: 52%; }
  50% { top: 42%; left: 88%; }
  75% { top: 12%; left: 62%; }
  100% { top: 22%; left: 32%; }
}

@media (max-width: 768px) {
  .label-wrapper:hover .flying-object { transform: none; }
  .flying-object { width: clamp(180px, 22vmin, 260px); } /* a bit smaller on mobile */
}


.page-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  transition: opacity 1.2s ease;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  overflow-y: auto;
}
.page-layer.visible {
  pointer-events: auto;
  opacity: 1;
}


.visible {
  opacity: 1;
  pointer-events: auto;
  z-index: 5;
}

.hidden {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  color: rgb(119, 112, 33);
}

.grounds-path1 { animation: drift1 600s linear infinite; }
.grounds-path2 { animation: drift2 720s linear infinite; }

@keyframes drift1 {
  0%   { top: 10%; left: 15%; }
  100% { top: 12%; left: 18%; }
}

@keyframes drift2 {
  0%   { top: 60%; left: 70%; }
  100% { top: 63%; left: 66%; }
}

.text-marker {
  position: absolute;
  font-size: 1.4rem;
  font-weight: bold;
  color: rgb(119, 112, 33);
  cursor: pointer;
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, color 0.3s ease;
  z-index: 10;
 
}

.text-marker:hover {
  transform: scale(1.1) translate(-50%, -50%);
  color: rgb(119, 112, 33);
}

/* Make homepage visible but transparent in background */
#homepage.hidden {
  opacity: 0.15;              /* fade out slightly */
  pointer-events: auto;       /* keep interactions if needed */
  z-index: 1;                 
  transition: opacity 1.2s ease;
}


@font-face {
  font-family: 'FoundryGridnik';
  src: url('../assets/fonts/PassengerSants/PassengerSans-Medium.otf') format('opentype');
  font-weight: 400;
  font-style: bold;
}

@font-face {
  font-family: 'FoundryGridnikLight';
  src: url('../assets/fonts/PassengerSants/PassengerSans-Extralight.otf') format('opentype');
  font-weight: 400;
  font-style: bold;
}

.artist-columns {
  color: inhertit;
  display: flex;
  justify-content: space-around;
  padding: 5rem 2rem;
  font-family: 'FoundryGridnik', sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  flex-wrap: wrap;
  pointer-events: auto; /* ensures internal clicks register */
}

#dreamers {
  pointer-events: auto; /* ensures outer container catches clicks */
}

.artist-columns .column {
  flex: 1;
  max-width: 300px;
  margin: 0 1rem;
}

.artist {
  margin-bottom: 1.2rem;
  line-height: 1.4;
}

.artist {
  transition: transform 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

.artist:hover {
  transform: scale(1.05);
}

.artist-bio {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 100;
  display: flex;
  flex-direction: row;
  padding: 2rem;
  box-sizing: border-box;
  overflow-y: auto;
  transition: opacity 0.5s ease;
}


.artist-bio.hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.bio-content {
  flex: 1;
  padding-right: 2rem;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 60%;
}

.bio-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bio-image img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  max-height: 80vh;
  object-fit: contain;
}

.bio-content p {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}


.journeys-markers {
  position: relative;
  width: 100%;
  height: 100%;
}

.journey-marker {
  position: absolute;
  font-size: 1.4rem;
  font-weight: bold;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 10;
  transition: opacity 0.3s ease;
}

.journey-marker:not([data-city="newdelhi"]) {
  opacity: 0.3;
  pointer-events: none;
}

.program-box {
  position: absolute;
  top: 12%;
  left: 15%;
  background: rgba(255,255,255,0.95);
  padding: 1.5rem;
  max-width: 300px;
  font-size: 1rem;
  line-height: 1.5;
  z-index: 20;
  border: 1px solid #ccc;
}

#grounds.page-layer {
  z-index: 4;
  font-family: 'FoundryGridnikLight', sans-serif;
}
#journeys.page-layer {
  z-index: 5;
}

#journeys {
  z-index: 5;
}

.calendar-grounds-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.marker {
  position: absolute;
  font-size: 1.2rem;
  font-weight: bold;
  color: #111;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  opacity: 0.2;
}

.site-logo {
  position: absolute;
  top: 3.5rem;
  left: 2rem;
  width: 1170px; /* adjust as needed */
  height: auto;
  z-index: 10;
}

.flying-faded {
  opacity: 0.3;
  transition: opacity 0.5s ease;
}

#homepage.homepage-faded {
  opacity: 0.15;
  pointer-events: auto;
  z-index: 1;
  transition: opacity 1.2s ease;
}


.city-program {
  padding: 3rem;
  max-width: 800px;
  margin: auto;
  font-size: 1rem;
  line-height: 1.6;
}


.partner-layout {
  display: flex;
  gap: 2rem;
}

/* Partner List */
.partner-list {
  width: 40%;
  list-style: none;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1.8;
}

.partner-list li {
  margin-bottom: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  transition: background 0.3s;
}

/* Partner Detail Info */
/* Layout container (ensure sticky can work) */
.partner-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  overflow: visible; /* important: don't clip sticky */
}

/* Left column: scrolls independently */
.partner-list {
  width: 40%;
  max-height: calc(100vh - 4rem);
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Right column: stays on screen, scrolls inside */
.partner-detail {
  width: 60%;
  font-size: 1rem;
  line-height: 1.6;
  padding-top: 0.5rem;
  position: sticky;
  top: 2rem; /* adjust to taste */
  align-self: start;
  max-height: calc(100vh - 4rem);
  overflow: auto;
}

/* Individual partner info blocks */
.partner-info {
  font-family: FoundryGridnikLight, sans-serif;
  opacity: 0;
  transition: opacity 1s ease;
  display: none;            /* start hidden */
  pointer-events: none;
  position: relative;       /* was absolute; keep them in flow so height is correct */
  will-change: opacity; 
}

.partner-info.visible {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* In case your JS uses .hidden elsewhere */
.hidden { display: none !important; }


.fireflyradio {
    font-weight: 400;           /* Optional: lighter font */
}

.person {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.person:hover {
  text-decoration: underline; /* optional hover feedback */
}

#team-bio-panel{
  position: fixed;
  top: 4rem;
  right: 2rem;
  width: min(500px, 40vw);
  max-height: calc(100vh - 6rem);
  overflow: auto;
  padding: 1rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  z-index: 1001;
}
#team-bio-panel[hidden]{ display: none; }

#team-bio-panel figure{
  display: flex;
  flex-direction: column;   /* image on top, text below */
  gap: 0.75rem;
  margin: 0;
}

#team-bio-panel img{
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

#team-bio-close{
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}

/* ECHOES: horizontal essay nav */
#echoes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.5rem; /* space between titles */
  flex-wrap: wrap; /* wrap if too long */
}

#echoes-list .essay-link {
  text-decoration: none;       /* no underline */
  color: inherit;              /* inherit normal text color */
  font-weight: 500;            /* slightly bolder */
  cursor: pointer;             /* pointer on hover */
  transition: color 0.2s ease; /* smooth color change */
}

#echoes-list .essay-link:hover {
  color: #555; /* subtle hover color */
}


@media (max-width: 768px) {
  /* Homepage flying objects: bigger tap targets */
  .label-wrapper { min-width: 44px; min-height: 44px; }

  /* Partners: stack list over detail */
  .partner-layout {
    flex-direction: column;
  }

  .partner-list {
    position: static !important;
    width: 100% !important;
    max-height: 33vh;           /* scroll list */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid #eee;
    padding-bottom: .5rem;
  }

  .partner-detail {
    position: static;           /* sticky often fails inside overflow on mobile */
    width: 100%;
    min-height: 40vh;           /* space for details */
  }

  .partner-detail .partner-info {
    position: relative;         /* no absolute stacking on small screens */
    inset: auto;
    opacity: 0;
    transition: opacity .35s ease;
  }
  .partner-detail .partner-info.visible { opacity: 1; }
  .partner-detail .partner-info.hidden { display: block !important; visibility: hidden; }

  /* Team bio panel: full-screen drawer */
  #team-bio-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    max-height: 100vh;
    padding: 1rem 1rem 2.5rem;
    background: #fff;
    overflow: auto;
  }
  #team-bio-panel figure {
    display: block !important;   /* vertical stack */
  }
  #team-bio-panel img {
    width: 100%;
    height: auto;
    max-height: 40vh;
    object-fit: cover;
    margin-bottom: 1rem;
  }

  /* Echoes: horizontal titles wrap, content below */
  #echoes-nav {
    justify-content: flex-start;
    gap: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem;
    border-bottom: 1px solid #eee;
  }
  #echoes-detail { margin-top: 1rem; }
}

.partner-info,
.essay-content,
.page-layer {
  transition: opacity 0.5s ease;
}


/* Dates under each city label — tiny, subtle, non-clickable */
#grounds .text-marker::after {
  content: attr(data-date);
  position: absolute;          /* position relative to the marker itself */
  left: 50%;
  transform: translateX(-50%);
  top: 100%;                   /* right below the city name */
  margin-top: 2px;
  white-space: nowrap;
  font-size: 0.65em;
  line-height: 1;
  opacity: 0.65;
  border-top: 1px solid rgba(255,255,255,0.35); /* subtle line */
  padding-top: 2px;
  pointer-events: none;        /* won’t block clicks on the marker */
  z-index: 1;
}

a {
 /* color: rgb(119, 112, 33); /* match main text color */
}


/* The inner playground where things can move safely */
#flying-stage {
  position: absolute;
  /* create a safe gutter around the viewport */
  inset: 10% 8% 12% 8%; /* top right bottom left */
  /* so children positioned absolutely use this box as reference */
  pointer-events: none; /* keeps clicks passing through unless you need them */
}

/* Make flying items children of the stage */
#flying-stage .flying-container {
  position: absolute;
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: auto; /* if labels need clicks/hover */
}

/* Keep size sensible on all screens */
.flying-object {
  width: clamp(260px, 26vmin, 380px);; /* shrink on small viewports */
  transition: transform 0.3s ease;
}

/* gentler hover so it doesn’t nudge out */
.label-wrapper:hover .flying-object { transform: scale(1.05); }

/* Optional: footnote closer to object to avoid hitting edges */
.footnote { top: 38px; }

/* default (keeps mobile/tablet safe) */
#flying-stage { inset: 10% 8% 12% 8%; }

/* on larger screens, more space so objects can be bigger without clipping */
@media (min-width: 1200px) {
  #flying-stage { inset: 7% 6% 9% 6%; }
}

.label-wrapper:hover .flying-object { transform: scale(1.07); }



/* default text color for all sections */
.page-layer { color: rgb(119, 112, 33) }

/* per-section colors */
#grounds { color: rgb(22, 77, 23); }          /* teal/green */
#dreamers { color: rgb(71, 60, 31) }         /* wine */
#orbits .orbits-content { color: rgba(118, 84, 45, 0.7) } /* indigo for the statement block */
#constellation { color: rgb(81, 90, 41) }    /* amber/brown */
#echoes .echoes-wrap { color: rgb(29, 44, 93) }    /* dark gray */
#journeys { color: rgb(90, 70, 52) }         /* purple (if you use it) */

/* make links follow the text color inside each section */
#grounds a, #dreamers a, #orbits a, #constellation a, #echoes a, #journeys a {
  color: currentColor;
  text-decoration-color: currentColor;
}

.corner-link {
  position: fixed;
  bottom: 20px;   /* distance from bottom */
  right: 20px;    /* distance from right */
  z-index: 1000;  /* stays on top of other content */
}

.corner-image {
  width: 60px;    /* adjust size */
  height: auto;
  cursor: pointer;
}


.inactive-person {
  opacity: 0.6;
  cursor: default;
  text-decoration: none;
}
.inactive-person:hover { text-decoration: none; }


.section-title {
  margin: 3rem 5rem 1rem 2rem;  /* top, right, bottom, left */
  text-align: left;
}