@font-face {
  font-family: "Annie";
  src: url("fonts/CarmeRegular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.work-nav button {
  background: none;
  border: none;
  font-family: "Annie", serif;
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--text-main);
  transition:
    color 0.6s ease,
    background-color 0.6s ease;
  opacity: 0.6;
  cursor: pointer;
}

.work-nav button:hover {
  opacity: 1;
}

.work-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 150px 40px 120px;
  font-family: "Annie", serif;
}

.work-view {
  display: flex;
  justify-content: center;
  margin-bottom: 110px;
  margin-top: 10px;
}

.work-view img {
  height: 80vh;
  width: auto;
  max-width: none;
}

.work-info {
  max-width: 520px;
  margin: 0 auto;
  text-align: left;
  font-family: "Annie", serif;
}

.work-nav {
  margin-top: 100px;
  display: flex;
  justify-content: space-between;
}

.work-info h1 {
  font-family: "Annie", serif;
  font-weight: normal;
  text-align: center;
  color: var(--text-main);
  transition: color 0.6s ease;
}

.work-text {
  display: block;
  font-family: "Annie", serif;
  margin-top: 28px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-soft);
  transition: color 0.6s ease;
  white-space: pre-line;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.work-meta {
  text-align: center;
  margin-top: 28px;
}

@media (max-width: 1100px) {
  .work-page {
    padding: 140px 20px 0;
    touch-action: pan-y;
  }

  .work-view {
    overflow: hidden;
    position: relative;
  }

  .work-content {
    transition:
      transform 0.6s ease,
      opacity 0.6s ease;
  }

  .work-exit-left {
    transform: translateX(-40px);
    opacity: 0;
  }

  .work-exit-right {
    transform: translateX(40px);
    opacity: 0;
  }

  .work-enter {
    transform: translateX(0);
    opacity: 1;
  }

  .work-view img {
    width: 100%;
    height: auto;
    max-height: 70vh;
  }

  .work-info {
    max-width: 100%;
    text-align: left;
  }

  .work-text {
    font-size: 13px;
    line-height: 1.8;
  }

  .work-meta {
    font-size: 12px;
    opacity: 0.7;
    transition: color 0.6s ease;
  }

  .work-nav {
    margin-top: 60px;
    gap: 40px;
  }

  .work-nav button {
    font-size: 12px;
    margin-bottom: 100px;
  }
}