/* History page of the new design. The church photos reuse the album tiles & lightbox of gallery.css. */

.history-title { max-width: 20ch; text-wrap: balance; }
.page-title__lede small { font-size: 0.85em; }

/* — hero — */
.history-hero { aspect-ratio: 21 / 9; margin: 32px 6px 6px; }
.history-hero__caption {
    position: absolute; bottom: 8px; left: 10px; z-index: 1;
    color: #fff; font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: 0.05em;
    text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
@media (max-width: 720px) {
    .history-hero { aspect-ratio: 4 / 3; }
}

/* — body: the table of contents beside the article — */
.history-body { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 48px; align-items: start; }

.history-toc { flex: 1 1 200px; max-width: 240px; position: sticky; top: 104px; }
.history-toc h6 { opacity: 0.6; margin-top: 0; }
.history-toc ol { list-style: none; margin: 0; padding: 0; }
.history-toc li { border-top: 1px solid var(--color-divider); }
.history-toc a {
    display: grid; grid-template-columns: 32px 1fr; gap: 8px;
    padding: 10px 0; font-size: 14px; line-height: 1.35;
    color: inherit; text-decoration: none;
}
.history-toc a:hover { color: var(--color-accent-700); }
.history-toc__num {
    font-family: var(--font-heading); font-weight: var(--font-heading-weight);
    color: var(--color-accent-700);
}
/* narrow widths: the contents stack above the article */
@media (max-width: 900px) {
    .history-toc { position: static; max-width: none; flex-basis: 100%; }
}

.history-article {
    flex: 10 1 320px; max-width: 84ch; min-width: 0;
    font-size: 17px; line-height: 1.65; text-wrap: pretty;
}
.history-article h2 { margin: 48px 0 16px; scroll-margin-top: 100px; }
.history-article > h2:first-child { margin-top: 0; }
.history-article p { margin: 0 0 1em; }
/* the timeline: each entry opens with its year in bold */
.history-article p > strong:first-child { color: var(--color-accent-800); }

/* — figures — */
.history-figure { display: block; margin: 6px; }
/* a figure with a set shape: the photo fills it instead of stretching it to its own height */
.history-figure { position: relative; }
.history-hero > img,
.history-figure--float > img,
.history-pair__item .history-figure > img { position: absolute; inset: 0; display: block; }
.history-figure > img { display: block; }
.history-figure--float { float: right; width: min(45%, 360px); margin: 6px 6px 16px 28px; aspect-ratio: 4 / 3; }
@media (max-width: 560px) {
    .history-figure--float { float: none; width: auto; margin: 6px 6px 20px; }
}
.history-pair {
    clear: both; margin: 28px 0 8px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px;
}
.history-pair__item { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.history-pair__item .history-figure { aspect-ratio: 16 / 10; }
.history-pair__item figcaption { font-size: 14px; line-height: 1.5; opacity: 0.7; }

/* — the churches: numbered list, then the photos — */
.history-churches {
    list-style: none; margin: 8px 0 0; padding: 0; counter-reset: church;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 28px;
}
.history-churches li {
    counter-increment: church;
    display: grid; grid-template-columns: 32px 1fr; gap: 8px;
    padding: 10px 0; border-top: 1px solid var(--color-divider);
    font-size: 15px; line-height: 1.5;
}
.history-churches li::before {
    content: counter(church, decimal-leading-zero);
    font-family: var(--font-heading); font-weight: var(--font-heading-weight);
    color: var(--color-accent-700);
}
.history-churches li p { margin: 0; }
/* 3 per row, equal tiles (instead of the album's justified rows) */
.history-photos { margin: 28px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.history-photos::after { content: none; }
.history-photos .album-photo { flex: none; height: auto; aspect-ratio: 4 / 3; }
@media (max-width: 560px) {
    .history-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* — closing — */
.history-closing__figure { margin: 40px 6px 6px; }
.history-quote {
    margin: 28px 6px; padding: 20px 22px; display: block;
    font-family: var(--font-heading); font-weight: var(--font-heading-weight);
    font-size: 22px; line-height: 1.3;
}
.history-credit { font-size: 14px; opacity: 0.7; }

/* — the article's photos open alone in the single photo viewer (photo-viewer.js) — */
[data-viewer] { cursor: zoom-in; }
[data-viewer]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }