/* Saint Paul: the Pastors part of the home page (#pastors).
   Owner: pastors lane (2026-10-06). Uses the tokens of css/base.css only.
   Parts: .ps-today (serving today), .ps-person (one card), .ps-staff (office),
   .ps-register (every pastor), .ps-entry (one pastor), the gold thread on .ps-list. */

.ps-root { display: block; }
.ps-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.ps-lede { margin-bottom: var(--sp-space-6); }

/* Sub titles with a thin gold rule after the words */
.ps-subtitle {
  display: flex;
  align-items: center;
  gap: var(--sp-space-3);
  margin-bottom: var(--sp-space-5);
  color: var(--sp-bronze);
  font-family: var(--sp-font-display);
  font-size: var(--sp-fs-h3);
  font-weight: 600;
  line-height: var(--sp-lh-tight);
}
.ps-subtitle > span { flex: 0 1 auto; min-width: 0; }
.ps-subtitle::after {
  content: "";
  flex: 1 1 40px;
  min-width: 40px;
  height: 1px;
  background: linear-gradient(90deg, var(--sp-gold-500), rgba(214, 140, 59, 0));
}

/* ---------- Serving today ---------- */
.ps-people {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ps-person {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--sp-space-4);
  align-items: start;
  align-content: start;
}
.ps-person__media { padding-top: 2px; }
.ps-medal { width: 96px; }
/* A person with no photo: initials in the serif face, on paper, inside the ring */
.ps-medal--initials { display: grid; place-items: center; }
.ps-initials {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, var(--sp-ivory), var(--sp-paper) 72%);
  color: var(--sp-bronze);
  font-family: var(--sp-font-display);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.ps-person__role {
  margin-bottom: var(--sp-space-1);
  color: var(--sp-bronze);
  font: 600 var(--sp-fs-label)/1.3 var(--sp-font-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ps-person__name {
  margin-bottom: var(--sp-space-2);
  color: var(--sp-ink);
  font-size: 1.45rem;
}
.ps-person__langs,
.ps-person__facts {
  color: var(--sp-ink-soft);
  font-size: 1rem;
  line-height: 1.5;
}
.ps-person__facts { margin-top: var(--sp-space-1); }
.ps-person__note {
  margin-top: var(--sp-space-2);
  padding-left: var(--sp-space-3);
  border-left: 2px solid var(--sp-gold-300);
  color: var(--sp-muted);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.5;
}
.ps-person__bio { margin-top: var(--sp-space-1); }
/* The biography link is a stand-alone control: a full 44 px tap height */
.ps-person__biolink { display: inline-flex; align-items: center; min-height: var(--sp-tap); }
.ps-entry__story a { display: inline-flex; align-items: center; min-height: var(--sp-tap); }

/* Office staff: a short list; a person with a photo gets a framed card above it */
.ps-staff {
  margin-top: var(--sp-space-6);
  padding-top: var(--sp-space-5);
  border-top: var(--sp-line) solid var(--sp-sand);
}
.ps-staff__people { margin-bottom: var(--sp-space-4); }
.ps-staff__title {
  margin-bottom: var(--sp-space-3);
  color: var(--sp-ink);
  font-size: 1.3rem;
}
.ps-staff__list { margin: 0; padding: 0; list-style: none; }
.ps-staff__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--sp-space-2);
  border-bottom: var(--sp-line) dashed var(--sp-sand);
}
.ps-staff__name { font-weight: 600; color: var(--sp-ink); }
.ps-staff__role { color: var(--sp-ink-soft); font-size: 1rem; }
.ps-staff__email { display: inline-flex; align-items: center; justify-self: start; min-height: var(--sp-tap); max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.ps-staff__note {
  margin-top: var(--sp-space-3);
  color: var(--sp-muted);
  font-size: var(--sp-fs-small);
  font-style: italic;
}

.ps-divider { margin-block: var(--sp-space-7); }

/* ---------- Every pastor since 1860 ---------- */
.ps-register__lede {
  max-width: var(--sp-measure);
  margin-bottom: var(--sp-space-5);
  color: var(--sp-ink-soft);
}
.ps-list {
  position: relative;
  margin: 0;
  padding: 0 0 0 22px;
  list-style: none;
}
/* The gold thread down the left edge, from the first pastor to today */
.ps-list::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--sp-gold-500) 0%, var(--sp-gold-300) 70%, var(--sp-sky) 100%);
  box-shadow: 0 0 0 1px rgba(112, 57, 18, .12);
}
.ps-entry {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-areas: "media body" "badges badges" "tools tools";
  gap: var(--sp-space-2) var(--sp-space-3);
  align-items: start;
  margin-bottom: var(--sp-space-3);
  padding: var(--sp-space-3);
  background: #fffdf8;
  border: var(--sp-line) solid var(--sp-sand);
  border-radius: var(--sp-radius-m);
  box-shadow: var(--sp-shadow-1);
  scroll-margin-top: calc(var(--sp-header-h) + var(--sp-space-4));
}
.ps-entry:last-child { margin-bottom: 0; }
.ps-entry--noimg { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body" "badges" "tools"; }
.ps-entry__knot {
  position: absolute;
  left: -22px;
  top: 34px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--sp-bronze);
  border-radius: 50%;
  background: var(--sp-gold-300);
  box-shadow: 0 0 0 3px var(--sp-ivory);
}
.ps-entry--today {
  border-color: var(--sp-sky);
  background: linear-gradient(180deg, #f1f7fc, #fffdf8 70%);
}
.ps-entry--today .ps-entry__knot { background: var(--sp-sky); border-color: var(--sp-link); }
.ps-entry__media { grid-area: media; }
.ps-entry__body { grid-area: body; min-width: 0; }
.ps-entry__tools {
  grid-area: tools;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-space-2);
  min-width: 0;
}
.ps-entry__n {
  color: var(--sp-brick);
  font-family: var(--sp-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.ps-entry__name {
  margin-top: 2px;
  color: var(--sp-ink);
  font-size: 1.3rem;
}
.ps-entry__meta {
  margin-top: 2px;
  color: var(--sp-ink-soft);
  font-size: 1rem;
  line-height: 1.45;
}
.ps-entry__years { white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.ps-entry__badges {
  grid-area: badges;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.ps-entry.is-original .ps-medal { box-shadow: 0 0 0 1px var(--sp-bronze), 0 0 0 4px rgba(112, 57, 18, .22), var(--sp-shadow-1); }

/* A portrait with a double-tap viewer: no browser double-tap zoom on it (pinch zoom still works) */
[data-ps-medal] { touch-action: manipulation; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
/* The new picture after a toggle fades in (opacity only) */
.ps-swap { animation: ps-fade var(--sp-dur-2) var(--sp-ease-out) both; }
@keyframes ps-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ps-swap { animation: none; } }

/* The one double-tap hint line, above the first portrait */
.ps-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: var(--sp-measure);
  margin: calc(-1 * var(--sp-space-3)) 0 var(--sp-space-5);
  color: var(--sp-bronze);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.45;
}
.ps-hint::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--sp-gold-500);
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px var(--sp-ivory), inset 0 0 0 11px var(--sp-gold-300);
}

/* Original / In color: one switch above the list for every portrait; the pressed button is filled */
.ps-switch { display: flex; margin-bottom: var(--sp-space-5); }
.ps-toggle {
  display: inline-flex;
  flex: none;
  border: var(--sp-line) solid var(--sp-bronze);
  border-radius: var(--sp-radius-s);
  overflow: hidden;
  background: var(--sp-ivory);
}
.ps-toggle__btn {
  min-width: var(--sp-tap);
  min-height: var(--sp-tap);
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--sp-bronze);
  font: 600 .9375rem/1.2 var(--sp-font-label);
  -webkit-tap-highlight-color: transparent;
}
.ps-toggle__btn + .ps-toggle__btn { border-left: var(--sp-line) solid var(--sp-bronze); }
@media (hover: hover) { .ps-toggle__btn:hover { background: var(--sp-paper); } }
.ps-toggle__btn:active { background: var(--sp-sand); }
.ps-toggle__btn[aria-pressed="true"] { background: var(--sp-brick-deep); color: var(--sp-ivory); }
.ps-toggle__btn:focus-visible { outline: 3px solid var(--sp-sky); outline-offset: -3px; }

