/* ==========================================================================
   Public pages: home, nominate, share, remove, stories, interviewers, privacy, 404.
   Layered on site.css (the main site's design system: tokens, .btn, .card, .callout, .tiles,
   .stat-row, .chips...) and oralhistory.css (.oh-form, .field, .choice, .oh-notice...).
   Mobile first. Audience: many readers are in their 70s and 80s, on a phone. Generous type,
   48px+ targets, strong contrast, nothing that depends on colour alone.
   ========================================================================== */

/* Shared ------------------------------------------------------------------ */
main [id] { scroll-margin-top: 88px; }
main .btn { min-height: 48px; line-height: 1.25; text-align: center; justify-content: center; }
main .btn-xl { min-height: 60px; }
/* Small phones, especially at the Larger text size: slimmer side padding keeps big labels on one line. */
@media (max-width: 420px) { main .btn-xl { padding-inline: var(--sp-4); } }
main ul[role="list"] { list-style: none; padding: 0; margin: 0; }
.oh-section-title { margin-bottom: var(--sp-5); }
.oh-pagehead .eyebrow { margin-bottom: var(--sp-2); }
.oh-pagehead h1 { font-size: clamp(2rem, 1.55rem + 2vw, 2.75rem); margin-bottom: var(--sp-3); }
.oh-pagehead .lede { color: var(--ink); }
.oh-page { padding-block: var(--sp-6) var(--sp-7); }
.oh-narrow { max-width: 760px; }
.oh-copy p, .oh-copy li { font-size: 1.08rem; }
.oh-meta-line { color: var(--muted); font-size: 0.95rem; }
.oh-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-top: var(--sp-4); }
@media (max-width: 560px) {
  .oh-actions > .btn { width: 100%; }
}
/* An email address or phone number never breaks across lines ("hello@st-" / "theresa.org"). */
.oh-nowrap { white-space: nowrap; }

/* ============================== HOME ===================================== */

/* Hero: the main site's illuminated masthead, quiet and centred */
.oh-hero .container { padding-block: var(--sp-7) var(--sp-6); }
.oh-hero .illuminated__kicker { color: #6b5300; font-weight: 600; letter-spacing: 0.22em; max-width: none; }
.oh-hero .illuminated__kicker .sep { color: #b38a00; }
.oh-hero .illuminated__title { max-width: 21ch; margin-inline: auto; text-wrap: balance; font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.4rem); }
.oh-hero .illuminated__tagline { max-width: 50ch; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.45; margin-top: var(--sp-4); color: #6a1019; }
.oh-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-6); }
.oh-hero__actions .btn-ghost { background: rgba(255, 255, 255, 0.55); }
.oh-hero__actions .btn-ghost:hover { background: var(--navy); }
.oh-hero__note { text-align: center; margin: var(--sp-3) auto 0; color: #4a4636; font-size: 0.98rem; }
/* Kicker: "Oral History Project ✦ Since 1968 ✦ Austin, TX". Items never break inside; below 768px
   the first item and its separator go (the header already names the project), below 420px the
   last one too, so the row always fits on one line and a ✦ never dangles at a line end. */
.oh-kicker-row__item { white-space: nowrap; }
@media (max-width: 767px) {
  .oh-hero .illuminated__kicker { letter-spacing: 0.16em; }
  .oh-kicker-row > :nth-child(-n+2) { display: none; }
}
@media (max-width: 420px) {
  .oh-kicker-row > :nth-child(n+4) { display: none; }
}
/* Hero buttons: no label ever wraps. Tablets: Record a memory on its own row, the other two share
   the next one. Phones: one full-width button per row. */
@media (max-width: 767px) {
  .oh-hero__actions .btn-xl { flex: 1 1 100%; }
  .oh-hero__actions .btn-ghost { flex: 1 1 0; }
}
@media (max-width: 560px) {
  .oh-hero__actions .btn { flex: 1 1 100%; }
}
@media (max-width: 420px) {
  .oh-hero__actions .btn { padding-inline: var(--sp-4); }
}

/* Why now + a voice from the timeline */
.oh-why__grid { display: grid; gap: var(--sp-6); }
.oh-why__text p { line-height: 1.7; }
@media (min-width: 900px) {
  .oh-why__grid { grid-template-columns: 1.35fr 1fr; align-items: center; gap: var(--sp-7); }
}
.oh-voice {
  position: relative; background: var(--navy); color: #fff; border-radius: var(--radius-lg);
  padding: var(--sp-7) var(--sp-6) var(--sp-6); box-shadow: var(--shadow-2); overflow: hidden;
}
.oh-voice::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: linear-gradient(90deg, var(--red) 0 33%, var(--gold) 33% 66%, #2a2a8a 66% 100%);
}
.oh-voice__quote { margin: 0; position: relative; }
.oh-voice__quote::before {
  content: "\201C"; position: absolute; top: -0.42em; left: -0.06em; font-family: var(--font-head);
  font-size: 5rem; line-height: 1; color: var(--gold);
}
.oh-voice__quote p {
  font-family: var(--font-head); font-weight: 700; font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.15rem);
  line-height: 1.2; color: #fff; margin: var(--sp-5) 0 var(--sp-3); max-width: none;
}
.oh-voice__cite { color: var(--gold); font-size: 1rem; font-weight: 600; margin: 0; }
.oh-voice__after {
  margin: var(--sp-5) 0 0; padding-top: var(--sp-4); border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-family: "Cormorant Garamond", var(--font-head); font-style: italic; font-size: 1.25rem; line-height: 1.45; color: #e3e3f2;
}
.oh-stats { margin-top: var(--sp-7) !important; }
.oh-stats .stat b { font-size: var(--step-4); }
.oh-stats .stat span { font-size: 1rem; color: var(--ink); }

