:root {
  --archive-navy: #123f59;
  --archive-ink: #173846;
  --archive-blue: #1685aa;
  --archive-coral: #ed6d58;
  --archive-paper: #fffdf7;
  --archive-sand: #f7f0e3;
  --archive-line: #bfd0cf;
  --archive-muted: #667d82;
}

.page-archive-system {
  overflow-x: hidden;
  background: var(--archive-paper);
  color: var(--archive-ink);
  font-family: var(--font-body);
}

.page-archive-system .floating-cta { display: none; }
.archive-system { padding-top: var(--header-height); background: var(--archive-paper); }
.archive-system img { display: block; width: 100%; height: 100%; object-fit: cover; }

.archive-system-head {
  width: min(1280px, calc(100% - 64px));
  margin: 0 auto;
  padding: 42px 0 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr);
  gap: 56px;
  align-items: end;
  border-bottom: 1px solid var(--archive-line);
}

.archive-system-head__copy,
.archive-system-head__navs { min-width: 0; }
.archive-kicker,
.archive-label,
.archive-axis > span,
.archive-entry__meta,
.archive-record-section__head p,
.archive-axis__links--years a,
.archive-facts strong,
.archive-page-stat span {
  font-family: Montserrat, sans-serif;
  font-weight: 800;
  letter-spacing: .08em;
}

