:root {
  --paper: #eeefec;
  --ink: #211d19;
  --muted: #4b4742;
  --lacquer: #6e4930;
  --wash: #dedfd9;
  --deep: #211d19;
  --deep-ink: #eeefec;
  --page: min(calc(100% - 48px), 1280px);
  --reading: 64ch;
  --font-cn-display: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --font-latin: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif;
  --step-small: 16px;
  --step-body: clamp(16px, .96rem + .2vw, 18px);
  --step-lead: clamp(20px, 1.05rem + .55vw, 26px);
  --step-head: clamp(34px, 2rem + 2.8vw, 64px);
  --step-display: clamp(52px, 4.2vw + 2rem, 96px);
}

html { scroll-padding-top: 32px; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.72;
}

a { text-decoration-thickness: .08em; }
a:focus-visible { outline: 3px solid var(--lacquer); outline-offset: 4px; }

h1,
h2,
h3,
h4,
.footer-name {
  font-family: var(--font-cn-display);
  font-weight: 500;
  letter-spacing: -.025em;
}

.en,
.person-meta,
.period-years { font-family: var(--font-latin); }

.site-header,
.breadcrumbs {
  width: var(--page);
  margin-inline: auto;
}

.site-header {
  min-height: 78px;
  align-items: center;
  border: 0;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.brand-lockup a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.mother-brand { font-family: var(--font-latin); font-weight: 700; letter-spacing: .06em; }
.library-brand { font-family: var(--font-cn-display); font-weight: 600; }
.site-header nav { gap: 0; }
.site-header nav a { padding-inline: 12px; font-size: var(--step-small); }
.return-site { color: var(--lacquer); }

.breadcrumbs {
  min-height: 44px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 9px;
  color: var(--muted);
  font-size: var(--step-small);
}

.breadcrumbs a { min-height: 44px; display: inline-flex; align-items: center; }

main > section,
.library-hero,
.country-hero,
.person-hero,
.reading-note,
.person-pagination { width: var(--page); }

.site-header,
.hero-copy,
.hero-figure,
.country-section > h2,
.country-copy,
.country-images img,
.people-index > h2,
.person-gallery img,
.person-summary,
.reading-note,
.section-heading,
.period,
.work-feature,
.work-mini,
.thread-grid article,
.source-list li,
.hero-figure img { animation: none; }

.library-hero,
.country-hero,
.person-hero {
  min-height: 0;
  padding: 42px 0 88px;
  gap: 32px;
  align-items: end;
}

.library-hero,
.country-hero { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.library-hero .hero-copy,
.country-hero .hero-copy { grid-column: 1 / 7; max-width: none; padding-bottom: 18px; }
.library-hero .hero-figure,
.country-hero .hero-figure { grid-column: 7 / 13; }

h1 {
  max-width: 12ch;
  margin-bottom: 28px;
  font-size: var(--step-display);
  line-height: .98;
  text-wrap: balance;
}

.library-home h1 { max-width: 10ch; font-size: var(--step-display); white-space: normal; }
.hero-lead { max-width: 31ch; margin-bottom: 30px; font-size: var(--step-lead); line-height: 1.52; }
.hero-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transform: none; }
.hero-figure a { transition: opacity 180ms ease; }
.hero-figure a:hover { opacity: .86; }
figcaption,
.credit,
.country-credit,
.person-summary small { color: var(--muted); font-size: var(--step-small); line-height: 1.55; }

.primary-link,
.country-link,
.text-link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-weight: 650;
  text-decoration: none;
}

.primary-link { margin-top: 0; padding: 10px 18px; background: var(--ink); color: var(--paper); }
.primary-link:hover { background: var(--lacquer); color: var(--paper); }

.archive-map {
  padding: 112px 0 148px;
}

.archive-map-heading,
.directory-heading {
  margin-bottom: 64px;
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(220px, 4fr);
  align-items: end;
  gap: 32px;
}

.archive-map-heading h2,
.directory-heading h2 { margin-bottom: 18px; font-size: var(--step-head); }
.archive-map-heading p,
.directory-heading p { max-width: 48ch; margin: 0; color: var(--muted); }
.archive-map-heading .country-link { justify-self: end; padding-inline: 16px; background: var(--wash); }

