/* The two-way switch (.archive-switch) moved to styles.css on 2026-08-09: the
   chat and the question box now wear the same control, and those two pages do
   not load this stylesheet. One switch, one set of rules, every page. */
/* one ring, two canvases: the year pill sits on the oak page and needs the
   deep gold to be seen at all, the viewer's buttons sit on near-black and
   need the bright one */
.church-year:focus-visible {
  outline: 2px solid var(--gold-ring);
  outline-offset: 3px;
}
.church-lightbox button:focus-visible {
  outline: 2px solid var(--accent-glow);
  outline-offset: 3px;
}

/* NO ALBUM SEARCH BOX (the owner, 2026-08-27: "there shouldn't be a search box
   for albums"). The .church-library-tools row and the .church-q* field it held
   came out with it — the library is on the page whole, under year headings, and
   the rail below is how you travel it. Do not style a box back in.
   The name box on /people/ is a DIFFERENT control and is also gone: a public
   archive of young people does not let a stranger type a name and get that
   person's photographs. Nothing here will ever search people. */

/* ── THE YEAR RAIL PINS, AND IT JUMPS (2026-08-11) ───────────────────────
   The library is on the page all at once under year headings, so this row is
   how you travel it rather than how you cut it down. It is pinned because the
   whole point of a jump control is being able to reach it from wherever you
   are — and it is the ONLY pinned row here, which is the lesson the youth
   shelf paid for: two pinned rows held 182px of an 844px phone permanently.
   Full-bleed inside a .container by cancelling that container's own
   padding-inline, so the pills scroll edge to edge on a phone instead of
   ending in a 20px gutter that looks like the row is broken. The three values
   below are .container's own, from styles.css, and must move with them. */
.church-years {
  position: sticky;
  top: var(--youth-bar-h, 0px);
  z-index: 20;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  /* a flick that runs out of pills must not hand the rest of the gesture to
     the page — on iOS that rubber-bands the document sideways and, started
     near the left edge, arms the back-swipe */
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  margin-block: 0 18px;
  margin-inline: calc(-1 * max(20px, env(safe-area-inset-left))) calc(-1 * max(20px, env(safe-area-inset-right)));
  padding: 7px max(20px, env(safe-area-inset-right)) 7px max(20px, env(safe-area-inset-left));
  /* one step of oak under the pills, so the row reads as a shelf and the pills
     as objects on it — the same correction .album-filters took on 2026-08-10 */
  background: var(--oak-100);
  border-bottom: 1px solid var(--line);
}
/* ── THE YEAR RAIL LEAVES WITH THE HEADER (2026-08-14) ────────────────────
   Same fault as the youth albums filter bar, one page over: the site header
   hides on scroll down (0a7b3a31d, 2026-08-12) but this row still parks at
   top: var(--youth-bar-h), so once the header slides away the rail hangs a
   bar's height down the screen with photos scrolling through the gap above
   it. Cure copied from albums.css (0a020d434, 2026-08-14): slide the row off
   the top by the same offset while html.nav-hidden is set, so it leaves with
   the header and comes back with it on the first scroll up. */
.church-years { transition: top 200ms var(--ease-glide); }
html.nav-hidden .church-years { top: calc(-1 * var(--youth-bar-h, 64px)); }
/* THE OPEN ALBUM'S OWN META LINE (audit 2026-08-12, wave C). church-photos.js
   writes this line as one <span> per atom now, for the reason spelled out at
   .album-meta in albums.css — but this head's <p> is NOT .album-meta (it wears
   the body face, not the mono label voice) so it needs the same wrapping row
   of its own. Without it the two spans butt together with no separator at all.
   The loading and error lines stay plain text: a sentence is one anonymous
   flex item and must be free to wrap inside itself. */
#church-album-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 16px;
  row-gap: 0;
}
#church-album-meta > span { white-space: nowrap; }

/* WHICH WAY THE YEAR RAIL STILL GOES (audit 2026-08-12, wave C). Only four of
   ten years fit at 320 and the fifth chip was cut clean through by the screen
   edge, so the archive's date range looked broken rather than scrollable. Same
   treatment as every other rail on these pages — the mask and the three
   gradients are in albums.css, which this page loads before this file, and the
   original of the whole idea is .pp-with[data-edge] in people.css.
   church-photos.js (railEdges) writes data-rail-edge. */
