/* 記事一覧だけで読み込む仮レイアウト。共通カード・フッターはstyle.cssを流用。 */
.people-archive {
  --archive-accent: #a4a8d4;
  --archive-latin: "Jost", "Avenir Next", sans-serif;
  /* 背景の仮値：目視確認後に範囲・濃度・粒度を調整。 */
  --archive-light-width: 86%;
  --archive-light-height: min(52svh, 28rem);
  --archive-light-opacity: 0.48;
  --archive-grain-opacity: 0.4;
  --archive-grain-size: 128px;
  --archive-light-mask: radial-gradient(
    ellipse 100% 100% at -8% -10%,
    #000 0%, rgb(0 0 0 / 88%) 30%,
    rgb(0 0 0 / 58%) 55%, rgb(0 0 0 / 12%) 82%, transparent 100%
  );
  position: relative;
  isolation: isolate;
}

/* 文書上端の背景のみ。スクロール追従やレイアウトへの影響は持たせない。 */
.people-archive::before,
.people-archive::after {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: var(--archive-light-width);
  height: var(--archive-light-height);
  -webkit-mask-image: var(--archive-light-mask);
  mask-image: var(--archive-light-mask);
  pointer-events: none;
  content: "";
}

.people-archive::before {
  /* 赤紫をマスクで消える手前へ移し、低彩度の色相が残る幅を確保。 */
  background: linear-gradient(
    125deg, #98a6b8 0%, #999bb7 16%,
    #b49caf 32%, #c5adbd 46%, #e5dce3 64%, #ffffff 90%
  );
  opacity: var(--archive-light-opacity);
}

/* CSS内の微細な単色ノイズ。光と同じマスクで白へ溶かす。 */
.people-archive::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
  background-size: var(--archive-grain-size) var(--archive-grain-size);
  filter: contrast(3);
  opacity: var(--archive-grain-opacity);
}

@media (max-width: 767px) {
  .people-archive {
    --archive-light-width: 90%;
    --archive-light-height: min(42svh, 20rem);
    --archive-light-opacity: 0.48;
  }
}

.archive {
  width: min(100% - clamp(4rem, 12vw, 10rem), 75rem);
  margin-inline: auto;
  padding-block: clamp(6rem, 10vw, 9rem) clamp(7rem, 12vw, 11rem);
}

.archive__heading {
  text-align: center;
}

.archive__title-break {
  display: none;
}

.archive__heading h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.archive__heading p {
  margin: 1.75rem 0 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 2;
  letter-spacing: 0.12em;
}

.archive-search-category {
  position: relative;
  isolation: isolate;
  width: 94%;
  margin: clamp(4rem, 7vw, 6rem) auto 0;
  padding: 1.75rem 2rem 1.5rem;
}

.archive-search {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: 60rem;
  margin: 0 auto;
}

.archive-search__question {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.125rem; /* ブラウザ確認後に調整 */
  line-height: 1.8;
  letter-spacing: 0.06em;
}

.archive-search__field {
  position: relative;
  flex: 1;
  min-width: 0;
  padding-left: 3.5rem; /* 羽ペン用の仮スペース */
}