/* How it works */
.oh-how__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); margin-top: var(--sp-6); }
.oh-how__cta p { margin: 0; max-width: 46ch; }
@media (max-width: 560px) { .oh-how__cta .btn { width: 100%; } }
/* Four steps: two by two on tablets, so the fourth card never sits alone on a row. */
@media (min-width: 560px) and (max-width: 1023px) {
  .oh-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Three ways to take part */
.oh-ways > li { display: flex; }
.oh-ways .tile { flex: 1; position: relative; padding-right: 3.25rem; min-height: 100%; }
.oh-ways .tile b { line-height: 1.25; }
.oh-ways .tile span { color: var(--ink); font-size: 1rem; }
.oh-ways .tile .oh-ways__go { position: absolute; top: var(--sp-5); right: var(--sp-5); font-size: 1.4rem; line-height: 1; color: var(--red); transition: transform 0.18s var(--ease); }
.oh-ways .tile:hover .oh-ways__go { transform: translateX(3px); }
/* Three tiles: one column until there is room for all three side by side (site.css's two-column
   tablet layout leaves the third tile alone on a row). */
@media (max-width: 899px) { .oh-ways { grid-template-columns: minmax(0, 1fr); max-width: 640px; } }

/* Timeline */
.oh-home-timeline { max-width: 780px; }
.oh-timeline__text { font-size: 1.05rem; }
.oh-timeline > li.is-now .oh-timeline__text { font-weight: 600; color: var(--navy); }
.oh-timeline__more { margin: var(--sp-4) 0 0; }
/* Timeline geometry lives in the shared .oh-timeline (oralhistory.css). */
@media (max-width: 420px) { .oh-timeline__year { font-size: 1.1rem; } }

/* Promises */
.oh-promise { border-top: 4px solid var(--gold); }
.oh-promise h3 { font-size: var(--step-1); }
.oh-promise p { color: var(--ink); }
.oh-promises__more { margin: var(--sp-5) 0 0; font-weight: 600; }

/* FAQ (details/summary; no JavaScript) */
.oh-faq { display: grid; gap: var(--sp-3); max-width: 820px; }
.oh-faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.oh-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 64px; padding: var(--sp-4) var(--sp-5); cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: 700; font-size: var(--step-1); line-height: 1.3; color: var(--navy);
  border-radius: var(--radius-lg);
}
.oh-faq__item summary::-webkit-details-marker { display: none; }
.oh-faq__item summary::after {
  content: ""; flex: none; width: 0.7rem; height: 0.7rem; margin-right: 0.3rem;
  border-right: 3px solid var(--red); border-bottom: 3px solid var(--red);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s var(--ease);
}
.oh-faq__item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.oh-faq__item summary:hover { background: var(--paper-2); }
.oh-faq__item[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.oh-faq__a { padding: 0 var(--sp-5) var(--sp-5); }
.oh-faq__a > :last-child { margin-bottom: 0; }
.oh-faq__choices { margin: 0 0 var(--sp-4); }
.oh-faq__choices li { margin-bottom: var(--sp-2); }
.oh-faq__more { margin: var(--sp-5) 0 0; }

/* Callout row (interviewers) */
.oh-callout-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-6); padding: var(--sp-5) var(--sp-6); }
.oh-callout-row > div { flex: 1 1 320px; }
.oh-callout-row__h { font-size: var(--step-2); margin-bottom: var(--sp-2); }
.oh-callout-row p { margin: 0; }
@media (max-width: 560px) {
  .oh-callout-row { padding: var(--sp-5); }
  .oh-callout-row .btn { width: 100%; }
}

