/* =====================================================================
   Look: "Original, refined"
   Back to the first version's calm: paper and ink, navy evenings, a clay
   scalloped roofline (a nod to the tent the church began in). Kept from v2:
   the panorama under the motto, the big motto, the week board, the giant
   300+, Bessie Mae's years and the photo-led ministry rows.
   Old-fashioned touches, used sparingly: thin double rules, letterspaced
   serif caps, and photos matted like church-directory prints.
   No arches: every image frame is rectangular (radius <= 3px).
   ===================================================================== */

:root {
  /* v1 palette */
  --ink: #1d2230;
  --ink-2: #474c59;
  --ink-3: #595d67;
  --paper: #f6f1e7;
  --paper-2: #ede4d3;
  --card: #fffcf6;
  --line: #d9cdb7;
  --clay: #b4532a;
  --clay-ink: #8e3b1a;
  --clay-text: #9a4320;
  --clay-soft: #f1d9c9;
  --night: #161b26;
  --night-2: #222a3a;
  --night-line: #343d50;
  --adobe: var(--paper-2);
  --gold: #f3c58c;
  --radius: 3px;

  /* print frames + rules */
  --mat: #fffdf8;
  --rule: #c4b597;
  --double: 4px double var(--ink);
  --scallop:
    linear-gradient(var(--clay), var(--clay)) 0 0 / 100% 3px no-repeat,
    radial-gradient(circle at 12px 3px, var(--clay) 9.5px, transparent 10px) 0 0 / 24px 14px repeat-x;
}

/* ---------- strip v2's film grade, grain and sun washes ---------- */
.ph img, .card .ci img, .bs-ph img, .arch img, .mrow-ph img, .horizon img, .pano img,
.oline .th img, .people-photo img, .person .pic img { filter: none; }
.ph::after, .bs-ph::after, .arch::after, .mrow-ph::after, .horizon::after, .pano::after,
.card .ci::after, .people-photo::after,
.section.adobe::before, .page-hero::before { display: none; }
.section.adobe { background: var(--paper-2); }
.develop { background: var(--paper-2); }

/* ---------- type: v1 serif heads, Atkinson body; serif caps for labels ---------- */
.label, .site-footer h3, .facts dt, .day h3, .month small, .es-times dt {
  font-family: var(--serif); font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
}
.label { font-size: .95rem; color: var(--clay-text); margin-bottom: 1rem; text-wrap: balance; }
@media (max-width: 600px) { .label { letter-spacing: .1em; } }
.label.light { color: var(--gold); }
.dek { color: var(--ink-2); }
.brand .bn span { letter-spacing: .16em; }

