/* ================= GLOBAL STYLES ================= */

html, body {
  margin: 0;
  padding: 0;
  background: #1a1a1a;
  color: white;
  font-family: 'Unbounded', sans-serif;
  cursor: none;
}

* {
  cursor: none !important;
}

/* ================= NAV ================= */

.top-left-title {
  position: fixed;
  top: 20px;
  left: 20px;
  font-size: 16px;
  font-style: italic;
  display: flex;
  gap: 10px;
  z-index: 3000;
}

.top-left-title a {
  color: white;
  text-decoration: none;
}

.top-left-title a:hover {
  color: white;
}

/* ================= SELECTION ================= */

::selection {
  background: white;
  color: white;
}

/* ================= CURSOR ================= */

.cursor {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #39ff14;
  box-shadow: 0 0 10px #39ff14, 0 0 20px #39ff14;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.nav-hover .cursor {
  background: #b56cff;
  box-shadow: 0 0 12px #b56cff, 0 0 24px #b56cff;
}

/* ================= PAGES ================= */

.wrapper {
  max-width: 1100px;
  padding: 110px 40px;
}

.section {
  margin-bottom: 80px;
}

.section-title {
  font-size: 22px;
  opacity: 1;
  text-transform: uppercase;
  margin-bottom: 25px;
}

.list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.name {
  font-size: 56px;
  font-weight: 300;
  line-height: 1;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin: 0 4px;
  transform: translateY(-8px);
}

.dot.winter { background: #a855f7; }
.dot.summer { background: #3a3430; }

.wrapper-about-text {
  max-width: 707px;        /* keeps text from stretching too wide */
  margin: 80px auto;       /* centers it vertically and horizontally */
  padding: 20px;           /* invisible frame around text */
  margin-left: 100px;
}

/* ================= ABOUT PAGE TEXT ================= */

/* Main About Text */
.wrapper-about-text .about.text {
  font-size: 22px;          /* <-- Adjust this for main paragraph size */
  font-weight: 300;         /* light and elegant */
  line-height: 1.4;         /* space between lines, adjust for readability */
  color: #f0f0f0;           /* bright and readable */
  opacity: 1;
}

.wrapper-about-text .about.text p {
  margin-bottom: 20px;      /* space between paragraphs */
}

/* Credit / Names */
.wrapper-about-text .about.credit {
  font-size: 14px;          /* <-- Adjust this for credit / names size */
  line-height: 1.6;
  color: #d0d0d0;           /* slightly dimmer than main text */
  margin-top: 20px;
}

.wrapper-about-text .about.credit p {
  margin-bottom: 10px;
}

/* Make only the names inside credits jump on hover */
.wrapper-about-text .about.credit a.ig {
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
}

.wrapper-about-text .about.credit a.ig:hover {
  transform: translateY(-4px) scale(1.05); /* lift + slight scale */
  color: #b56cff;
}

/* ================= MAIN PAGE ================= */

.container {
  display: flex;
  width: 100vw;
  height: 100vh;
}

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

.issue.left {
  padding-left: 30px;
}

.issue.right {
  padding-right: 90px;
}

.img-wrap {
  position: relative;
  max-width: 76%;
  margin-top: 40px; /* adjust spacing */
}

.img-wrap img {
  width: 100%;
  display: block;
}

.img-wrap .label {
  position: static;        /* label below image */
  font-size: 10px;         /* smaller text */
  margin-top: 4px;         /* space under image */
  text-align: right;       /* align right */
  color: white;
  font-weight: 400;
}
.issue.right .img-wrap .label {
  margin-right: 50px; /* moves it away from the right edge */
}

/* ================= CREDIT ================= */

.credit.vertical {
  position: fixed;
  right: 20px;
  bottom: 20px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 9px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.5px;
  z-index: 2000;
  transition: transform 0.2s ease, color 0.2s ease;
}

.credit.vertical:hover {
  transform: rotate(180deg) translateY(-6px);
  color: rgba(255,255,255,0.4);
}

/* ================= LINKS ================= */

/* Remove global jump from all links */
a {
  color: white;
  text-decoration: none;
  transition: color 0.2s ease; /* only color changes for other links */
}

/* Only make the names (class ig) jump */
a.ig {
  display: inline-block;                    /* needed for transform */
  transition: transform 0.3s ease, color 0.3s ease;
}

a.ig:hover {
  transform: translateY(-4px) scale(1.05); /* lift + slight scale */
  color: #b56cff;                           /* purplish accent */
}


/* ================= MOBILE ================= */
@media (max-width: 768px) {
  /* Stack issues vertically */
  .container {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: auto;
  padding-top: 90px;
 
  }

.issue {
  display: flex;
  justify-content: center;
  width: 100%;
}

  .img-wrap {
    max-width: 70%;       /* smaller images */
    margin-top: 10px;
  }

  .img-wrap .label {
    text-align: right;
    font-size: 10px;
  }

  /* Keep top-left-title in a single line */
  .top-left-title {
    flex-wrap: nowrap;
    font-size: 18px;
  }

  /* About text adjustments */
   .wrapper-about-text .about.text {
    font-size: 14px;
    line-height: 1.4;
  }

  .wrapper-about-text .about.credit p {
    font-size: 12px;
  }

  .name {
    font-size: 12px;
  }

   /* Poppyseeds Artist page */
    .poppyseeds .wrapper {
    padding: 80px 18px 60px;
    gap: 60px;
  }

  .poppyseeds .section-title {
    font-size: 11px;
    letter-spacing: 0.25em;
    margin-bottom: 18px;
  }

  .poppyseeds .list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .poppyseeds .name {
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: 0.08em;
  }

  /* Vertical credit at bottom right */
  .credit.vertical {
    right: 10px;
    bottom: 10px;
    font-size: 8px;
    transform: rotate(180deg);
  }
}