.church-years[data-rail-edge] {
  -webkit-mask-image: var(--rail-fade);
  mask-image: var(--rail-fade);
}
@media (min-width: 640px) {
  .church-years {
    margin-inline: calc(-1 * max(32px, env(safe-area-inset-left))) calc(-1 * max(32px, env(safe-area-inset-right)));
    padding-inline: max(32px, env(safe-area-inset-left)) max(32px, env(safe-area-inset-right));
  }
}
@media (min-width: 1024px) {
  .church-years {
    margin-inline: calc(-1 * max(48px, env(safe-area-inset-left))) calc(-1 * max(48px, env(safe-area-inset-right)));
    padding-inline: max(48px, env(safe-area-inset-left)) max(48px, env(safe-area-inset-right));
  }
}
.church-year {
  /* 44, not the 42 this shipped with: the house floor, and the same correction
     .archive-switch above already carries (audit 2026-08-06). These are the
     twin of the youth shelf's year pills and were the shorter of the two. */
  min-height: 44px;
  flex: 0 0 auto;
  padding: 0 14px;
  /* the control hairline, the twin of .a-pill's own 2026-08-10 correction:
     --line over --oak-100 on an oak band is a shape drawn round a word */
  border: 1px solid var(--control-line);
  border-radius: 999px;
  color: var(--ink);
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
  font: 700 12px/1 var(--font-mono);
  cursor: pointer;
}
/* The pressed year, matched to the rest of the site (2026-08-10). It was a
   flat --accent-glow fill with a hand-written ink literal — the pale end of
   the brass family, which measures 1.5:1 against the cream band, so the one
   pill that is ON had the WEAKEST edge on the row. The house pressed pill is
   the brass gradient (its deep stop clears 4:1), ink text, and the accent
   shadow — the same three signals .a-pill and .filter-pill already used. */
/* `aria-current` since 2026-08-11, when the rail stopped being a filter and
   became a jump: the lit pill is no longer a choice the visitor made, it is
   where they ARE. `aria-pressed` is kept in the selector so a pill written by
   an older cached copy of church-photos.js still looks right. */
.church-year[aria-pressed="true"],
.church-year[aria-current="true"] {
  color: var(--ink);
  border-color: transparent;
  background: var(--accent-gradient);
  background-origin: border-box;
  box-shadow: var(--shadow-accent-soft);
  font-weight: 700;
}
/* A year the current search has nothing in. Disabled in place rather than
   removed, so the row never resizes under a thumb mid-flick — and it still
   says what the archive holds. */
.church-year:disabled {
  opacity: 0.4;
  cursor: default;
  box-shadow: none;
}
@media (hover: hover) {
  .church-year:not(:disabled):not([aria-current="true"]):hover {
    border-color: var(--control-line-strong);
    box-shadow: var(--shadow-control-lift);
  }
}
.church-year:not(:disabled):active {
  transition-duration: var(--press-down);
  transform: scale(0.96);
}
.church-library-state {
  margin: 0 0 18px;
  color: var(--steel);
  /* body-copy floor: this line is a sentence ("265 albums"), so 14px failed
     mobile-qa's 16px body floor at 390px. Mobile QA fix, 2026-08-17. */
  font-size: 16px;
  line-height: 1.5;
}
.church-library-state[hidden] { display: none; }

.church-face-note {
  margin: 0 0 24px;
  padding: 16px 17px;
  border: 1px solid rgba(201, 154, 46, .24);
  border-radius: var(--radius-card);
  background: rgba(236,195,92,.07);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
}
.church-face-note a { color: var(--gold-text); font-weight: 700; }

.church-album-view[hidden],
.church-lightbox[hidden] { display: none; }
.church-album-head { margin-bottom: 18px; }
.church-album-head h2 {
  margin: 4px 0 6px;
  /* House fluid-type form: the preferred term carries a rem so the size still
     responds to text-size zoom (WCAG F94 — a viewport-only preferred value is
     frozen while the clamp is active). Was `clamp(25px, 7vw, 40px)`.
     25px / 16px = 1.5625rem, so at the 16px default root the preferred term is
     1.5625rem - 25px + 7vi = 25px - 25px + 7vi = 7vi — identical rendering to
     the old 7vw at every width. At a 20px root it becomes 6.25px + 7vi and grows.
     Range 40/25 = 1.6x, inside the 2.5x cap. */
  font: 800 clamp(25px, 1.5625rem - 25px + 7vi, 40px)/1.08 var(--font-display);
  letter-spacing: -.02em;
}
.church-album-head p { margin: 0; color: var(--steel); }
.church-more {
  display: block;
  min-width: min(100%, 260px);
  min-height: 48px;
  margin: 28px auto 0;
  padding: 0 22px;
  border: 1px solid rgba(201, 154, 46, .45);
  border-radius: 999px;
  color: var(--gold-text);
  background: rgba(236,195,92,.08);
  font: 700 13px/1 var(--font-mono);
  cursor: pointer;
}
.church-more[hidden] { display: none; }
.church-more:focus-visible {
  outline: 2px solid var(--gold-ring);
  outline-offset: 3px;
}