/* Closing band */
.oh-closing { background: var(--navy); color: #fff; text-align: center; padding-block: var(--sp-8); border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.oh-closing h2 { color: #fff; max-width: 24ch; margin-inline: auto; text-wrap: balance; }
.oh-closing p { color: #e3e3f2; margin: 0 auto var(--sp-5); font-size: var(--step-1); }
[data-page="home"] .footer { margin-top: 0; }

/* ============================== FORM PAGES ================================ */
/* share, remove: the form, then (wide screens) a quiet "what happens next" card. */
.oh-formpage { display: grid; gap: var(--sp-6); }
@media (min-width: 1000px) {
  .oh-formpage { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-7); align-items: start; }
  .oh-formpage__aside { position: sticky; top: 96px; }
}
.oh-formpage__main > .oh-notice + *, .oh-formpage__main > * + .oh-notice { margin-top: var(--sp-5); }
.oh-unconfigured .btn { margin-top: var(--sp-2); }

.oh-form-section { display: grid; gap: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.oh-form-section:first-of-type { border-top: 0; padding-top: 0; }
.oh-form-section__h { font-size: var(--step-2); margin: 0; }
.oh-form .field > label, .oh-form legend { line-height: 1.35; }
.oh-form .choice { min-height: 60px; align-items: center; }
.oh-form .choice input { margin-top: 0; }
.oh-form .choice__title { font-size: 1.05rem; }
.oh-form .field > label.choice { font-weight: 400; color: var(--ink); font-size: var(--step-0); }
.oh-contact { display: grid; gap: var(--sp-4) !important; padding: var(--sp-5) !important; background: var(--paper-2) !important; border: 1px solid var(--line) !important; border-radius: var(--radius-lg); }
.oh-contact > legend { float: left; width: 100%; margin-bottom: 0 !important; }
.oh-contact > legend + * { clear: both; }
.oh-submit-error h2 { font-size: var(--step-1); }
.oh-submit-error h2:focus { outline: none; }
.oh-submit-error .oh-actions { margin-top: 0; }
.oh-form .form-actions .btn-xl { min-width: 260px; }
@media (max-width: 560px) { .oh-form .form-actions .btn { width: 100%; } }

/* Success */
.oh-success { display: grid; gap: var(--sp-4); max-width: 720px; }
.oh-success h2 { font-size: var(--step-3); }
.oh-success [tabindex="-1"]:focus { outline: none; }
.oh-success h3 { font-size: var(--step-2); margin: var(--sp-3) 0 0; }
.oh-success__code { font-size: var(--step-1); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.oh-next { margin: 0; padding-left: 1.5rem; display: grid; gap: var(--sp-2); }
.oh-next li { font-size: 1.05rem; max-width: 62ch; }

/* Aside */
.oh-aside-card { gap: var(--sp-3); background: var(--paper-2); box-shadow: none; }
.oh-aside-card__h { font-size: var(--step-1); margin: 0; }
.oh-aside-steps { margin: 0; padding-left: 1.3rem; display: grid; gap: var(--sp-2); }
.oh-aside-steps li { color: var(--ink); }
.oh-aside-card .oh-meta-line { margin: 0; }

/* Share: file picker, file list, upload progress */
.oh-filepick { position: relative; }
.oh-filepick__input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0;
}
.oh-filepick__btn { cursor: pointer; border-style: dashed; background: #fff; width: 100%; max-width: 420px; }
.oh-filepick__btn::before { content: "+"; font-size: 1.5em; line-height: 0.8; font-weight: 400; margin-right: 0.15em; }
.oh-filepick__btn.has-focus { outline: 3px solid var(--gold); outline-offset: 2px; }
.oh-filepick__btn.is-disabled { opacity: 0.55; cursor: not-allowed; border-style: solid; }
.oh-filepick__btn.is-disabled:hover { background: #fff; color: var(--navy); transform: none; }
.oh-filecount { margin: 0; }
.oh-file-rejects ul { margin: 0; padding-left: 1.2rem; }
.oh-file-rejects p { margin: 0; }
.oh-filelist { display: grid; gap: var(--sp-3); }
.oh-filelist:empty { display: none; }
.oh-file {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); align-items: center;
  padding: var(--sp-3); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.oh-file__thumb {
  width: 64px; height: 64px; border-radius: var(--radius); overflow: hidden; background: var(--paper-2);
  display: grid; place-items: center; border: 1px solid var(--line);
}
.oh-file__thumb img { width: 100%; height: 100%; object-fit: cover; }
.oh-file__badge { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--navy); }
.oh-file__info { display: grid; gap: 2px; min-width: 0; }
.oh-file__name { font-weight: 600; color: var(--navy); overflow-wrap: anywhere; line-height: 1.3; }
.oh-file__meta { color: var(--muted); font-size: 0.95rem; }
.oh-file__status { font-size: 0.95rem; font-weight: 600; }
.oh-file__status:empty { display: none; }
.oh-file__status[data-state="done"] { color: #155c34; }
.oh-file__status[data-state="done"]::before { content: "\2713\00a0"; }
.oh-file__status[data-state="failed"] { color: #7c000b; }
.oh-file__status[data-state="sending"] { color: var(--navy); }
.oh-file__remove { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 520px) {
  .oh-file { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .oh-file__thumb { width: 72px; height: 72px; }
  .oh-file__remove { grid-column: auto; }
}
.oh-upload { display: grid; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.oh-upload p { margin: 0; }
.oh-upload__label { font-weight: 700; color: var(--navy); }

/* Remove: the promise and the steps */
.oh-promise-box { margin-bottom: var(--sp-6); padding: var(--sp-5) var(--sp-6); background: var(--gold-soft); border-left: 4px solid var(--gold); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.oh-promise-box h2 { font-size: var(--step-2); margin-bottom: var(--sp-3); }
.oh-promise-list { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--sp-2); }
.oh-promise-list li { max-width: 66ch; }
.oh-howto { margin-bottom: var(--sp-6); }
.oh-howto h2 { font-size: var(--step-2); }
.oh-numbered { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); counter-reset: oh-num; }
.oh-numbered > li { counter-increment: oh-num; position: relative; padding-left: 3rem; max-width: 66ch; }
.oh-numbered > li::before {
  content: counter(oh-num); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--navy); color: var(--gold); font-family: var(--font-head); font-weight: 700; display: grid; place-items: center;
}
.oh-numbered strong { color: var(--navy); }
.oh-code-input { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; max-width: 20rem; }
.oh-code-input::placeholder { text-transform: none; letter-spacing: normal; }

/* ============================== NOMINATE ================================== */
/* Help lines above the embedded form (the zoom tip shows only at the larger text sizes). */
.oh-nominate__help { margin: var(--sp-2) 0 var(--sp-3); color: var(--muted); font-size: 0.95rem; }
.oh-nominate__zoomtip { display: none; margin: 0 0 var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--gold-soft); border-radius: var(--radius); font-size: 0.95rem; }
html[data-textsize="large"] .oh-nominate__zoomtip, html[data-textsize="xlarge"] .oh-nominate__zoomtip { display: block; }
/* /nominate/: the parish's Google Form in an iframe (ARCHITECTURE.md section 11, decision 9).
   Reading order on every screen: what happens next, the form ("Open the form in its own window"
   right above it), then "Rather talk to a person?". From 1000px the steps sit in a card beside
   the form.
   Google Forms cannot tell this page how tall it is, so the frame gets a fixed height per width,
   measured on the real form (2026-10-06). Each height fits the tallest everyday case: /nominate/?minor=1
   with a 510-character note typed after the under-18 line (572 characters in the box, about 13
   lines on a 360px phone) and BOTH "This is a required question" messages (32px each), plus
   about 40px to spare at the narrowest width of each step. The form's height for that case, by
   frame width: 320px: 1718px, 340: 1678, 360: 1658, 390: 1618, 414: 1578, 430: 1558,
   480 to 520: 1518, 550: 1455, 582 to 650: 1415, 702 to 718: 1385 (the same numbers are in
   tests/build/nominate.test.mjs). With a one-line note it is 1205 to 1338, so short
   nominations leave white space below Google's footer: the price of never hiding Submit.
   The limit: a note longer than that (about 600 characters on a phone, 700 or more on a computer)
   scrolls inside the frame, and Submit is reached by scrolling inside the form. A visitor signed
   in to Google (an account line in the form's header) and large phone text settings also make the
   form taller. The frame width is the viewport below 600px, viewport minus 50 up to 718 from
   600px, and 582 (at 1000px) to 702 beside the steps card from 1000px.
   IF ANYONE ADDS OR CHANGES A QUESTION ON THE GOOGLE FORM, re-measure and update these heights
   (docs/OPERATIONS.md, Nominations).
   Below 600px the frame runs edge to edge; the form's own cards carry their side margins. */
.oh-nominate { display: grid; gap: var(--sp-6); }
.oh-nominate__next-h { font-size: var(--step-1); margin: 0 0 var(--sp-3); }
.oh-nominate__steps { margin: 0; padding-left: 1.4rem; display: grid; gap: var(--sp-2); }
.oh-nominate__steps li { font-size: 1.08rem; max-width: 52ch; padding-left: 0.2rem; }
.oh-nominate__steps li::marker { font-weight: 700; color: var(--navy); }
.oh-nominate__form { max-width: 720px; }
.oh-nominate__minor { margin-bottom: var(--sp-5); }
.oh-nominate__minor p { max-width: 62ch; }
.oh-nominate__open { margin: 0 0 var(--sp-4); }
.oh-nominate__ext { flex: none; }
.oh-nominate__frame { position: relative; background: #fff; border-block: 1px solid var(--line); margin-inline: calc(-1 * var(--sp-5)); }
.oh-nominate__frame iframe { position: relative; z-index: 1; display: block; width: 100%; height: 1760px; border: 0; }
.oh-nominate__loading {
  position: absolute; inset: 0 0 auto 0; margin: 0; padding: var(--sp-7) var(--sp-5);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  color: var(--navy); font-size: var(--step-1); font-weight: 600;
}
.oh-nominate__loading[hidden] { display: none; }
.oh-nominate__talk { margin: 0; font-size: 1.08rem; max-width: 62ch; }
@media (max-width: 380px) { .oh-nominate__open .btn { width: 100%; } }
@media (min-width: 340px) { .oh-nominate__frame iframe { height: 1720px; } }
@media (min-width: 390px) { .oh-nominate__frame iframe { height: 1660px; } }
@media (min-width: 430px) { .oh-nominate__frame iframe { height: 1600px; } }
@media (min-width: 600px) {
  .oh-nominate__frame { margin-inline: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
  .oh-nominate__frame iframe { height: 1500px; }
}
@media (min-width: 768px) { .oh-nominate__frame iframe { height: 1430px; } }
@media (min-width: 1000px) {
  .oh-nominate__frame iframe { height: 1460px; }
  .oh-nominate {
    grid-template-columns: minmax(0, 720px) minmax(260px, 320px); grid-template-areas: "form next" "talk next";
    column-gap: var(--sp-7); row-gap: var(--sp-5); align-items: start;
  }
  .oh-nominate__form { grid-area: form; }
  .oh-nominate__talk { grid-area: talk; }
  .oh-nominate__next {
    grid-area: next; position: sticky; top: 96px;
    background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-5);
  }
  .oh-nominate__steps li { font-size: 1rem; }
}

/* ============================== STORIES =================================== */
.oh-state [tabindex="-1"]:focus { outline: none; }
.oh-loading { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--step-1); color: var(--navy); padding: var(--sp-6) 0; margin: 0; }
.oh-empty { max-width: 760px; margin-inline: auto; color: var(--ink); }
.oh-empty h2 { font-size: var(--step-3); }
.oh-empty p { margin-inline: auto; }
.oh-empty p:last-child { margin-bottom: 0; }
/* site.css's empty state has 3rem of padding on every side: on a phone that squeezes the heading
   to three lines and wraps the button. */
@media (max-width: 560px) { .oh-empty { padding: var(--sp-6) var(--sp-4); } }
.oh-filters { display: grid; gap: var(--sp-4); padding: var(--sp-5); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: var(--sp-4); }
.oh-filters .filter-legend { font-size: 0.9rem; }
.oh-filters .chip { min-height: 48px; padding: 0.55rem 1.05rem; font-size: 1rem; }
.oh-chip__n { font-weight: 500; }
.oh-results { color: var(--muted); font-weight: 600; margin: 0 0 var(--sp-4); }
.oh-stories { display: grid; gap: var(--sp-6); }
.oh-story { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: var(--sp-5); display: grid; gap: var(--sp-4); }
@media (min-width: 760px) { .oh-story { padding: var(--sp-6) var(--sp-7); } }
.oh-story__head { display: flex; gap: var(--sp-4); align-items: flex-start; }
.oh-story__photo { flex: none; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: var(--paper-2); border: 3px solid var(--gold-soft); }
.oh-story__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 480px) { .oh-story__photo { width: 64px; height: 64px; } }
.oh-story__who { min-width: 0; }
.oh-story__name { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.95rem); margin: 0 0 var(--sp-1); }
.oh-story__meta { color: var(--ink); font-weight: 600; margin: 0 0 var(--sp-2); }
.oh-story__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-2) !important; }
.oh-story__tags .tag { font-size: 0.85rem; }
.oh-story__added { color: var(--muted); font-size: 0.95rem; margin: 0; }
.oh-clips { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-5); }
.oh-clip { border-top: 1px solid var(--line); padding-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.oh-clip__q { font-size: var(--step-1); line-height: 1.35; margin: 0; max-width: 60ch; }
.oh-clip audio { width: 100%; max-width: 560px; min-height: 54px; }
.oh-clip__len { margin: 0; color: var(--muted); }
.oh-clip__note { margin: 0; color: #7c000b; font-weight: 600; }
.oh-clip__transcript summary {
  display: inline-flex; align-items: center; gap: var(--sp-3); min-height: 48px; padding: 0.5rem 1.1rem;
  border: 2px solid var(--navy); border-radius: 999px; color: var(--navy); font-weight: 700; cursor: pointer; list-style: none;
}
.oh-clip__transcript summary::-webkit-details-marker { display: none; }
.oh-clip__transcript summary::after {
  content: ""; width: 0.55rem; height: 0.55rem; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform 0.2s var(--ease);
}
.oh-clip__transcript[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.oh-clip__transcript summary:hover { background: var(--navy); color: #fff; }
.oh-clip__text { margin-top: var(--sp-3); padding: var(--sp-4) var(--sp-5); background: var(--paper-2); border-radius: var(--radius); max-width: 72ch; }
.oh-clip__text p { white-space: pre-line; }
.oh-clip__text p:last-child { margin-bottom: 0; }
.oh-stories__cta { margin-top: var(--sp-6); }
.oh-stories__cta p { margin: 0; }

/* ============================== INTERVIEWERS ============================== */
.oh-block { padding-block: var(--sp-6); border-top: 1px solid var(--line); }
.oh-block:first-child { border-top: 0; padding-top: 0; }
.oh-block > h2 { margin-bottom: var(--sp-3); }
.oh-block > .lede { margin-bottom: var(--sp-5); }
.oh-download { gap: var(--sp-3); }
.oh-downloads--one { max-width: 640px; }
.oh-download h3 { font-size: var(--step-2); }
.oh-download p { color: var(--ink); }
.oh-download .oh-download__meta { color: var(--muted); font-size: 0.95rem; margin: 0; }
.oh-download__action { margin: auto 0 0 !important; padding-top: var(--sp-2); }
.oh-download .oh-download__soon { margin: 0; }
.oh-download .oh-pill { font-size: 0.9rem; padding: 0.3rem 0.8rem; }
.oh-tips { display: grid; gap: var(--sp-3); max-width: 760px; }
.oh-tips > li { position: relative; padding-left: 2rem; font-size: 1.05rem; }
.oh-tips > li::before { content: ""; position: absolute; left: 0.2rem; top: 0.55em; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.oh-tips strong { color: var(--navy); }
.oh-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; max-width: 860px; }
.oh-table { width: 100%; border-collapse: collapse; }
.oh-table th, .oh-table td { text-align: left; vertical-align: middle; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); }
.oh-table thead th { border-top: 0; background: var(--navy); color: #fff; font-size: 0.95rem; letter-spacing: 0.02em; }
.oh-table tbody th { color: var(--navy); font-weight: 700; width: 34%; }
.oh-sessnums { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.oh-sessnum {
  display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 0.4rem; border-radius: 999px;
  background: var(--paper-2); border: 2px solid var(--navy); color: var(--navy); font-weight: 700; text-decoration: none;
}
a.oh-sessnum:hover { background: var(--navy); color: #fff; }
.oh-sessnum--plain { border-style: dashed; border-color: #8a8aa0; background: #fff; }
@media (max-width: 520px) {
  .oh-table th, .oh-table td { padding: var(--sp-3); }
  .oh-table tbody th { width: 30%; font-size: 0.95rem; }
}
.oh-subhead { font-size: var(--step-2); margin-top: var(--sp-6); }
.oh-sessions { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.oh-session { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; padding: var(--sp-4); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.oh-session:target { outline: 3px solid var(--gold); outline-offset: 2px; }
.oh-session__n { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--navy); color: var(--gold); font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; }
.oh-session__title { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 1.15rem; line-height: 1.3; margin: 0 0 var(--sp-1); }
.oh-session__meta { margin: 0; color: var(--muted); font-size: 0.95rem; }
.oh-sessions__more { margin-top: var(--sp-4); }
.oh-sendways .card p { color: var(--ink); }
.oh-sendways .card h3 { font-size: var(--step-1); }
.oh-choices { margin-top: var(--sp-5); max-width: 860px; }
.oh-choices h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.oh-choices ul { margin: 0 0 var(--sp-3); }
.oh-choices li { margin-bottom: var(--sp-2); }
.oh-choices p:last-child { margin-bottom: 0; }

/* ============================== PRIVACY =================================== */
.oh-privacy { display: grid; gap: var(--sp-6); }
@media (min-width: 1000px) {
  .oh-privacy { grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
  .oh-toc { position: sticky; top: 96px; }
}
.oh-toc { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5); }
.oh-toc__h { font-family: var(--font-body); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 var(--sp-2); }
.oh-toc ol { margin: 0; padding-left: 1.25rem; display: grid; gap: 2px; }
.oh-toc a { display: block; min-height: 44px; padding: 0.6rem 0; font-weight: 600; text-decoration: none; line-height: 1.35; }
.oh-toc a:hover { text-decoration: underline; }
.oh-privacy__body > section { padding-bottom: var(--sp-5); }
.oh-privacy__body > section:first-child h2 { margin-top: 0; }
.oh-privacy__body h3 { font-size: var(--step-1); margin: var(--sp-5) 0 var(--sp-2); }
.oh-checks { display: grid; gap: var(--sp-3); padding: var(--sp-5) !important; background: var(--gold-soft); border-left: 4px solid var(--gold); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.oh-checks > li { position: relative; padding-left: 2rem; margin: 0 !important; }
.oh-checks > li::before { content: ""; position: absolute; left: 0.35rem; top: 0.25em; width: 0.55rem; height: 0.95rem; border-right: 3px solid #1d7a46; border-bottom: 3px solid #1d7a46; transform: rotate(45deg); }
.oh-choicelist { margin: 0 0 var(--sp-4); display: grid; gap: var(--sp-3); }
.oh-choicelist > div { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.oh-choicelist dt { font-weight: 700; color: var(--navy); }
.oh-choicelist dd { margin: 0; }
.oh-consent-copy { padding: var(--sp-5); border: 2px solid var(--navy); border-radius: var(--radius-lg); background: #fff; margin-bottom: var(--sp-3); }
.oh-consent-copy__h { font-family: var(--font-head); font-weight: 700; font-size: var(--step-1); color: var(--navy); }
.oh-consent-copy__box { font-weight: 600; color: var(--navy); margin: 0; padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.oh-consent-copy__box span { display: block; font-weight: 700; color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-1); }

/* ============================== 404 ======================================= */
.oh-404 { padding-block: var(--sp-7); }
.oh-404 h1 { font-size: clamp(2rem, 1.55rem + 2vw, 2.75rem); }
.oh-404__links { margin: var(--sp-6) 0 var(--sp-5) !important; }

/* Parish history page ========================================================
   /history/ (src/history/index.njk, copy in src/_data/history.json). Reuses site.css (.pagehead,
   .section, .section--mist, .container, .eyebrow, .lede, .btn, .stained-glass-band) and
   oralhistory.css (.oh-timeline, .sr-only), plus .oh-closing from the home section above.
   Parchment and ink colours match site.css's .illuminated masthead. Readers are often in their
   70s and 80s: large type, ~68ch lines, 48px targets, AA contrast on every ground.
   ========================================================================== */
[data-page="history"] {
  --oh-hist-parchment: #f6f1e4;
  --oh-hist-parchment-line: #ddd3ba;
  --oh-hist-red-ink: #7a1520;
  --oh-hist-photo-ink: #4a4636;
}
[data-page="history"] .footer { margin-top: 0; }
.oh-hist-head h1, .oh-hist-ch h2, .oh-hist-voice h2, .oh-hist-voice h3, .oh-hist-milestones h2, .oh-hist-pastors h2, .oh-hist-cta h2 { text-wrap: balance; }
.oh-hist-head p, .oh-hist-ch p, .oh-hist-voice p, .oh-hist-milestones p, .oh-hist-pastors p, .oh-hist-cta p, .oh-hist-photo figcaption, .oh-hist-head figcaption { text-wrap: pretty; }

/* Hero: parchment pagehead, the original church as a mounted print, chapter contents */
.oh-hist-head { background: var(--oh-hist-parchment); border-bottom: 0; padding-block: var(--sp-7) var(--sp-6); }
.oh-hist-head__grid { display: grid; gap: var(--sp-6); align-items: center; }
.oh-hist-head .eyebrow { color: #8f0f1c; }
.oh-hist-head h1 { font-size: clamp(2.25rem, 1.55rem + 3vw, 3.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.015em; max-width: 17ch; margin-bottom: var(--sp-4); }
.oh-hist-head .lede { font-size: clamp(1.15rem, 1.06rem + 0.4vw, 1.32rem); line-height: 1.6; max-width: 58ch; color: var(--ink); }
.oh-hist-head__photo { margin: 0; justify-self: center; width: min(100%, 300px); }
.oh-hist-head__photo figcaption { margin: var(--sp-4) auto 0; max-width: 30ch; text-align: center; font-family: "Cormorant Garamond", var(--font-head); font-style: italic; font-size: 1.15rem; line-height: 1.4; color: var(--oh-hist-photo-ink); }
@media (min-width: 900px) {
  .oh-hist-head { padding-block: var(--sp-8) var(--sp-7); }
  .oh-hist-head__grid { grid-template-columns: minmax(0, 1fr) 330px; gap: var(--sp-8); }
  .oh-hist-head__photo { width: 330px; }
}

/* A small archive photo shown as a mounted print: the white mat makes the old resolution feel intentional. */
.oh-hist-print { background: #fff; padding: 10px 10px 12px; border: 1px solid var(--oh-hist-parchment-line); border-radius: 3px; box-shadow: 0 1px 2px rgba(9, 9, 69, 0.08), 0 10px 28px rgba(9, 9, 69, 0.14); }
.oh-hist-print img { width: 100%; height: auto; border-radius: 1px; }
.oh-hist-print--tilt { transform: rotate(-1.5deg); }

/* Contents */
.oh-hist-toc { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--oh-hist-parchment-line); }
.oh-hist-toc__h { font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 0 0 var(--sp-3); }
.oh-hist-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .oh-hist-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .oh-hist-toc ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.oh-hist-toc ol a {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; height: 100%; padding: 0.6rem 0.9rem;
  background: rgba(255, 255, 255, 0.75); border: 1px solid var(--oh-hist-parchment-line); border-radius: var(--radius);
  text-decoration: none; color: var(--navy); transition: background 0.15s, border-color 0.15s;
}
.oh-hist-toc ol a:hover { background: #fff; border-color: var(--navy); color: var(--navy); }
.oh-hist-toc__n { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--navy); color: var(--gold); font-family: var(--font-head); font-weight: 700; font-size: 1rem; }
.oh-hist-toc__label { display: grid; font-weight: 700; line-height: 1.25; }
.oh-hist-toc__years { font-weight: 500; font-size: 0.92rem; color: var(--muted); }
.oh-hist-toc__more { margin: var(--sp-4) 0 0; font-size: 1rem; }
.oh-hist-toc__more a { font-weight: 600; }

/* Chapters: a year rail beside the story (sticky on wide screens), stacked on phones */
.oh-hist-ch { padding-block: var(--sp-7); border-top: 1px solid var(--line); }
.stained-glass-band + .oh-hist-ch { border-top: 0; }
.oh-hist-ch__grid { display: grid; gap: var(--sp-2); }
.oh-hist-ch__num { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--red); margin: 0; }
.oh-hist-ch__years { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 1.2rem; line-height: 1.2; margin: 0; }
.oh-hist-ch--red .oh-hist-ch__years { color: var(--red); }
.oh-hist-ch__body h2 { font-size: clamp(1.95rem, 1.5rem + 1.7vw, 2.6rem); line-height: 1.12; margin: 0 0 var(--sp-2); max-width: 22ch; }
.oh-hist-ch p.oh-hist-ch__kicker { text-wrap: balance; }
.oh-hist-ch__kicker { font-family: "Cormorant Garamond", var(--font-head); font-style: italic; font-size: clamp(1.3rem, 1.2rem + 0.45vw, 1.55rem); line-height: 1.35; color: var(--oh-hist-red-ink); margin: 0 0 var(--sp-5); max-width: 46ch; }
.oh-hist-ch__body > p:not(.oh-hist-ch__kicker):not(.oh-hist-invite) { font-size: 1.125rem; line-height: 1.75; max-width: 68ch; margin-bottom: var(--sp-5); }
@media (min-width: 900px) {
  .oh-hist-ch { padding-block: var(--sp-8); }
  .oh-hist-ch__grid { grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
  .oh-hist-ch__rail { position: sticky; top: 100px; padding-top: 0.35rem; border-top: 3px solid var(--gold); }
  .oh-hist-ch--red .oh-hist-ch__rail { border-top-color: var(--red); }
  .oh-hist-ch__num { margin-top: var(--sp-3); }
  .oh-hist-ch__from { display: block; font-size: 3.25rem; line-height: 1; margin-top: var(--sp-2); }
  .oh-hist-ch__to { display: block; font-size: 1.3rem; font-weight: 600; color: var(--muted); margin-top: var(--sp-2); }
}

/* An archive photo inside a chapter: the print beside its caption */
.oh-hist-photo { margin: var(--sp-6) 0; display: grid; gap: var(--sp-4); max-width: 68ch; }
.oh-hist-photo .oh-hist-print { width: min(100%, 300px); }
.oh-hist-photo figcaption { font-family: "Cormorant Garamond", var(--font-head); font-style: italic; font-size: 1.2rem; line-height: 1.45; color: var(--oh-hist-photo-ink); max-width: 36ch; }
.oh-hist-photo__date { display: block; font-family: var(--font-body); font-style: normal; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--red); margin-bottom: var(--sp-1); }
@media (min-width: 640px) {
  .oh-hist-photo { grid-template-columns: 300px minmax(0, 1fr); align-items: end; gap: var(--sp-6); }
  .oh-hist-photo figcaption { padding-bottom: var(--sp-2); }
}

/* The quiet invitation that closes each chapter */
.oh-hist-invite { position: relative; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin: var(--sp-6) 0 0; padding-top: var(--sp-4); font-size: 1.08rem; line-height: 1.5; color: var(--ink); max-width: 68ch; }
.oh-hist-invite::before { content: ""; position: absolute; top: 0; left: 0; width: 3rem; height: 3px; border-radius: 2px; background: var(--gold); }
.oh-hist-invite a { display: inline-block; padding-block: 0.3rem; font-weight: 700; white-space: nowrap; text-underline-offset: 3px; }
.oh-hist-invite a::after { content: "\00a0\2192"; text-decoration: none; display: inline-block; transition: transform 0.18s var(--ease); }
.oh-hist-invite a:hover::after { transform: translateX(3px); }

/* In Msgr. Elmer's words: the pull quote and the 50th anniversary video on navy */
.oh-hist-voice { position: relative; background: var(--navy); color: #fff; padding-block: var(--sp-8); }
.oh-hist-voice::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--red) 0 33%, var(--gold) 33% 66%, #2a2a8a 66% 100%); }
.oh-hist-voice__h { font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); margin: 0 0 var(--sp-5); }
.oh-hist-voice__grid { display: grid; gap: var(--sp-7); }
@media (min-width: 960px) { .oh-hist-voice__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: var(--sp-8); } }
.oh-hist-quote { margin: 0; }
.oh-hist-quote__text { position: relative; margin: 0; padding-top: 2.4rem; }
.oh-hist-quote__text::before { content: "\201C"; position: absolute; top: -0.2em; left: -0.04em; font-family: var(--font-head); font-size: 5.5rem; line-height: 1; color: var(--gold); }
.oh-hist-quote__text p { font-family: "Cormorant Garamond", var(--font-head); font-style: italic; font-weight: 400; font-size: clamp(2rem, 1.45rem + 2.4vw, 3.1rem); line-height: 1.12; color: #fff; margin: 0; max-width: 20ch; text-wrap: balance; }
.oh-hist-quote__cite { margin: var(--sp-4) 0 var(--sp-5); color: var(--gold); font-weight: 600; font-size: 1.05rem; }
.oh-hist-quote__cite::before { content: ""; display: inline-block; width: 1.75rem; height: 2px; background: var(--gold); vertical-align: middle; margin-right: 0.6rem; }
.oh-hist-quote__after { color: #e3e3f2; font-size: 1.08rem; line-height: 1.7; max-width: 60ch; }
.oh-hist-quote__after:last-child { margin-bottom: 0; }

.oh-hist-video__h { color: #fff; font-size: var(--step-2); margin-bottom: var(--sp-3); }
.oh-hist-video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: #12124f; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35); }
.oh-hist-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.oh-hist-video__poster {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: var(--sp-4); border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); text-align: center;
  font: inherit; color: #fff; text-decoration: none;
  background: radial-gradient(120% 90% at 50% 38%, #26267a 0%, #14145a 45%, #090945 100%);
}
.oh-hist-video__poster:hover { color: #fff; }
.oh-hist-video__poster:focus-visible { outline: 3px solid var(--gold); outline-offset: -7px; border-radius: var(--radius-lg); }
.oh-hist-video__play { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--gold); color: var(--navy); box-shadow: 0 0 0 8px rgba(255, 195, 11, 0.18); margin-bottom: var(--sp-2); transition: transform 0.18s var(--ease), box-shadow 0.18s; }
.oh-hist-video__play svg { margin-left: 4px; }
.oh-hist-video__poster:hover .oh-hist-video__play { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(255, 195, 11, 0.22); }
.oh-hist-video__label { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); line-height: 1.25; max-width: 22ch; text-wrap: balance; }
.oh-hist-video__note { font-size: 0.92rem; color: #d7d7ea; }
.oh-hist-video__meta { margin: var(--sp-3) 0 0; color: #e3e3f2; font-size: 1rem; }
.oh-hist-video__meta a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
.oh-hist-video__meta a:hover { color: var(--gold); }
@media (max-width: 400px) {
  .oh-hist-video__play { width: 60px; height: 60px; margin-bottom: 0; }
  .oh-hist-video__note { display: none; }
}

/* Moments on film: video cards (the gallery after the chapters, and one card inside Chapter 6).
   A card is a <figure>: a 16:9 poster (the self-hosted thumbnail; the script swaps in the player),
   then the title, date and length, the caption, and a plain "Watch on YouTube" link pinned to the
   bottom so cards in a row line up. Grid: 1 column, 2 from 640px, 3 from 1024px. A last card that
   would sit alone on its row spans the row instead, its poster as wide as one column. */
.oh-films { background: var(--oh-hist-parchment); padding-block: var(--sp-8); border-top: 1px solid var(--oh-hist-parchment-line); }
.oh-films__head h2 { text-wrap: balance; }
.oh-films__head .lede { color: var(--ink); max-width: 52ch; text-wrap: pretty; }
.oh-films__group + .oh-films__group { margin-top: var(--sp-7); }
.oh-films__gh { display: flex; align-items: center; gap: var(--sp-4); margin: 0 0 var(--sp-5); text-wrap: balance; }
.oh-films__gh::after { content: ""; flex: 1 1 2rem; height: 2px; background: var(--oh-hist-parchment-line); }
.oh-films__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
.oh-films__grid > li { display: flex; min-width: 0; }
.oh-films__elsewhere { margin: var(--sp-7) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--oh-hist-parchment-line); font-size: 1.05rem; line-height: 1.55; max-width: 68ch; text-wrap: pretty; }
.oh-films__elsewhere a { font-weight: 700; text-underline-offset: 3px; }

.oh-film { flex: 1 1 auto; min-width: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; background: #fff; border: 1px solid var(--oh-hist-parchment-line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 1px 2px rgba(9, 9, 69, 0.06), 0 8px 24px rgba(9, 9, 69, 0.08); }
.oh-film__frame { position: relative; aspect-ratio: 16 / 9; background: var(--navy); }
.oh-film__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.oh-film__poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--navy); color: #fff; font: inherit; cursor: pointer; overflow: hidden; outline: 3px solid transparent; }
.oh-film__poster img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s var(--ease), filter 0.35s; }
.oh-film__poster::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.oh-film__poster:focus-visible::after { box-shadow: inset 0 0 0 4px var(--navy), inset 0 0 0 7px #fff; }
.oh-film__play {
  position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; border: 3px solid #fff;
  background: rgba(9, 9, 69, 0.9); color: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s var(--ease), background 0.18s;
}
.oh-film__play svg { margin-left: 4px; }
.oh-film__poster:hover img { transform: scale(1.03); filter: brightness(0.94); }
.oh-film__poster:hover .oh-film__play, .oh-film__poster:focus-visible .oh-film__play { background: var(--red); transform: translate(-50%, -50%) scale(1.06); }
.oh-film__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5) var(--sp-4); min-width: 0; }
.oh-film__title { font-size: 1.3rem; line-height: 1.25; margin: 0; text-wrap: balance; }
/* Date and length: the length stays whole and the date breaks only before the year (the template
   joins month and day); the dot between them is clipped away when the length wraps to its own line. */
.oh-film__meta { display: flex; flex-wrap: wrap; column-gap: 1.3em; overflow: hidden; margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--muted); }
.oh-film__len { white-space: nowrap; }
.oh-film__len::before { content: "\00b7"; content: "\00b7" / ""; display: inline-block; width: 1.3em; margin-left: -1.3em; text-align: center; }
.oh-film__caption { margin: 0; font-size: 1.05rem; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.oh-film__links { margin: auto 0 0; padding-top: var(--sp-1); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-4); font-size: 1rem; }
.oh-film__links a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; color: var(--navy); text-underline-offset: 3px; }
.oh-film__credit { font-size: 0.95rem; color: var(--muted); }
@media (max-width: 400px) { .oh-film__body { padding-inline: var(--sp-4); } }
@media (prefers-reduced-motion: reduce) {
  .oh-film__poster img, .oh-film__play { transition: none; }
  .oh-film__poster:hover img { transform: none; }
}

@media (min-width: 640px) {
  .oh-films__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The wide card's poster fills the card's height (cover crop), so no white gap sits under it; once
   it plays, the frame is 16:9 again. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .oh-films__grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .oh-films__grid > li:last-child:nth-child(odd) > .oh-film:not(.is-playing) { grid-template-columns: calc((100% - var(--sp-5)) / 2) minmax(0, 1fr); grid-template-rows: auto; }
  .oh-films__grid > li:last-child:nth-child(odd) > .oh-film:not(.is-playing) > .oh-film__frame { aspect-ratio: auto; min-height: 11rem; }
}
@media (min-width: 1024px) {
  .oh-films__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oh-films__grid > li:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .oh-films__grid > li:last-child:nth-child(3n+1) > .oh-film { grid-template-columns: calc((100% - 2 * var(--sp-5)) / 3) minmax(0, 1fr); grid-template-rows: auto; }
  .oh-films__grid > li:last-child:nth-child(3n+1) > .oh-film:not(.is-playing) > .oh-film__frame { aspect-ratio: auto; min-height: 11rem; }
  .oh-films__grid > li:last-child:nth-child(3n+1) > .oh-film.is-playing { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* The one film that lives inside a chapter (beside Elmer Hall): laid out like the chapter's archive
   photos, a 300px "print" beside its caption, with no card box around it. Playing, it goes full width. */
.oh-film--inline { max-width: 68ch; margin: var(--sp-2) 0 var(--sp-6); gap: var(--sp-4); background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.oh-film--inline .oh-film__frame { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--oh-hist-parchment-line); box-shadow: 0 1px 2px rgba(9, 9, 69, 0.08), 0 10px 28px rgba(9, 9, 69, 0.14); }
.oh-film--inline .oh-film__body { padding: 0; }
@media (min-width: 640px) {
  .oh-film--inline:not(.is-playing) { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); grid-template-rows: auto; gap: var(--sp-5); }
}

/* "See the school on film": a small link at the end of the school chapter */
.oh-hist-ch .oh-hist-ch__body > p.oh-hist-filmlink { margin: 0 0 var(--sp-2); font-size: 1.05rem; }
.oh-hist-filmlink a { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 48px; font-weight: 700; text-underline-offset: 3px; }
.oh-hist-filmlink a::before { content: ""; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l8.5-5.5z' fill='%23fff'/%3E%3C/svg%3E") center / 70% no-repeat; }

/* Milestones: the shared .oh-timeline, with a small date under the year */
.oh-hist-timeline { max-width: 780px; }
/* Timeline geometry lives in the shared .oh-timeline (oralhistory.css). */
.oh-hist-timeline__date { display: block; margin-top: 3px; font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.02em; color: var(--muted); }
.oh-hist-timeline .oh-timeline__text { font-size: 1.1rem; line-height: 1.5; padding-top: 0.15rem; }
.oh-hist-timeline > li.is-since:not(.is-now)::before { border-color: var(--gold); }

/* Pastors */
.oh-hist-pastors__grid { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) { .oh-hist-pastors__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--sp-8); align-items: start; } }
.oh-hist-pastors__head .lede { color: var(--ink); max-width: 36ch; }
.oh-hist-pastors__list { margin: 0; border-top: 3px solid var(--navy); }
.oh-hist-pastors__list > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem var(--sp-5); padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.oh-hist-pastors__list dt { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; line-height: 1.3; color: var(--navy); }
.oh-hist-pastors__list dd { margin: 0; font-weight: 600; font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.oh-hist-pastors__note { display: block; font-weight: 500; font-size: 0.95rem; color: var(--muted); }
.oh-hist-pastors__list > .is-current dd { color: var(--navy); }
.oh-hist-pastors__list > .is-current dd::before { content: ""; display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); margin-right: 0.55rem; vertical-align: 0.05em; }
@media (max-width: 520px) {
  .oh-hist-pastors__list > div { display: block; }
  .oh-hist-pastors__list dd { text-align: left; white-space: normal; margin-top: 0.15rem; }
}
.oh-hist-sources { margin: var(--sp-7) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: 0.98rem; color: var(--muted); max-width: 80ch; }
.oh-hist-sources a { color: var(--navy); white-space: nowrap; }

/* Closing call to action (navy band, reuses .oh-closing) */
.oh-hist-cta p { max-width: 54ch; line-height: 1.55; }
.oh-hist-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }
.oh-hist-cta .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.75); }
.oh-hist-cta .btn-ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }
@media (max-width: 560px) {
  .oh-hist-cta__actions .btn { width: 100%; }
}