/* Notes, folded on phones */
.ps-more { flex: 0 1 auto; min-width: 0; }
.ps-more[open] { flex-basis: 100%; }
.ps-more__summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--sp-tap);
  min-width: var(--sp-tap);
  padding: 0 12px;
  border: var(--sp-line) solid var(--sp-sand);
  border-radius: var(--sp-radius-s);
  color: var(--sp-link);
  font: 600 .9375rem/1.2 var(--sp-font-label);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  list-style: none;
}
.ps-more__summary::-webkit-details-marker { display: none; }
.ps-more__summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--sp-dur-2) var(--sp-ease-out);
}
.ps-more[open] > .ps-more__summary::before { transform: rotate(45deg); }
@media (hover: hover) { .ps-more__summary:hover { background: var(--sp-paper); } }
.ps-more__summary:active { background: var(--sp-sand); }
.ps-more__body { padding-top: var(--sp-space-2); }
.ps-entry__note {
  color: var(--sp-ink-soft);
  font-size: 1rem;
  line-height: 1.55;
}

.ps-sources {
  max-width: var(--sp-measure);
  margin-top: var(--sp-space-5);
  color: var(--sp-muted);
  font-size: var(--sp-fs-small);
  font-style: italic;
  line-height: 1.55;
}
.ps-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-3);
  margin-top: var(--sp-space-5);
}

