.screen--two {
  height: auto;
  /* border: 1px solid var(--muted); */
}

.hi {
  font-size: clamp(1.5rem, 2.5dvw, 2.5rem);
  transform: translate(9dvh, 5dvw);
  color: var(--muted);
  font-family: monospace;
  font-weight: 600;
}

.intro-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1rem;
  grid-template-rows: auto;
  align-items: start;
  justify-items: center;
  margin: 10dvh auto 0 auto;
  max-width: 95dvw;
  height: auto;
  /* border: 1px solid var(--muted); */
}

.portrait {
  max-width: 25dvw;
  filter: grayscale(100%);
  grid-column: 1 / 2;
  justify-self: center;
  will-change: transform;
}

.intro-text {
  grid-column: 2 / 3;
  align-self: start;
  font-size: clamp(1.5rem, 2.8dvw, 7.5rem);
  line-height: 1.5;
  color: var(--text);
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  letter-spacing: -4%;
  line-height: 1.3;
  transform: scale(0.99, 1.08);
}

.quotation-mark {
  font-size: clamp(2rem, 8dvw, 10rem);
  color: var(--text);
  margin-right: 0.5rem;
  grid-column: 3 / 4;
  font-family: monospace;
  align-self: center;
  font-family: "Instrument Sans", sans-serif;
  transform: scale(0.99, 1.2);
  padding-bottom: 13dvh;
}

.educ-cont.tup {
  border-right: 0.6px solid var(--muted-light);
}

.educ-cont.sti {
  border-left: 0.6px solid var(--muted-light);
}

.education {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  height: clamp(30rem, 60dvh, 80rem);
  width: 94dvw;
  will-change: width;
  margin: 25dvh auto 0 auto;
  /* border: 1px dashed red; */
}

.educ-cont {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  /* border: 1px solid var(--muted); */
  transition: all 0.3s ease;
  height: auto;

  .school {
    position: relative;
    display: block; /* Takes full width of the grid column */
    width: 100%;
    overflow: hidden;
  }

  .subtitle,
  .school,
  .subtext {
    margin: 0;
  }

  p {
    letter-spacing: -4%;
  }

  .default-text,
  .hover-text {
    display: block;
    width: 100%; /* Forces normal wrapping based on container width */
    transition:
      transform 0.5s ease,
      opacity 0.5s ease;
  }

  .default-text {
    position: relative;
    font-size: clamp(2rem, 5dvw, 8rem); /* Huge font for TUP/STI */
    line-height: 1;
  }

  .hover-text {
    position: absolute;
    left: 0;
    top: 0;
    font-size: clamp(1rem, 2dvw, 2rem); /* Smaller font to fit 3 lines */
    line-height: 1.1;
    opacity: 0;
    transform: translateY(
      2rem
    ); /* Use 2rem instead of 100% for cleaner multi-line sliding */
  }

  &:hover {
    background-color: var(--text);

    .default-text {
      position: absolute;
      opacity: 0;
      transform: translateY(-2rem);
    }

    .subtitle,
    .subtext {
      color: var(--g2);
    }

    .subtitle.c {
      color: var(--g3);
    }

    .location-txt,
    .pin {
      color: var(--g3);
    }

    .pin {
      fill: var(--g3);
    }

    .hover-text {
      line-height: 1.2;
      font-size: clamp(1.5rem, 4dvw, 6.5rem);
      color: var(--text2);
      position: relative;
      opacity: 1;
      transform: translateY(0);
    }

    .arrow-diag {
      transform: rotate(0deg) translate(0.2rem, -0.2rem);
      fill: var(--text2);
    }
  }

  .pin {
    height: clamp(1rem, 3.5dvh, 2rem);
    width: clamp(1rem, 3.5dvw, 2rem);
  }

  .arrow-diag {
    height: clamp(1rem, 4dvh, 2rem);
    width: clamp(1rem, 4dvw, 2rem);
  }

  .arrow-diag {
    transform: rotate(45deg);
    transition: all 0.3s ease;
  }

  .arrow-diag:active {
    transform: rotate(-45deg) translate(0.2rem, -0.2rem) scale(1.2);
  }
}

.subtitle {
  font-size: clamp(.8rem, 1.8dvw, 1.8rem);
  color: var(--muted-dark);
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

.school {
  font-size: clamp(1.2rem, 5.4dvw, 7rem);
  color: var(--text);
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

.subtext {
  font-size: clamp(.8rem, 1.8dvw, 1.8rem);
  color: var(--muted-light);
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

.ptexts {
  display: flex;
  flex-direction: column;
  height: auto;
  gap: 0;
  /* border: 1px solid var(--muted-light); */
}

.location-dir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-direction: row;
  /* border: 1px solid var(--muted-light); */
}

.kulungan {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  /* border: 1px solid var(--muted-light); */
}

.location-txt {
  font-size: clamp(.8rem, 1.8dvw, 1.8rem);
  color: var(--muted-dark);
  font-family: "Geist Mono", monospace;
  font-weight: 600;
  padding-left: 0.5rem;
}

.arrow-diag {
  align-self: flex-right;
  cursor: pointer;
}

@media (max-width: 900px) {
  .hi {
    transform: translate(4dvh, 10dvw);
  }

  .portrait,
  .intro-text {
    grid-column: 1 / 2;
  }

  .intro-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0;
    max-width: 95vw;
    height: auto;
    /* border: 1px solid var(--muted); */
  }

  .portrait {
    width: 100%;
    aspect-ratio: 16 / 9; 
    object-fit: cover; 
    object-position: center center; 
    
    max-width: none;
    min-width: 0;
    grid-row: 1 / 2;
    justify-self: center;
    align-self: start;
    margin-top: 0;
  }

  .portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
  }

  .intro-text {
    grid-row: 2 / 3;
    font-size: clamp(1rem, 6dvw, 5rem);
    line-height: 1.2;
    text-align: left;
    letter-spacing: -1px;
    margin-top: 5dvh;
  }

  .education {
    grid-template-columns: auto;
    margin: 10dvh auto 0 auto;
  }

  .educ-cont.tup {
    border-right: none;
    border-bottom: 0.6px solid var(--muted-light);
  }

  .educ-cont.sti {
    border-left: none;
    border-top: 0.6px solid var(--muted-light);
  }

  .quotation-mark {
    display: none;
  }
}