/* Geschiedenis — stats band, chapter timeline, archive gallery */

/* ---------- Stats ---------- */
.hstats { background: var(--red); color: #fff; }
.hstats__list { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 810px) { .hstats__list { grid-template-columns: repeat(4, 1fr); } }
.hstats__list li { display: grid; gap: 4px; padding: clamp(24px, 3vw, 40px) clamp(12px, 2vw, 24px); border-left: 1px solid rgba(255, 255, 255, .25); }
.hstats__list li:nth-child(odd) { border-left: 0; }
@media (min-width: 810px) { .hstats__list li:nth-child(odd) { border-left: 1px solid rgba(255, 255, 255, .25); } .hstats__list li:first-child { border-left: 0; } }
@media (max-width: 809px) { .hstats__list li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .25); } }
.hstats__list strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(3rem, 6vw, 5rem); line-height: .9; }
.hstats__list span { font-size: .8125rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }

/* ---------- Chapters ---------- */
.chapters { position: relative; display: grid; gap: clamp(56px, 8vw, 112px); }
.chapters::before { /* the rail */
  content: ""; position: absolute; top: 8px; bottom: 8px; left: 7px; width: 1px; background: var(--line);
}
.chapter { position: relative; display: grid; gap: 20px; padding-left: 40px; }
.chapter::before { /* node */
  content: ""; position: absolute; left: 0; top: 10px; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ink); transition: background-color .3s, border-color .3s, transform .3s var(--ease);
}
.chapter:hover::before { background: var(--red); border-color: var(--red); transform: scale(1.25); }
.chapter__year {
  font-family: var(--font-display); font-size: clamp(4.5rem, 10vw, 9rem); line-height: .82; letter-spacing: -.01em;
  color: transparent; -webkit-text-stroke: 1.5px var(--ink);
  transition: color .4s ease, -webkit-text-stroke-color .4s;
}
.chapter:hover .chapter__year { color: var(--red); -webkit-text-stroke-color: var(--red); }
.chapter__body { display: grid; gap: 14px; align-content: start; }
.chapter__title { color: var(--red); }
.chapter__text { color: var(--text-muted); }
.chapter__text:empty { display: none; }
.chapter__media { display: block; overflow: hidden; border-radius: var(--r-md); background: var(--mist); }
.chapter__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .8s var(--ease); }
.chapter__media:hover img { transform: scale(1.04); }

@media (min-width: 1000px) {
  .chapters::before { left: calc(26% + 7px); }
  .chapter { grid-template-columns: 26% 1fr 1fr; gap: 0 clamp(32px, 4vw, 64px); padding-left: 0; align-items: start; }
  .chapter::before { left: 26%; top: 14px; }
  .chapter__year { position: sticky; top: calc(var(--header-h) + 24px); text-align: right; padding-right: 40px; font-size: clamp(5rem, 7vw, 7.5rem); }
  .chapter__body { padding-left: 8px; }
}

/* ---------- Archive gallery ---------- */
.hgallery a { aspect-ratio: 1; background: var(--ink-2); }
.chapter__year--range { font-size: clamp(3.5rem, 7vw, 6rem); }
@media (min-width: 1000px) { .chapter__year--range { font-size: clamp(3.5rem, 4.6vw, 5rem); } }

/* 22 photos + two wide tiles = 24 cells: fills 2, 3, 4 and 6 columns without gaps */
.hgallery { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .hgallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .hgallery { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1300px) { .hgallery { grid-template-columns: repeat(6, 1fr); } }
.hgallery a:nth-child(1), .hgallery a:nth-child(12) { grid-column: span 2; aspect-ratio: auto; }