/* 検索とCATEGORYを包む面。粒子と柔らかな輪郭は線下の面から引き継ぐ。 */
.archive-search-category::before {
  position: absolute;
  z-index: -1;
  inset: 10px 0;
  background-color: #f7f9fa;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.1'/%3E%3C/svg%3E"),
    linear-gradient(105deg, rgb(255 255 255 / 20%), transparent 35%, rgb(255 255 255 / 10%) 65%, transparent);
  background-size: 128px 128px, 100% 100%;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 3px, #000 calc(100% - 3px), transparent),
    linear-gradient(to bottom, transparent, #000 3px, #000 calc(100% - 3px), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 3px, #000 calc(100% - 3px), transparent),
    linear-gradient(to bottom, transparent, #000 3px, #000 calc(100% - 3px), transparent);
  mask-composite: intersect;
  pointer-events: none;
  content: "";
}

.archive-search-category::after {
  position: absolute;
  inset: 0;
  border-top: 1px solid rgb(164 168 212 / 40%);
  border-bottom: 1px solid rgb(164 168 212 / 40%);
  pointer-events: none;
  content: "";
}

/* 浅く非対称に湾曲させた仮の入力線。 */
.archive-search__field::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 7px;
  border-bottom: 1px solid var(--archive-accent);
  border-radius: 0 0 45% 30% / 0 0 70% 40%;
  content: "";
  pointer-events: none;
}

.archive-search input {
  width: 100%;
  min-width: 0;
  padding: 0.875rem 0.25rem;
  border: 0;
  border-radius: 0;
  color: var(--color-ink);
  background: transparent;
  font-family: sans-serif;
  font-size: 1rem;
  line-height: 1.8;
}

.archive-search__submit {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  width: 1.75rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
}

.archive-search__pen-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.archive-search__submit:focus-visible {
  outline: 1px solid var(--archive-accent);
  outline-offset: 4px;
}

.archive-search input:focus {
  outline: none;
  box-shadow: none;
}

.archive a {
  color: inherit;
  text-decoration: none;
}

.archive a:focus-visible {
  outline: 1px solid var(--archive-accent);
  outline-offset: 5px;
}

.archive a:hover {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.archive-category {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 2.25rem;
  margin-bottom: 1rem;
  font-family: sans-serif;
}

.archive-category h2 {
  margin: 0;
  font-family: var(--archive-latin);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.16em;
}

.archive-category ul,
.archive-index ul,
.archive-pagination ol {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.archive-category a {
  appearance: none;
  color: inherit;
  background: transparent;
  font-family: inherit;
  font-weight: inherit;
  text-align: inherit;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--archive-accent);
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1.8;
  letter-spacing: 0.08em;
}

.archive-category ul {
  gap: 0.5rem 0.75rem;
}

/* 選択の光はhover背景とは別の層で保持する。 */
.archive-category a::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    rgb(164 168 212 / 35%) 0%,
    rgb(164 168 212 / 20%) 30%,
    rgb(164 168 212 / 5%) 70%,
    rgb(164 168 212 / 0%) 100%
  );
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
  content: "";
}

.archive-category a[aria-current="page"]::before {
  opacity: 1;
}

.archive-category a:focus-visible {
  outline: 1px solid var(--archive-accent);
  outline-offset: 5px;
}

@media (prefers-reduced-motion: reduce) {
  .archive-category a::before {
    transition: none;
  }
}

.archive-category a:hover {
  text-decoration: none;
}

@media (min-width: 768px) and (hover: hover) {
  .archive-category a:hover {
    background-color: rgb(164 168 212 / 15%);
  }
}

/* 検索とカテゴリで列を共有し、問いかけの実幅に合わせて揃える。 */
@media (min-width: 768px) {
  .archive-search-category {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(2rem, 5vw, 5rem);
    max-width: 56.4rem;
    margin: clamp(4rem, 7vw, 6rem) auto 0;
  }

  .archive-search {
    display: contents;
  }

  .archive-category {
    grid-column: 2;
  }
}

.archive-index {
  margin-top: clamp(4rem, 7vw, 6rem);
}

.archive-index__title {
  position: relative;
  display: block;
  margin: 0;
  padding-left: 1.5rem;
  font-family: var(--archive-latin);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.12em;
}

.archive-index__description {
  margin: 0;
  font-family: sans-serif;
  font-size: 0.875rem;
  line-height: 2;
  letter-spacing: 0.08em;
}

.archive-index__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.25rem;
}

.archive-index:not(.is-index-open) .archive-index__heading {
  border-bottom: 1px solid rgb(43 43 43 / 22%);
}