.archive-kicker { color: var(--archive-blue); font-size: .72rem; }
.archive-system-head h1 {
  margin: 10px 0 10px;
  color: var(--archive-navy);
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 4.1vw, 4rem);
  line-height: 1.08;
  letter-spacing: -.045em;
}
.archive-system-head__copy > p { margin: 0; font-weight: 700; }
.archive-facts { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 16px; color: var(--archive-muted); font-size: .76rem; font-weight: 700; }
.archive-facts strong { margin-right: 4px; color: var(--archive-navy); font-size: 1.25rem; }
.archive-axis + .archive-axis { margin-top: 14px; }
.archive-axis > span { display: block; margin-bottom: 7px; color: var(--archive-muted); font-size: .63rem; }
.archive-axis__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--archive-navy); border-bottom: 1px solid var(--archive-navy); }
.archive-axis__links--years { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.archive-axis__links a {
  min-width: 0;
  padding: 11px 5px;
  border-right: 1px solid var(--archive-line);
  color: var(--archive-navy);
  text-align: center;
  font-size: .8rem;
  font-weight: 900;
  white-space: nowrap;
}
.archive-axis__links a:last-child { border-right: 0; }
.archive-axis__links a.is-current { background: var(--archive-navy); color: #fff; }
.archive-axis__links--years a.is-current { background: var(--archive-coral); }

.archive-cover {
  width: min(1280px, calc(100% - 64px));
  margin: 24px auto 30px;
  display: grid;
  grid-template-columns: 1.2fr .95fr .55fr;
  grid-template-rows: minmax(260px, auto) 170px;
  gap: 14px;
}
.archive-cover figure { position: relative; overflow: hidden; margin: 0; background: #dce8e6; }
.archive-cover figcaption {
  position: absolute;
  left: 12px;
  bottom: 10px;
  padding: 5px 8px;
  background: rgba(10, 52, 73, .82);
  color: #fff;
  font: 800 .58rem/1 Montserrat, sans-serif;
  letter-spacing: .08em;
}
.archive-cover__lead { grid-row: 1 / 3; }
.archive-cover__voice {
  grid-column: 2 / 4;
  padding: 28px 30px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 26px;
  border-top: 5px solid var(--archive-navy);
  border-bottom: 1px solid var(--archive-line);
  background: var(--archive-sand);
}
.archive-label { color: var(--archive-coral); font-size: .64rem; }
.archive-cover__voice h2 { margin: 8px 0 13px; color: var(--archive-navy); font-family: var(--font-display); font-size: clamp(1.45rem, 2.3vw, 2.15rem); line-height: 1.35; }
.archive-cover__voice p { margin: 0; font-family: var(--font-body); font-size: .92rem; line-height: 1.9; }
.archive-cover__voice figure { min-height: 170px; }
.archive-text-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 16px; color: var(--archive-navy); font-size: .8rem; font-weight: 900; }
.archive-text-link::after { content: ""; width: 48px; height: 2px; background: var(--archive-coral); }

.archive-year-index {
  width: min(1280px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 190px repeat(4, 1fr);
  border-top: 1px solid var(--archive-navy);
  border-bottom: 1px solid var(--archive-navy);
}
.archive-year-index > * { min-height: 118px; padding: 18px; border-right: 1px solid var(--archive-line); }
.archive-year-index > *:last-child { border-right: 0; }
.archive-year-index__intro strong { display: block; margin-top: 10px; font-family: var(--font-display); font-size: 1.2rem; }
.archive-year-index a strong {
  display: block;
  color: var(--archive-navy);
  font-family: Montserrat, sans-serif;
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -.02em;
}
.archive-year-index a span { display: block; margin-top: 8px; font-size: .72rem; font-weight: 800; line-height: 1.55; }
.archive-year-index a.is-latest { background: var(--archive-coral); color: #fff; }
.archive-year-index a.is-latest strong { color: #fff; }

.archive-photo-flow {
  width: min(1280px, calc(100% - 64px));
  margin: 0 auto;
  padding: 48px 0 64px;
}
.archive-photo-flow > header { display: grid; grid-template-columns: .7fr 1.3fr; gap: 34px; align-items: end; margin-bottom: 22px; }
.archive-photo-flow h2 { margin: 6px 0 0; color: var(--archive-navy); font-family: var(--font-display); font-size: clamp(2rem, 3vw, 3rem); font-weight: 600; }
.archive-photo-flow header p { margin: 0; font-weight: 700; line-height: 1.9; }
.archive-photo-flow__grid { display: grid; grid-template-columns: 1.2fr .72fr .72fr 1fr; grid-auto-rows: 185px; gap: 10px; }
.archive-photo-flow__grid figure { margin: 0; overflow: hidden; }
.archive-photo-flow__grid .is-tall { grid-row: span 2; }
.archive-photo-flow__grid .is-wide { grid-column: span 2; }

/* detail pages */
.archive-detail-head { padding-bottom: 22px; }
.archive-detail-head h1 { font-size: clamp(2.2rem, 3.5vw, 3.5rem); }
.archive-detail-lead {
  width: min(1280px, calc(100% - 64px));
  margin: 0 auto;
  padding: 28px 0 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
  border-bottom: 4px solid var(--archive-navy);
}
.archive-detail-lead h2 { margin: 6px 0 0; color: var(--archive-navy); font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 600; }
.archive-detail-lead p { max-width: 48em; margin: 8px 0 0; font-size: .9rem; font-weight: 700; line-height: 1.8; }
.archive-page-summary { display: flex; gap: 20px; margin: 0; }
.archive-page-stat { min-width: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.archive-page-stat span { color: var(--archive-navy); font-size: 1.25rem; font-weight: 900; }
.archive-page-stat small { margin-left: 4px; color: var(--archive-muted); font-size: .68rem; }
.archive-feed-wrap { width: min(1280px, calc(100% - 64px)); margin: 0 auto; padding: 22px 0 72px; }
.archive-record-section { margin: 0; padding: 26px 0 32px; }
.archive-record-section + .archive-record-section { margin-top: 18px; border-top: 1px solid var(--archive-line); }
.archive-record-section__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; padding: 0 0 10px; border-bottom: 1px solid var(--archive-navy); }
.archive-record-section__head h2 { margin: 0; color: var(--archive-navy); font-family: var(--font-display); font-size: 1.45rem; font-weight: 900; }
.archive-record-section__head p { margin: 0; color: var(--archive-muted); font-size: .65rem; }
.archive-entry { border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.archive-entry { content-visibility: auto; contain-intrinsic-block-size: 420px; }
.archive-entry__head { padding: 0; }
.archive-entry__meta { display: block; margin-bottom: 6px; color: var(--archive-coral); font-size: .62rem; }
.archive-entry__head h3 {
  margin: 0;
  color: var(--archive-navy);
  font-family: var(--font-display);
  font-size: clamp(.92rem, .86rem + .22vw, 1.08rem);
  line-height: 1.55;
}
.archive-entry__photos { padding: 0; }
.archive-entry__photos { align-items: start; }
.archive-entry__photos figure {
  align-self: start;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  aspect-ratio: auto;
  height: auto;
  background: transparent;
  box-shadow: none;
}
.archive-photo-button {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  cursor: zoom-in;
}
.archive-photo-button:focus-visible { outline: 3px solid var(--archive-coral); outline-offset: 3px; }
.archive-entry__photos img { width: 100%; height: auto; aspect-ratio: auto; min-height: 0; max-height: none; object-fit: contain; }
.archive-entry__body { padding: 0; color: var(--archive-ink); font-size: .9rem; line-height: 1.9; }

body[data-archive-category="voice"] .archive-entry-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 56px;
}
body[data-archive-category="voice"] .archive-entry {
  padding: 22px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, .58fr);
  gap: 22px;
  align-items: start;
  border-top: 1px solid var(--archive-line);
}
body[data-archive-category="voice"] .archive-entry:nth-child(3n) { grid-column: 1 / -1; grid-template-columns: .72fr 1.28fr; }
body[data-archive-category="voice"] .archive-entry__head { grid-column: 1; }
body[data-archive-category="voice"] .archive-entry__photos { grid-column: 2; grid-row: 1 / 3; display: grid; gap: 6px; }
body[data-archive-category="voice"] .archive-entry:nth-child(3n) .archive-entry__photos { grid-column: 1; }
body[data-archive-category="voice"] .archive-entry:nth-child(3n) .archive-entry__head,
body[data-archive-category="voice"] .archive-entry:nth-child(3n) .archive-entry__body { grid-column: 2; }
body[data-archive-category="voice"] .archive-entry__head h3 { font-size: clamp(1rem, .92rem + .28vw, 1.2rem); }
body[data-archive-category="voice"] .archive-entry__photos--many { grid-template-columns: repeat(3, 1fr); }
body[data-archive-category="voice"] .archive-entry__body { grid-column: 1; }

body[data-archive-category="snapshot"] .archive-entry-feed {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 28px 14px;
  align-items: start;
}
body[data-archive-category="snapshot"] .archive-entry { grid-column: span 4; display: grid; gap: 9px; }
body[data-archive-category="snapshot"] .archive-entry:nth-child(5n + 1),
body[data-archive-category="snapshot"] .archive-entry:nth-child(5n + 4) { grid-column: span 5; }
body[data-archive-category="snapshot"] .archive-entry:nth-child(5n + 3) { grid-column: span 3; }
body[data-archive-category="snapshot"] .archive-entry__photos { order: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
body[data-archive-category="snapshot"] .archive-entry__photos--single { grid-template-columns: 1fr; }
body[data-archive-category="snapshot"] .archive-entry__photos--many { grid-template-columns: repeat(3, 1fr); }
body[data-archive-category="snapshot"] .archive-entry__head { order: 2; }
body[data-archive-category="snapshot"] .archive-entry__head h3 { font-size: clamp(.86rem, .8rem + .18vw, 1rem); line-height: 1.5; }
body[data-archive-category="snapshot"] .archive-entry__body { order: 3; color: var(--archive-muted); font-size: .8rem; }

body[data-archive-view="year"] .archive-record-section[data-group="voice"] .archive-entry-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 44px;
}
body[data-archive-view="year"] .archive-record-section[data-group="voice"] .archive-entry { padding: 18px 0; border-top: 1px solid var(--archive-line); }
body[data-archive-view="year"] .archive-record-section[data-group="voice"] .archive-entry__photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 14px; }
body[data-archive-view="year"] .archive-record-section[data-group="voice"] .archive-entry__photos--single { grid-template-columns: 1fr; }
body[data-archive-view="year"] .archive-record-section[data-group="voice"] .archive-entry__body { margin-top: 12px; }
body[data-archive-view="year"] .archive-record-section[data-group="voice"] .archive-entry__photos--many { grid-template-columns: repeat(3, 1fr); }
body[data-archive-view="year"] .archive-record-section[data-group="snapshot"] .archive-entry-feed {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px 14px;
}
body[data-archive-view="year"] .archive-record-section[data-group="snapshot"] .archive-entry { grid-column: span 4; }
body[data-archive-view="year"] .archive-record-section[data-group="snapshot"] .archive-entry:nth-child(4n + 1) { grid-column: span 5; }
body[data-archive-view="year"] .archive-record-section[data-group="snapshot"] .archive-entry:nth-child(4n + 3) { grid-column: span 3; }
body[data-archive-view="year"] .archive-record-section[data-group="snapshot"] .archive-entry__photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
body[data-archive-view="year"] .archive-record-section[data-group="snapshot"] .archive-entry__photos--single { grid-template-columns: 1fr; }
body[data-archive-view="year"] .archive-record-section[data-group="snapshot"] .archive-entry__photos--many { grid-template-columns: repeat(3, 1fr); }
body[data-archive-view="year"] .archive-record-section[data-group="snapshot"] .archive-entry__head { margin-top: 8px; }
body[data-archive-view="year"] .archive-record-section[data-group="snapshot"] .archive-entry__head h3 { font-size: clamp(.86rem, .8rem + .18vw, 1rem); }

body[data-archive-year="2023"] .archive-record-section[data-group="voice"] .archive-entry-feed { grid-template-columns: 1fr; }
body[data-archive-year="2023"] .archive-record-section[data-group="voice"] .archive-entry {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
  gap: 28px;
  align-items: center;
}
body[data-archive-year="2023"] .archive-record-section[data-group="voice"] .archive-entry__photos { grid-column: 1; grid-row: 1 / 3; margin: 0; }
body[data-archive-year="2023"] .archive-record-section[data-group="voice"] .archive-entry__head,
body[data-archive-year="2023"] .archive-record-section[data-group="voice"] .archive-entry__body { grid-column: 2; }
body[data-archive-year="2023"] .archive-record-section[data-group="voice"] .archive-entry:nth-child(even) { grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr); }
body[data-archive-year="2023"] .archive-record-section[data-group="voice"] .archive-entry:nth-child(even) .archive-entry__photos { grid-column: 2; }
body[data-archive-year="2023"] .archive-record-section[data-group="voice"] .archive-entry:nth-child(even) .archive-entry__head,
body[data-archive-year="2023"] .archive-record-section[data-group="voice"] .archive-entry:nth-child(even) .archive-entry__body { grid-column: 1; }

@media (max-width: 980px) {
  .archive-system-head { grid-template-columns: 1fr; gap: 24px; }
  .archive-cover { grid-template-columns: 1fr 1fr; grid-template-rows: 310px auto 170px; }
  .archive-cover__lead { grid-column: 1 / -1; grid-row: 1; }
  .archive-cover__voice { grid-column: 1 / -1; grid-row: 2; }
  .archive-cover__scene { grid-row: 3; }
  .archive-year-index { grid-template-columns: repeat(2, 1fr); }
  .archive-year-index__intro { grid-column: 1 / -1; }
  .archive-year-index > * { border-bottom: 1px solid var(--archive-line); }
  body[data-archive-category="voice"] .archive-entry-feed { grid-template-columns: 1fr; }
  body[data-archive-category="voice"] .archive-entry:nth-child(3n) { grid-column: auto; }
  body[data-archive-category="snapshot"] .archive-entry:nth-child(n),
  body[data-archive-view="year"] .archive-record-section[data-group="snapshot"] .archive-entry:nth-child(n) { grid-column: span 6; }
}

@media (max-width: 640px) {
  .archive-system { padding-top: var(--header-height-mobile, 64px); }
  .archive-system-head,
  .archive-cover,
  .archive-year-index,
  .archive-photo-flow,
  .archive-detail-lead,
  .archive-feed-wrap { width: calc(100% - 28px); }
  .archive-system-head { padding: 24px 0 20px; }
  .archive-system-head h1 { font-size: 2.05rem; }
  .archive-facts { gap: 15px; }
  .archive-axis__links a { padding: 9px 2px; font-size: .64rem; }
  .archive-cover { grid-template-rows: 235px auto 120px; margin-top: 16px; }
  .archive-cover__voice { padding: 20px 18px; grid-template-columns: 1fr; }
  .archive-cover__voice figure { display: none; }
  .archive-cover__voice h2 { font-size: 1.45rem; }
  .archive-cover__voice p { font-size: .82rem; }
  .archive-year-index > * { min-height: 105px; padding: 16px; }
  .archive-year-index a strong { font-size: 1.45rem; }
  .archive-photo-flow { padding: 38px 0 52px; }
  .archive-photo-flow > header { grid-template-columns: 1fr; gap: 15px; }
  .archive-photo-flow h2 { font-size: 2rem; }
  .archive-photo-flow__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 135px; }
  .archive-photo-flow__grid .is-wide { grid-column: span 2; }
  .archive-detail-lead { grid-template-columns: 1fr; padding-top: 22px; }
  .archive-detail-lead h2 { font-size: 1.7rem; line-height: 1.55; }
  .archive-page-summary { gap: 14px; }
  .archive-feed-wrap { padding-top: 8px; }
  body[data-archive-category="voice"] .archive-entry,
  body[data-archive-category="voice"] .archive-entry:nth-child(3n) { grid-template-columns: 1fr; gap: 12px; }
  body[data-archive-category="voice"] .archive-entry__head,
  body[data-archive-category="voice"] .archive-entry__body,
  body[data-archive-category="voice"] .archive-entry__photos,
  body[data-archive-category="voice"] .archive-entry:nth-child(3n) .archive-entry__head,
  body[data-archive-category="voice"] .archive-entry:nth-child(3n) .archive-entry__body,
  body[data-archive-category="voice"] .archive-entry:nth-child(3n) .archive-entry__photos { grid-column: 1; grid-row: auto; }
  body[data-archive-category="voice"] .archive-entry__photos { grid-template-columns: repeat(2, 1fr); }
  body[data-archive-category="voice"] .archive-entry__photos--single { grid-template-columns: 1fr; }
  .archive-entry__head h3,
  body[data-archive-category="voice"] .archive-entry__head h3,
  body[data-archive-category="snapshot"] .archive-entry__head h3,
  body[data-archive-view="year"] .archive-record-section[data-group="snapshot"] .archive-entry__head h3 {
    font-size: .96rem;
  }
  body[data-archive-category="snapshot"] .archive-entry-feed,
  body[data-archive-view="year"] .archive-record-section[data-group="snapshot"] .archive-entry-feed { gap: 24px 10px; }
  body[data-archive-category="snapshot"] .archive-entry:nth-child(n),
  body[data-archive-view="year"] .archive-record-section[data-group="snapshot"] .archive-entry:nth-child(n) { grid-column: 1 / -1; }
  body[data-archive-category="voice"] .archive-entry__photos--many,
  body[data-archive-view="year"] .archive-record-section[data-group="voice"] .archive-entry__photos--many,
  body[data-archive-category="snapshot"] .archive-entry__photos--many,
  body[data-archive-view="year"] .archive-record-section[data-group="snapshot"] .archive-entry__photos--many { grid-template-columns: repeat(2, 1fr); }
  body[data-archive-view="year"] .archive-record-section[data-group="voice"] .archive-entry-feed { grid-template-columns: 1fr; }
  body[data-archive-year="2023"] .archive-record-section[data-group="voice"] .archive-entry,
  body[data-archive-year="2023"] .archive-record-section[data-group="voice"] .archive-entry:nth-child(even) { grid-template-columns: 1fr; gap: 12px; }
  body[data-archive-year="2023"] .archive-record-section[data-group="voice"] .archive-entry__photos,
  body[data-archive-year="2023"] .archive-record-section[data-group="voice"] .archive-entry:nth-child(even) .archive-entry__photos,
  body[data-archive-year="2023"] .archive-record-section[data-group="voice"] .archive-entry__head,
  body[data-archive-year="2023"] .archive-record-section[data-group="voice"] .archive-entry__body,
  body[data-archive-year="2023"] .archive-record-section[data-group="voice"] .archive-entry:nth-child(even) .archive-entry__head,
  body[data-archive-year="2023"] .archive-record-section[data-group="voice"] .archive-entry:nth-child(even) .archive-entry__body { grid-column: 1; grid-row: auto; }
}