.church-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  /* opaque, for the same reason as .shotbox next door: the page must not ghost
     through the photograph somebody opened */
  background: #040405;
}
.church-lightbox-stage {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.church-lightbox img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
}
/* THE THREE EDGE CONTROLS, and only those three. This was `.church-lightbox
   button` until 2026-08-25, which caught the heart the moment one was added to
   the bar below: it took the heart out of the flow as a 48px circle sitting on
   top of "Open full size". Naming the three buttons the rule was always about
   keeps the next control added to this viewer out of the same trap. */
.church-lightbox-close,
.church-lightbox-prev,
.church-lightbox-next {
  position: absolute;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  color: #fff;
  background: rgba(10,10,12,.75);
  font-size: 22px;
  cursor: pointer;
}
.church-lightbox-close { top: 0; right: 0; }
.church-lightbox-prev { left: 0; top: 50%; transform: translateY(-50%); }
.church-lightbox-next { right: 0; top: 50%; transform: translateY(-50%); }
/* THE SIDE ARROWS COME OFF THE PHOTOGRAPH ON A PHONE (2026-08-23).
   Same ruling and same measurement as the album viewer took earlier today
   (albums.css, ".shotbox-rail ~ .shotbox-edge": the owner, "those side to side
   buttons aren't needed"): two 48px circles standing at mid-height ON the
   picture at 390 are an obstruction, and nobody aims for them once the swipe
   works. This viewer already runs the canonical recogniser — church-photos.js
   hands .church-lightbox-stage to overlayKit.attachSwipe — so left/right
   stepping, swipe-down close, Back, Escape and the ✕ are all unchanged; only
   the two circles over the photograph go. Verified stepping by synthetic touch
   at 390 before removing them.
   They survive where there is a pointer to hover with room to stand outside
   the picture, which is exactly the album viewer's rule, and the keyboard
   arrows are untouched either way (document keydown, never these buttons). */
.church-lightbox-prev,
.church-lightbox-next { display: none; }
@media (hover: hover) and (min-width: 720px) {
  .church-lightbox-prev,
  .church-lightbox-next { display: block; }
}
.church-lightbox-bar {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255,255,255,.68);
  font: 600 12px/1.4 var(--font-mono);
}
.church-lightbox-bar a { color: var(--accent-glow); }
/* THE HEART joined this row on 2026-08-25 and at 390px four controls no longer
   fit on one line — the counter, the heart, Open full size and Download. Left
   as it was, the pills slid over each other (Open full size ran under the heart
   at 390px). The row WRAPS instead, and nothing in it is allowed to shrink
   below its own text, which is the same grammar .shotbox-bar in albums.css has
   used since the album viewer got its own heart. */
.church-lightbox-bar { flex-wrap: wrap; row-gap: 8px; }
.church-lightbox-bar > * { flex: none; }
/* ---------- who is in this photograph ----------
   The youth albums face strip — .shotbox-faces / .shotbox-face in albums.css,
   which this page already loads — reused as-is over the church archive. The
   two galleries are the same page over two archives and must not drift into
   two designs, so nothing about the crops, their size, their tap target or
   their below-the-floor state is restated here.

   Only two things belong in this file. First, the row's place in the lightbox:
   it is the third of the three grid rows, under the counter bar.

   Second, ONE override, and it is load order rather than taste.
   `.church-lightbox img` above sets object-fit: contain and a rounded corner
   for the photograph itself; it has the same specificity as albums.css's
   `.shotbox-face img` and this file is loaded second, so without this rule the
   face crops would letterbox inside their circles instead of filling them. */
.church-lightbox-faces {
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.church-lightbox-faces .shotbox-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
html.church-photo-open .page-scroll { overflow: hidden; }

/* ── the Whole Church people surface ──────────────────────────────────────
   /church-photos/people/ borrows the face grid, the portrait and the year
   headings wholesale from people.css — the two surfaces are the same page over
   two archives and must not drift into two designs. What lives here is the one
   thing only this surface has: the state it wears while the archive is still
   being read. The scan works through 25,000 photographs a batch a night, so an
   empty grid is the NORMAL early state and must read as progress, never as a
   broken page. */
.cp-empty {
  margin-top: 26px;
  padding: clamp(20px, 4vw, 30px);
  border: 1px solid rgba(201, 154, 46, .24);
  border-radius: var(--radius-card);
  background: rgba(236,195,92,.06);
}
.cp-empty[hidden] { display: none; }
.people-page .cp-empty-head {
  margin: 0 0 10px;
  font: 800 clamp(1.25rem, 1rem + 1.6vi, 1.75rem)/1.15 var(--font-display);
  letter-spacing: -.01em;
}
.cp-empty-body {
  margin: 0 0 16px;
  color: var(--ink);
  font-size: clamp(0.95rem, 0.9rem + 0.3vi, 1.05rem);
  line-height: 1.6;
}
.cp-empty-tips {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  color: var(--steel);
  font-size: 14px;
  line-height: 1.6;
}
.cp-empty-tips li { padding-left: 18px; position: relative; }
.cp-empty-tips li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-deep);
  opacity: .8;
}
.cp-empty-cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* The line under the head band that says what this page is looking at. */
.cp-note {
  margin: 0;
  color: var(--steel);
  font: 500 13px/1.5 var(--font-mono);
  letter-spacing: .02em;
}