.archive-index__toggle {
  display: grid;
  /* 記号移動前の列幅を残し、説明文・ALLの位置を維持する。 */
  grid-template-columns: minmax(0, 1fr) 0.65rem;
  align-items: center;
  gap: 0.375rem 1rem;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.archive-index__toggle:focus-visible {
  outline: 1px solid var(--archive-accent);
  outline-offset: 5px;
}

.archive-index__description {
  grid-column: 1 / -1;
}

.archive-index__chevron {
  position: absolute;
  top: calc(50% - 0.325rem);
  /* 45度回転した記号の外形もコンテンツ左端に収める。 */
  left: 0.135rem;
  width: 0.65rem;
  height: 0.65rem;
  border-right: 2px solid #a4a8d4;
  border-bottom: 2px solid #d5c3e8;
  transform: rotate(45deg);
  transition: transform 220ms ease;
}

.archive-index.is-index-open .archive-index__chevron {
  border-right: 2px solid #d5c3e8;
  border-bottom: 2px solid #a4a8d4;
  transform: rotate(-135deg);
}

.archive-index__all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  min-height: calc(clamp(2rem, 3.2vw, 2.75rem) * 1.2);
  font-family: var(--archive-latin);
  font-size: 0.8125rem;
  line-height: 1;
  letter-spacing: 0.16em;
}

.archive-index__all[aria-current="page"] {
  color: var(--archive-accent);
}

/* INDEXだけの一度きりの出現。JS未実行時は通常表示。 */
@media (prefers-reduced-motion: no-preference) {
  .archive-index.has-index-reveal:not(.is-index-revealed) .archive-index__heading,
  .archive-index.has-index-reveal:not(.is-index-revealed) .archive-index__years,
  .archive-index.has-index-reveal:not(.is-index-revealed) .archive-index__seasons {
    opacity: 0;
  }

  .archive-index.has-index-reveal.is-index-revealed .archive-index__heading {
    animation: archive-index-fade 550ms ease-out both;
  }

  .archive-index.has-index-reveal.is-index-revealed .archive-index__years {
    animation: archive-index-open 650ms ease-out 150ms backwards;
  }

  .archive-index.has-index-reveal.is-index-revealed .archive-index__seasons {
    animation: archive-index-fade 600ms ease-out 200ms both;
  }
}

@keyframes archive-index-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes archive-index-open {
  from {
    opacity: 0;
    clip-path: inset(-8px 100% -8px -8px);
  }
  to {
    opacity: 1;
    clip-path: inset(-8px -20px -8px -8px);
  }
}

.archive-index__body {
  display: grid;
  width: fit-content;
  max-width: 100%;
  margin-top: 1.25rem;
  grid-template-columns: minmax(0, max-content) 12rem;
  align-items: start;
  gap: clamp(2rem, 4vw, 4rem);
}

.archive-index__body[hidden] {
  display: none;
}

.archive-index__seasons {
  padding: 1.25rem 1rem;
  background: #f5f7f6;
  font-family: sans-serif;
  font-size: 0.75rem;
  line-height: 2;
  letter-spacing: 0.04em;
}

.archive-index__seasons h3 {
  font-size: 0.75rem;
}

.archive-index__seasons p {
  display: grid;
  margin: 0.75rem 0 0;
}

@media (min-width: 768px) {
  .archive-index__inner {
    display: inline-grid;
    width: fit-content;
    max-width: 100%;
    grid-template-columns: minmax(0, max-content);
  }

  .archive-index__heading,
  .archive-index__body {
    grid-column: 1;
    width: 100%;
    box-sizing: border-box;
  }

  .archive-index__heading {
    grid-row: 1;
  }

  .archive-index__body {
    grid-row: 2;
  }

  .archive-index__body[hidden] {
    display: grid;
    visibility: hidden;
    height: 0;
    margin-top: 0;
    overflow: hidden;
  }

  .archive-index__toggle {
    grid-template-columns: auto minmax(0, 1fr) 0.65rem;
    align-items: center;
    gap: 2rem;
    min-width: 0;
  }

  /* INDEXだけを右へ寄せ、説明文の開始位置と見出し全体の幅は維持。 */
  .archive-index__title {
    margin-right: -1.5rem;
  }

  .archive-index__all {
    justify-self: end;
  }

  .archive-index__description {
    grid-column: 2;
  }

  .archive-index__row {
    margin-right: -20px;
    padding-right: 20px;
  }
}