.person-lines { background: var(--deep); color: var(--deep-ink); }
.person-line {
  min-height: 270px;
  display: grid;
  grid-template-columns: minmax(190px, 2.4fr) minmax(0, 7.6fr) minmax(120px, 2fr);
  align-items: center;
  gap: 36px;
  padding: 18px 28px 18px 18px;
  color: inherit;
  text-decoration: none;
}
.person-line:nth-child(even) { background: #332c25; }
.person-line img { width: 100%; height: 234px; object-fit: cover; background: #403830; }
.person-line-haritsu img { object-position: center 58%; }
.person-line-yoyusai img { width: 72%; justify-self: center; object-position: center; }
.person-line h3 { margin: 0 0 12px; font-size: clamp(42px, 5vw, 74px); line-height: .95; }
.person-line p { max-width: 31ch; margin: 0; color: #d3cbc1; }
.person-line > span { justify-self: end; font-family: var(--font-latin); font-variant-numeric: tabular-nums; color: #d3cbc1; }
.person-line img,
.person-line h3 { transition: transform 180ms ease, color 180ms ease; }
.person-line:hover img,
.person-line:focus-visible img { transform: scale(.98); }
.person-line:hover h3,
.person-line:focus-visible h3 { color: #d6b580; }

.hero-copy h1,
.hero-lead,
.primary-link,
.hero-figure,
.person-line img,
.person-line h3,
.person-line p,
.person-line > span,
.directory-heading > *,
.person-entry .person-gallery img,
.person-entry h3,
.person-entry .person-meta,
.person-entry .person-facts,
.person-entry .text-link,
.person-hero-copy > *,
.reading-note > * { animation: preview-enter 220ms ease-out both; }
.hero-lead,
.person-line h3 { animation-delay: 40ms; }
.person-line p { animation-delay: 70ms; }
.person-line > span { animation-delay: 100ms; }
.primary-link { animation-delay: 80ms; }
.hero-figure { animation-delay: 100ms; }
.person-entry .person-gallery img:last-child,
.person-hero-copy > :nth-child(2),
.reading-note > :nth-child(2) { animation-delay: 40ms; }
.person-entry .person-facts,
.person-hero-copy > :nth-child(3) { animation-delay: 80ms; }
.person-entry .text-link,
.person-hero-copy > :nth-child(4) { animation-delay: 120ms; }

@keyframes preview-enter {
  from { opacity: .01; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.country-page .country-hero { padding-bottom: 72px; }
.people-index { padding: 96px 0 144px; }
.person-entry {
  min-height: 0;
  margin-bottom: 96px;
  padding: 56px;
  background: var(--wash);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
}
.person-entry:nth-of-type(3) { background: var(--deep); color: var(--deep-ink); }
.person-entry:nth-of-type(4) { background: #e9e4da; }
.person-entry:nth-of-type(5) { background: #302923; color: var(--deep-ink); }
.person-gallery { grid-column: 1 / 8; min-height: 520px; }
.person-summary { grid-column: 9 / 13; max-width: none; }
.person-entry-haritsu .person-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; gap: 12px; }
.person-entry-haritsu .person-gallery img:first-child,
.person-entry-haritsu .person-gallery img:last-child { grid-column: auto; grid-row: auto; }
.person-entry-haritsu .person-gallery img:first-child { object-position: center; }
.person-entry-yoyusai .person-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; gap: 12px; }
.person-entry-yoyusai .person-gallery img:first-child,
.person-entry-yoyusai .person-gallery img:last-child { grid-column: auto; grid-row: auto; }
.person-gallery img { transform: none; }
.person-summary h3 { margin: 0 0 10px; font-family: var(--font-cn-display); font-size: var(--step-head); }
.person-entry:nth-of-type(3) .person-summary p,
.person-entry:nth-of-type(3) .person-facts,
.person-entry:nth-of-type(5) .person-summary p,
.person-entry:nth-of-type(5) .person-facts { color: #d8d0c6; }
.person-entry:nth-of-type(3) .person-meta,
.person-entry:nth-of-type(5) .person-meta { color: #d6b580; }
.person-facts { margin: 28px 0; color: var(--muted); }
.person-facts > div { margin-bottom: 16px; }
.person-facts dt { font-size: var(--step-small); }
.person-facts dd { margin: 2px 0 0; color: inherit; }
.person-entry .text-link { justify-content: flex-start; margin-top: 18px; }

.person-page {
  --person-accent: #6e4930;
  --person-field: #e5dfd7;
}
.person-zeshin { --person-accent: #712f27; --person-field: #e8ddd5; }
.person-haritsu { --person-accent: #4f493c; --person-field: #e1dfd7; }
.person-yoyusai { --person-accent: #6f5225; --person-field: #e1dfd8; }

.person-hero {
  min-height: min(760px, calc(100dvh - 122px));
  padding-top: 48px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
}
.person-hero-copy { grid-column: 1 / 7; padding-top: 0; }
.person-hero .hero-figure { grid-column: 8 / 13; width: 100%; }
.person-hero .hero-figure img { aspect-ratio: 4 / 5; }
.person-role {
  max-width: 25ch;
  margin: -8px 0 18px;
  font-family: var(--font-cn-display);
  font-size: var(--step-lead);
  line-height: 1.45;
}
.person-hero .standfirst { max-width: var(--reading); font-family: var(--font-cn-display); font-size: var(--step-body); line-height: 1.85; }
.person-hero .en { margin-top: -10px; color: var(--person-accent); font-family: var(--font-latin); font-size: var(--step-lead); }
.person-meta { color: var(--person-accent); }

.reading-note {
  margin-bottom: 128px;
  padding: 46px 54px;
  background: var(--person-field);
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: start;
  gap: 48px;
}
.reading-note h2 { margin-bottom: 14px; font-size: clamp(30px, 3vw, 44px); }
.reading-note p { color: var(--muted); }
.contents-panel summary { display: none; }
.contents-panel nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
.contents-panel a { min-height: 48px; display: flex; align-items: center; color: var(--ink); text-decoration-color: var(--person-accent); }

.timeline,
.person-page main > section { padding-bottom: 120px; }
.section-heading { margin-bottom: 72px; }
.section-heading h2 { font-size: var(--step-head); }
.section-note { color: var(--person-accent); }

.period {
  margin-bottom: 128px;
  scroll-margin-top: 24px;
}
.period-marker { grid-column: 1 / 4; }
.period-years {
  color: var(--person-accent);
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.08;
  font-variant-numeric: oldstyle-nums;
}
.period-content { grid-column: 4 / 13; }
.period-content > h3 { max-width: 18ch; margin-bottom: 32px; font-size: clamp(28px, 3vw, 46px); line-height: 1.18; }
.period-content > p,
.period-question,
.related-link { max-width: var(--reading); }
.period-question { padding: 28px 32px; background: var(--person-field); }

.work-feature {
  margin: 72px 0 88px;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 32px;
}
.work-feature .work-image { grid-column: 1 / 7; }
.work-feature .work-copy { grid-column: 7 / 10; }
.work-feature-portrait .work-image { grid-column: 6 / 10; }
.work-feature-portrait .work-copy { grid-column: 1 / 6; }
.work-image img { background: var(--person-field); }
.work-copy h4,
.work-copy h4 a { font-family: var(--font-cn-display); }
.work-copy h4 { font-size: clamp(24px, 2.4vw, 38px); }
.work-note,
.work-meta { color: var(--person-accent); font-size: var(--step-small); }
.work-copy > p:not(.work-note):not(.work-meta):not(.credit) { max-width: 48ch; }

.work-pair { gap: 28px; }
.work-mini:first-child { grid-column: 1 / 7; }
.work-mini:last-child { grid-column: 8 / 13; margin-top: 96px; }
.person-haritsu .work-pair,
.person-yoyusai .work-pair { grid-template-columns: 1fr 1fr; gap: 18px; }
.person-haritsu .work-mini:first-child,
.person-haritsu .work-mini:last-child,
.person-yoyusai .work-mini:first-child,
.person-yoyusai .work-mini:last-child { grid-column: auto; margin-top: 0; }
.person-haritsu .work-pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.person-yoyusai .work-pair img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

.archive-summary {
  width: 100%;
  max-width: none;
  padding: 112px max(24px, calc((100vw - min(90vw, 1280px)) / 2));
  background: var(--person-field);
}
.archive-summary .section-heading,
.archive-summary .thread-grid,
.archive-summary .closing-note { width: min(100%, 1040px); }
.thread-grid { gap: 56px; }
.thread-grid article { grid-template-columns: 4fr 8fr; }
.thread-grid h3 { font-size: clamp(26px, 2.4vw, 38px); }
.closing-note { font-family: var(--font-cn-display); font-size: var(--step-lead); }

.sources-section { padding-top: 112px; scroll-margin-top: 24px; }
.sources-section h2 { margin-inline: auto; width: min(100%, 860px); font-size: var(--step-head); }
.source-list { max-width: 860px; }
.source-list li { margin-bottom: 4px; }
.source-list a { min-height: 52px; padding: 10px 0; }

.person-pagination {
  margin: 8px auto 120px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.person-pagination a {
  min-height: 112px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--wash);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-cn-display);
}
.person-pagination .back-directory { background: var(--person-field); }
.person-pagination span { color: var(--muted); font-family: var(--font-cn-display); font-size: var(--step-small); }
.person-pagination strong { margin-top: 6px; font-family: var(--font-cn-display); font-size: 22px; font-weight: 600; }
.person-pagination a:hover { background: var(--deep); color: var(--deep-ink); }
.person-pagination a:hover span { color: #d7cfc4; }

.person-page .person-hero .hero-figure img,
.person-page .contents-panel a,
.person-page .person-pagination a { animation: preview-enter 220ms ease-out both; }
.person-page .person-hero .hero-figure img { animation-name: preview-image-enter; animation-delay: 100ms; }
.person-page .contents-panel a:nth-child(even) { animation-delay: 50ms; }
.person-page .person-pagination a:nth-child(2) { animation-delay: 40ms; }
.person-page .person-pagination a:nth-child(3) { animation-delay: 80ms; }

@keyframes preview-image-enter {
  from { opacity: .01; transform: scale(.985); }
  to { opacity: 1; transform: scale(1); }
}

.person-page h1 { font-size: clamp(52px, 4.2vw + 2rem, 96px); }
.person-page h2,
.person-page .section-heading h2,
.person-page .sources-section h2 { font-size: clamp(34px, 2rem + 2.8vw, 64px); }
.person-page h3,
.person-page h4,
.person-page .period-years,
.person-page .thread-grid h3,
.person-page .work-copy h4 { font-size: clamp(26px, 2.2vw, 38px); }
.person-page .person-role,
.person-page .en,
.person-page .closing-note { font-size: clamp(20px, 1.05rem + .55vw, 26px); }
.person-page,
.person-page .standfirst { font-size: clamp(16px, .96rem + .2vw, 18px); }
.person-page .person-meta,
.person-page .work-note,
.person-page .work-meta,
.person-page figcaption,
.person-page .credit,
.person-page .section-note,
.person-page .person-pagination span { font-size: 16px; }

.site-footer {
  min-height: 200px;
  padding: 40px max(24px, calc((100vw - min(90vw, 1280px)) / 2));
  display: block;
  background: var(--deep);
  color: var(--deep-ink);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 5fr) minmax(200px, 3fr) minmax(260px, 4fr);
  align-items: end;
  gap: 36px;
}
.footer-name { max-width: none; font-size: clamp(26px, 3vw, 42px); line-height: 1.1; }
.footer-name a { min-height: 44px; display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.footer-name span { display: block; color: #cbc2b7; font-family: var(--font-cn-display); font-size: var(--step-small); letter-spacing: 0; }
.site-footer nav { display: grid; }
.site-footer nav a,
.site-footer-filings a { min-height: 44px; display: flex; align-items: center; }
.site-footer-filings { display: grid; justify-items: end; gap: 0; color: #cbc2b7; font-size: var(--step-small); }

@media (max-width: 900px) {
  :root { --page: calc(100% - 40px); }
  .site-header { min-height: 72px; }
  .site-header nav a { padding-inline: 9px; }
  .library-hero,
  .country-hero,
  .person-hero { padding: 34px 0 76px; grid-template-columns: 1fr; gap: 38px; }
  .library-hero .hero-copy,
  .country-hero .hero-copy,
  .library-hero .hero-figure,
  .country-hero .hero-figure,
  .person-hero-copy,
  .person-hero .hero-figure { grid-column: 1; width: 100%; }
  .person-hero .hero-figure { width: 70%; }
  .archive-map-heading,
  .directory-heading { grid-template-columns: 1fr; }
  .archive-map-heading .country-link { justify-self: start; }
  .person-line { grid-template-columns: 190px 1fr; }
  .person-line > span { grid-column: 2; justify-self: start; }
  .person-entry { padding: 38px; grid-template-columns: 1fr; }
  .person-gallery,
  .person-summary { grid-column: 1; }
  .person-gallery { min-height: 480px; }
  .reading-note { grid-template-columns: 1fr; }
  .period { grid-template-columns: 1fr; }
  .period-marker,
  .period-content { grid-column: 1; }
  .work-feature { grid-template-columns: 1fr; }
  .work-feature .work-image,
  .work-feature .work-copy,
  .work-feature-portrait .work-image,
  .work-feature-portrait .work-copy { grid-column: 1; grid-row: auto; }
  .work-feature-portrait .work-copy { order: 2; }
  .work-pair,
  .person-haritsu .work-pair,
  .person-yoyusai .work-pair { grid-template-columns: 1fr; }
  .work-mini:first-child,
  .work-mini:last-child,
  .person-haritsu .work-mini:first-child,
  .person-haritsu .work-mini:last-child,
  .person-yoyusai .work-mini:first-child,
  .person-yoyusai .work-mini:last-child { grid-column: 1; margin-top: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .site-footer-filings { grid-column: 1 / 3; justify-items: start; }
}

@media (max-width: 560px) {
  :root { --page: calc(100% - 40px); }
  .site-header { padding: 12px 0 4px; display: grid; gap: 4px; }
  .brand-lockup { width: 100%; gap: 7px; }
  .brand-lockup a { min-height: 44px; }
  .site-header nav { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .site-header nav a { min-height: 48px; padding: 6px 4px; text-align: center; line-height: 1.25; }
  .breadcrumbs { padding-block: 4px; }
  .library-hero,
  .country-hero,
  .person-hero { padding-top: 26px; gap: 30px; }
  h1 { font-size: clamp(40px, 11vw, 50px); }
  .library-home h1 { max-width: 9ch; font-size: clamp(38px, 10.5vw, 46px); white-space: normal; }
  .hero-lead { font-size: 20px; }
  .person-hero .hero-figure { width: 82%; }
  .archive-map { padding: 86px 0 112px; }
  .archive-map-heading { margin-bottom: 42px; }
  .person-line { grid-template-columns: 1fr; min-height: 0; padding: 16px 16px 30px; gap: 20px; }
  .person-line img,
  .person-line-yoyusai img { width: 100%; height: 220px; }
  .person-line h3 { font-size: 48px; }
  .person-line > span { grid-column: 1; }
  .people-index { padding-top: 72px; }
  .directory-heading { margin-bottom: 46px; }
  .person-entry { margin-bottom: 52px; padding: 20px; gap: 30px; }
  .person-gallery { min-height: 350px; }
  .person-entry-haritsu .person-gallery,
  .person-entry-yoyusai .person-gallery { min-height: 320px; }
  .reading-note { margin-bottom: 92px; padding: 34px 22px; gap: 24px; }
  .contents-panel summary { min-height: 48px; display: flex; align-items: center; color: var(--person-accent); font-weight: 650; cursor: pointer; }
  .contents-panel nav { grid-template-columns: 1fr; gap: 0; }
  .timeline,
  .person-page main > section { padding-bottom: 92px; }
  .section-heading { margin-bottom: 50px; }
  .period { margin-bottom: 96px; }
  .period-marker { margin-bottom: 16px; }
  .period-content > h3 { max-width: 14ch; }
  .period-question { padding: 22px; }
  .work-feature { margin: 52px 0 64px; gap: 24px; }
  .work-pair { margin: 52px 0 64px; gap: 56px; }
  .person-haritsu .work-pair img { aspect-ratio: 4 / 3; }
  .person-yoyusai .work-pair img { aspect-ratio: 3 / 4; }
  .archive-summary { padding: 84px 20px; }
  .thread-grid article { grid-template-columns: 1fr; gap: 8px; }
  .sources-section { padding-top: 84px; }
  .person-pagination { margin-bottom: 88px; grid-template-columns: 1fr; }
  .person-pagination a { min-height: 92px; }
  .site-footer { min-height: 230px; padding: 34px 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .site-footer-filings { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* 增长架构：保留既有视觉，只补充最近发布、归档与静态分页。 */
.archive-actions {
  justify-self: end;
  display: grid;
  justify-items: end;
  gap: 10px;
}

.archive-actions > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.publication-date {
  color: var(--muted);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.person-lines .publication-date {
  margin-top: 10px;
  color: #c9c0b5;
}

.person-entry.no-image {
  min-height: 0;
}

.person-entry.no-image .person-gallery {
  display: none;
}

.person-entry.no-image .person-summary {
  grid-column: 1 / 13;
}

.publication-meta {
  margin: -2px 0 22px;
  color: var(--muted);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.archive-page main {
  width: var(--page);
  margin-inline: auto;
}

.archive-page main > section {
  width: 100%;
}

.archive-hero {
  width: 100%;
  padding: 72px 0 96px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 32px;
}

.archive-hero-copy {
  grid-column: 1 / 7;
}

.archive-hero .hero-figure {
  grid-column: 8 / 13;
}

.archive-hero h1 {
  max-width: none;
}

.archive-hero .hero-lead {
  max-width: 38ch;
}

.country-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.country-links a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  font-weight: 650;
}

.archive-list-section {
  width: 100%;
  padding: 80px 0 136px;
}

.archive-list {
  background: var(--deep);
  color: var(--deep-ink);
}

.archive-person:nth-child(even) {
  background: #332c25;
}

.archive-person-link {
  min-height: 210px;
  display: grid;
  grid-template-columns: minmax(160px, 2.2fr) minmax(0, 9.8fr);
  align-items: stretch;
  gap: 32px;
  padding: 18px;
  color: inherit;
  text-decoration: none;
}

.archive-person-link > img {
  width: 100%;
  height: 174px;
  object-fit: cover;
}

.archive-person-copy {
  align-self: center;
  display: grid;
  grid-template-columns: minmax(180px, 3fr) minmax(150px, 2fr) minmax(0, 5fr);
  align-items: center;
  gap: 24px;
}

.archive-person-heading {
  display: grid;
}

.archive-person-heading strong {
  font-family: var(--font-cn-display);
  font-size: clamp(30px, 3.2vw, 50px);
  font-weight: 500;
  line-height: 1.05;
}

.archive-person-heading small,
.archive-person-country,
.archive-person .publication-date {
  color: #cbc2b7;
}

.archive-person .publication-date {
  grid-column: 1 / -1;
}

.archive-person-link:hover .archive-person-heading strong,
.archive-person-link:focus-visible .archive-person-heading strong {
  color: #d6b580;
}

.archive-hero-copy > *,
.archive-hero .hero-figure,
.archive-list-section .directory-heading > *,
.archive-person-link > img,
.archive-person-heading,
.archive-person-country,
.archive-person-copy > span:nth-child(3),
.archive-person .publication-date,
.archive-pagination a {
  animation: preview-enter 220ms ease-out both;
}

.archive-hero .hero-figure,
.archive-person-link > img {
  animation-name: preview-image-enter;
  animation-delay: 80ms;
}

.archive-person-heading { animation-delay: 30ms; }
.archive-person-country { animation-delay: 55ms; }
.archive-person-copy > span:nth-child(3) { animation-delay: 80ms; }
.archive-person .publication-date { animation-delay: 105ms; }

.archive-pagination {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.archive-pagination a {
  min-width: 48px;
  min-height: 48px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wash);
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
}

.archive-pagination a[aria-current="page"] {
  background: var(--deep);
  color: var(--deep-ink);
}

@media (max-width: 900px) {
  .archive-hero {
    grid-template-columns: 1fr;
  }

  .archive-hero-copy,
  .archive-hero .hero-figure {
    grid-column: 1;
  }

  .archive-actions {
    justify-self: start;
    justify-items: start;
  }

  .archive-person-copy {
    grid-template-columns: 1fr 1fr;
  }

  .archive-person-copy > span:nth-child(3),
  .archive-person .publication-date {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .archive-hero {
    padding: 48px 0 72px;
  }

  .archive-list-section {
    padding: 64px 0 96px;
  }

  .archive-person-link {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 16px 16px 28px;
  }

  .archive-person-link > img {
    height: auto;
    max-height: 280px;
  }

  .archive-person-copy {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .archive-person-copy > span,
  .archive-person-copy > span:nth-child(3),
  .archive-person .publication-date {
    grid-column: 1;
  }

  .archive-pagination a {
    min-width: 52px;
    min-height: 52px;
  }
}