@import url("./styles-v17.css");

.archive-page {
  padding: 0 clamp(28px, 8vw, 126px) clamp(130px, 16vw, 230px);
}

.archive-heading {
  padding: clamp(90px, 13vh, 150px) 0 clamp(150px, 20vh, 230px);
}

.archive-heading h1 {
  font-size: clamp(2.35rem, 4.2vw, 4.2rem);
  margin: 0;
}

.archive-intro {
  color: rgba(47, 49, 43, 0.6);
  font-family: "Songti TC", "Noto Serif TC", "PingFang TC", serif;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  font-weight: 300;
  letter-spacing: 0.035em;
  line-height: 2.15;
  margin: clamp(38px, 5vw, 64px) 0 0 clamp(4px, 9vw, 132px);
}

.archive-collection {
  margin: 0 auto;
  max-width: 1320px;
}

.archive-year {
  position: relative;
}

.archive-year-label {
  color: rgba(47, 49, 43, 0.78);
  font-size: clamp(1.16rem, 1.25vw, 1.3rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  margin: 0;
}

.archive-year-copy h2 {
  font-family: "Songti TC", "Noto Serif TC", "PingFang TC", serif;
  font-size: clamp(1.65rem, 2.5vw, 2.65rem);
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin: 25px 0 0;
}

.archive-year-copy > p:last-child {
  color: rgba(47, 49, 43, 0.62);
  font-family: "Songti TC", "Noto Serif TC", "PingFang TC", serif;
  font-size: clamp(1rem, 1.2vw, 1.13rem);
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 2;
  margin: 25px 0 0;
}

.archive-year-image {
  margin: 0;
}

.archive-year-image img {
  display: block;
  height: auto;
  width: 100%;
}

.archive-year-2022 {
  display: grid;
  gap: clamp(48px, 8vw, 118px);
  grid-template-columns: minmax(220px, 0.72fr) minmax(300px, 1fr);
  margin-left: clamp(0px, 4vw, 70px);
  max-width: 1000px;
  padding-bottom: clamp(190px, 26vw, 350px);
}

.archive-year-2022 .archive-year-copy {
  align-self: center;
}

.archive-year-2022 .archive-year-image {
  max-width: 540px;
}

.archive-year-2023 {
  display: grid;
  grid-template-columns: minmax(80px, 0.28fr) minmax(440px, 1.5fr) minmax(260px, 0.78fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(38px, 6vw, 92px);
  padding-bottom: clamp(220px, 28vw, 390px);
}

.archive-year-2023 > .archive-year-label {
  grid-column: 1;
  grid-row: 1;
  padding-top: 8px;
  transform: translateX(18px);
  white-space: nowrap;
  writing-mode: horizontal-tb;
}

.archive-year-2023 .archive-year-image {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 88%;
}

.archive-year-2023 .archive-year-copy {
  align-self: end;
  grid-column: 3;
  grid-row: 2;
  padding-bottom: clamp(18px, 4vw, 62px);
}

.archive-year-2024 {
  margin: 0 auto;
  max-width: 1120px;
  padding-bottom: clamp(220px, 28vw, 390px);
}

.archive-year-2024 .archive-year-copy {
  margin: 0 0 clamp(46px, 6vw, 78px) clamp(24px, 8vw, 128px);
}

.archive-year-2024 .archive-year-image {
  margin-left: auto;
  width: min(88%, 980px);
}

/* A restrained lift for the 2024 photograph only; preserves its original color balance. */
.archive-year-2024 .archive-year-image img {
  filter: brightness(1.06);
}

.archive-year-2024-new-year {
  align-items: end;
  display: grid;
  gap: clamp(46px, 7vw, 108px);
  grid-template-columns: minmax(300px, 520px) minmax(230px, 0.7fr);
  margin-left: clamp(0px, 8vw, 122px);
  max-width: 930px;
  padding-bottom: clamp(210px, 27vw, 370px);
}

.archive-year-2024-new-year .archive-year-image {
  width: 100%;
}

.archive-year-2024-new-year .archive-year-copy {
  padding-bottom: clamp(0px, 2vw, 28px);
}

.archive-year-2025 {
  align-items: center;
  display: grid;
  gap: clamp(58px, 9vw, 142px);
  grid-template-columns: minmax(250px, 430px) minmax(240px, 0.7fr);
  margin-left: clamp(0px, 12vw, 184px);
  max-width: 900px;
  padding-bottom: clamp(250px, 32vw, 460px);
}

.archive-year-2025 .archive-year-image {
  width: 100%;
}

/* A very light softening for the 2025 photograph only: keep its pastel character,
   while easing the pink-purple saturation and contrast into the warm page tone. */
.archive-year-2025 .archive-year-image img {
  filter: saturate(0.94) contrast(0.97) sepia(0.025);
}

.archive-year-2025 .archive-year-copy {
  padding-top: clamp(12px, 2vw, 28px);
}

.archive-year-2025 .archive-year-reflection {
  margin-top: clamp(44px, 5vw, 66px) !important;
}

.archive-future-years {
  height: 0;
  overflow: hidden;
}

@media (max-width: 900px) {
  .inner-nav {
    gap: 22px;
  }

  .archive-year-2023 {
    grid-template-columns: 52px minmax(360px, 1.35fr) minmax(210px, 0.65fr);
  }
}

@media (max-width: 700px) {

  .inner-menu nav a {
    font-size: 0.86rem;
    letter-spacing: 0.08em;
  }

  .inner-menu nav a.is-current {
    color: rgba(47, 49, 43, 0.94);
  }

  .archive-page {
    padding: 0 20px 120px;
  }

  .archive-heading {
    padding: 92px 6px 142px;
  }

  .archive-heading h1 {
    font-size: 2.45rem;
  }

  .archive-intro {
    font-size: 1rem;
    line-height: 2.05;
    margin: 34px 0 0;
  }

  .archive-year-2022,
  .archive-year-2023,
  .archive-year-2024,
  .archive-year-2024-new-year,
  .archive-year-2025 {
    display: flex;
    flex-direction: column;
    gap: 38px;
    margin: 0;
    max-width: none;
    padding-bottom: 170px;
  }

  .archive-year-2022 .archive-year-copy {
    order: 1;
    padding: 0 6px;
  }

  .archive-year-2022 .archive-year-image {
    align-self: flex-end;
    max-width: 88%;
    order: 2;
  }

  .archive-year-2023 > .archive-year-label {
    padding: 0 6px;
    transform: none;
    writing-mode: horizontal-tb;
  }

  .archive-year-2023 .archive-year-image {
    margin-left: -20px;
    width: calc(100% + 40px);
  }

  .archive-year-2023 .archive-year-copy {
    padding: 2px 6px 0;
  }

  .archive-year-2024 .archive-year-copy {
    margin: 0;
    padding: 0 6px;
  }

  .archive-year-2024 .archive-year-image {
    margin: 0;
    width: 100%;
  }

  .archive-year-2024-new-year .archive-year-image {
    width: 88%;
  }

  .archive-year-2024-new-year .archive-year-copy {
    padding: 0 6px;
  }

  .archive-year-2025 .archive-year-image {
    align-self: flex-start;
    width: 82%;
  }

  .archive-year-2025 .archive-year-copy {
    padding: 0 6px;
  }

  .archive-year-copy h2 {
    font-size: 1.75rem;
    margin-top: 20px;
  }
}