.archive-index__row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  align-items: baseline;
  gap: 2rem;
  padding-block: 1.75rem;
  border-top: 1px solid rgb(43 43 43 / 22%);
}

.archive-index__row:last-child {
  border-bottom: 1px solid rgb(43 43 43 / 22%);
}

.archive-index h3 {
  margin: 0;
  font-family: sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.archive-index h3 [aria-hidden] {
  margin-right: 1rem;
  color: var(--archive-accent);
}

.archive-index__year {
  font-family: var(--archive-latin);
  font-size: 1.5rem;
}

.archive-index ul {
  gap: 1rem clamp(1rem, 2.5vw, 2.5rem);
  font-family: sans-serif;
  font-size: 0.875rem;
  line-height: 2;
  letter-spacing: 0.08em;
}

.archive-articles {
  margin-top: clamp(4rem, 7vw, 6rem);
  scroll-margin-top: 2rem;
}

.people-archive .archive-articles {
  scroll-margin-top: 4rem;
}

@media (min-width: 768px) {
  .people-archive .archive-articles {
    scroll-margin-top: 7rem;
  }
}

.archive-articles__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--people-row-gap) var(--people-column-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.archive-articles__item {
  min-width: 0;
}

.archive-articles__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.archive .archive-articles__link:hover {
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .archive-articles__link:hover .person-card__description {
    color: #a4a8d4;
  }

  .archive-articles__link:hover .person-card__occupation {
    color: #a4a8d4;
  }
}

.archive .archive-articles__link:focus-visible {
  outline: 1px solid var(--archive-accent);
  outline-offset: 5px;
  text-decoration: none;
}

.archive-articles .person-card__photo > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* TOPと同じ10px・800msの出現を外側のliへ適用。 */
@media (prefers-reduced-motion: no-preference) {
  .archive-search-category.has-archive-reveal {
    opacity: 0;
    transition: opacity 700ms ease;
  }

  .archive-articles__item.has-archive-reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 800ms ease, transform 800ms ease;
  }

  .archive-search-category.has-archive-reveal.is-archive-revealed,
  .archive-articles__item.has-archive-reveal.is-archive-revealed {
    opacity: 1;
    transform: none;
  }
}

/* 列数に応じて各段の遅延をリセットする。 */
@media (min-width: 1001px) {
  .archive-articles__item.has-archive-reveal:nth-child(3n + 2) {
    transition-delay: 100ms;
  }

  .archive-articles__item.has-archive-reveal:nth-child(3n) {
    transition-delay: 200ms;
  }
}

@media (min-width: 768px) and (max-width: 1000px) {
  .archive-articles__item.has-archive-reveal:nth-child(even) {
    transition-delay: 100ms;
  }
}

.archive-card__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.archive-card__label {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  margin: 0;
  padding: 0.1rem 0.65rem;
  border: 1px solid #d9e2e9;
  border-radius: 999px;
  background: #fff;
  font-family: sans-serif;
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.06em;
}

/* ラベル色は実画面確認後に調整する仮値。 */
.archive-card__label--activity {
  color: #d6adc3;
}

.archive-card__label--theme {
  color: #96add5;
}

.archive-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-top: clamp(4.5rem, 8vw, 7rem);
}