/* ---------- Wider screens ---------- */
@media (min-width: 640px) {
  .ps-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-staff__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--sp-space-5); }
  .ps-list { padding-left: 34px; }
  .ps-list::before { left: 10px; }
  .ps-entry__knot { left: -31px; }
}
@media (min-width: 900px) {
  .ps-entry {
    grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.25fr);
    grid-template-areas: "media body tools" "media badges tools";
    grid-template-rows: auto 1fr;
    gap: var(--sp-space-2) var(--sp-space-5);
    padding: var(--sp-space-4) var(--sp-space-5);
  }
  .ps-entry--noimg { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "body tools" "badges tools"; }
  .ps-entry__tools { padding-top: 2px; }
  .ps-entry .ps-medal { width: 120px; }
  .ps-entry__knot { top: 52px; }
  .ps-entry__name { font-size: 1.5rem; }
  .ps-more__body { max-width: var(--sp-measure); }
}
@media (min-width: 1100px) {
  .ps-people { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ps-person { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding-top: var(--sp-space-6); }
  .ps-person .ps-medal { width: 144px; }
  .ps-person__note { text-align: left; }
  .ps-person__bio { display: flex; justify-content: center; }
}

/* Phones: centered (Coach 2026-10-06) */
@media (max-width: 699px) {
  .ps-section .sp-eyebrow { justify-content: center; }
  .ps-section .sp-title,
  .ps-lede,
  .ps-register__lede { text-align: center; }
  .ps-register__lede { margin-inline: auto; }
  /* Sub titles: a gold rule on both sides of the words */
  .ps-subtitle { justify-content: center; text-align: center; }
  .ps-subtitle::before {
    content: "";
    flex: 1 1 40px;
    min-width: 40px;
    height: 1px;
    background: linear-gradient(270deg, var(--sp-gold-500), rgba(214, 140, 59, 0));
  }
  /* Serving today: photo above the words, all centered */
  .ps-person { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .ps-person__note { border-left: 0; padding-left: 0; }
  .ps-person__bio { display: flex; justify-content: center; }
  /* Parish office */
  .ps-staff__title,
  .ps-staff__row,
  .ps-staff__note { text-align: center; }
  .ps-staff__email { justify-self: center; }
  /* Hint, switch, and buttons */
  .ps-hint { justify-content: center; text-align: center; margin-inline: auto; }
  .ps-switch { justify-content: center; }
  .ps-links { justify-content: center; }
}

/* ---------- Amazing round (2026-10-06): the gold thread from 1860 to today ---------- */
.ps-list::before { background: var(--sp-sand); opacity: .6; box-shadow: none; }
.ps-list::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 2px;
  pointer-events: none;
  background: linear-gradient(180deg, var(--sp-gold-500) 0%, var(--sp-brick) 45%, var(--sp-gold-500) 80%, var(--sp-sky) 100%);
  box-shadow: 0 0 6px 1px rgba(246, 183, 91, .55);
}
@media (min-width: 640px) { .ps-list::after { left: 10px; } }
.ps-entry--today::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 4px rgba(136, 184, 220, .35), var(--sp-shadow-2);
}
@keyframes ps-draw { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ps-knot { from { background: var(--sp-ivory); border-color: var(--sp-sand); transform: scale(.7); } }
@keyframes ps-today { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ps-list { view-timeline-name: --ps-thread; }
    .ps-list::after { animation: ps-draw linear both; animation-timeline: --ps-thread; animation-range: cover 40vh cover calc(100% - 60vh); }
    .ps-entry__knot { animation: ps-knot linear both; animation-timeline: view(); animation-range: cover 38vh cover 42vh; }
    .ps-entry--today::after { animation: ps-today linear both; animation-timeline: view(); animation-range: cover 36vh cover 46vh; }
  }
}