/* ---------- buttons: flat, square-shouldered (no pills, no press shadow) ---------- */
.btn { border-radius: 3px; box-shadow: none; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.menu-btn { border-radius: 3px; }
/* white, not cream, on clay: 4.99:1 (cream was 4.43:1); hover clay-ink 7.5:1 */
.btn.clay, .btn.clay:hover, .nav .btn.clay { color: #fff; }

/* ---------- senior-readable copy: everything people read is 18px or larger ---------- */
.oline .ot > span, .card .cb p, .card p, .stub p, .person p, .timeline p, .avenue li,
.sunday p, .site-footer p, .site-footer li, .mrow-b p, .ledger span, .feature p { font-size: 1.125rem; line-height: 1.5; }
.stub .where { font-size: 1.0625rem; }
.day li { font-size: 1.125rem; line-height: 1.4; text-wrap: pretty; }
.day li b { font-size: 1.15rem; }
.day li .when { font-size: 1rem; }
@media (max-width: 860px) { .person p { font-size: 1.125rem; } }
/* small labels never below 15px */
.site-footer h3 { font-size: .95rem; color: #b9b0a4; }               /* 8.0:1 on night */
.stub .mo, .stub .dw { font-size: .95rem; }
.btn.small { font-size: 1rem; }
.day h3 { font-size: .95rem; }
.horizon figcaption span, .es-times dt { font-size: .95rem; }
/* wide enough that 'On Central Avenue since 1952' always stays on one line (it is ~290px) */
.horizon figcaption { max-width: max(18ch, 19rem); }
.horizon figcaption span { text-wrap: balance; }
.card .meta { font: 600 .95rem/1.3 var(--serif); letter-spacing: .1em; text-transform: uppercase; color: var(--clay-text); text-wrap: balance; }
.facts dt { font-size: .95rem; }
.countdown span { font-size: .95rem; letter-spacing: .1em; }
.crumbs, .foot-bottom, .scripture cite, .postlist time { font-size: 1rem; }
.oline i, table.times, .vlist figcaption { font-size: 1.125rem; }

/* ---------- top bar + masthead ---------- */
.topbar { background: var(--night); }
@media (min-width: 601px) { .topbar { font-size: 1rem; } }
@media (max-width: 600px) { .topbar { font-size: .95rem; } }
@media (max-width: 600px) {
  /* at 375px the two links don't fit on one line: let the phone number drop whole, never mid-number */
  .topbar a { white-space: nowrap; }
  .topbar .tb-right { flex-wrap: wrap; row-gap: 0; }
}
@media (max-width: 389px) { .topbar .tb-right { column-gap: .5rem; } }
.site-header { border-bottom: 3px double rgba(29, 34, 48, .5); }
.brand img { border-radius: 2px; border: 1px solid var(--rule); padding: 2px; background: #fff; }
.social a { border-radius: 3px; }

/* ---------- the clay scallop roofline (v1), laid as it comes into view ---------- */
.roof { height: 14px; background: var(--scallop); filter: none; }
.roof:has(+ .site-footer) { background-color: var(--night); }
.roof + .section, .roof + .site-footer { box-shadow: none; }
@media (max-width: 600px) {
  .roof { height: 11px; background:
    linear-gradient(var(--clay), var(--clay)) 0 0 / 100% 2px no-repeat,
    radial-gradient(circle at 9px 2px, var(--clay) 7px, transparent 7.5px) 0 0 / 18px 11px repeat-x; }
}
@media (max-width: 960px) {
  .nav::before { height: 14px; background: var(--scallop); }
}

/* ---------- print frames: a white mat and a thin rule, like a directory photo ---------- */
.mrow-ph, .arch, .person .pic, .people-photo, .oline .th, .bs-ph, .split .ph {
  background: var(--mat); border: 1px solid var(--rule); border-radius: 1px;
  box-shadow: 0 1px 0 rgba(29, 34, 48, .05);
}
.mrow-ph img, .arch img, .person .pic img, .people-photo img, .oline .th img, .bs-ph img {
  outline: 1px solid rgba(29, 34, 48, .14); outline-offset: -1px;
}

/* ---------- home hero: big motto, then the building, full width ---------- */
.hero { padding-top: clamp(40px, 6vw, 88px); }
.hero-side .lede { color: var(--ink-2); }
@media (min-width: 1101px) {
  .hero-top { grid-template-columns: [full-start] minmax(var(--gut), 1fr) [text-start] minmax(0, calc(var(--wrap) - 26rem))
    [side-start] minmax(17rem, 26rem) [text-end] minmax(var(--gut), 1fr) [full-end]; }
  .hero-top > .label { grid-column: text-start / side-start; align-self: start; }
  .motto > span:nth-child(2) { padding-left: 0; }
  /* the welcome sits in its own ruled column, like a newspaper sidebar */
  .hero-side { grid-row: 1 / 3; align-self: end; border-left: 1px solid var(--line); padding: 1.5rem 0 .6rem clamp(28px, 3vw, 44px); }
  .hero-side .lede { font-size: 1.3rem; max-width: none; }
}
/* the two hero buttons stack as one even column, not two ragged widths */
.hero-side .actions { display: grid; grid-template-columns: minmax(0, 19rem); gap: .6rem; }
.hero-side .actions .btn { width: 100%; justify-content: center; }
@media (min-width: 601px) and (max-width: 1100px) {
  .hero-side .actions { grid-template-columns: repeat(2, minmax(0, 17rem)); }
}
@media (max-width: 600px) { .hero-side .actions { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 389px) { .hero-top > .label { letter-spacing: .07em; } }
.horizon { border-top: 1px solid var(--ink); }
.horizon figcaption { color: var(--night); }

/* This Sunday: back to v1's light strip, ruled like a printed order of service */
.sunday { --line: #d9cdb7; --focus: var(--sky); background: var(--card); color: var(--ink);
  border-top: 1px solid var(--ink); border-bottom: 4px double rgba(29, 34, 48, .5); }
.sunday .cell { border-left-color: var(--line); }
.sunday .label { color: var(--clay-text); }
.sunday p { color: var(--ink-2); }
.sunday a { color: var(--clay-ink); text-decoration-color: currentColor; }
.sunday h3, .sunday .t { color: var(--ink); }
.sunday .flag.next { color: var(--clay-text); }
@media (max-width: 900px) {
  .sunday .cell:first-child { border-bottom-color: var(--line); }
  .sunday .cell:nth-child(4) { border-top-color: var(--line); }
}

/* ---------- Love God / Love People / Follow Jesus: v1's three columns, now with a print each ---------- */
.wrap:has(> .mrows) > h2.sr {
  position: static !important; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
  margin: 0 0 1rem; font: 600 .95rem/1.3 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--clay-text);
}
.mrows { --cg: clamp(40px, 5vw, 80px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--cg);
  border-top: var(--double); }
.mrow { position: relative; display: flex; flex-direction: column; gap: 0; padding: clamp(24px, 3vw, 36px) 0 0; border-bottom: 0; }
.mrow + .mrow::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--cg) / -2); border-left: 1px solid var(--line); }
.mrow-ph { order: -1; aspect-ratio: 4 / 3; padding: 8px; margin: 0 0 1.5rem; border-radius: 1px; }
.mrow-t { font-size: clamp(1.9rem, 2.8vw, 2.5rem); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 .6rem; }
.mrow-t .num { font-size: 1.05rem; margin-bottom: .35rem; }
.mrow:nth-child(2) .mrow-t { font-style: normal; font-weight: 650; color: var(--ink); }
.mrow-b { display: flex; flex-direction: column; flex: 1; }
.mrow-b p { flex: 1; }
@media (max-width: 860px) {
  .mrows { grid-template-columns: 1fr; }
  .mrow { display: grid; grid-template-columns: minmax(0, 1fr) 112px; column-gap: 16px; padding: 1.75rem 0; }
  .mrow + .mrow { border-top: 1px solid var(--line); }
  .mrow + .mrow::before { display: none; }
  .mrow-t { grid-column: 1; grid-row: 1; align-self: end; margin: 0; }
  .mrow-ph { grid-column: 2; grid-row: 1; aspect-ratio: 4 / 5; padding: 5px; margin: 0; }
  .mrow-b { grid-column: 1 / -1; grid-row: 2; margin-top: 1rem; }
}

/* ---------- 300+: the Angel Tree print and the big number ---------- */
.bleed-split { --knock: transparent; }
.bs-ph { grid-column: wrap-start / mid; align-self: center; min-height: clamp(380px, 38vw, 540px);
  margin: clamp(48px, 7vw, 104px) 0; padding: 10px; }
.bs-ph img { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
.bleed-split.flip .bs-ph { grid-column: mid / wrap-end; }
.bs-copy { padding-left: clamp(32px, 5vw, 80px); }
.bleed-split.flip .bs-copy { padding-right: clamp(32px, 5vw, 80px); }
.mega { margin: 0 0 .1em -.04em; text-shadow: none; }
.ledger { border-top: var(--double); }
@media (max-width: 860px) {
  .bleed-split { display: flow-root; }
  .bs-ph { min-height: 0; height: 280px; margin: 44px var(--gut) 0; }
  .impact .bs-ph { margin-top: 0; }
  .bs-copy, .bleed-split.flip .bs-copy { padding-left: var(--gut); padding-right: var(--gut); }
  .impact .bs-copy { padding-top: 1.5rem; }
  .mega { margin: 0 0 .15em; }
}

/* ---------- week board: v1 navy, no mountain ridge; a double-ruled board ---------- */
.section.ink.ridge { margin-top: 0; }
.section.ink.ridge::before { display: none; }
.week { border-radius: 0; outline: 1px solid var(--night-line); outline-offset: 4px; }
.day h3 { color: #c3c8d2; }
.day li .when { color: var(--gold); }
.section.ink .day li a { color: #fff; }
.day.today { background: var(--night-2); }
.day.today h3 { color: var(--sun); }
.daypick button { border-radius: 2px; }

/* ---------- calendar stubs: v1 ink date blocks ---------- */
.stub { border-radius: 2px; }
.stub .date { background: var(--ink); border-radius: 1px 0 0 1px; }
.stub .mo { color: var(--sun); }
.stub:hover .date, .stub:focus-visible .date { transform: rotate(-1.5deg) translate(-1px, 1px); }

/* ---------- Mark your calendar: same label, heading and double rule as every other section ---------- */
.section[data-upcoming] .sec-head > div::before { content: "Coming up"; display: block; margin-bottom: 1rem;
  font: 600 .95rem/1.3 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--clay-text); }
.section[data-upcoming] .sec-head { border-bottom: var(--double); padding-bottom: 1.25rem; margin-bottom: 2rem; }

/* ---------- Bessie Mae ---------- */
.story-q .quote { font-weight: 500; }
.avenue li::before { background: var(--paper-2); }
@media (min-width: 861px) {
  /* the years start level with the quote, like a family register beside the letter */
  .story-grid { align-items: start; }
  .story .avenue { margin-top: 9.25rem; }
  .avenue b { font-size: 2rem; }
}

/* ---------- livestream: v1 paper section, the video matted ---------- */
.section.sky { background: var(--paper); color: var(--ink); --focus: var(--sky); }
.section.sky h2, .section.sky h3 { color: var(--ink); }
.section.sky h2 em { color: var(--clay); }
.section.sky .label { color: var(--clay-text); }
.section.sky a:not(.btn) { color: var(--clay-ink); }
.section.sky .lede, .section.sky .dek { color: var(--ink-2); }
.section.sky .btn:not(.ghost) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.section.sky .btn:not(.ghost):hover { background: #000; }
.section.sky .btn.ghost { color: var(--ink); border-color: var(--ink); }
.section.sky .btn.ghost:hover { background: var(--ink); color: var(--paper); }
.video { border-radius: 1px; }
.section.sky .video, .split > .video { box-shadow: 0 0 0 9px var(--mat), 0 0 0 10px var(--rule); }
@media (max-width: 600px) {
  .section.sky .video, .split > .video { box-shadow: 0 0 0 6px var(--mat), 0 0 0 7px var(--rule); margin-inline: 7px; }
  /* keep the board's outer rule on the same 16px gutter as everything else */
  .week { outline-offset: 3px; margin-inline: 4px; }
}

/* ---------- ¿Hablas español? clay band, photo matted ---------- */
.es-band .bs-ph { border-color: rgba(60, 20, 6, .35); }

/* ---------- interior page heads: plain paper, a double rule, a matted print ---------- */
.page-hero { background: var(--paper); border-bottom: 4px double rgba(29, 34, 48, .5); }
.page-hero.has-arch { padding-bottom: clamp(32px, 4vw, 56px); }
.page-hero.has-arch .wrap { align-items: center; }
.page-hero.has-arch .ph-text { padding-bottom: 0; }
.arch { aspect-ratio: 4 / 5; padding: 10px; border-radius: 1px; }
.page-hero.has-pano { border-bottom: 0; }
.pano { border-top: 1px solid var(--ink); }
@media (max-width: 760px) {
  .page-hero .arch { aspect-ratio: 3 / 2; padding: 6px; border-radius: 1px; }
}

/* ---------- ministries hub: photo-led rows, square prints ---------- */
.olist { border-top: var(--double); }
.oline .th { border-radius: 1px; padding: 4px; }
.olist.big .th { border-radius: 1px; padding: 5px; }
/* no photo yet: a bookplate monogram with a double inner rule */
.oline .th.ini, .oline .th.ini.develop { background: var(--mat); color: var(--clay-text);
  box-shadow: inset 0 0 0 4px var(--mat), inset 0 0 0 5px rgba(154, 67, 32, .5), inset 0 0 0 7px var(--mat), inset 0 0 0 8px rgba(154, 67, 32, .5); }
/* a smaller monogram reads as a bookplate, not a missing photo */
.olist.big .th.ini { background: var(--card); font-size: 2.4rem; }
.olist.big .th.ini { box-shadow: inset 0 0 0 5px var(--card), inset 0 0 0 6px rgba(154, 67, 32, .5), inset 0 0 0 9px var(--card), inset 0 0 0 10px rgba(154, 67, 32, .5); }
.oline .th.logo { background: #fff; box-shadow: none; }
#reach.section.sky { background: var(--paper-2); }
.section.sky .olist { border-top-color: var(--ink); }
.section.sky .oline { color: var(--ink); border-bottom-color: var(--line); }
.section.sky .oline i { color: var(--clay-text); }
.section.sky .oline .ot > span { color: var(--ink-2); }
.section.sky .oline:hover b { text-decoration-color: var(--clay); }
@media (max-width: 760px) {
  .olist.big .th { border-radius: 1px; }
}

/* ---------- about: timeline under a scalloped valance, directory portraits ---------- */
@media (min-width: 861px) {
  .timeline::before { top: calc(3.6rem + 8px); height: 4px; background: none; border-top: 4px double var(--ink); filter: none; }
  .timeline li { position: relative; }
  .timeline li::before { content: ""; position: absolute; z-index: 1; left: 0; top: calc(3.6rem + 4px); width: 12px; height: 12px;
    border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 4px var(--paper); }
  .timeline h3 { margin-top: 2.4rem; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
  .motion .timeline li::before { transition: transform .5s var(--ease-out) calc(var(--i, 0) * .3s + .3s); }
  .motion .timeline:not(.in) li::before { transform: scale(0); }
  .timeline li:nth-child(2) { --i: 1; } .timeline li:nth-child(3) { --i: 2; }
  .timeline li:nth-child(4) { --i: 3; } .timeline li:nth-child(5) { --i: 4; }
}
.person .pic { padding: 7px; border-radius: 1px; }
/* no portrait yet: a sand bookplate with a double clay rule (clay-text on #e6dac4 = 4.75:1) */
.person .pic.ph { background: #e6dac4; color: var(--clay-text); font-size: 3.6rem;
  box-shadow: inset 0 0 0 7px var(--mat), inset 0 0 0 8px rgba(29, 34, 48, .14),
    inset 0 0 0 13px #e6dac4, inset 0 0 0 14px rgba(154, 67, 32, .5), inset 0 0 0 17px #e6dac4, inset 0 0 0 18px rgba(154, 67, 32, .5); }
.person.lead { align-items: center; }
/* phones: one listing per row, portrait beside the text, like a printed church directory */
@media (max-width: 560px) {
  .people { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .person:not(.lead) { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; align-items: start;
    padding: 1.25rem 0; border-top: 1px solid var(--line); }
  .person:not(.lead) .pic { padding: 5px; }
  .person:not(.lead) .pic.ph { font-size: 2.2rem; box-shadow: inset 0 0 0 5px var(--mat), inset 0 0 0 6px rgba(29, 34, 48, .14),
    inset 0 0 0 9px #e6dac4, inset 0 0 0 10px rgba(154, 67, 32, .5), inset 0 0 0 12px #e6dac4, inset 0 0 0 13px rgba(154, 67, 32, .5); }
  .person:not(.lead) h3 { margin-top: 0; }
}
.person.lead .pic { padding: 10px; }
/* roles set like a directory listing: serif italic, as in the ministry rows (5.2:1 on sand) */
.person .role { font: italic 500 1.08rem/1.3 var(--serif); color: var(--clay-text); margin-bottom: .5rem; }
/* one period detail on the history: a three-line drop cap (large text, 4.4:1) */
.narrow > .label + h2 + p::first-letter { float: left; font: 600 3.4em/.82 var(--serif); color: var(--clay); margin: .06em .1em 0 0; }
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .narrow > .label + h2 + p::first-letter { float: none; font-size: inherit; line-height: inherit; margin: 0 .14em 0 0;
    -webkit-initial-letter: 3; initial-letter: 3; }
}
.people-photo { padding: 10px; border-radius: 1px; }
.quotes blockquote { border-top: var(--double); }

/* ---------- events ---------- */
.feature { border-radius: 2px; }
.feature .fi { background: var(--night); }
.countdown div { border-radius: 2px; }
.agenda { border-top: var(--double); }
.card { border-radius: 2px; }
.card .ci { margin: 8px 8px 0; border: 1px solid var(--line); }
.card .ci.is-flyer { background: var(--paper-2); padding: 6px; }
.flyer { border-radius: 1px; }

/* ---------- panels, forms, misc: no radius over 3px ---------- */
.panel img, .prose img { border-radius: 1px !important; }
/* a few templates round photos with inline styles; square them up here */
main [style*="border-radius"] { border-radius: 1px !important; }
figure.ph { padding: 10px; background: var(--mat); border: 1px solid var(--rule); }
.map { border-radius: 1px; }
.logo-mark { border-radius: 2px; }
.yearhead { border-top: var(--double); }

/* ---------- footer ---------- */
.site-footer { background: var(--night); }
.foot-motto span:nth-child(2) { font-style: italic; font-weight: 600; color: var(--gold); }

/* ---------- photo prints: instant-camera prints, each tipped a little, the caption written on the bottom margin ---------- */
.print { background: #fffefa; border: 1px solid rgba(29, 34, 48, .12); border-radius: 2px; padding: 10px 10px 0;
  box-shadow: 0 1px 1px rgba(29, 34, 48, .08), 0 16px 28px -20px rgba(29, 34, 48, .55);
  transform: rotate(var(--tilt, 0deg)); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.print .pi { background: var(--paper-2); outline: 1px solid rgba(29, 34, 48, .1); outline-offset: -1px; }
.print figcaption { margin: 0; padding: .8rem .3rem 1.05rem; text-align: center; font: italic 500 1.12rem/1.3 var(--serif); color: var(--ink-2); }
.print:nth-child(3n+1) { --tilt: -1.3deg; }
.print:nth-child(3n+2) { --tilt: .9deg; }
.print:nth-child(3n) { --tilt: -.5deg; }
.prints.n1 .print { --tilt: 1deg; }
.prints.mosaic .print:nth-child(odd) { --tilt: -.6deg; }
.prints.mosaic .print:nth-child(even) { --tilt: .6deg; }
.prints.mosaic { gap: clamp(18px, 2.2vw, 30px); }
@media (hover: hover) {
  .print:hover { --tilt: 0deg; transform: translateY(-4px); box-shadow: 0 1px 1px rgba(29, 34, 48, .08), 0 22px 34px -22px rgba(29, 34, 48, .6); }
  .print:hover img { transform: none; }
}
@media (max-width: 600px) { .print { --tilt: 0deg !important; } }
@media (prefers-reduced-motion: reduce) { .print { transition: none; } }

/* ---------- staff: portraits on a plain backdrop are lifted out and stand in front of a ruled bookplate ---------- */
.person .pic.cut { position: relative; overflow: visible; padding: 0; margin-top: clamp(20px, 3vw, 40px);
  background: var(--paper-2); border: 1px solid var(--rule);
  box-shadow: inset 0 0 0 6px var(--mat), inset 0 0 0 7px rgba(154, 67, 32, .35); }
.person .pic.cut img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: auto; height: 112%; max-width: 100%;
  object-fit: contain; object-position: 50% 100%; outline: 0; filter: none; }
.person.lead .pic.cut { padding: 0; max-width: 420px; width: 100%; justify-self: center; }
/* the staff group photo is shown whole, never cropped */
.people-photo { max-width: 1100px; }
.people-photo img { display: block; height: auto; max-height: none; object-fit: fill; }

/* ---------- home: the church at sunset, drifting slowly; the address set in white on the dark clouds ---------- */
.horizon img { object-position: 82% 72%; transform-origin: 78% 70%; }
.horizon::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, rgba(22, 27, 38, .66) 0%, rgba(22, 27, 38, .26) 34%, transparent 58%); }
.horizon figcaption { left: max(var(--gut), (100% - var(--wrap)) / 2); right: auto; text-align: left; color: #fff;
  text-shadow: 0 1px 2px rgba(22, 27, 38, .6), 0 0 20px rgba(22, 27, 38, .45); }
.horizon figcaption span { color: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .motion .horizon img { animation: settle 2.4s .1s var(--ease-out) backwards, drift 40s 2.5s ease-in-out infinite alternate; }
}
@keyframes drift { to { transform: scale(1.07); } }
.horizon .h-day { opacity: 0; object-position: 30% 78%; }
@media (prefers-reduced-motion: no-preference) {
  .motion .horizon .h-day { animation: daylight 32s 7s ease-in-out infinite both, drift 40s 2.5s ease-in-out infinite alternate; }
}
@keyframes daylight { 0%, 100% { opacity: 0; } 12%, 50% { opacity: 1; } 62% { opacity: 0; } }

/* ---------- a little more ceremony, used sparingly ---------- */
/* a short clay rule before each section label, like a printed program */
.label:not(.light)::before, .sec-head .label::before { content: ""; display: inline-block; width: 1.75em; height: 1px; margin: 0 .65em .3em 0;
  vertical-align: middle; background: currentColor; opacity: .7; }
.sunday .label::before, .site-footer .label::before { display: none; }
@media (max-width: 600px) { .hero-top > .label::before { display: none; } }
/* ministry pages open with a three-line drop cap, as the history does */
.lead-first > p:first-child::first-letter { float: left; font: 600 3.3em/.8 var(--serif); color: var(--clay); margin: .06em .1em 0 0; }
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .lead-first > p:first-child::first-letter { float: none; font-size: inherit; line-height: inherit; margin: 0 .12em 0 0;
    -webkit-initial-letter: 3; initial-letter: 3; }
}
/* cards and flyers lift a touch under the pointer */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card, .flyer-card, .stub, .oline .th { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color var(--t-hover); }
  .card:hover, .flyer-card:hover, .stub:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -22px rgba(29, 34, 48, .6); }
  .oline:hover .th { transform: rotate(-1deg); }
}

/* ---------- readability, touch and layout fixes from the pre-review audit ---------- */
html { scroll-padding-top: 84px; }                       /* in-page links land below the sticky header */
a[href^="tel:"] { white-space: nowrap; }
.brand .bn span { font-size: .875rem; letter-spacing: .1em; }
.flag { font-size: 1rem; }
.btn.small { min-height: 48px; }
.map { min-height: 240px; }
/* event flyers are shown whole, never cropped */
.feature .fi img { object-fit: contain; }
/* blog posts and newsletter archives sit centred, like a printed page */
.prose.post, .prose.issue { margin-inline: auto; }
/* forms: everything people read is 18px; checkboxes big enough to tap; field edges visible on paper */
.form label, .form legend { font-size: 1.125rem; }
.form .note { font-size: 1rem; }
.form input, .form select, .form textarea { border-color: #857860; }
.checks label { min-height: 44px; font-size: 1.125rem; }
.checks input { width: 1.35rem; height: 1.35rem; flex: none; accent-color: var(--clay-ink); }
/* FAQ: the whole box opens, not just the question line */
details.panel { padding: 0 !important; }
details.panel > summary { display: block; padding: 1.1rem 1.25rem; min-height: 56px; cursor: pointer; }
details.panel > :not(summary) { padding: 0 1.25rem 1.1rem; margin: 0 !important; }
/* home flyer board on phones: the next three, then a button to the rest */
.board-more { display: none; margin: 1.5rem 0 0; }
@media (max-width: 560px) {
  .board.short .flyer-card.extra { display: none; }
  .board-more { display: block; }
  .board-more .btn { width: 100%; justify-content: center; }
}
/* the drop cap sits out short intros that start with an acronym or a quotation */
.lead-first > p:first-child + * { clear: left; }
.lead-first.no-cap > p:first-child::first-letter { float: none; font: inherit; color: inherit; margin: 0;
  -webkit-initial-letter: normal; initial-letter: normal; }
.past-note { margin: 0 0 1rem; padding: .7rem .9rem; background: var(--clay-soft); border-radius: 2px; }