.archive-pagination__direction {
  flex-shrink: 0;
  font-family: sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

.archive-pagination ol {
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.archive-pagination li a,
.archive-pagination__current {
  --page-image: url("../images/img_no-A-a.svg");
  --page-hover-image: url("../images/img_no-A-b.svg");
  position: relative;
  isolation: isolate;
  display: grid;
  width: 3rem;
  aspect-ratio: 1;
  place-items: center;
  font-family: var(--archive-latin);
  font-size: 1rem;
  transition: color 700ms ease;
}

.archive-pagination li:nth-child(even) a,
.archive-pagination li:nth-child(even) .archive-pagination__current {
  --page-image: url("../images/img_no-B-a.svg");
  --page-hover-image: url("../images/img_no-B-b.svg");
}

.archive-pagination li a::before,
.archive-pagination li a::after,
.archive-pagination__current::before,
.archive-pagination__current::after {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  content: "";
}

.archive-pagination li a::before,
.archive-pagination__current::before {
  z-index: -2;
  background-image: var(--page-image);
}

.archive-pagination li a::after,
.archive-pagination__current::after {
  z-index: -1;
  background-image: var(--page-hover-image);
  opacity: 0;
  transition: opacity 700ms ease;
}

.archive-pagination li a:hover,
.archive-pagination li a:focus-visible {
  color: #fff;
  text-decoration: none;
}

.archive-pagination li a:hover::after,
.archive-pagination li a:focus-visible::after {
  opacity: 1;
}

.archive-pagination__current {
  color: #fff;
}

.archive-pagination__current::after {
  opacity: 1;
}

.archive-pagination__ellipsis {
  display: grid;
  min-width: 1rem;
  height: 3rem;
  place-items: center;
}

@media (prefers-reduced-motion: reduce) {
  .archive-pagination li a,
  .archive-pagination li a::after,
  .archive-pagination__current::after {
    transition: none;
  }
}

@media (max-width: 1000px) {
  .archive-articles__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.archive-load-more {
  --people-load-more-line-width: 80vw;
  display: none;
}

.archive-load-more__button {
  border: 0;
  color: #a2bac3;
  background: transparent;
  box-shadow: none;
  font: inherit;
}

@media (max-width: 767px) {
  .archive {
    width: calc(100% - 3rem);
    padding-block: 4.5rem 6rem;
  }

  .archive-search-category {
    padding: 1.25rem 1rem 0.75rem;
  }

  .archive__heading h1 {
    font-size: clamp(1.625rem, 5vw, 2rem);
    white-space: normal;
  }

  .archive__title-break {
    display: initial;
  }

  .archive__heading p {
    font-size: 1rem;
  }

  .archive-search {
    flex-direction: column;
    gap: 1.25rem;
    text-align: center;
  }

  .archive-search__question {
    width: 100%;
    font-size: 0.9375rem;
    text-align: left;
  }

  .archive-search__field {
    width: 100%;
  }

  .archive-category {
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
  }

  .archive-category ul {
    row-gap: 0.375rem;
    column-gap: 0.6rem;
  }

  .archive-category a {
    padding: 0.25rem 0.7rem;
    letter-spacing: 0.04em;
  }

  .archive-index__body {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .archive-index__seasons {
    width: 100%;
  }

  .archive-index__seasons p {
    grid-template-columns: repeat(2, max-content);
    justify-content: space-between;
    gap: 0.25rem;
    line-height: 1.6;
  }

  .archive-index__row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .archive-index ul {
    gap: 0.75rem 1.5rem;
    padding-left: 2.5rem;
  }

  .archive-index__row h3 a {
    display: flex;
    align-items: baseline;
  }

  .archive-index__row h3 [aria-hidden] {
    flex: 0 0 1.5rem;
  }

  .archive-articles__list {
    grid-template-columns: minmax(0, 1fr);
    max-width: 28rem;
    margin-inline: auto;
  }

  .archive-articles__item--sp-initial-extra {
    display: none;
  }

  .archive-articles__item.is-load-more-item {
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 480ms ease, transform 480ms ease;
  }

  .archive-articles__item.is-load-more-visible {
    opacity: 1;
    transform: none;
  }

  .archive-load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(2.5rem + 20px);
    text-align: center;
  }

  .archive-load-more__button {
    display: flex;
    min-width: min(100%, 24rem);
    min-height: 4.5rem;
    padding: 0.75rem 1rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    line-height: 1.7;
    letter-spacing: 0.06em;
    cursor: pointer;
  }

  .archive-load-more__button:disabled {
    cursor: default;
    opacity: 0.55;
  }

  .archive-load-more__line {
    position: relative;
    display: block;
    width: min(var(--people-load-more-line-width), 24rem);
    height: 0.75rem;
    margin-top: 0.75rem;
  }

  .archive-load-more__line::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(to right, currentColor 0 calc(50% - 0.55rem), transparent calc(50% - 0.55rem) calc(50% + 0.55rem), currentColor calc(50% + 0.55rem) 100%);
    content: "";
  }

  .archive-load-more__line::after {
    position: absolute;
    top: -0.3rem;
    left: 50%;
    width: 0.7rem;
    height: 0.7rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    content: "";
    transform: translateX(-50%) rotate(45deg);
  }

  .archive-load-more__error {
    margin: 0.75rem 0 0;
    color: var(--color-ink);
    font-size: 0.75rem;
    line-height: 1.6;
  }

  .archive-pagination {
    display: none;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.25rem;
  }

  .archive-pagination ol {
    order: -1;
    flex-basis: 100%;
  }

  .archive-pagination li a {
    width: 2.5rem;
    font-size: 0.9375rem;
  }
}


.archive-index__row h3 a:hover {
  text-decoration: none;
}

.archive-index__row h3 a:hover .archive-index__year-label {
  text-decoration-line: underline;
  text-decoration-color: #a4a8d4;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.archive-index__year-label[aria-current="true"] {
  color: var(--archive-accent);
  text-decoration-line: underline;
  text-decoration-color: var(--archive-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.archive-index__season {
  --season-light: radial-gradient(ellipse at 35% 40%, #d0bdd2 0%, #b9bce0 35%, #a4a8d4 75%);
  position: relative;
  display: inline-block;
}

.archive-index__season--empty {
  color: #b8bec3;
  cursor: default;
  pointer-events: none;
}

.archive-index__season-icon {
  position: absolute;
  top: 50%;
  right: calc(100% + 0.2em);
  width: 0.9em;
  height: 0.9em;
  transform: translateY(-50%);
  object-fit: contain;
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.archive-index__season-text {
  transition: opacity 220ms ease;
}

.archive-index__season-glow {
  position: absolute;
  inset: 0;
  color: transparent;
  background: var(--season-light);
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.archive-index__season:hover .archive-index__season-icon,
.archive-index__season:focus-visible .archive-index__season-icon,
.archive-index__season[aria-current="true"] .archive-index__season-icon,
.archive-index__season[aria-current="page"] .archive-index__season-icon {
  opacity: 1;
}

.archive-index__season[aria-current="true"] .archive-index__season-text {
  opacity: 0;
}

.archive-index__season[aria-current="true"] .archive-index__season-glow {
  opacity: 1;
}

.archive-index__season[aria-current="page"] .archive-index__season-icon {
  filter: invert(69%) sepia(11%) saturate(1084%) hue-rotate(198deg) brightness(95%) contrast(89%);
}

.archive-index__season[aria-current="page"] .archive-index__season-text {
  color: var(--archive-accent);
}

@media (prefers-reduced-motion: reduce) {
  .archive-index__season-icon,
  .archive-index__season-text,
  .archive-index__season-glow {
    transition: none;
  }

  .archive-articles__item.is-load-more-item {
    transform: none;
    transition: none;
  }
}