/* Paper vignette over each portrait */
.ps-medal { position: relative; }
.ps-medal::before {
  content: '';
  position: absolute;
  inset: 3px;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 38%, rgba(243, 230, 207, 0) 34%, rgba(243, 230, 207, .42) 60%, rgba(243, 230, 207, .9) 100%);
}
/* Fix round: lift the deep shadows of old photos toward warm paper */
.ps-medal > img { filter: sepia(.18) contrast(.82) brightness(1.12); }
.ps-medal--initials::before { content: none; }

/* Iris wipe for Original / In color */
.ps-medal > img.ps-iris {
  position: absolute;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  animation: ps-iris var(--sp-dur-3) var(--sp-ease-inout) both;
}
@keyframes ps-iris { from { clip-path: circle(0% at 50% 32%); } to { clip-path: circle(75% at 50% 32%); } }

/* Notes fold smoothly */
.ps-more { interpolate-size: allow-keywords; }
.ps-more::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size var(--sp-dur-2) var(--sp-ease-out), content-visibility var(--sp-dur-2) allow-discrete;
}
.ps-more[open]::details-content { block-size: auto; }
@keyframes ps-note-in { from { opacity: 0; transform: translateY(-4px); } }

@media (prefers-reduced-motion: no-preference) {
  .ps-more[open] .ps-more__body { animation: ps-note-in var(--sp-dur-2) var(--sp-ease-out) both; }
  .ps-toggle__btn,
  .ps-more__summary { transition: transform 100ms var(--sp-ease-out), background-color 100ms var(--sp-ease-out); }
  .ps-toggle__btn:active,
  .ps-more__summary:active { transform: scale(.97); }
  [data-ps-medal] { transition: transform 100ms var(--sp-ease-out); }
  [data-ps-medal]:active { transform: scale(.98); }
}
@media (prefers-reduced-motion: reduce) {
  .ps-more::details-content { transition: none; }
  .ps-medal > img.ps-iris { animation: none; }
}

/* Fix round: Notes fold grows open (Chrome ::details-content); reduced motion opens at once */
@supports selector(::details-content) {
  .ps-more { interpolate-size: allow-keywords; }
  .ps-more::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 320ms var(--sp-ease-inout, ease), content-visibility 320ms allow-discrete;
  }
  .ps-more[open]::details-content { block-size: auto; }
  @media (prefers-reduced-motion: reduce) {
    .ps-more::details-content { transition: none; }
  }
}