@media (prefers-reduced-motion: reduce) {
  .album-card, .album-shot img { transition: none; }
  .church-year:not(:disabled):active { transform: none; }
  .head-back a { transition: none; }
  .church-years { transition: none; }
}

/* ══ THE LIBRARY ═══════════════════════════════════════════════════════════
   (2026-08-11.) Everything below is the Church Archive reading as a library
   rather than a feed: the whole collection on one page, filed under year
   headings, newest year first, in a grid denser than the youth shelf's.
   WHY DENSER. The youth shelf is 259 albums of nights people were at, and its
   card is sized so you can recognise a face on the cover. This is 229 albums
   of a service that happens every week, mostly titled by its date; what a
   visitor needs from a card here is to SCAN it, so the archive puts more
   spines on a screen and lets the year heading do the orienting. Two columns
   at 320 and 390 — one is not a grid and three would make the titles two words
   wide — then a column earlier than the youth shelf at every step above that. */
.church-lib { display: block; }
.church-lib[hidden] { display: none; }

.church-yr {
  /* The jump lands the heading clear of BOTH pieces of sticky chrome: the site
     bar and this page's pinned year rail. Declaring it here means the browser
     applies it to scrollIntoView for us — church-photos.js measures nothing,
     so there is no number in the JS to go stale when the bar changes. */
  scroll-margin-block-start: calc(var(--youth-bar-h, 64px) + 76px);
  margin-block-end: 34px;
}
.church-yr:last-child { margin-block-end: 0; }

.church-yr-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0 0 12px;
  padding-block-end: 8px;
  border-bottom: 1px solid var(--line);
}
.church-yr-n {
  font: 800 clamp(22px, 1.375rem - 22px + 4.2vi, 30px)/1.05 var(--font-display);
  letter-spacing: -.02em;
  color: var(--ink);
}
/* the count is a footnote to the year, never a second heading */
.church-yr-c {
  color: var(--steel);
  font: 500 11.5px/1 var(--font-mono);
  letter-spacing: .06em;
}

.album-shelf.church-dense { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Titles here are short and mostly dates, so the card body can be tighter than
   the youth shelf's without the heading turning into a column of single words. */
.church-dense .album-body { padding: 8px 10px 11px; }
.church-dense .album-body h3 { font-size: 14px; }
/* 11px, not the 10.5px this shipped at: that is mobile-qa's label floor and
   this mono meta line is the label voice, so half a pixel under it failed the
   gate on all 528 cards at 390px. Still smaller than body, hierarchy intact.
   Mobile QA fix, 2026-08-17. */
.church-dense .album-meta { margin-top: 4px; font-size: 11px; }
@media (min-width: 520px) {
  .album-shelf.church-dense { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
@media (min-width: 760px) {
  .album-shelf.church-dense { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .church-dense .album-body h3 { font-size: 15px; }
}
@media (min-width: 1024px) {
  .album-shelf.church-dense { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 1360px) {
  .album-shelf.church-dense { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ── the way back up to the two doors ────────────────────────────────────
   On BOTH shelves, in the head band, where the .archive-switch used to be
   (2026-08-11). It is deliberately not a segmented control and deliberately
   not two links: this page is one of two places, and the only thing it owes
   the other one is a way back to the door. Lives in this sheet because both
   /albums/ and /church-photos/ load it. */
.head-back { margin: 14px 0 0; }
.head-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 15px;
  border: 1px solid var(--control-line);
  border-radius: var(--radius-pill);
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
  color: var(--ink);
  text-decoration: none;
  font: 700 12px/1 var(--font-mono);
  letter-spacing: .04em;
  transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
@media (hover: hover) {
  .head-back a:hover { border-color: var(--gold-ring); box-shadow: var(--shadow-control-lift); }
}
.head-back a:active { transition-duration: var(--press-down); transform: scale(0.97); }
.head-back a:focus-visible { outline: 2px solid var(--gold-ring); outline-offset: 3px; }