/* PCLG — Shannon Road at Ten
 * A place-first system drawn from the A-frame sanctuary, exact official mark,
 * and PCLG's own photographs.
 *
 * Color comes from the church's own logo, read through the ICC profile
 * embedded in the CMYK master it publishes: deep teal-navy #00486C, teal
 * #00A8B4, brick #B4483C. Those are the values pclg.org renders today, so the
 * site and the mark agree instead of drifting toward brighter primaries.
 */

@font-face {
  font-family: "Hedvig Letters Sans";
  src: url("fonts/HedvigLettersSans-Regular.subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hedvig Letters Serif";
  src: url("fonts/HedvigLettersSerif-opsz.subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --white: #ffffff;
  --fog: #f1f6f8;
  --ink: #16323f;
  --muted: #4e6875;
  --rule: #c3d5dc;
  --rule-strong: #8daebb;
  --brand-blue: #00486c;
  --brand-aqua: #00a8b4;
  --brand-coral: #b4483c;
  --deep: #00354f;
  --accent: #b4483c;
  --accent-dark: #96382e;
  --accent-pale: #f6e9e6;
  --warning: #785600;

  /* legible on the deep room, where the mark's own teal and brick are too dark */
  --on-deep: #d9ecf1;
  --on-deep-teal: #8fd9e0;
  --on-deep-brick: #e8b6af;

  --display: "Hedvig Letters Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Hedvig Letters Sans", "Avenir Next", Avenir, system-ui, sans-serif;
  --serif: var(--display);
  --mono: var(--sans);

  --fs--1: clamp(0.82rem, 0.8rem + 0.08vw, 0.88rem);
  /* Desktop body rides to 19px, not 17.8: the congregation's own bar is "easy
     for old people to use", and at 19px the 65ch measure below lands the letter
     at a true 65 characters instead of 88. Phones hold at 16. */
  --fs-0: clamp(1rem, 0.94rem + 0.28vw, 1.1875rem);
  --fs-1: clamp(1.2rem, 1.12rem + 0.36vw, 1.42rem);
  --fs-2: clamp(1.48rem, 1.32rem + 0.72vw, 1.92rem);
  --fs-3: clamp(1.95rem, 1.58rem + 1.5vw, 2.85rem);
  --fs-4: clamp(2.55rem, 1.92rem + 2.75vw, 4.25rem);
  --fs-5: clamp(3.2rem, 2.2rem + 4.15vw, 5.75rem);
  /* Two floors the scale above does not cover, both of them about who reads
     this site. --label-size is the bottom of the eyebrow/kicker/tagline
     register: those had drifted to 0.6rem (9.6px) and 0.62rem (9.9px), and
     presbyopia starts around 40 — small type does not read as small to this
     congregation, it becomes unfocusable. --field-size is the iOS floor: Safari
     zooms the whole layout when a focused input is under 16px, which threw the
     page around mid-task on 35 fields. Neither is a preference; both are the
     same reason the church asked for a Larger type button. */
  --label-size: 0.75rem;   /* eyebrows, kickers, stamps, captions */
  --meta-size: 0.82rem;    /* dates, counts, source lines, notes */
  --small-size: 0.92rem;   /* secondary body: asides, figure text */
  --field-size: 1rem;      /* every form control; the iOS floor */
  /* Not 65ch: ch measures the "0" glyph, and Hedvig Letters Sans draws a wide
     zero (0.62em), so 65ch quietly meant ~88 real characters — which is how
     every reading column on the site ran past the 75-character ceiling while
     carrying a token that said 65. Average prose character here is ~0.46em;
     30em holds lines near 70 characters at every body size. */
  --measure: 30em;
  --band-x: clamp(1.25rem, 4.6vw, 4.5rem);
  --max: 82rem;

  /* compatibility names used by a few page-scoped styles */
  --paper: var(--white);
  --feint: var(--fog);
  --vault: var(--deep);
  --sky: var(--fog);
  --mint: var(--accent-pale);
  --coral-wash: #f9efed;
  --coral-ink: var(--accent-dark);
  --aqua-ink: var(--brand-blue);
  --accent-300: #dcaba4;
  --accent-400: #c9776c;
  --accent-500: var(--accent);
  --accent-600: var(--accent-dark);
  --accent-700: #7d2e26;
  --accent-800: #63241e;
  --accent-900: #4a1b16;
}

* { box-sizing: border-box; }

html {
  color: var(--ink);
  background: var(--white);
  font-family: var(--sans);
  font-size: 100%;
  line-height: 1.58;
  scroll-behavior: smooth;
  scroll-padding-top: var(--pclg-site-nav-height, 42px);
  -webkit-text-size-adjust: 100%;
}
html:has(.page-local-nav) {
  scroll-padding-top: calc(var(--pclg-site-nav-height, 42px) + var(--pclg-local-nav-height, 52px));
}

/* A route carrying a long index moves focus programmatically into its results
   and into its own search field. Animating that move means the focus ring lands
   somewhere the reader cannot see yet, and a screen a keyboard user is already
   typing into slides under them. Those routes jump. */
html:has([data-stoa-index]) { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
  html,
  [data-stoa-index],
  [data-stoa-index-results] { scroll-behavior: auto; }
}

/* Visit rebuild: the campus plan leads the page, the service sequence uses a
   stable hanging grid, and FAQs are native details so keyboard and no-script
   behavior stay intact. */
.visit-hero--compact { padding-block: clamp(1.7rem, 3vw, 3rem); }
.visit-standing dl { display: grid; gap: 0; margin: 0; }
.visit-standing dl > div {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  gap: 1.15rem;
  align-items: baseline;
  padding-block: 0.78rem;
  border-block-end: 1px solid var(--rule);
}
.visit-standing dt { color: var(--muted); font-size: var(--label-size); letter-spacing: 0.09em; text-transform: uppercase; }
.visit-standing dd { margin: 0; }
.visit-standing .button-row { margin-block-start: 1rem; }
.visit-standing .button-row .btn {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.visit-map-band { padding-block: clamp(1.6rem, 3vw, 2.8rem); }
.visit-map-first > .campus-map { margin-block: 0; }
.visit-children-welcome { padding-block: clamp(2.4rem, 4.2vw, 3.8rem); }
.visit-children-welcome h2 {
  margin-block-end: 0;
  font-size: var(--fs-3);
}
.visit-children-path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: none;
  margin: 1.7rem 0 0;
  padding: 0;
  list-style: none;
}
.visit-children-path li {
  max-width: none;
  margin: 0;
  padding-block-start: 1rem;
  border-block-start: 3px solid var(--brand-aqua);
}
.visit-children-path b {
  display: block;
  margin-block-end: 0.45rem;
  font-family: var(--display);
  font-size: var(--fs-1);
  font-weight: 400;
  line-height: 1.25;
}
.visit-children-path span {
  display: block;
  max-width: 22em;
  color: var(--muted);
  line-height: 1.6;
}
.visit-expect-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.service-shape--review { margin: 1.5rem 0 0; padding: 0; list-style: none; counter-reset: worship-step; }
.service-shape--review li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.15rem 1rem;
  align-items: start;
  padding-block: 0.75rem;
  border-block-end: 1px solid var(--rule);
  counter-increment: worship-step;
}
.service-shape--review li::before {
  grid-column: 1;
  grid-row: 1 / span 2;
  content: counter(worship-step);
  color: var(--accent);
  font-size: var(--label-size);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
.service-shape--review b { grid-column: 2; grid-row: 1; font-family: var(--display); font-size: var(--fs-1); font-weight: 400; }
.service-shape--review span { grid-column: 2; grid-row: 2; color: var(--muted); }
.children-callout {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-inline-start: 5px solid var(--brand-aqua);
}
.children-callout h3 { margin-block-end: 0.65rem; }
.children-callout p { margin: 0; }
.visit-sanctuary-photo { margin-block-start: 1.5rem; }
.visit-sanctuary-photo img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 45%; }
.visit-arrival-photos { background: var(--white); }
.visit-arrival-photos .section-heading-row > p { color: var(--muted); max-width: 34rem; margin: 0; }
/* Visit's photographs carry the walk from Shannon Road to a seat: the approach,
   the lot, the doors, the nursery, the Sanctuary. They are wayfinding, not
   decoration, and a reader is matching them against what they will actually
   see — so they run the full measure of their column.

   They were briefly capped (max-width 22-44rem plus max-height 12-16.5rem).
   With aspect-ratio also set, a height cap governs BOTH axes: 12rem tall on a
   3/2 frame is only 18rem wide, so the caps shrank the photographs to roughly a
   third of the column and stranded them beside empty space. The aspect ratios
   stay — they are the art direction, and they keep the frames consistent. */
.visit-approach-photo { margin-block: clamp(1.25rem, 2.5vw, 2rem) 0; }
.visit-approach-photo img { aspect-ratio: 16 / 9; object-fit: cover; }
.visit-wayfinding-photos { margin-block-end: 0; }
.visit-wayfinding-photos img { aspect-ratio: 3 / 2; object-fit: cover; }
.visit-memorial-garden { margin-block-start: clamp(1.25rem, 2.5vw, 2rem); }
.visit-memorial-garden img { aspect-ratio: 3 / 2; object-fit: cover; }
.visit-nursery-photo { margin-block-start: 1.5rem; }
.visit-nursery-photo img { aspect-ratio: 3 / 2; object-fit: cover; }
.history-present-cross { max-width: 34rem; margin-block: 1.4rem; }
.history-present-cross img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 46rem) {
  .visit-approach-photo img { aspect-ratio: 16 / 10; }
}
.visit-question-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-block-start: 1.5rem;
}
.visit-question-grid details {
  align-self: start;
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-inline-start: 4px solid var(--brand-aqua);
}
.visit-question-grid details[open] { border-inline-start-color: var(--accent); box-shadow: 0 8px 22px rgb(5 47 65 / 0.08); }
.visit-question-grid summary {
  position: relative;
  min-height: 52px;
  padding: 0.9rem 3rem 0.9rem 1rem;
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--fs-1);
  cursor: pointer;
  list-style: none;
}
.visit-question-grid summary::-webkit-details-marker { display: none; }
.visit-question-grid summary::after {
  position: absolute;
  inset: 50% 1rem auto auto;
  content: "+";
  color: var(--accent);
  font-family: var(--sans);
  font-size: 1.4rem;
  transform: translateY(-50%);
}
.visit-question-grid details[open] summary::after { content: "−"; }
.visit-question-grid summary:hover { color: var(--brand-blue); background: var(--fog); }
.visit-question-grid summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.visit-question-grid details > p { margin: 0; padding: 0.8rem 1rem 1rem; border-block-start: 1px solid var(--rule); color: var(--muted); }
.compact-contact {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: center;
}
.compact-contact h2 { margin-block-end: 0; }

@media (max-width: 960px) {
  .visit-expect-grid,
  .visit-question-grid,
  .visit-children-path { grid-template-columns: minmax(0, 1fr); }
  .compact-contact { display: grid; align-items: start; }
  .visit-children-path { gap: 1.25rem; }
  .visit-children-path li {
    padding-block-start: 0;
    padding-inline-start: 1.15rem;
    border-block-start: 0;
    border-inline-start: 3px solid var(--brand-aqua);
  }
}

@media (max-width: 520px) {
  .visit-standing dl > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}

body {
  margin: 0;
  overflow-x: clip;
  font-size: var(--fs-0);
}

main { display: block; }

h1,
h2,
h3,
.date-head {
  margin-block: 0 0.55em;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: var(--fs-5); }
h2 { font-size: var(--fs-4); }
h3 { font-size: var(--fs-2); line-height: 1.18; }

p,
li,
dd { max-width: var(--measure); }
/* Reading prose never runs past the measure. The token existed from day one and
   was only ever applied piecemeal (dd, office notes); meanwhile the pastor's
   letter — the longest read on the site — wrapped at 88 characters. Chrome,
   footer, and control text sit outside main or carry their own registers. */
main p { max-width: var(--measure); }

p,
ul,
ol,
dl,
figure,
blockquote { margin-block: 0 1.1rem; }

img { max-width: 100%; height: auto; }

/* [hidden] means hidden, whatever a component's own display says.
   The UA stylesheet's [hidden] { display: none } is beaten by ANY author
   `display`, so a component that sets display:grid/flex keeps rendering after
   script sets hidden=true. That is not hypothetical here: .entry { display:
   grid } silently defeated event-freshness.js, and last Sunday's events stayed
   on /this-week/ the whole following week. Stated once, globally, instead of
   the per-component patches this file had grown five of. */
[hidden] { display: none !important; }


strong { font-weight: 600; }
small,
.fine { font-size: var(--fs--1); }

/* The iOS floor, stated once for every field on the site rather than per
   component. Safari zooms the entire layout when a focused control is under
   16px, so an undersized field does not merely look small — it throws the page
   around while somebody is using it. The archive controls inherited 13.33px
   from the UA stylesheet and there were 35 such fields across the build. Any
   component that genuinely needs smaller text can still override it; nothing
   should do so by accident. */
input,
select,
textarea {
  font-size: max(var(--field-size), 1em);
}

.lead {
  max-width: 42ch;
  color: #324b62;
  font-size: var(--fs-1);
  line-height: 1.5;
  text-wrap: pretty;
}

/* A date is one thing a reader looks for, so it moves to the next line whole
   rather than leaving "January" stranded at the end of this one. */
.date-nowrap { white-space: nowrap; }

a {
  color: var(--accent-dark);
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.16em;
}

a:hover { color: var(--brand-blue); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

::selection {
  color: var(--ink);
  background: var(--brand-aqua);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  inset: 0.75rem auto auto 0.75rem;
  z-index: 1000;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  color: var(--white);
  background: var(--deep);
  border: 0;
  text-decoration: none;
}

.skip-link:focus {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.6rem 0.85rem;
  overflow: visible;
  clip-path: none;
  border: 2px solid var(--brand-aqua);
}

.eyebrow,
.record,
.filed,
.checked,
.footer-kicker {
  font-family: var(--sans);
  font-size: var(--label-size);
  font-weight: 400;
  letter-spacing: 0.105em;
  line-height: 1.35;
  text-transform: uppercase;
}

.eyebrow {
  display: block;
  margin-block-end: 0.9rem;
  color: var(--brand-blue);
}

.their-words,
.their-words p,
q.their-words {
  font-family: var(--display);
  font-style: normal;
  text-wrap: pretty;
}

blockquote.their-words {
  margin-inline: 0;
  padding-inline: clamp(1rem, 2.5vw, 2rem);
  border-inline-start: 2px solid var(--accent);
  font-size: var(--fs-1);
}

.attribution { color: var(--muted); }

/* ---------- prototype disclosure and masthead ---------- */

.proto-banner {
  min-height: 2rem;
  padding: 0.4rem var(--band-x);
  color: #d8e7f6;
  background: var(--deep);
  border-block-end: 1px solid #31577d;
  font-size: var(--label-size);
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.proto-banner strong { color: var(--white); }
.proto-banner a { color: var(--on-deep-teal); }

/* The church centers its mark over the address line and runs the menu beneath
 * it. Keeping that arrangement is the fastest way for someone who knows
 * pclg.org to recognize this as the same church. */
/* Compacted 2026-08-13. The arrangement is the church's own and stays; what
 * changed is how much of the first screen it is allowed to spend. It ran 312px
 * tall to hold a 168px mark, because the top padding, the mark and the address
 * line were each sized as if nothing had to follow them. Trimmed to the same
 * three clusters on one optical line, it is ~210px, and the ~100px that buys is
 * the difference between the Sunday answer sitting under the fold and over it. */
.site-header {
  --header-watch-kicker-line: 1rem;
  --header-watch-btn: 38px;
  --header-stack-gap: 0.85rem;
  --header-watch-gap: 0.6rem;
  --header-secondary-row: calc(var(--header-watch-kicker-line) + var(--header-watch-gap) + var(--header-watch-btn));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.6rem, 1.3vw, 1.1rem) clamp(1rem, 2.3vw, 2.5rem);
  padding: clamp(0.9rem, 1.5vw, 1.35rem) var(--band-x) 0;
  background: var(--white);
}

.header-bar { display: contents; }

.brand {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  justify-items: center;
  gap: 0.5rem;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  view-transition-name: pclg-lockup;
}

.brand-logo {
  display: block;
  width: clamp(11rem, 16vw, 15rem);
  height: auto;
}

/* Held under larger type: see html[data-reading="large"] below. A mark that grew
   a quarter would crowd the search field on a laptop and push the menu button
   off a narrow phone. */
html[data-reading="large"] .brand-logo { width: clamp(8.8rem, 16vw, 12rem); }

.brand-tagline {
  color: var(--muted);
  font-size: var(--label-size);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 2;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 clamp(0.35rem, 1.1vw, 1.1rem);
  /* Edge to edge. The doors stay in the content column, but the two rules that
     bracket them run the full width of the page — because the band BELOW the
     header is full-bleed, and an inset rule sitting a pixel above a full-bleed
     tint left the tint's corner poking out to the left of the rule. Two
     boundary markers at one seam, not aligned, which is what read as stray
     lines rather than as a divider (Stephen, 2026-08-06). */
  margin-inline: calc(var(--band-x) * -1);
  padding: 0 var(--band-x);
  background: var(--white);
  border-block: 1px solid var(--rule);
  transition: box-shadow 160ms ease-out;
}

.nav-link {
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0.65rem clamp(0.35rem, 0.8vw, 0.8rem);
  color: var(--ink);
  font-size: var(--meta-size);
  letter-spacing: 0.085em;
  text-decoration: none;
  text-transform: uppercase;
  transition: min-height 160ms ease-out, padding 160ms ease-out, font-size 160ms ease-out;
}

@media (min-width: 901px) {
  .site-header {
    position: sticky;
    top: calc(-1 * var(--pclg-nav-offset, 11rem));
    z-index: 60;
  }
  .site-header.is-nav-compact .site-nav {
    box-shadow: 0 8px 18px rgb(5 47 65 / 0.12);
  }
  .site-header.is-nav-compact .nav-link {
    min-height: 40px;
    padding-block: 0.42rem;
    font-size: calc(var(--meta-size) * 0.92);
  }
}

.nav-link::after {
  position: absolute;
  inset: auto 0.4rem -1px;
  height: 3px;
  background: transparent;
  content: "";
}

.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--brand-blue);
}

.nav-link:hover::after { background: var(--rule-strong); }
.nav-link[aria-current="page"]::after { background: var(--accent); }

/* The photographed sanctuary ribs recur as quiet navigation, divider, and
 * recovery-list strokes instead of becoming a decorative overlay. */
.sanctuary-rib-nav .nav-link:hover { box-shadow: none; }

/* This Week is deliberately NOT a ninth door. The eight doors are the parts of
 * the church that do not move; the weekly letter is the one surface that is
 * different every Wednesday, so it sits in the masthead as an action. It takes
 * the empty left slot opposite the search field, and each carries a brick rib
 * on its outer edge — the two rib-anchored blocks bracket the centered mark. */
/* The footer's weekly-letter tile is the roomier version of this same action.
   The diagonal fog corner, brick sanctuary rib, aqua outline, publication name,
   and arrow carry the invitation at either scale without turning a missed
   Wednesday into an overdue task. */
.nav-action {
  position: relative;
  display: grid;
  grid-column: 1;
  grid-row: 1;
  align-content: center;
  justify-self: start;
  gap: 0.15rem;
  min-height: 54px;
  padding: 0.65rem 2.4rem 0.7rem 1.05rem;
  color: var(--ink);
  background: linear-gradient(135deg, var(--white) 0 74%, var(--fog) 74% 100%);
  border: 1px solid var(--brand-aqua);
  border-inline-start: 5px solid var(--accent);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--brand-blue) 24%, transparent);
  text-decoration: none;
  overflow: hidden;
  transition: color 120ms ease-out, border-color 120ms ease-out,
              box-shadow 120ms ease-out, transform 80ms ease-out;
}

.nav-action::after {
  position: absolute;
  inset: 50% 0.9rem auto auto;
  content: "→";
  color: var(--accent);
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 700;
  transform: translateY(-50%);
}

/* The global `a:hover` outranks a single class, so every interaction state here
   restates its colour. Keyboard gets the same material response as pointer. */
.nav-action:hover,
.nav-action:focus-visible {
  color: var(--brand-blue);
  border-color: var(--brand-blue);
  border-inline-start-color: var(--accent);
  box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--brand-aqua) 58%, transparent);
}
.nav-action > * { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .nav-action { transition: none; }
}

/* Only ever rendered when the chrome config gives this action a kicker; brick
   at rest so it reads on the light ground, pale once the block fills. */
.nav-action-kicker {
  color: var(--accent-dark);
  font-size: var(--label-size);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-action-label {
  font-family: var(--display);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-weight: 600;
  line-height: 1.05;
}

.nav-action:hover .nav-action-kicker,
.nav-action:focus-visible .nav-action-kicker { color: var(--accent-pale); }

/* On the letter itself the button has nothing left to offer, so it steps back
   into the church's navy and lets the brick rib mark the spot instead. */
.nav-action[aria-current="page"] {
  color: var(--white);
  background: var(--deep);
  border-color: var(--deep);
  border-inline-start-color: var(--accent);
  box-shadow: inset 5px 0 0 var(--accent);
}

.nav-action[aria-current="page"]:hover,
.nav-action[aria-current="page"]:focus-visible { background: var(--brand-blue); }
.nav-action[aria-current="page"] .nav-action-kicker { color: var(--on-deep-teal); }
.nav-action[aria-current="page"]::after { color: var(--white); }

/* Sunday's stream used to be reachable from one clause in the welcome paragraph
 * and a block most of a homepage below it. These are the two links this church
 * is asked for most, so they take the left slot with This Week and stack under
 * it: one column of things that are happening, opposite the search field.
 * Each carries its platform's own colour on the rib the whole masthead already
 * uses, never a traced wordmark. */
/* The whole left slot is ONE stack on ONE left edge, and every block in it is
   the same width — the letter, the label, and the two halves beneath. Sized to
   content and near-but-not-equal reads as an accident; stretch reads as a
   decision. */
.header-aside {
  /* The two sides use the same two-row frame. This Week and Search share the
     first baseline; the live links and reading control share a second bay.
     Equal overall centring was not enough when the primary controls themselves
     landed at different heights (Stephen, 2026-08-13). */
  --watch-kicker-line: var(--header-watch-kicker-line);
  --watch-btn: var(--header-watch-btn);
  --watch-gap: var(--header-watch-gap);
  display: grid;
  grid-column: 1;
  grid-row: 1;
  grid-template-rows: minmax(46px, auto) minmax(var(--header-secondary-row), auto);
  align-content: center;
  justify-items: stretch;
  justify-self: start;
  gap: var(--header-stack-gap);
  width: min(19rem, 100%);
}
/* .nav-action sets justify-self: start for the case where it is the header's
   own child; inside the stack that would keep it 9px short of the blocks under
   it, which is exactly the near-miss this is here to kill. */
.header-aside .nav-action { grid-column: auto; grid-row: auto; justify-self: stretch; }

.header-watch { display: grid; gap: var(--watch-gap); }
/* Centred, and with real room above and below. Flush left and tight under the
   brick bar it read as a caption stuck to the card's underside rather than as
   the label for the two buttons beneath it (Stephen, 2026-08-06). */
.header-watch-kicker {
  justify-self: center;
  color: var(--brand-blue);
  font-size: var(--label-size);
  /* Fixed, so the aside's padding calc above stays exact. */
  line-height: var(--watch-kicker-line);
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}
/* "Worship is live now", Sundays 10:00–11:15 Pacific only, revealed by
   assets/live-now.js. It replaces the kicker's job for that hour rather than
   stacking under it — two small-caps lines saying almost the same thing was the
   mistake the masthead already made once (Stephen, 2026-08-06) — so the kicker
   steps aside while the dot is up. Brick, because it is the accent the site
   reserves for the thing you are pointing at, and the disc is a CSS radial, not
   an inline SVG (media guardrail). The pulse is motion, so it yields to
   prefers-reduced-motion and leaves a solid dot behind. */
.header-watch-live,
.footer-watch-live {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  font-size: var(--label-size);
  line-height: var(--watch-kicker-line);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.footer-watch-live { color: var(--on-deep-brick); justify-self: start; }
/* An author `display` beats the UA stylesheet's [hidden] rule no matter how the
   specificity lands, so the slot needs to turn its own display off — without
   this the empty dot shows every hour of the week. */
.header-watch-live[hidden],
.footer-watch-live[hidden] { display: none; }
.header-watch-live::before,
.footer-watch-live::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}
@media (prefers-reduced-motion: reduce) {
  .header-watch-live::before,
  .footer-watch-live::before { animation: none; }
}
/* During the service hour the static "Sunday 10 a.m." kicker is redundant with
   the live line directly above it, and saying both makes the reader work out
   which one is current. */
.is-service-hour .header-watch-kicker,
.is-service-hour .footer-watch-kicker { display: none; }

.header-watch-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
/* Rib, then label, immediately — the same order the letter's bar and the home
   page's streaming rows use. Centring the label would leave the rib introducing
   nothing. */
.header-watch-link {
  display: flex;
  align-items: center;
  min-height: var(--watch-btn, 38px);
  padding: 0.3rem 0.75rem;
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--small-size);
  background: var(--fog);
  border: 1px solid var(--rule);
  border-inline-start-width: 3px;
  text-decoration: none;
}
.header-watch-link:hover { color: var(--brand-blue); background: var(--white); }
.header-watch-link--facebook { border-inline-start-color: #1877f2; }
.header-watch-link--youtube { border-inline-start-color: #ff0000; }
/* Each platform's own published mark, sized by the width the bay gives it so
   both land at the same optical weight without either being stretched.
   width:0 + min-width:100% is deliberate: the aside is sized to fit-content, so
   a plain width:100% still contributes the file's intrinsic 270px to
   max-content and the whole masthead stack balloons to fit two of them. Zero
   width contributes nothing to that measurement; the min-width fills the bay at
   layout time, and the width/height attributes keep the ratio. */
.header-watch-mark {
  display: block;
  width: min(6.75rem, 100%);
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* The right slot answers the left one. Until now it held a single search field
   vertically centred against a four-block stack, and the masthead read as a
   bracket with one arm. The reading control gives it a second block on the same
   right edge — the setting for the page you are already on, beside the way you
   leave it. */
.header-side {
  display: grid;
  grid-column: 3;
  grid-row: 1;
  grid-template-rows: minmax(46px, auto) minmax(var(--header-secondary-row), auto);
  align-content: center;
  justify-items: end;
  justify-self: end;
  gap: var(--header-stack-gap);
  width: min(19rem, 100%);
}

.header-search {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  width: min(19rem, 100%);
}

/* Inside the side stack the form is no longer a header cell of its own. */
.header-side .header-search { grid-column: auto; grid-row: auto; align-self: stretch; width: 100%; }

/* ---------- larger type ----------
   Shipped hidden; assets/reading.js reveals it, because a control that cannot
   work without scripting should not be on a page that has it off. Same rule the
   live dot needed: an author `display` beats the UA stylesheet's [hidden], so
   the slot has to turn its own display off or an empty box sits in the masthead
   for every reader. */
.header-utilities { display: flex; align-self: stretch; align-items: stretch; justify-content: flex-end; gap: 0.55rem; width: 100%; }
.header-utilities > .reading-utility-link,
.header-utilities > .header-reading { flex: 1 1 auto; min-width: max-content; justify-content: center; }
.header-utilities .reading-toggle { width: 100%; height: 100%; }
.header-reading { display: flex; align-self: stretch; align-items: stretch; gap: 0.6rem; }
.header-reading[hidden] { display: none; }

.reading-toggle,
.reading-utility-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0.3rem 0.85rem;
  color: var(--brand-blue);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  font: inherit;
  font-size: var(--label-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.reading-utility-link { text-decoration: none; }

.reading-toggle:hover,
.reading-utility-link:hover,
.reading-utility-link:focus-visible { color: var(--white); background: var(--deep); border-color: var(--deep); }

/* Pressed reads as a state, not as a hover that stuck: the brick the site
   reserves for the thing you are pointing at. */
.reading-toggle[aria-pressed="true"] {
  color: var(--white);
  background: var(--accent);
  border-color: var(--accent);
}
.reading-toggle[aria-pressed="true"]:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

/* What "larger" means here.
 *
 * Root font-size, so every rem in the system moves together and the layout
 * grows instead of cramming bigger text into boxes sized for smaller text.
 * Then four things are HELD, because they are the page's geometry rather than
 * its reading matter:
 *
 *   --max and --band-x — the content column and the gutters. Holding them means
 *     the extra size goes into the words and the line gets SHORTER in
 *     characters, which is the whole point; letting the column grow 25% would
 *     hand back exactly the reading difficulty this setting exists to remove.
 *   --fs-4 and --fs-5 — the two poster display steps. A reader who turns this
 *     on wants the paragraph legible; the headline was never the problem, and
 *     at 125% an h1 on a 320px phone starts breaking words.
 *   .brand-logo — a mark that grew a quarter would push the menu button off a
 *     narrow phone.
 *
 * Every held value is the current one divided by 1.25, so it renders at exactly
 * the size it does now. The vw terms inside a clamp are viewport-based and are
 * left alone; only the rem terms are divided.
 */
html[data-reading="large"] {
  font-size: 125%;
  --max: 65.6rem;
  --band-x: clamp(1rem, 4.6vw, 3.6rem);
  --fs-4: clamp(2.04rem, 1.536rem + 2.75vw, 3.4rem);
  --fs-5: clamp(2.56rem, 1.76rem + 4.15vw, 4.6rem);
}

/* A closed box, not a bracket. The rib and the field's underline used to be two
   separate strokes on two separate elements — the rib on the form, the underline
   on the input, 11px apart and stopping 71px short under the button — so they
   read as a rectangle that failed to draw rather than a deliberate mark. The box
   closes on all four sides and the rib survives as its left edge, heavier and in
   the brick, which is where the sanctuary-rib motif belongs. */
.omnibox {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0;
  border: 1px solid var(--rule-strong);
  border-inline-start: 3px solid var(--accent);
}
.omnibox:focus-within {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.omnibox input[type="search"]:focus-visible,
.omnibox button[type="submit"]:focus-visible { outline: 0; }

.omnibox input[type="search"] {
  min-width: 0;
  min-height: 44px;
  padding: 0.55rem 0.85rem;
  color: var(--ink);
  background: var(--white);
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: var(--field-size);
}

.omnibox input::placeholder { color: #6a7c8e; }

.omnibox button[type="submit"] {
  min-width: 44px;
  min-height: 44px;
  padding: 0.55rem 0.85rem;
  color: var(--white);
  background: var(--deep);
  border: 0;
  border-inline-start: 1px solid var(--deep);
  border-radius: 0;
  font: inherit;
  font-size: var(--meta-size);
  cursor: pointer;
}

.omnibox button[type="submit"]:hover { background: var(--brand-blue); }

.omnibox ul[role="listbox"] {
  position: absolute;
  inset: calc(100% + 0.4rem) 0 auto;
  z-index: 50;
  display: none;
  max-height: 65vh;
  margin: 0;
  padding: 0.35rem;
  overflow: auto;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--rule-strong);
}

.omnibox ul[role="listbox"]:not(:empty) { display: block; }
.omnibox [role="option"] { max-width: none; }
.omnibox [role="option"] button {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
}
.omnibox [role="option"][aria-selected="true"] button,
.omnibox [role="option"]:hover button { background: var(--fog); }
.omnibox .omni-title { display: block; color: var(--ink); }
.omnibox .omni-meta,
.omnibox .suggest-note { display: block; color: var(--muted); font-size: var(--label-size); }
.omnibox .suggest-note { padding: 0.55rem 0.65rem; }
.omnibox .suggest-group {
  padding: 0.65rem 0.65rem 0.25rem;
  color: var(--brand-blue);
  font-size: var(--label-size);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.menu-toggle {
  display: none;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.7rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  font: inherit;
}

.menu-toggle-bars,
.menu-toggle-bars::before,
.menu-toggle-bars::after {
  position: relative;
  display: block;
  width: 15px;
  height: 1px;
  content: "";
  background: currentColor;
}
.menu-toggle-bars::before { position: absolute; inset-block-start: -5px; }
.menu-toggle-bars::after { position: absolute; inset-block-start: 5px; }

/* ---------- global sections ---------- */

/* ---------- breadcrumb ----------
   Only pages that sit UNDER something get one, so this never appears on a door.
   It reads as a caption above the page rather than as a second navigation bar:
   small caps, the site's own rule beneath it, and the page you are on set in
   ink and not linked. */
.breadcrumb {
  padding: 0.7rem var(--band-x);
  background: var(--white);
  border-block-end: 1px solid var(--rule);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.1rem;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.breadcrumb li { margin: 0; font-size: var(--label-size); letter-spacing: 0.12em; text-transform: uppercase; }

/* The separator belongs to the row, not to a link — drawn on the item so it can
   never become a second thing to tap in a 24px row. */
.breadcrumb li + li::before {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 1px;
  margin-inline: 0.35rem 0.5rem;
  vertical-align: middle;
  background: var(--rule-strong);
}

.breadcrumb a,
.breadcrumb span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding-block: 0.1rem;
  text-decoration: none;
}

.breadcrumb a { color: var(--muted); border-block-end: 1px solid transparent; }
.breadcrumb a:hover { color: var(--brand-blue); border-block-end-color: var(--accent); }
.breadcrumb [aria-current="page"] { color: var(--ink); }

.band { padding: clamp(4rem, 7vw, 7.5rem) var(--band-x); }
.band-inner { width: 100%; max-width: var(--max); margin-inline: auto; }

/* Page openings share one compact datum after the site navigation. Interior
   heroes had inherited the full section break (up to 7.5rem), so their first
   heading wandered by page and sometimes began below a screenful of white.
   Home keeps its purpose-built threshold rhythm; every other first band starts
   from this same inset. */
main > :is(section, div).band:first-child:not(.threshold),
main > section.band:first-of-type:not(.threshold) {
  padding-block-start: clamp(1.75rem, 3vw, 3.25rem);
}
.band-feint { background: var(--fog); }
.band-register { background: var(--white); }
.band-mission { background: var(--fog); }
.band-vault,
.vault {
  color: #e9f1f8;
  background: var(--deep);
}
.band-vault h1,
.band-vault h2,
.band-vault h3,
.vault h1,
.vault h2,
.vault h3 { color: var(--white); }
.band-vault .eyebrow,
.vault .eyebrow { color: var(--on-deep-teal); }
.band-vault a,
.vault a { color: var(--on-deep-teal); }
/* --muted is a grey chosen against paper; on the deep band it lands at about
   1.8:1 and vanishes. Secondary text down here takes the band's own light. */
.band-vault .attribution,
.band-vault .fine,
.vault .attribution,
.vault .fine { color: var(--on-deep); }

.email-action { display: block; }

.email-copied {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(0.4rem);
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 0.7rem 1.15rem;
  background: var(--deep);
  color: var(--on-deep);
  border-radius: 2px;
  box-shadow: 0 10px 28px rgba(0, 24, 36, 0.28);
  font-family: var(--sans);
  font-size: var(--fs-0);
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.email-copied[data-visible="true"] {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .email-copied,
  .email-copied[data-visible="true"] {
    transition: none;
    transform: translateX(-50%);
  }
}

.btn,
.email-action a,
.page-action,
.owned-form button[type="submit"],
.newsletter-form button[type="submit"] {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.05rem;
  color: var(--white);
  background: var(--deep);
  border: 1px solid var(--deep);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: var(--small-size);
  font-weight: 600;
  letter-spacing: 0.075em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.btn:hover,
.email-action a:hover,
.page-action:hover,
.owned-form button[type="submit"]:hover,
.newsletter-form button[type="submit"]:hover {
  color: var(--white);
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}

.btn:focus-visible,
.email-action a:focus-visible,
.page-action:focus-visible,
.owned-form button[type="submit"]:focus-visible,
.newsletter-form button[type="submit"]:focus-visible {
  color: var(--white);
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.btn-quiet {
  color: var(--ink);
  background: var(--white);
  border-color: var(--rule-strong);
}

.btn-quiet:hover,
.btn-quiet:focus-visible {
  color: var(--white);
  background: var(--deep);
  border-color: var(--deep);
}

.button-row,
.actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}

.fact-note {
  margin-block-start: 1.15rem;
  color: var(--muted);
  font-size: var(--fs--1);
  text-wrap: pretty;
}

/* ---------- home: Shannon Road Threshold ---------- */

/* The top pad was up to 6.5rem of empty fog between the doors and the
   photograph — on a 1440x900 desktop it put the church's own answer at y=1089,
   189px BELOW the fold, so the largest screen we serve opened on a picture and
   no words at all. Scene gist resolves in under 100ms and reading does not,
   which is exactly why the photograph should lead; it is not a reason for it to
   be the only thing there. */
.threshold {
  position: relative;
  padding-block: clamp(1.5rem, 2.2vw, 2.5rem) clamp(3.5rem, 6vw, 6.5rem);
  background: var(--fog);
  border-block-end: 1px solid var(--rule);
  overflow: clip;
}

.threshold-grid { display: block; }

.threshold-copy { position: relative; z-index: 2; }
/* On the scale, not beside it. This carried a bespoke clamp topping out at
   3.9rem, which put the home page's own claim at 62.4px — BELOW three section
   h2s at 68px and the welcome quote at 80px, so the h1 was the fifth-largest
   heading on its own page. Every interior route was already correct; home was
   the only inverted one. Heading level is structure and size is presentation,
   but when they disagree the sighted reader and the screen-reader reader are
   navigating different pages, and size is the only signal that says "this is
   what the page claims." --fs-5 is the step h1 is supposed to have. */
.threshold-copy h1 {
  max-width: 18ch;
  font-size: var(--fs-5);
  line-height: 1.06;
}
.threshold-copy .lead { max-width: 46ch; }

.threshold-facts {
  display: grid;
  gap: 0.2rem;
  margin-block: 1.5rem;
}

/* The label is uppercase and two thirds the size of the value it labels, so
   box alignment left the two sitting on different lines. Baseline alignment is
   what makes the pair read as one row. */
.threshold-facts div {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: baseline;
  gap: 1rem;
}
.threshold-facts dt {
  color: var(--brand-blue);
  font-size: var(--label-size);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.threshold-facts dd { margin: 0; }

/* One photograph of the building. The panorama is the church people actually
   recognize from Shannon Road, so it stands beside the Sunday answer rather
   than above it: see .threshold-grid for why the two now share a screen. */
.threshold-photo {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto clamp(2.25rem, 4vw, 3.25rem);
}
/* Cropped to a band rather than run at its native 1.9:1, so the building leads
   the page without pushing the first line of copy off the screen.

   The band tightens on wide screens only. At 2.4:1 the photograph was 507px
   tall at full width and carried the first line of copy past the fold with it;
   a shallower band brings the Sunday answer onto the same screen as the
   building. Phones keep the taller crop, where vertical room is not the
   constraint the fold is.

   The gable apex sits at 24.3% of the master's height (measured off the
   sky/roof boundary, not estimated). A 3.4:1 band showed rows 28.3%-84.1%,
   which sliced the point off the church on every desktop screen. 3:1 at 45%
   shows rows 16.6%-79.8%: the apex lands 12% down the band with real sky
   above it, and the crop still reaches the cherry trees and the covered walk. */
.threshold-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 2.4 / 1;
  object-fit: cover;
  object-position: center 64%;
  border-radius: 2px;
}
@media (min-width: 1024px) {
  .threshold-photo img {
    aspect-ratio: 3 / 1;
    object-position: center 45%;
  }
}
.threshold-photo figcaption {
  margin: 0;
  padding-block-start: 0.7rem;
  color: var(--muted);
  font-size: var(--meta-size);
}

/* The Sunday answer and the building, on one screen.
 *
 * Measured before this change, at 1440x900: banner, masthead and menu ran to
 * 345px — 38% of the first screen — and the photograph, inset inside the fog
 * band, ran to 812. The h1 began at 895. The church's own claim, set at 92px,
 * started five pixels above the fold and nobody saw it without scrolling. On a
 * 390x844 phone the same stack left the building a 146px letterbox.
 *
 * Stacking them cannot be fixed by trimming: a full-width photograph deep
 * enough to show the gable is ~450px on its own, and the masthead plus menu is
 * the church's own arrangement. So they stop stacking. Above 78rem the copy
 * takes the left column and the photograph takes the right, bleeding off the
 * page edge, and the picture gets a taller crop than a full-width band could
 * ever carry. The threshold is 78rem rather than the 75rem it was first set
 * to: at 1200 the copy column pushed the row past 700px tall and the
 * photograph, filling it, came back to roof and sky. Below the split they
 * stack in the order this build has always
 * documented and never actually rendered: the church's line, then the place. */
@media (min-width: 78rem) {
  .threshold-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2.5rem, 4.4vw, 4.5rem);
  }
  /* Off the right edge. An inset picture reads as an illustration on a page;
     one that runs out of the viewport reads as the place continuing past it. */
  .threshold-copy { grid-column: 1; grid-row: 1; }
  /* The figure takes the row's height from the grid (align-self: stretch) and
     the picture fills it absolutely, from a containing block with a definite
     size. The alternative — height:100% on the image through an auto-height
     figure under align-items:center — resolves only because the grid area
     happens to have a definite height; this states the dependency instead of
     relying on it. (It is not what fixed the blank hero in the 2026-08-13
     critique evidence: that was a decode race in full-page capture, and the
     fix for it is decoding="sync" on the img. Same-bytes reruns went
     BLANK/PHOTO/BLANK/BLANK/PHOTO before that change.) */
  .threshold-photo {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    /* width:auto, not the inherited 100%: a grid item sized to its track
       cannot be widened by a negative margin — the margin box shrinks and the
       picture stays inside the column. Stretch is what lets it leave. */
    width: auto;
    max-width: none;
    min-height: 30rem;
    margin: 0 calc(var(--band-x) * -1) 0 0;
  }
  .threshold-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    /* The gable apex sits at 24.3% of the master's height. In a portrait-ish
       column there is room to show it whole with sky above, which the 3:1
       desktop band never had.

       The window moves down as the slot gets taller. A 1.9:1 master in a
       0.7:1 slot keeps only about a third of its width, and at the wide-screen
       framing that third was sky and roof — the cherry trees and the covered
       walk fell out of the crop exactly where the copy column ran to four
       lines. Below 90rem the frame drops to hold the building mass instead. */
    object-position: 48% 62%;
    border-radius: 0;
  }
  @media (min-width: 90rem) {
    .threshold-photo img { object-position: 42% 46%; }
  }
  .threshold-copy h1 { max-width: 14ch; }
  .threshold-copy .lead { max-width: 34ch; }
  /* Under both columns, not beside the headline. Kept inside the copy column it
     made that column ~820px tall, and the photograph — set to fill the row —
     cropped a 1.9:1 landscape into a 0.66:1 slot, which left a roof and some
     sky where the church had been. Full width it is also the truer weight:
     the working group's own answer to why people come here is to watch. */
  .threshold-grid > .watch-live {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-block-start: clamp(1.5rem, 2.4vw, 2.5rem);
  }
  .watch-live ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 clamp(1.5rem, 3vw, 3rem);
  }
  /* A third of the width is not enough for label and time on one line: the
     archive row wrapped to three lines while its time sat beside the middle
     one. Same fix the narrow phone already uses — time on its own line, rib
     aligned to the first line rather than to the centre of a wrapped block. */
  .watch-live a {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    height: 100%;
  }
  .watch-live a::before { margin-block-start: 0.35rem; }
  .watch-live a span { grid-column: 2; }
}

/* Narrower than the split, the hero unwinds into one column in the order the
 * DESIGN-DNA has always claimed: the church's line, then the photographed
 * threshold, then the practical detail. It never rendered that way, because
 * the picture was a sibling of the copy block rather than of its lines, so a
 * phone opened on a 146px letterbox and met the headline underneath it.
 * display:contents lifts the copy's own children into this grid, which is what
 * lets the photograph sit between the headline and the lead. */
@media (max-width: 77.999rem) {
  .threshold-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(1.5rem, 3.5vw, 2.25rem);
  }
  .threshold-copy { display: contents; }
  .threshold-copy > .eyebrow { order: 1; }
  .threshold-copy > h1 { order: 2; }
  .threshold-photo { order: 3; margin-block: 0; }
  .threshold-copy > .lead { order: 4; }
  .threshold-copy > .threshold-facts { order: 5; }
  .threshold-copy > .button-row { order: 6; }
  .threshold-grid > .watch-live { order: 7; }
  .threshold-copy > .fact-note { order: 8; }
  /* Taller than the old sliver. Vertical room is not the constraint here — the
     fold is, and the headline is already above this. */
  .threshold-photo img { aspect-ratio: 16 / 10; object-position: center 52%; }
}


.action-rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  padding: 2rem var(--band-x);
  background: var(--white);
  border-block-end: 1px solid var(--rule);
}
.sanctuary-rib-divider { border-block-end-color: var(--accent); }
.action-rail a {
  padding: 0.35rem clamp(0.75rem, 1.8vw, 1.5rem);
  color: var(--brand-blue);
  border-inline-end: 1px solid var(--rule-strong);
  font-size: var(--meta-size);
  letter-spacing: 0.055em;
  text-decoration: none;
  text-transform: uppercase;
}
.action-rail a:last-child { border-inline-end: 0; }
.action-rail a:hover { color: var(--accent-dark); text-decoration: underline; }

.welcome-room {
  color: #dbe8f4;
  background: var(--deep);
}
.welcome-room h2 { color: var(--white); }
.welcome-room .eyebrow { color: var(--on-deep-teal); }
.welcome-room a { color: var(--on-deep-teal); }
.welcome-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.55fr);
  gap: clamp(3rem, 9vw, 9rem);
  align-items: end;
}
/* The church's verbatim welcome, at the h2 step every other room heading uses.
   It was carrying its own clamp to 5rem — the largest type anywhere on the home
   page, quotation outranking claim. It keeps the deep-blue room and the italic
   voice; it stops keeping the crown. */
.welcome-statement {
  max-width: 20ch;
  margin: 0;
  font-size: var(--fs-4);
  line-height: 1.1;
  text-wrap: pretty;
}
.welcome-context {
  padding-inline-start: 1.25rem;
  border-inline-start: 1px solid #41668c;
}

.life-section { background: var(--white); }
.life-section h2 { max-width: 24ch; }

.split-feature,
.service-grid,
.mission-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(19rem, 0.85fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
}
.feature-photo { margin: 0; }
.feature-photo img,
.service-photos img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: 2px;
}
.feature-photo img { aspect-ratio: 16 / 10; }

.service-photos figure {
  margin: 0;
}
/* the shared-table photograph the church publishes is portrait; give it a frame
   that fits rather than cropping two thirds of it away */
.feature-photo-tall img { aspect-ratio: 4 / 5; }
.feature-photo figcaption,
.service-photos figcaption,
.photo-card figcaption,
.clipping figcaption,
.hero-photo figcaption {
  margin-block-start: 0.55rem;
  color: var(--muted);
  font-size: var(--fs--1);
  text-wrap: pretty;
}
.band-vault .photo-card figcaption { color: var(--on-deep); }
.service-photos figcaption {
  margin-block-start: 0.55rem;
  color: var(--muted);
}
.feature-copy {
  padding-inline-start: clamp(1rem, 2.5vw, 2.5rem);
  border-inline-start: 1px solid var(--accent);
}

.service-section { background: var(--white); }
.service-grid { grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.28fr); }
/* One frame for the row. These are a pair of equals — two ministries shown side
   by side — but the pair was built as unequal tracks, bottom-aligned, with each
   file keeping its own shape: the Layette photograph is 4:3, the Amor build 3:2.
   That produced a shared baseline under ragged tops, which reads as an accident
   rather than a decision. Ragged heights only work as a system used everywhere,
   and every other photo row here (.mission-photo-row, .photo-trio, the visit
   bands) pins a frame. Equal columns, aligned tops, cropped to the subject. */
.service-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
.service-photos figure { margin: 0; }
.service-photos img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* Three of the congregation's own photographs across a ruled-list route, in the
   asymmetric bay language the home page already uses. Captions sit BELOW the
   frame, which is this site's rule everywhere except the home service band —
   and that band is exactly where an independent critique found white caption
   text failing over a pale tabletop. A photograph the reader has to decode is
   not carrying the page. */
.photo-trio {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 1fr;
  gap: clamp(0.9rem, 2vw, 1.6rem);
  align-items: start;
  margin-block: clamp(1.75rem, 3.5vw, 2.75rem) 0;
}
.photo-trio figure { margin: 0; }
.photo-trio img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}
.photo-trio figcaption {
  margin-block-start: 0.55rem;
  color: var(--muted);
  font-size: var(--fs--1);
  text-wrap: pretty;
}
.photo-trio + #care { margin-block-start: clamp(3rem, 6vw, 5rem); }
@media (max-width: 46rem) {
  .photo-trio { grid-template-columns: minmax(0, 1fr); }
}

/* A photograph inside a ruled definition row. It is held to a column rather
   than the row's full measure so the picture reads as evidence for the entry
   beside it, not as a band of its own. */
.entry-photo {
  max-width: 22rem;
  margin: 1.1rem 0 0;
}
.entry-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
}
.entry-photo figcaption {
  margin-block-start: 0.55rem;
  color: var(--muted);
  font-size: var(--fs--1);
}

.section-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.6fr);
  gap: 2rem;
  align-items: baseline;
  padding-block-end: 1.5rem;
  border-block-end: 1px solid var(--rule-strong);
}
.kept-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-inline-start: 1px solid var(--rule);
  border-block-start: 1px solid var(--rule);
  border-block-end: 1px solid var(--rule);
}
/* ---------- ways to get started on the home page ---------- */
.first-steps-band { background: var(--white); }
.first-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.first-steps > li {
  max-width: none;
  padding-block-start: 1.1rem;
  border-block-start: 3px solid var(--accent);
}
.first-steps h3 {
  margin-block: 0 0.55rem;
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  line-height: 1.18;
  white-space: nowrap;
}

html { font-variant-ligatures: none; }
.first-steps h3 a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.16em;
}
.first-steps h3 a:hover { color: var(--brand-blue); text-decoration-color: var(--accent); }
.first-steps p { max-width: 42ch; }
.first-steps-aside {
  margin-block-start: 0.65rem;
  color: var(--muted);
  font-size: var(--fs--1);
}

@media (max-width: 900px) {
  .first-steps { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .first-steps p { max-width: none; }
}

.kept-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kept-grid article {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border-inline-end: 1px solid var(--rule);
}
.kept-grid img {
  display: block;
  width: 100%;
  height: auto;
  margin-block-end: 1.35rem;
  /* the three keeps arrive as a 1.7:1 archive print and two 3.6:1 letterbox
     crops; one 2:1 frame makes them a row instead of three ragged strips */
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: 2px;
}
.kept-grid .eyebrow { margin-block-end: 0.45rem; }
.kept-grid h3 { font-size: var(--fs-2); }
.kept-cta { margin-block: 2rem 0; }

.mission-section {
  color: #d7e4f0;
  background: var(--deep);
  border-block-start: 1px solid #31577d;
}
.mission-section h2 { color: var(--white); }
.mission-section .eyebrow,
.mission-section a { color: var(--on-deep-teal); }
.mission-section .fact-note { color: #b9cce0; }
.mission-grid { align-items: start; }
.mission-grid h2 { max-width: 17ch; }

/* ---------- interior routes ---------- */

.route-intro,
.community-intro,
.hero-now,
.welcome-spread {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(24rem, 1.1fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
}

/* A page-opening image starts with its heading, not at the vertical midpoint
   of however many facts, buttons, or quotations happen to sit beside it. */
.route-intro { align-items: start; }

/* The first-Sunday answer should begin as soon as the navigation ends, and
   its photograph belongs with the eyebrow rather than halfway down the facts
   column. Other interior spreads keep the roomier band rhythm. */
.visit-hero { padding-block-start: clamp(2.5rem, 4vw, 4.5rem); }

.route-intro > :first-child,
.community-intro > :first-child {
  padding-inline-start: clamp(1rem, 2.5vw, 2.5rem);
  border-inline-start: 1px solid var(--accent);
}

.route-intro h1,
.community-intro h1 {
  max-width: none;
  font-size: clamp(3rem, 5.5vw, 5.2rem);
}

/* The Get Involved route is an index, not a billboard. Keep its people in a
   broad photographic crop and bring the section index into the first screen. */
.community-hero {
  padding-block-start: clamp(1.5rem, 2.5vw, 2.5rem);
  padding-block-end: clamp(1.5rem, 2.5vw, 2.75rem);
}
.community-intro {
  gap: clamp(2rem, 5vw, 5rem);
}
.community-intro .photo-card img {
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.photo-card,
.hero-photo,
figure.clipping { margin-inline: 0; }

.photo-card img,
.hero-photo img,
figure.clipping img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--fog);
  border-radius: 2px;
}

.photo-card--portrait img { max-height: 44rem; object-fit: cover; }
.photo-card--wide img { width: 100%; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-block: 2rem 3rem;
}
.photo-grid .photo-card--wide { grid-column: span 1; }

.standing {
  margin-block: 1.5rem;
  padding: 1.25rem 1.4rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--accent);
  border-radius: 2px;
}
.band-vault .standing { color: var(--ink); }
.standing dl { display: grid; gap: 0.8rem; margin: 0; }
.standing dl > div { display: grid; grid-template-columns: minmax(6rem, 0.25fr) 1fr; gap: 1rem; }
.standing dt {
  color: var(--brand-blue);
  font-size: var(--label-size);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.standing dd { margin: 0; }

.entry {
  display: grid;
  grid-template-columns: minmax(8rem, 0.25fr) minmax(0, 0.75fr);
  gap: 1.5rem clamp(2rem, 5vw, 5rem);
  padding-block: clamp(1.5rem, 3.5vw, 3rem);
  border-block-start: 1px solid var(--rule);
}
.entry:last-child { border-block-end: 1px solid var(--rule); }
/* An update has no date, so it has no date rail: the body takes the full
   measure instead of sitting in the right 0.75fr beside an empty column. */
.entry--undated { grid-template-columns: minmax(0, 1fr); }
.entry-when { padding-inline-start: 1rem; border-inline-start: 1px solid var(--accent); }
.entry-when .date-head { display: block; margin-block-end: 0.15em; font-size: var(--fs-1); }
.entry-when .record {
  display: block;
  color: var(--muted);
  font-size: var(--meta-size);
  letter-spacing: 0;
  text-transform: none;
}
.entry-body h3 { margin-block-end: 0.35rem; }
.entry-body--with-banner {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
  gap: 0.35rem clamp(1rem, 2.2vw, 1.75rem);
  align-items: start;
}
.entry-body--with-banner > :not(.entry-banner) { grid-column: 2; }
.entry-banner {
  grid-column: 1;
  grid-row: 1 / span 8;
  margin: 0;
  overflow: hidden;
  background: var(--fog);
  border: 1px solid var(--rule);
}
.entry-banner img { display: block; width: 100%; height: auto; }
.filed { color: var(--accent-dark); }
.filed-key { color: var(--muted); }
.filed b { font-weight: 400; }

.stamp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
.stamp {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0.25rem 0.75rem;
  color: #405b73;
  border-inline-start: 1px solid var(--rule-strong);
  font-size: var(--label-size);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.stamp-row .stamp:first-child { padding-inline-start: 0; border-inline-start: 0; }
.stamp a { color: inherit; }
.stamp--amber { color: var(--accent-dark); font-weight: 600; }

.era-rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block: 3.5rem 1rem;
  color: var(--brand-blue);
}
.era-rule::after { flex: 1; height: 1px; content: ""; background: var(--rule-strong); }

.tick-divider {
  width: 100%;
  height: 1px;
  margin-block: 3.5rem;
  background: var(--rule);
  border: 0;
}

ul.ticked {
  margin-inline: 0;
  padding-inline-start: 0;
  list-style: none;
}
ul.ticked li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.35rem;
  border-block-end: 1px solid var(--rule);
}
ul.ticked li::before,
.sanctuary-rib-list li::before {
  position: absolute;
  inset: 1.18rem auto auto 0;
  width: 0.55rem;
  height: 1px;
  content: "";
  background: var(--accent);
}

/* A section heading and the ruled list it names are one unit. The default h3
   margin became a conspicuous blank shelf at larger type. */
main h3 + ul.ticked { margin-block-start: -1rem; }

.quick-actions,
.path-list,
.working-paths ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.quick-actions li,
.path-list li,
.working-paths li { max-width: none; border-block-start: 1px solid var(--rule); }
.quick-actions a,
.path-list a,
.working-paths li a {
  display: grid;
  grid-template-columns: minmax(9rem, 0.4fr) minmax(0, 0.6fr);
  gap: 1rem;
  padding-block: 1rem;
  color: var(--ink);
  text-decoration: none;
}
.quick-actions span,
.path-list span { color: var(--muted); }

.working-paths {
  display: grid;
  grid-template-columns: minmax(16rem, 0.65fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 6vw, 6rem);
}

.verb-index {
  display: grid;
  grid-template-columns: minmax(10rem, 0.35fr) minmax(0, 0.65fr);
  gap: 0;
}
.verb-index dt,
.verb-index dd {
  margin: 0;
  padding: 1rem;
  border-block-start: 1px solid var(--rule);
}
.verb-index dt { color: var(--brand-blue); }

/* ---------- search, utility, and source pages ---------- */

.search-hero .search-destination-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  max-width: 50rem;
}
.search-hero input[type="search"] {
  min-width: 0;
  min-height: 50px;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--rule-strong);
  border-inline-end: 0;
  border-radius: 2px 0 0 2px;
  font: inherit;
  font-size: var(--fs-1);
}
.search-hero button {
  min-height: 50px;
  padding: 0.65rem 1.1rem;
  color: var(--white);
  background: var(--deep);
  border: 1px solid var(--deep);
  border-radius: 0 2px 2px 0;
  font: inherit;
}
.answer-panel,
.result-empty {
  margin-block-end: 1.25rem;
  padding: 1.25rem;
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-inline-start: 3px solid var(--accent);
  border-radius: 2px;
}
.search-correction {
  margin: 0 0 1.25rem;
  padding: 0.75rem 0.9rem;
  color: var(--ink);
  background: var(--white);
  border-inline-start: 3px solid var(--accent);
  font-weight: 650;
}
.answer-panel[hidden] { display: none; }
.answer-sources { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0; list-style: none; }
.answer-sources a { display: inline-flex; min-height: 36px; align-items: center; padding: 0.35rem 0.55rem; border: 1px solid var(--rule); text-decoration: none; }
.result-list { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--rule); }
.result-list li { max-width: none; padding-block: 1rem; border-block-end: 1px solid var(--rule); }
.result-list a { font-size: var(--fs-1); }
.result-list .s-sub,
.result-note,
.c-sub { display: block; color: var(--muted); font-size: var(--fs--1); }

.credit-list { margin: 0; padding: 0; list-style: none; }
.credit-list li { max-width: none; padding-block: 1rem; border-block-start: 1px solid var(--rule); }
.credit-list b { display: block; }

.ruling-field {
  min-height: 60vh;
  background:
    linear-gradient(90deg, transparent 0 13%, rgba(0, 72, 108, 0.14) 13% calc(13% + 1px), transparent calc(13% + 1px)),
    var(--fog);
}

/* ---------- local newsletter subscription ---------- */

.newsletter-band,
.owned-form-band { background: var(--fog); }
.newsletter-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 0.7fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}
.newsletter-intro { max-width: 43rem; }
.newsletter-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.46fr);
  gap: 1rem;
  align-items: center;
  margin: 1.5rem 0 0;
}
.newsletter-preview-link {
  display: block;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-inline-start: 4px solid var(--accent);
  box-shadow: 0 0.55rem 1.5rem rgba(12, 39, 50, 0.12);
}
.newsletter-preview-link img { display: block; width: 100%; height: auto; transition: transform 160ms ease-out; }
.newsletter-preview-link:hover img { transform: scale(1.018); }
.newsletter-preview-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.newsletter-preview figcaption { display: grid; gap: 0.35rem; color: var(--muted); font-family: var(--sans); font-size: var(--fs--1); }
.newsletter-preview figcaption strong { color: var(--ink); font-family: var(--display); font-size: var(--fs-1); line-height: 1.08; }
.newsletter-form {
  position: relative;
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-inline-start: 3px solid var(--accent);
}
.newsletter-field { display: grid; gap: 0.45rem; }
.newsletter-name-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}
.newsletter-field label {
  color: var(--brand-blue);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
}
.newsletter-field input,
.newsletter-field textarea,
.newsletter-field select {
  min-width: 0;
  min-height: 50px;
  padding: 0.7rem 0.8rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  font: inherit;
  font-size: var(--fs-1);
}
.newsletter-field textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.45;
}
.newsletter-field input:focus-visible,
.newsletter-field textarea:focus-visible,
.newsletter-field select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.newsletter-field .fine { margin: 0; }
.newsletter-consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  cursor: pointer;
}
.newsletter-consent input {
  width: 1.2rem;
  height: 1.2rem;
  margin-block-start: 0.18rem;
  accent-color: var(--brand-blue);
}
.newsletter-form .btn { justify-self: start; }
.newsletter-form .btn:disabled { cursor: wait; opacity: 0.65; }
.newsletter-privacy,
.newsletter-status { margin: 0; color: var(--muted); font-size: var(--fs--1); }
.newsletter-status[data-status="success"] { color: #1c6742; font-weight: 700; }
.newsletter-status[data-status="error"] { color: var(--brick-dark); font-weight: 700; }
.newsletter-honeypot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 760px) {
  .newsletter-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .newsletter-preview { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .newsletter-name-fields { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- footer ---------- */

.site-footer {
  display: grid;
  grid-template-columns: minmax(18rem, 1.35fr) minmax(12rem, 0.65fr);
  gap: 2rem 4rem;
  padding: clamp(3rem, 6vw, 5rem) var(--band-x) 2rem;
  color: var(--on-deep);
  background: var(--deep);
  border-block-start: 4px solid var(--brand-aqua);
}
.footer-lockup {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) minmax(14rem, 1fr);
  gap: 2rem;
  align-items: center;
}
.footer-home-link img { display: block; width: 100%; height: auto; padding: 0.5rem; background: var(--white); }
.footer-welcome p { margin-block-end: 0.35rem; color: var(--white); font-family: var(--display); font-size: var(--fs-2); line-height: 1.15; }
.footer-kicker { color: var(--on-deep-teal); }
.footer-address { color: #b6d3dd; font-style: normal; font-size: var(--fs--1); }

/* The footer's second column sat empty beside the lockup on every page, which
   is exactly where the answer to "how do I watch on Sunday?" belongs — next to
   the sentence that says when Sunday is. It takes that cell rather than a third
   column inside the lockup, which would have starved the worship line down to
   three wrapped lines. Full buttons here, not the header's compact pair: this
   is the end of every route and the last chance to hand somebody the stream. */
.footer-watch {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  align-content: center;
  justify-items: start;
  gap: 0.6rem;
}
.footer-watch-kicker {
  color: var(--on-deep-teal);
  font-size: var(--label-size);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.footer-watch-links { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.footer-watch-link {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0.6rem 1.15rem 0.6rem 0.9rem;
  color: var(--deep);
  font-family: var(--display);
  font-size: 1rem;
  background: var(--white);
  border-inline-start: 4px solid var(--brand-aqua);
  text-decoration: none;
}
.footer-watch-link:hover { color: var(--brand-blue); background: var(--on-deep-teal); }
.footer-watch-link--facebook { border-inline-start-color: #1877f2; }
.footer-watch-link--youtube { border-inline-start-color: #ff0000; }
/* Height-driven here, since these buttons size to their content rather than to
   a bay. YouTube's lockup carries a mark and Facebook's does not, so it gets a
   little more height to land at the same weight. */
.footer-watch-mark { display: block; width: auto; height: 15px; }
.footer-watch-link--youtube .footer-watch-mark { height: 18px; }
.footer-nav { display: grid; align-content: start; }
.footer-nav a { padding-block: 0.6rem; color: var(--white); border-block-end: 1px solid #1c5670; text-decoration: none; }
.footer-nav a:hover { color: var(--on-deep-teal); }

/* The church's own footer runs an about paragraph, its address block, and its
 * presbytery seal side by side. Same three standing facts, set as one row. */
.footer-columns {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 2rem clamp(2rem, 4vw, 4rem);
  padding-block: 2.25rem;
  border-block-start: 1px solid #1c5670;
}
.footer-col { min-width: 0; }
.footer-col-heading {
  margin-block-end: 0.9rem;
  color: var(--on-deep-teal);
  font-family: var(--sans);
  font-size: var(--label-size);
  font-weight: 400;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}
.footer-col p { max-width: 42ch; margin-block-end: 0.65rem; font-size: var(--fs--1); line-height: 1.62; }
.footer-col a { color: var(--white); }
.footer-col a:hover { color: var(--on-deep-teal); }
/* The Presbytery seal is a two-tone asset: the cross-and-flames mark is navy
   #201F5F out to r=609.7/1656px, the ring text is pure white from r=615.9. No
   flat backdrop serves both — white erases the ring text, the navy footer
   erases the mark. Plate only the inner disc: 74% of closest-side lands at
   612.7px, the midpoint of that 6px gap. */
.footer-col-image {
  width: clamp(6.5rem, 9vw, 8.5rem);
  height: auto;
  margin-block-start: 0.35rem;
  background: radial-gradient(circle closest-side, var(--white) 0 74%, transparent 74%);
}

.footer-journey {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 1rem 0;
  list-style: none;
  border-block: 1px solid #1c5670;
}
.footer-journey li { max-width: none; padding: 0.2rem 1rem; border-inline-end: 1px solid #2c6a86; font-size: var(--fs--1); }
.footer-journey li:first-child { padding-inline-start: 0; }
.footer-journey li:last-child { border-inline-end: 0; padding-inline-end: 0; }
.footer-col .email-action a,
.footer-col a.footer-contact-action {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0.45rem 0.9rem;
  color: var(--on-deep-teal);
  border: 1px solid #7eb3c6;
  text-decoration: none;
}
.footer-col .email-action a:hover,
.footer-col .email-action a:focus-visible,
.footer-col a.footer-contact-action:hover,
.footer-col a.footer-contact-action:focus-visible {
  color: var(--deep-teal, #0b3a4a);
  background: var(--on-deep-teal);
}

.footer-feedback {
  grid-column: 1 / -1;
  padding-block: 1rem 1.25rem;
  border-block: 1px solid #1c5670;
}
.footer-feedback-disclosure { max-width: 54rem; }
.footer-feedback-disclosure summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.65rem;
  color: var(--white);
  font-family: var(--display);
  font-size: var(--fs-1);
  cursor: pointer;
  list-style: none;
}
.footer-feedback-disclosure summary::-webkit-details-marker { display: none; }
.footer-feedback-disclosure summary::after {
  color: var(--on-deep-teal);
  content: "+";
  font-family: var(--sans);
  font-size: 1.3rem;
  line-height: 1;
}
.footer-feedback-disclosure[open] summary::after { content: "−"; }
.footer-feedback-disclosure summary:hover { color: var(--on-deep-teal); }
.footer-feedback-disclosure summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.footer-feedback-form {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem 0.85rem;
  align-items: end;
  margin-block-start: 0.8rem;
}
.footer-feedback-field { display: grid; gap: 0.4rem; }
.footer-feedback-field label { color: #b6d3dd; font-size: var(--fs--1); }
.footer-feedback-field textarea {
  min-width: 0;
  min-height: 5.5rem;
  padding: 0.7rem 0.8rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid #7eb3c6;
  border-radius: 2px;
  font: inherit;
  line-height: 1.45;
  resize: vertical;
}
.footer-feedback-field textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.footer-feedback-form button[type="submit"] {
  min-height: 48px;
  padding: 0.65rem 1.15rem;
  color: var(--deep);
  background: var(--white);
  border: 1px solid var(--white);
  border-inline-start: 4px solid var(--brand-aqua);
  border-radius: 0;
  font: 700 1rem/1 var(--sans);
  cursor: pointer;
}
.footer-feedback-form button[type="submit"]:hover { color: var(--brand-blue); background: var(--on-deep-teal); }
.footer-feedback-form button[type="submit"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.footer-feedback-form button[type="submit"]:disabled { cursor: wait; opacity: 0.65; }
.footer-feedback-status,
.footer-feedback-noscript { grid-column: 1 / -1; min-height: 1.4em; margin: 0; color: #b6d3dd; font-size: var(--fs--1); }
.footer-feedback-status[data-status="success"] { color: var(--on-deep-teal); font-weight: 700; }
.footer-feedback-status[data-status="error"] { color: #ffd6a4; font-weight: 700; }
.footer-feedback-honeypot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .footer-feedback-form { grid-template-columns: minmax(0, 1fr); }
  .footer-feedback-form button[type="submit"] { justify-self: start; }
}
.footer-note { grid-column: 1 / -1; margin: 0; color: #9dbecb; font-size: var(--fs--1); }
.footer-note a { color: var(--on-deep-teal); }

@view-transition { navigation: auto; }

.band-dates-head { padding-block-end: clamp(1.5rem, 2.5vw, 2.5rem); }
#calendar-dates:focus-visible { outline: 2px solid var(--accent); outline-offset: 0.6rem; }

/* ---------- the church calendar ----------
 * The week laid out as the week: seven columns would be honest about the
 * calendar and dishonest about the building, because six of them are nearly
 * empty and Sunday holds ten things. So the days that HAVE something get a
 * column each, sized to what is in them — Sunday takes the room it needs and
 * the mid-week rooms sit beside it. */
.rhythm-week {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
  margin-block-start: 2.5rem;
}

/* Sunday is not one column of four; it is the reason the campus exists. Given
   twice the track it stops reading as a peer of Thursday. */
.rhythm-day--sunday { grid-column: span 2; }

.rhythm-day-name {
  margin-block-end: 0.15rem;
  padding-block-end: 0.55rem;
  border-block-end: 2px solid var(--accent);
  font-size: var(--fs-1);
}

.rhythm-day-count {
  margin: 0 0 1.4rem;
  color: var(--muted);
  font-size: var(--label-size);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rhythm-entries { margin: 0; padding: 0; list-style: none; }

.rhythm-entry {
  padding-block: 0 1.4rem;
  margin-block-end: 1.4rem;
  border-block-end: 1px solid var(--rule);
}
.rhythm-entry:last-child { margin-block-end: 0; border-block-end: 0; }

.rhythm-time {
  margin: 0 0 0.25rem;
  color: var(--brand-blue);
  font-size: var(--label-size);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.rhythm-title { margin: 0 0 0.3rem; font-size: var(--fs-1); }
.rhythm-title a { color: inherit; text-decoration: none; border-block-end: 1px solid var(--rule-strong); }
.rhythm-title a:hover { border-block-end-color: var(--accent); }

.rhythm-place {
  margin: 0 0 0.4rem;
  padding-inline-start: 0.7rem;
  border-inline-start: 3px solid var(--brand-aqua);
  font-size: var(--small-size);
}
.rhythm-place a { color: var(--brand-blue); }

.rhythm-detail { margin: 0.35rem 0 0; color: var(--muted); font-size: var(--small-size); }

/* On break is a fact about this week, not a footnote — it belongs where the
   time would be read, in the one colour the site uses for "look here". */
.rhythm-break {
  margin: 0.35rem 0 0;
  padding: 0.25rem 0.6rem;
  display: inline-block;
  color: var(--accent-dark);
  background: var(--accent-pale);
  font-size: var(--label-size);
}
.rhythm-entry.is-resting .rhythm-title { color: var(--muted); }

/* The season runs down one line, so its LENGTH is visible: five weeks of the
   church's letter set end to end, months marked along it, what has passed
   falling back and what is still ahead struck against the church's own clock by
   assets/calendar.js. A plain list of sixteen rows would have said the same
   dates and shown nothing about the shape of the season. */
.dated-spine {
  position: relative;
  padding-inline-start: clamp(1.1rem, 2.4vw, 2rem);
  border-inline-start: 1px solid var(--rule);
}
.dated-month[hidden] { display: none; }
.dated-list li[hidden] { display: none; }

.dated-month + .dated-month { margin-block-start: 2.75rem; }

/* The month's own tick on the spine. */
.dated-month-name::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(clamp(1.1rem, 2.4vw, 2rem) * -1 - 1px);
  width: 3px;
  height: 1.6em;
  margin-block-start: 0.1em;
  background: var(--accent);
}
.dated-month-name { position: relative; }

.dated-month-name {
  margin-block-end: 1rem;
  padding-block-end: 0.5rem;
  border-block-end: 1px solid var(--rule);
  font-size: var(--fs-1);
}

.dated-list { margin: 0; padding: 0; list-style: none; }

.dated-list li {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
  gap: 0.4rem 1.25rem;
  padding-block: 0.9rem;
  border-block-end: 1px solid var(--rule);
}

.dated-list .date-head { margin: 0; font-size: var(--fs-1); }
.dated-what { display: grid; gap: 0.15rem; }
.dated-title { font-family: var(--display); font-size: 1rem; }
.dated-where a { color: var(--brand-blue); font-size: var(--small-size); }
.dated-source a { color: var(--muted); font-size: var(--meta-size); }

/* Set by assets/calendar.js against the church's own clock, never by the build. */
.dated-list li[data-calendar-when="past"] .date-head,
.dated-list li[data-calendar-when="past"] .dated-title { color: var(--muted); }
.dated-list li[data-calendar-when="ahead"] .date-head,
.dated-list li[data-calendar-when="today"] .date-head { color: var(--accent-dark); }
.dated-list li[data-calendar-when="today"] { background: var(--accent-pale); }

.calendar-next {
  margin-block-start: 1.5rem;
  padding: 0.85rem 1.1rem;
  border-inline-start: 3px solid var(--accent);
  background: var(--fog);
  font-family: var(--display);
  font-size: var(--fs-1);
}
/* Ships hidden and empty; an author `display` beats the UA [hidden] rule. */
.calendar-next[hidden] { display: none; }

@media (max-width: 700px) {
  .rhythm-day--sunday { grid-column: auto; }
  .dated-list li { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
}

/* ---------- the questions before a first Sunday ----------
   A term list rather than headings, because these are ten short exchanges and
   ten <h3>s would set them at the weight of the page's real sections. */
.visit-questions { margin: 1.75rem 0 1.5rem; }
.visit-questions > div {
  padding-block: 1.1rem;
  border-block-end: 1px solid var(--rule);
}
.visit-questions > div:first-child { border-block-start: 1px solid var(--rule); }
.visit-questions dt {
  margin-block-end: 0.35rem;
  font-family: var(--display);
  font-size: var(--fs-1);
  line-height: 1.22;
  color: var(--ink);
}
.visit-questions dd { margin: 0; color: var(--muted); max-width: var(--measure); }

/* ---------- the six doors, on the one page that owes them ----------
   Every other route carries the doors in the nav rule. A reader who arrived at
   a broken address does not know this site, so here they are the content: named
   and said, at a size worth pointing a phone at. */
.door-grid {
  display: grid;
  /* Three, then two, then one — never auto-fit. Six doors into four tracks
     leaves two cells of bare gap colour at the bottom right, which reads as the
     page having failed to load rather than as a deliberate row. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  background: var(--rule);
}
.door-grid li { margin: 0; }
.door-grid a {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  height: 100%;
  padding: 1.5rem 1.4rem;
  background: var(--white);
  border-inline-start: 3px solid var(--accent);
  text-decoration: none;
}
.door-grid a:hover { background: var(--deep); }
.door-name { font-family: var(--display); font-size: var(--fs-2); color: var(--ink); }
.door-what { color: var(--muted); font-size: var(--small-size); }
.door-grid a:hover .door-name { color: var(--white); }
.door-grid a:hover .door-what { color: var(--on-deep); }
@media (max-width: 980px) { .door-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .door-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- sign-ups ----------
 * The register at the top is the page's argument: nine sheets, and only two of
 * them have an address a stranger can open. Bars weighted by count, because the
 * lopsidedness IS the finding. */
.reach-bar { margin-block-start: 2.5rem; }
/* The tracks are set inline by the generator as `2fr 2fr 5fr`, so the widths
   ARE the counts. A row of equal tiles would have said the three routes in are
   equally available, which is the exact thing the page is here to correct. */
.reach-bar ul {
  display: grid;
  gap: 1px;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
  background: var(--rule);
}
/* max-width:none because these are measured bars, not reading columns. The
   global `li { max-width: var(--measure) }` capped the widest cell at 30em —
   570px inside a 725px track — and the 155px of exposed `ul` rule-colour read
   as a fourth, empty tile sitting after "Write to somebody". A bar whose
   width IS its count cannot be clipped to a reading measure. */
.reach-bar-cell {
  display: grid;
  align-content: end;
  gap: 0.35rem;
  min-height: 6.5rem;
  max-width: none;
  padding: 1.1rem 1rem 0.9rem;
  background: var(--fog);
}
.reach-bar-cell--published { background: var(--accent-pale); }
.reach-bar-count {
  font-family: var(--display);
  font-size: var(--fs-2);
  line-height: 1;
  color: var(--brand-blue);
}
.reach-bar-cell--published .reach-bar-count { color: var(--accent-dark); }
.reach-bar-label a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  color: var(--ink);
  font-size: var(--label-size);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  border-block-end: 1px solid var(--rule-strong);
}
.reach-bar-label a:hover { border-block-end-color: var(--accent); }

.signup-card {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 1rem 2.5rem;
  padding-block: 1.75rem;
  border-block-end: 1px solid var(--rule);
}
.signup-card:first-of-type { border-block-start: 1px solid var(--rule); }
.signup-when { padding-inline-start: 1rem; border-inline-start: 3px solid var(--accent); }
.signup-when .date-head { font-size: var(--fs-1); }
.signup-where { display: block; margin-block-start: 0.35rem; font-size: var(--small-size); }
.signup-body h3 { margin-block-end: 0.5rem; }
/* .signup-action .btn is full width on /this-week/, where an announcement's
   sign-up is the one thing in the card. Here every card has one and a column of
   full-bleed slabs reads as a wall. */
.signup-card .signup-action .btn { width: auto; }
.signup-contact { margin-block: 0.7rem 0; color: var(--muted); }

@media (max-width: 700px) {
  /* Proportional widths need width to be proportional in; at phone size the
     narrow track cannot hold its own label, so the band becomes three rows and
     the count carries the comparison on its own. `!important` because the
     generator sets the tracks inline. */
  .reach-bar ul { grid-template-columns: minmax(0, 1fr) !important; }
  .reach-bar-cell { min-height: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.9rem; }
  .signup-card { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- the phone action rail ----------
 * These four are what somebody standing in a car park with a phone actually
 * wants: reach a person, get here, find out what is on, give. They remain
 * ordinary links and form a closing rail before the footer. Keeping the rail in
 * normal flow matters on long sermon and story pages: no site chrome is laid
 * across a caption, audio control, or recovery destination.
 *
 * Desktop keeps none of it because the wider masthead and footer already carry
 * the same routes at useful weight.
 */
.action-bar { display: none; }

@media (max-width: 700px) {
  .action-bar {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    background: var(--white);
    border-block-start: 1px solid var(--rule-strong);
    border-block-end: 1px solid var(--rule-strong);
    /* Clears the home indicator on a modern phone and collapses to nothing on
       anything that does not have one. */
    padding-block-end: env(safe-area-inset-bottom, 0px);
  }

  .action-bar-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0.55rem 0.25rem;
    color: var(--ink);
    font-family: var(--display);
    /* Four cells across a 320px phone leave about 72px of inside width each,
       and "Directions" is one word that cannot wrap — so the label tracks the
       viewport rather than being cropped. The 52px target does the work of
       being easy to hit; the word only has to be readable. */
    font-size: clamp(0.8rem, 3.3vw, 0.95rem);
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    /* The rib the whole site uses to mark a way in, turned to sit on top of the
       cell instead of beside it — four ribs along the bar's own edge. */
    border-block-start: 3px solid var(--accent);
  }

  .action-bar-link + .action-bar-link { border-inline-start: 1px solid var(--rule); }
  .action-bar-link:hover,
  .action-bar-link:active { color: var(--white); background: var(--deep); }
  .action-bar-link[aria-current="page"] { background: var(--fog); }

}

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .site-header { gap: 0.9rem 1rem; padding-block: 0.9rem 0; }
  .brand-logo { width: clamp(11rem, 26vw, 14rem); }
  html[data-reading="large"] .brand-logo { width: clamp(8.8rem, 26vw, 11.2rem); }
  .header-aside,
  .header-search,
  .header-side { width: min(16rem, 100%); }
  .threshold { padding-block: 1.25rem clamp(3rem, 6vw, 5rem); }
  /* max-width only. This also carried a clamp bottoming at 2.4rem, which is why
     the phone h1 landed at 38.4px against 39px section headings — the same
     inversion as desktop, one rounding away from invisible. */
  .threshold-copy h1 { max-width: none; }
  .service-copy h2 { font-size: clamp(2.5rem, 4.2vw, 3rem); }
}

/* Larger type needs a wider breakpoint than ordinary type. At laptop widths the
   utility stacks move below the centered lockup instead of squeezing it between
   two rem-scaled columns. */
@media (min-width: 901px) and (max-width: 1180px) {
  html[data-reading="large"] .site-header {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  html[data-reading="large"] .brand {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  html[data-reading="large"] .header-aside {
    grid-column: 1;
    grid-row: 2;
    align-self: stretch;
    padding-block-start: 0;
  }
  html[data-reading="large"] .header-side {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
  html[data-reading="large"] .site-nav { grid-row: 3; }
}

@media (max-width: 1180px) {
  html[data-reading="large"] .first-steps { grid-template-columns: minmax(0, 1fr); }
}

/* The ten stable doors fit a compact desktop row above the tablet menu
   breakpoint by spending less space on tracking and side padding. */
@media (min-width: 901px) and (max-width: 1040px) {
  .site-nav { gap-inline: 0.2rem; }
  .nav-link { padding-inline: 0.2rem; font-size: 0.73rem; letter-spacing: 0.055em; }
}

@media (max-width: 900px) {
  /* Every row in this masthead earned its place one at a time, and together
     they had taken 464px — 55% of a 390x844 screen — before the building
     appeared. The gap and the lockup carry most of the reduction because they
     cost height on every row at once. */
  .site-header { grid-template-columns: minmax(0, 1fr) auto; padding-block: 0.7rem 0; gap: 0.6rem 1rem; }
  .brand { grid-column: 1; grid-row: 1; justify-items: start; text-align: start; gap: 0.3rem; }
  .brand-logo { width: min(11rem, calc(100vw - 8rem)); }
  .brand-tagline { font-size: var(--label-size); letter-spacing: 0.09em; }
  .menu-toggle { display: inline-flex; grid-column: 2; grid-row: 1; align-self: center; }
  /* The weekly letter stays on screen behind a closed menu — on a phone it is
   * the reason most people opened the site at all. So does the stream: the
   * aside stops being a cell of its own and hands both children back to the
   * header's own rows, stacked full width. */
  .header-aside,
  .header-side { display: none; }
  /* Two classes deep, to beat the desktop `.header-aside .nav-action` rule —
     a media query adds no specificity, so the single-class form below loses and
     the letter's bar stops short of the right edge on a phone. */
  .header-aside .nav-action { grid-column: 1; grid-row: 1; }
  .nav-action {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-self: stretch;
    gap: 0 0.75rem;
    min-height: 48px;
    padding: 0.5rem 1.65rem 0.55rem 0.75rem;
  }
  .nav-action::after { inset-inline-end: 0.55rem; font-size: 0.95rem; }
  .nav-action-label { font-size: 0.9rem; }
  .nav-action-kicker { grid-column: 2; justify-self: end; }
  /* One strip, not two: the kicker stops being its own line and labels the row
     from the left. Five masthead strips in four visual grammars was the cycle-3
     finding — the label and the boxes it names are one unit, so they share one. */
  .header-watch {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.45rem 0.45rem;
    border: 1px solid var(--rule);
  }
  .header-watch-kicker,
  .header-watch-live { grid-column: 1; grid-row: 1; justify-self: center; text-align: center; }
  .header-watch-links { grid-column: 1; grid-row: 2; }
  .header-watch-link { min-height: 40px; padding: 0.3rem 0.5rem; font-size: 1rem; }
  /* Same trick the aside uses: the side stack stops being a cell and hands the
     search field and the reading control back to the header's own rows. */
  .header-side {
    display: none;
  }
  .header-search { grid-column: 1; grid-row: 1; width: 100%; justify-self: stretch; }
  /* Two classes deep, to beat the single-class `.header-side .header-search`
     above — a media query adds no specificity of its own. */
  .header-side .header-search { grid-column: 1; grid-row: 1; width: 100%; }
  /* Its own slim row directly under the search field — the two site-wide tools
     together, and the last thing before the doors. It cannot share row 1 with
     the menu button (grid items in one cell overlap) and it cannot share row 4
     with the search without cutting the field to about 150px at 320. */
  .header-reading { grid-column: 2; grid-row: 1; justify-content: end; }
  /* The street address is a footer fact that had been promoted into the one
     screen this site cannot spare, where it is neither a task nor an answer —
     and Directions is a permanent button in the action bar two taps closer than
     reading it. It stays in the DOM for the desktop masthead and the footer. */
  .brand-tagline { display: none; }
  /* The doors are behind the menu button at this width, so the nav's own bottom
     rule is not on screen and the trail would float under the masthead with
     nothing marking where the chrome stops. */
  .breadcrumb { border-block-start: 1px solid var(--rule); }
  .site-nav {
    display: none;
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: column;
    align-items: stretch;
    border-block-start: 0;
  }
  .site-nav.is-open { display: flex; }
  .nav-link { min-height: 46px; padding: 0.7rem 0.2rem; border-block-end: 1px solid var(--rule); }
  .nav-link::after { inset: auto auto 0 0; width: 3px; height: auto; top: 0; }
  .threshold-grid,
  .welcome-grid,
  .split-feature,
  .service-grid,
  .mission-grid,
  .route-intro,
  .community-intro,
  .hero-now,
  .welcome-spread,
  .working-paths,
  .section-heading-row {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .action-rail { display: grid; grid-template-columns: 1fr 1fr; padding-block: 1rem; }
  .action-rail a { padding-block: 0.75rem; border-block-end: 1px solid var(--rule); }
  .welcome-context { padding-inline-start: 0; padding-block-start: 1.5rem; border-inline-start: 0; border-block-start: 1px solid #41668c; }
  .feature-copy { padding-inline-start: 0; padding-block-start: 1.5rem; border-inline-start: 0; border-block-start: 1px solid var(--accent); }
  .service-photos { order: -1; }
  .kept-grid { grid-template-columns: minmax(0, 1fr); }
  .kept-grid article { border-block-end: 1px solid var(--rule); }
  .photo-grid { grid-template-columns: minmax(0, 1fr); }
  .standing dl > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .site-footer { grid-template-columns: minmax(0, 1fr); }
  /* One column now, so an explicit column 2 would conjure an implicit track and
     crush the whole footer into a sliver. Let it flow. */
  .footer-watch { grid-column: 1; grid-row: auto; }
  .footer-columns { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .footer-lockup { grid-template-columns: minmax(9rem, 12rem) 1fr; }
  .footer-nav,
  .footer-note { grid-column: 1; }
  .footer-journey { grid-column: 1; }
}

@media (max-width: 560px) {
  .proto-banner { padding-inline: 0.75rem; font-size: var(--label-size); }
  .band { padding-block: 3.5rem; }
  .threshold { padding-block: 1.5rem 3rem; }
  .threshold-grid { row-gap: 0; }
  /* At phone width the hero unwinds into one column in a deliberate order:
     the church's line, then the photographed threshold, then the practical
     detail. The picture sits directly under the headline so the first screen
     shows the place. */
  .threshold-copy { display: contents; }
  .threshold-copy > .eyebrow { order: 1; }
  .threshold-copy > h1 { order: 2; }
  .threshold-copy > .lead { order: 4; }
  .threshold-copy > .threshold-facts { order: 5; }
  .threshold-copy > .button-row { order: 6; }
  .threshold-copy > .watch-live { order: 7; }
  .threshold-copy > .fact-note { order: 8; }
  h1 { font-size: clamp(2.3rem, 10.5vw, 3.4rem); }
  /* The quote and the service heading carry class selectors that outrank a bare
     h2, so without naming them here they escape the phone curve and land at
     41.4 and 40 against everyone else's 39 — three sizes inside 2.4px, which
     reads as one size mis-hit. One curve for every h2-role at phone width. */
  h2, .welcome-statement, .service-copy h2 { font-size: clamp(2.2rem, 10vw, 3.1rem); }
  /* These two override --fs-5/--fs-4 outright at phone width, so the hold under
     larger type has to be repeated here or the headline grows anyway and starts
     breaking words at 320. */
  html[data-reading="large"] h1 { font-size: clamp(1.84rem, 10.5vw, 2.72rem); }
  html[data-reading="large"] h2,
  html[data-reading="large"] .welcome-statement,
  html[data-reading="large"] .service-copy h2 { font-size: clamp(1.76rem, 10vw, 2.48rem); }
  .threshold-facts div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; padding-block: 0.2rem; }
  .button-row { align-items: stretch; }
  .button-row .btn { width: 100%; }
  .action-rail { grid-template-columns: minmax(0, 1fr); }
  .action-rail a { border-inline-end: 0; }
  .service-photos { grid-template-columns: minmax(0, 1fr); }
  .service-photos figure:first-child img,
  .service-photos figure:last-child img { height: auto; aspect-ratio: 4 / 3; }
  .entry { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .entry-when { padding-inline-start: 0; padding-block-start: 0.75rem; border-inline-start: 0; border-block-start: 1px solid var(--accent); }
  .entry-body--with-banner { grid-template-columns: minmax(0, 1fr); }
  .entry-body--with-banner > :not(.entry-banner),
  .entry-banner { grid-column: 1; }
  .entry-banner { grid-row: auto; width: min(100%, 30rem); margin-block-end: 0.55rem; }
  .quick-actions a,
  .path-list a,
  .working-paths li a,
  .verb-index { grid-template-columns: minmax(0, 1fr); }
  .verb-index dd { padding-block-start: 0; border-block-start: 0; }
  .search-hero .search-destination-form { grid-template-columns: minmax(0, 1fr); }
  .search-hero input[type="search"] { border-inline-end: 1px solid var(--rule-strong); border-radius: 2px 2px 0 0; }
  .search-hero button { border-radius: 0 0 2px 2px; }
  .footer-lockup { grid-template-columns: minmax(0, 1fr); }
  .footer-home-link img { width: min(13rem, 100%); }
  .footer-journey { display: grid; }
  .footer-journey li { padding: 0.55rem 0; border-inline-end: 0; border-block-end: 1px solid #31577d; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation-duration: 0.001ms !important; }
}

/* ---------- pastor's welcome ---------- */

/* The church leads its own home page with a face and a signed paragraph. That
 * is the warmest thing on pclg.org and it belongs here too. */
.pastor-grid {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.pastor-portrait { margin: 0; }
.pastor-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  border-block-end: 4px solid var(--accent);
}
.pastor-portrait figcaption {
  padding-block-start: 0.6rem;
  color: var(--muted);
  font-size: var(--label-size);
  line-height: 1.45;
}
.pastor-copy blockquote.their-words {
  margin-block: 0 1.4rem;
  border-inline-start-color: var(--brand-aqua);
}
.pastor-copy blockquote.their-words p { max-width: 58ch; }
/* The letter is quoted verbatim and the church pastes raw sign-up addresses
   into it. Their words are not ours to shorten, so the long ones break. */
[data-verbatim] p { overflow-wrap: anywhere; }

.pastor-signoff {
  margin-block-end: 1.6rem;
  padding-inline-start: clamp(1rem, 2.5vw, 2rem);
  color: var(--brand-blue);
  font-family: var(--display);
  font-size: var(--fs-1);
  line-height: 1.35;
}

/* ---------- full-bleed welcome band ---------- */

/* The deep room the DNA already assigns to "disclosure, welcome, footer" — and
   this band is the welcome, so it takes it. Independent critique, 2026-08-13:
   "fog vs white is imperceptible, so the page reads as one continuous light
   surface until the photo band." It was right; between the hero and the
   preschool room the home page had two tints and no rooms, and the church's
   own navy was doing nothing above the fold-and-a-half. The congregation
   photograph now sits inside the colour rather than on white paper. */
.welcome-spread-band {
  color: #dbe8f4;
  background: var(--deep);
}
.welcome-spread-band a { color: var(--on-deep-teal); }
.welcome-band-photo {
  position: relative;
  margin: 0;
}
/* the church runs this congregation photograph as a thin full-width band. At
   1.33:1 the source cannot survive that shape, so the band is held to the
   content measure and a 16:9 frame instead of being cropped to a ribbon. */
.welcome-band-photo {
  max-width: var(--max);
  margin-inline: auto;
}
.welcome-band-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 40%;
}
.welcome-band-photo figcaption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  justify-content: center;
}
.welcome-band-photo figcaption span {
  padding: 0.7rem clamp(1.5rem, 4vw, 3.5rem);
  color: var(--white);
  background: rgba(0, 53, 79, 0.88);
  font-family: var(--sans);
  font-size: var(--meta-size);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.welcome-band-copy {
  padding: clamp(2.5rem, 5vw, 4rem) var(--band-x) clamp(3rem, 6vw, 5rem);
}
.welcome-band-copy p { max-width: 74ch; margin-inline: auto; text-align: center; font-size: var(--fs-1); line-height: 1.6; }
.welcome-band-copy .attribution { font-size: var(--fs--1); }

/* ---------- life bays ---------- */

/* Every row uses the same three columns, media track, heading track and copy
 * track. The source photographs vary, but the cards do not wander. */
.life-bays {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem) clamp(1.25rem, 2.2vw, 2.25rem);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.life-bay {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  max-width: none;
  grid-column: span 1;
}
.life-bay a {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  color: var(--ink);
  text-decoration: none;
}
.life-bay img {
  display: block;
  width: 100%;
  height: clamp(13rem, 19vw, 17rem);
  margin-block-end: 0.35rem;
  border-radius: 2px;
}
.life-bay img {
  object-fit: cover;
}
.life-bay h3 {
  margin-block-end: 0.25rem;
  padding-block-end: 0.25rem;
  border-block-end: 1px solid var(--rule);
  font-size: var(--fs-1);
}
.life-bay a:hover h3 { color: var(--brand-blue); border-block-end-color: var(--accent); }
.life-bay p { max-width: none; margin: 0; color: var(--muted); font-size: var(--small-size); line-height: 1.55; }

.life-bay--narrow,
.life-bay--mid,
.life-bay--wide,
.life-bay--broad { grid-column: span 1; }

/* ---------- people ---------- */

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
  gap: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2.2vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.people-grid-lead { grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); max-width: 62rem; }
.person { max-width: none; }
.person img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  margin-block-end: 0.9rem;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 2px;
  background: var(--fog);
}
.person h3 { margin-block-end: 0.2rem; font-size: var(--fs-1); line-height: 1.2; }
.person-role { max-width: none; margin: 0; color: var(--brand-blue); font-size: var(--meta-size); letter-spacing: 0.02em; }
.person-note { max-width: none; margin-block-start: 0.35rem; color: var(--muted); font-size: var(--meta-size); }
/* The address itself never reaches the page: assets/mask-email.js joins it in
   the browser and swaps in a real mailto:. Until then, and forever with
   scripting off, this is the sentence the reader gets, and it points at the
   number the congregation actually calls. */
.person-reach {
  max-width: none;
  margin-block-start: 0.4rem;
  color: var(--muted);
  font-size: var(--meta-size);
  overflow-wrap: anywhere;
}
.person-reach a {
  min-height: 24px;
  color: var(--brand-blue);
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.16em;
}

/* Masked addresses become ordinary .btn links at runtime. The wrapper only
   holds the attributes until then; it does not get its own button skin. */
.email-action { display: inline-block; }

/* The way into an ensemble is the reason most people read its entry, so it
   leaves the end of a paragraph and becomes its own line under the description,
   set apart by the rib rather than by weight. */
.ensemble-reach {
  max-width: none;
  margin-block-start: 0.9rem;
  padding-inline-start: 0.85rem;
  border-inline-start: 3px solid var(--brand-aqua);
  color: var(--ink);
  font-size: var(--small-size);
  overflow-wrap: anywhere;
}
.ensemble-reach:not(.email-action) a {
  display: inline-block;
  min-height: 24px;
  color: var(--brand-blue);
  text-underline-offset: 0.16em;
}

/* Two-column route openings need enough room for real words, not just short
   specimen headings. At tablet width, a word such as “Scholarships” is wider
   than the narrow column itself, so the spread becomes one column here. */
@media (max-width: 960px) {
  .route-intro,
  .community-intro { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
}

/* ---------- two things people confuse, set beside each other ----------
   The rows carry the same questions in the same order in both cards, so the
   comparison reads across at any width. Below 820px the cards stack and the
   reader compares by scrolling, which is why each card repeats its own name
   rather than depending on a column header that would be far up the page. */
.compare-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem);
  margin-block-start: 2rem;
}
.compare-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: var(--white);
  border: 1px solid var(--rule);
  border-block-start: 3px solid var(--accent);
}
.compare-card h3 { margin: 0; font-size: var(--fs-2); }
.compare-gist {
  max-width: none;
  margin: 0.25rem 0 0;
  color: var(--brand-blue);
  font-family: var(--display);
  font-size: var(--fs-1);
}
.compare-card dl { margin: 1.25rem 0 0; }
.compare-card dl > div {
  padding-block: 0.85rem;
  border-block-start: 1px solid var(--rule);
}
.compare-card dt {
  color: var(--muted);
  font-size: var(--label-size);
  letter-spacing: 0.105em;
  text-transform: uppercase;
}
.compare-card dd {
  max-width: none;
  margin: 0.25rem 0 0;
  font-size: var(--fs--1);
  line-height: 1.55;
}
.compare-card .button-row { margin-block-start: auto; padding-block-start: 1.5rem; }
.compare-quote { margin-block-start: clamp(2rem, 4vw, 3rem); }

/* The one live fact on /community/membership/. The date is stamped in by
   build-pclg-membership.mjs and re-checked in the browser, so the band has two
   sentences and shows one. Both need their own [hidden] rule because an author
   `display` out-ranks the user agent's. */
.next-class {
  margin-block: 1.75rem;
  padding: 1.15rem clamp(1rem, 2.5vw, 1.5rem);
  background: var(--white);
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--accent);
}
.next-class-kicker {
  max-width: none;
  margin: 0;
  color: var(--brand-blue);
  font-size: var(--label-size);
  letter-spacing: 0.105em;
  text-transform: uppercase;
}
.next-class-date {
  max-width: none;
  margin: 0.2rem 0 0;
  font-family: var(--display);
  font-size: var(--fs-2);
  line-height: 1.16;
}
.next-class-note { max-width: none; margin: 0.5rem 0 0; font-size: var(--fs--1); }
.next-class-note[hidden] { display: none; }
.membership-event-banner {
  display: block;
  margin: 0.85rem 0 1rem;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.membership-event-banner[hidden] { display: none; }
.membership-event-banner img { display: block; width: 100%; height: auto; }
.membership-event-banner:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.next-class-source { max-width: none; margin: 0.6rem 0 0; color: var(--muted); font-size: var(--label-size); }
.next-class[data-class-when="past"] { border-inline-start-color: var(--rule-strong); }
.next-class[data-class-when="past"] .next-class-date { color: var(--muted); }

/* Membership is a choice, not a stock-photo promise. The page leads with the
   three real steps and keeps the final one explicitly optional. */
.membership-path {
  align-self: stretch;
  padding: clamp(1.5rem, 4vw, 3rem);
  color: var(--white);
  background: var(--deep);
  border-block-end: 4px solid var(--accent);
}
.membership-path-kicker {
  max-width: none;
  margin: 0 0 1.5rem;
  color: var(--on-deep-teal);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.membership-path ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.membership-path li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.2rem 1rem;
  max-width: none;
  padding-block: 1.1rem;
  border-block-start: 1px solid rgba(255, 255, 255, 0.24);
}
.membership-path li > span {
  grid-row: 1 / span 2;
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--on-deep-teal);
  font-size: var(--label-size);
}
.membership-path strong {
  color: var(--white);
  font-family: var(--display);
  font-size: var(--fs-1);
  font-weight: 400;
  line-height: 1.2;
}
.membership-path small {
  grid-column: 2;
  color: #dbe8f4;
  font-size: var(--small-size);
  line-height: 1.45;
}

@media (max-width: 820px) {
  .compare-pair { grid-template-columns: minmax(0, 1fr); }
}

.roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
  gap: 0 clamp(1.5rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.roster li {
  display: flex;
  max-width: none;
  flex-wrap: wrap;
  gap: 0 0.75rem;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 0.7rem;
  border-block-end: 1px solid var(--rule);
}
.roster-name { font-family: var(--display); font-size: var(--fs-1); }
.roster-role { color: var(--muted); font-size: var(--meta-size); text-align: end; }

.committee-list { margin-block: 0; }
.committee-list > div {
  display: grid;
  grid-template-columns: minmax(11rem, 0.42fr) minmax(0, 1fr);
  gap: 0.35rem clamp(1.5rem, 3vw, 3rem);
  padding-block: 1.15rem;
  border-block-end: 1px solid var(--rule);
}
.committee-list dt { font-family: var(--display); font-size: var(--fs-1); line-height: 1.24; }
.committee-list dd { max-width: 62ch; margin: 0; color: var(--muted); }
.committee-contact {
  display: block;
  margin-block-start: 0.3rem;
  color: var(--brand-blue);
  font-size: var(--meta-size);
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.mission-region {
  margin-block: clamp(2.75rem, 5vw, 4.5rem) 1rem;
  padding-block-end: 0.55rem;
  border-block-end: 1px solid var(--rule-strong);
}
.mission-partner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 4vw, 4rem);
}
.mission-partner-grid article {
  padding-block: 1.25rem;
  border-block-end: 1px solid var(--rule);
}
.mission-partner-grid h4 { margin-block: 0 0.35rem; font-size: var(--fs-1); }
.mission-partner-grid p { margin: 0; color: var(--muted); }

@media (max-width: 720px) {
  .mission-partner-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- watch / sermons ---------- */

.route-head { padding-block-end: clamp(2.5rem, 4vw, 4rem); }

/* Giving is a short decision path: keep the three practical ways attached to
   the opening instead of separating them with two full section gutters. */
.giving-page .route-head { padding-block-end: clamp(1rem, 2vw, 1.75rem); }
.giving-page .route-head + .band { padding-block-start: clamp(1.5rem, 3vw, 2.75rem); }

.watch-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
}
.watch-hero-photo { margin: 0; }
.watch-hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 2px;
}
.watch-hero-photo figcaption { padding-block-start: 0.6rem; color: var(--muted); font-size: var(--label-size); }
.watch-facts { display: grid; gap: 0; margin-block: 1.6rem; }
.watch-facts > div {
  display: grid;
  grid-template-columns: minmax(7rem, 0.28fr) minmax(0, 1fr);
  gap: 0 1.5rem;
  padding-block: 0.85rem;
  border-block-start: 1px solid var(--rule);
}
.watch-facts > div:last-child { border-block-end: 1px solid var(--rule); }
.watch-facts dt { color: var(--brand-blue); font-size: var(--label-size); letter-spacing: 0.105em; text-transform: uppercase; }
.watch-facts dd { max-width: none; margin: 0; }

.watch-ways-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  border-inline-start: 1px solid var(--rule);
}
.watch-ways-list li {
  max-width: none;
  padding: 0 clamp(1.25rem, 2.4vw, 2rem);
  border-inline-end: 1px solid var(--rule);
}
.watch-ways-list h3 { font-size: var(--fs-1); }
.watch-ways-list p { color: var(--muted); font-size: var(--small-size); }
.watch-ways-list p a { color: var(--accent-dark); }
.watch-ways-list .button-row { align-items: stretch; margin-block-start: 1rem; }
.watch-ways-list .button-row .btn { flex: 1 1 10rem; justify-content: center; }

.voice-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: 0 clamp(1.5rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.voice-list li {
  display: flex;
  max-width: none;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 0.62rem;
  border-block-end: 1px solid var(--rule);
}
.voice-name { font-family: var(--display); font-size: var(--fs-1); line-height: 1.24; }
.voice-count { color: var(--muted); font-size: var(--meta-size); white-space: nowrap; }

.sermon-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.75rem, 3.5vw, 3.5rem);
  margin-block: 1.75rem;
}
.sermon {
  padding-block: 1.15rem;
  border-block-end: 1px solid var(--rule);
}
.sermon-meta {
  max-width: none;
  margin: 0 0 0.3rem;
  color: var(--brand-blue);
  font-size: var(--label-size);
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.sermon-dot { color: var(--rule-strong); }
.sermon-length { color: var(--muted); }
.sermon-title { margin-block-end: 0.25rem; font-size: var(--fs-1); line-height: 1.24; }
.sermon-title a { color: var(--ink); text-decoration-color: var(--rule-strong); }
.sermon-title a:hover { color: var(--brand-blue); text-decoration-color: var(--accent); }
.sermon-preacher { max-width: none; margin: 0; color: var(--muted); font-size: var(--meta-size); }

/* ---------- responsive for the new components ---------- */

@media (max-width: 1080px) {
  .life-bays { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .life-bay,
  .life-bay--narrow,
  .life-bay--mid,
  .life-bay--wide,
  .life-bay--broad { grid-column: span 1; }
  /* The split hero has to collapse well before the phone breakpoint: at ~960px
     the left column is too narrow for the display scale and the heading falls
     into a one-word staircase. These rules belong after the .watch-* block
     above, not in the earlier responsive section, or the base grid wins. */
  .watch-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .watch-hero-photo { max-width: 26rem; }
}

@media (max-width: 800px) {
  /* minmax(0, …), not 1fr. A bare `1fr` is `minmax(auto, 1fr)`, and `auto`
     resolves to MIN-CONTENT — so one unbreakable token stretches the track past
     its own container. Pastor Dave pasted a 57-character SignUpGenius address
     into the letter of 29 July and that issue's page ran 64px off a 375 screen.
     Same failure the auto-fill tracks had before #1362. */
  .pastor-grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .pastor-portrait { max-width: 13rem; }
  .watch-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .watch-ways-list { grid-template-columns: minmax(0, 1fr); border-inline-start: 0; }
  .watch-ways-list li { padding: 1.25rem 0; border-inline-end: 0; border-block-end: 1px solid var(--rule); }
  .sermon-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .committee-list > div { grid-template-columns: 1fr; gap: 0.4rem; }
  .roster li { flex-wrap: nowrap; }
  .people-grid { grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr)); }
}

@media (max-width: 700px) {
  .life-bays { grid-template-columns: minmax(0, 1fr); }
  .life-bay,
  .life-bay--narrow,
  .life-bay--mid,
  .life-bay--wide,
  .life-bay--broad { grid-column: 1 / -1; }
}

/* ---------- long-index controls, in this church's clothes ---------- */

[data-stoa-index-controls] {
  margin-block: 1.75rem 0;
  padding-block: 1rem;
  background: var(--fog);
  border-block: 1px solid var(--rule);
}
.band-feint [data-stoa-index-controls] { background: var(--fog); }
[data-stoa-index-controls] form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  align-items: center;
}
[data-stoa-index-controls] label {
  color: var(--brand-blue);
  font-size: var(--label-size);
  letter-spacing: 0.105em;
  text-transform: uppercase;
}
[data-stoa-index-controls] input[type="search"] {
  min-width: min(20rem, 100%);
  flex: 1 1 14rem;
  padding: 0.55rem 0.75rem;
  color: var(--ink);
  background: var(--white);
  border: 0;
  border-block-end: 1px solid var(--rule-strong);
  border-radius: 0;
  font: inherit;
  font-size: var(--field-size);
}
[data-stoa-index-controls] input::placeholder { color: #6a8894; }
[data-stoa-index-controls] button {
  padding: 0.55rem 1.1rem;
  color: var(--white);
  background: var(--deep);
  border: 1px solid var(--deep);
  border-radius: 0;
  font: inherit;
  font-size: var(--meta-size);
  cursor: pointer;
}
[data-stoa-index-controls] button:hover { background: var(--brand-blue); }
[data-stoa-index-summary] {
  max-width: none;
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: var(--fs--1);
}

[data-stoa-index-pagination] { margin-block: 1.5rem; }
[data-stoa-index-pagination] ul { margin: 0; padding: 0; list-style: none; }
[data-stoa-index-pagination] li { max-width: none; }
[data-stoa-index-pagination] a,
[data-stoa-index-pagination] [aria-current="page"] {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding-inline: 0.7rem;
  text-decoration: none;
}
[data-stoa-index-pagination] a { color: var(--accent-dark); border-block-end: 1px solid var(--rule); }
[data-stoa-index-pagination] a:hover { color: var(--brand-blue); border-block-end-color: var(--accent); }
[data-stoa-index-pagination] [aria-current="page"] { color: var(--white); background: var(--deep); }

.voice-list { grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); }

/* ---------- volunteer sign-up hub ---------- */

/* Their sign-ups live on six separate SignUpGenius sheets reached from a wall of
 * prose. One card per sheet, with the job named, is the whole fix. */
.signup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.signup {
  display: flex;
  max-width: none;
  flex-direction: column;
  padding: 1.5rem clamp(1.1rem, 2vw, 1.75rem) 1.75rem;
  border-block-end: 1px solid var(--rule);
  border-inline-end: 1px solid var(--rule);
}
.signup:first-child { border-inline-start: 1px solid var(--rule); }
.signup h3,
.signup h4 { font-size: var(--fs-1); }
.signup p { max-width: none; color: var(--muted); font-size: var(--small-size); }
.signup-action { margin-block: auto 0; padding-block-start: 1rem; }
.signup-action .btn { width: 100%; justify-content: center; text-align: center; }
.signup-contact { margin-block-start: 0.6rem; font-size: var(--meta-size); }

/* ---------- watch live rail ---------- */

/* Their stream links are a line of body copy and two social icons in a footer.
 * Anyone deciding at 9:50 on a Sunday morning needs them at the top. */
.watch-live { margin-block: 1.75rem 0; }
.watch-live .eyebrow { margin-block-end: 0.6rem; }
.watch-live ul { margin: 0; padding: 0; list-style: none; }
.watch-live li { max-width: none; }
.watch-live a {
  display: grid;
  min-height: 44px;
  grid-template-columns: auto 1fr auto;
  gap: 0 0.9rem;
  align-items: center;
  padding-block: 0.6rem;
  color: var(--ink);
  border-block-end: 1px solid var(--rule);
  text-decoration: none;
}

/* Each row wears the color of the place it goes — carried by the site's own
   sanctuary rib, not by a copy of anyone's logo. A rounded tile with a white
   play triangle IS the YouTube mark's silhouette, so painting one blue and
   calling it Facebook produces a worse mark and a trademark problem at once.
   Color on the site's own motif says which platform without imitating either,
   and the row already says the name in words. */
.watch-live a::before {
  width: 3px;
  height: 1.6rem;
  border-radius: 1px;
  background: var(--brand-blue);
  content: "";
}
.watch-live--facebook a::before { background: #1877f2; }
.watch-live--youtube a::before { background: #ff0000; }

@media (max-width: 460px) {
  /* The time is a second line rather than a squeezed third column. */
  .watch-live a { grid-template-columns: auto 1fr; }
  .watch-live a span { grid-column: 2; }
}
.watch-live a strong {
  font-weight: 400;
  font-family: var(--display);
  font-size: var(--fs-1);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.16em;
}
.watch-live a span { color: var(--muted); font-size: var(--meta-size); }
.watch-live a:hover strong { color: var(--brand-blue); text-decoration-color: var(--accent); }

.sermon-series { color: var(--muted); }
/* Only the services with no surviving recording carry this label now — where
   there is audio, the play control says "listen" better than a chip can. */
.sermon-kind {
  display: inline-block;
  margin-inline-start: 0.4rem;
  padding: 0.1rem 0.45rem;
  font-size: var(--label-size);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-dark);
  border: 1px solid var(--accent-300);
}



/* Archive controls share a dark, closed search treatment. Individual archive
   templates decide whether their controls stick or live beside their list. */
.index-controls-bar {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  padding-inline: var(--band-x);
  color: var(--on-deep);
  background: var(--deep);
}
.index-controls-bar [data-stoa-index-controls] {
  margin-block: 0;
  padding-block: 0.6rem;
  background: transparent;
  border-block: 0;
}
.index-controls-bar [data-stoa-index-controls] form { gap: 0.4rem 0.8rem; }
.index-controls-bar label { color: var(--on-deep-teal); font-size: var(--label-size); }
.index-controls-bar input[type="search"] {
  flex: 1 1 12rem;
  min-width: 0;
  min-block-size: 44px;
  padding: 0.4rem 0.6rem;
  color: var(--white);
  background: transparent;
  border-block-end: 1px solid #2c6a86;
  font-size: var(--field-size);
}
.index-controls-bar input::placeholder { color: #7fa8ba; }
.index-controls-bar button {
  min-block-size: 44px;
  padding: 0.4rem 0.9rem;
  color: var(--deep);
  background: var(--on-deep-teal);
  border-color: var(--on-deep-teal);
  font-size: var(--label-size);
}
.index-controls-bar button:hover { color: var(--deep); background: var(--white); border-color: var(--white); }
.index-controls-bar [data-stoa-index-summary] { margin-block-start: 0.25rem; color: #9dc4d1; font-size: var(--label-size); }

/* On /watch/ this belongs to the sermon list, not the page masthead. */
.sermon-index-controls {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  margin-block: 1.25rem 1.75rem;
  padding-inline: clamp(0.9rem, 2vw, 1.4rem);
}

/* The filter box grew a suggestion list, and a suggestion list has to be
 * allowed out of the bar it hangs from. index-navigation.css caps the sticky
 * controls and scrolls their overflow, which is right for a tall facet panel
 * and fatal for a dropdown: it would be clipped at the bar's edge. This stack
 * is one row and a summary, well inside the viewport budget the cap protects,
 * so it opts out of the cap and lets the panel overhang the results instead. */
.index-controls-bar [data-stoa-index-controls] {
  max-block-size: none;
  overflow: visible;
}
/* The filter form borrows .omnibox for the suggestion panel's skin, and .omnibox
 * is also the masthead search's own layout: an accent rule and an indent that
 * belong beside a logo, not inside a dark filter bar. Take the skin, leave the
 * furniture. `position: static` is the load-bearing one — see below. */
.index-controls-bar form.index-filter {
  position: static;
  padding-inline-start: 0;
  border-inline-start: 0;
}

/* The panel hangs off the bar, not off the field: anchored to the form it would
 * cover the count line an inch below it, and half-hide the number the reader
 * just asked about. The sticky section is already a containing block, so the
 * panel drops flush from the bottom edge of the bar and the summary stays. */
.index-filter ul[role="listbox"] {
  inset-block-start: 100%;
  border-color: var(--deep);
  border-block-start: 0;
  box-shadow: 0 14px 32px rgb(4 32 44 / 30%);
}
/* The panel is white on the dark bar, so its own type has to come back to ink. */
.index-filter .omni-title { color: var(--ink); }
.index-filter .omni-meta { color: var(--muted); }
.index-filter .suggest-group { color: var(--brand-blue); }

/* Show more / Clear sit under the count, in the bar's voice rather than the
 * page's: these are controls on the summary line, not calls to action. */
.index-filter-state {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin-block: 0.35rem 0;
}
.index-filter-state button {
  min-block-size: 44px;
  padding: 0.25rem 0;
  color: var(--on-deep-teal);
  background: transparent;
  border: 0;
  border-block-end: 1px solid #2c6a86;
  font-size: var(--label-size);
}
.index-filter-state button:hover { color: var(--white); border-block-end-color: var(--white); }

@media (max-width: 700px) {
  /* label on its own line, then the field and its button share one row */
  .index-controls-bar [data-stoa-index-controls] form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.3rem 0.6rem;
  }
  .index-controls-bar label { grid-column: 1 / -1; }
  .index-controls-bar input[type="search"] { min-block-size: 44px; }
  .index-controls-bar button { min-block-size: 44px; white-space: nowrap; }
}

/* Sermon audio plays in place: recent sermons stream from the church's own
   podcast CDN, and the 2020-21 recordings from the Internet Archive's capture
   of the download file the church had posted. Nothing is hosted here. */
.sermon-audio {
  display: block;
  width: 100%;
  height: 36px;
  margin-block-start: 0.6rem;
}
/* Once assets/sermon-player.js has put the church's own control in the page,
   the native element keeps playing and stops being seen. Without that script
   the rule never applies and the browser's controls stand. */
.sermon-audio-skinned { display: none; }

/* The player: an ink disc, and a hairline rule the playhead rib rides. The rib
   is the sanctuary motif doing a job — it marks where you are, in the brick the
   rest of the site reserves for functional accents. */
.sermon-player {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  margin-block-start: 0.45rem;
}

.sp-toggle {
  inline-size: 44px;
  block-size: 44px;
  padding: 5px;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--ink);
  background-clip: content-box;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 140ms ease;
}
.sp-toggle:hover { background-color: var(--brand-blue); }
.sp-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* One box, clipped to a triangle at rest and split into two bars while
   sounding. Drawn here rather than as inline SVG, which the media guardrail
   reserves for data graphics and vetted icon sets. */
.sp-glyph {
  inline-size: 13px;
  block-size: 15px;
  margin-inline-start: 2px; /* optical centering: a triangle sits left of true center */
  background: currentColor;
  clip-path: polygon(8% 0%, 100% 50%, 8% 100%);
}
.sermon-player[data-playing] .sp-glyph {
  inline-size: 12px;
  margin-inline-start: 0;
  clip-path: none;
  background:
    linear-gradient(currentColor 0 0) left / 34% 100% no-repeat,
    linear-gradient(currentColor 0 0) right / 34% 100% no-repeat;
}

.sp-seek {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 100%;
  block-size: 24px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.sp-seek:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sp-seek:disabled { cursor: default; }
.sermon-player[data-waiting] .sp-seek { opacity: 0.5; }

/* One gradient drives both engines, so the elapsed rule cannot drift between
   browsers. --sp-progress is set by the script on every timeupdate. */
.sp-seek::-webkit-slider-runnable-track {
  block-size: 3px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(var(--brand-blue), var(--brand-blue)) left / var(--sp-progress, 0%) 100% no-repeat,
    var(--rule);
}
.sp-seek::-moz-range-track {
  block-size: 3px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(var(--brand-blue), var(--brand-blue)) left / var(--sp-progress, 0%) 100% no-repeat,
    var(--rule);
}
.sp-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 4px;
  block-size: 17px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  margin-block-start: -7px;
}
.sp-seek::-moz-range-thumb {
  inline-size: 4px;
  block-size: 17px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
}
.sp-seek:disabled::-webkit-slider-thumb { background: var(--rule-strong); }
.sp-seek:disabled::-moz-range-thumb { background: var(--rule-strong); }

.sp-clock {
  max-width: none;
  margin: 0;
  color: var(--muted);
  font-size: var(--label-size);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sp-slash { margin-inline: 0.35em; color: var(--rule-strong); }

@media (prefers-reduced-motion: reduce) {
  .sp-toggle { transition: none; }
}

.sermon-audio-note {
  max-width: none;
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: var(--label-size);
}

/* The service video sits under the sermon's own player, because the sermon is
   what the reader came for and the whole service is the wider frame around it.
   Quiet by default and only as loud as the meta line above it. */
.sermon-service {
  max-width: none;
  margin: 0.45rem 0 0;
  font-size: var(--label-size);
}

.sermon-service a {
  color: var(--muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.sermon-service a:hover,
.sermon-service a:focus-visible {
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   Campus plan — /visit/

   The church's 2017 drawing, recolored for wayfinding. The original reads in
   orange on olive, which fights the mark's blue and teal; here the buildings
   take the mark blue so they are unmistakably the objects, the ground drops
   back to paper and fog, the redwoods keep the mark's teal, and brick — the
   site's functional accent everywhere else — means "this is a link you are
   pointing at". Geometry is untouched: only the palette moved.
   --------------------------------------------------------------------------- */

.campus-map { margin-block: 2rem 0; }

/* The route's prose is deliberately narrow, but the map is not prose. Let the
   whole wayfinding section use the normal site measure, then return to the
   reading column below it. */
.visit-col > .campus-map {
  width: min(var(--max), calc(100vw - 2 * var(--band-x)));
  max-width: none;
  margin-inline-start: 50%;
  transform: translateX(-50%);
}

/* The reading column is 46rem; a campus plan needs the whole band, so the
   figure steps out of the column and back to the band's own measure. */
.campus-plan-figure {
  margin: 1.5rem 0 0;
  width: 100%;
}

.campus-plan-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--rule);
  background: var(--white);
}

.campus-plan {
  display: block;
  width: 100%;
  height: auto;
}

/* The visitor map is wayfinding, not a reproduction of the full drafting
   sheet. Crop the open edge and parking acreage so the campus itself gets the
   room. The complete drawing remains available in the printable PDF. */
.campus-plan-figure--visit .campus-plan {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.campus-plan-figure--visit .campus-plan-scroll { overflow: auto; }

/* Below about 700px the plan's own labels fall under 8px, which is not a map
   any more. It keeps a legible minimum and pans instead; the index below
   carries every destination at full size for anyone who would rather not. */
@media (max-width: 700px) {
  .campus-plan { width: 660px; max-width: none; }
  .campus-plan-figure--visit .campus-plan { width: 660px; margin: 0; }
  .campus-plan-figure--visit .campus-plan-scroll { overflow-x: auto; }
  .campus-plan-scroll { border-inline: 0; }
}

.cm-pavement { fill: #ffffff; }
.cm-lawn { fill: #dfeaed; }
.cm-paving { fill: var(--fog); }
.cm-enclosure { fill: #d3e2e8; }
.cm-arcade { fill: #cfe0e7; }
.cm-courtyard { fill: #ffffff; }
.cm-canopy { fill: var(--brand-aqua); fill-opacity: 0.24; }
.cm-building { fill: var(--brand-blue); }
/* Two small markers the church drew but never labelled; quiet structure, not
   accent, because we cannot say what they are. */
.cm-detail { fill: var(--rule-strong); }
.cm-pictogram { fill: #ffffff; }

.cm-stroke-stall { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.cm-stroke-paving-edge { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.cm-stroke-canopy-edge { fill: none; stroke: var(--brand-aqua); stroke-width: 1.4; stroke-opacity: 0.55; }
.cm-stroke-division { fill: none; stroke: #ffffff; stroke-width: 1; stroke-opacity: 0.3; }
.cm-stroke-detail-edge { fill: none; stroke: var(--rule-strong); stroke-width: 1; }

/* Regions ride on top of the finished plan as transparent shapes clipped to the
   church's own footprints, so pointing at one can never wash past the building
   it names. */
.cm-hit { fill: transparent; pointer-events: all; transition: fill 120ms ease-out; }

.cm-label {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.01em;
  fill: var(--ink);
  paint-order: stroke;
}
.cm-label--building { fill: #ffffff; }
.cm-label--street { fill: var(--muted); font-weight: 500; }
.cm-label--ground { fill: var(--deep); }
/* Named but with no page of its own — the Kitchen, the courtyards, the private
   lot. Quieter than a link, still legible on whatever it sits on. */
.cm-label--static { fill: var(--muted); font-weight: 500; }
.cm-label--building.cm-label--static { fill: #ffffff; fill-opacity: 0.72; }

.cm-region { cursor: pointer; }
.cm-region:hover .cm-hit,
.cm-region:focus-visible .cm-hit { fill: var(--accent); }
.cm-region--ground:hover .cm-hit,
.cm-region--ground:focus-visible .cm-hit,
.cm-region--enclosure:hover .cm-hit,
.cm-region--enclosure:focus-visible .cm-hit { fill: var(--accent); fill-opacity: 0.16; }
.cm-region:hover .cm-label--ground,
.cm-region:focus-visible .cm-label--ground { fill: var(--accent-dark); }
.cm-region:focus { outline: none; }
.cm-region:focus-visible .cm-hit { stroke: var(--ink); stroke-width: 3; }

/* ---- the plan on /calendar/ ----
   Same drawing, different question. /visit/ asks "where is everything"; this
   asks "which of these rooms is the week in", so the buildings the week uses
   are filled and the rest stay as painted. The mark is a fill, not an outline:
   an outline on a plan already made of lines reads as another wall. */
.cm-region--marked .cm-hit {
  fill: var(--accent);
  fill-opacity: 0.9;
}
.cm-region--marked:hover .cm-hit,
.cm-region--marked:focus-visible .cm-hit { fill: var(--accent-dark); fill-opacity: 1; }

/* Marked and unmarked cannot differ by hue alone — accent red against brand
   blue is two colors of the same weight, and to a reader who does not separate
   them the plan says nothing. So the buildings the week does not use drop back
   to a tint and their labels come down to ink: the difference is lightness
   first, and color only after that. Their names stay perfectly legible; they
   are simply not what this page is about. */
.calendar-plan .cm-building { fill-opacity: 0.22; }
.calendar-plan .cm-label--building.cm-label--static { fill: var(--deep); fill-opacity: 1; }

/* A room row lit from the plan, and the plan lit from its row. */
.calendar-list li:target .date-head,
.calendar-list li:target .calendar-what { background: var(--fog); }
.calendar-list li { scroll-margin-block-start: 6rem; }

.calendar-plan { margin-block: 1.5rem 2rem; }
.calendar-plan figcaption { margin-block-start: 0.6rem; }

/* Index. The plan's regions are small on a phone; these carry the same
   destinations at a full-size target on every viewport. */
.campus-index { margin-block-start: 2rem; }
.campus-index h3 {
  font-family: var(--sans);
  font-size: var(--fs--1);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: 0.9rem;
}
.campus-index ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0;
  border-block-start: 1px solid var(--rule);
}
.campus-index li { border-block-end: 1px solid var(--rule); }
.campus-index-link {
  display: block;
  padding: 0.75rem 0.9rem 0.8rem 0;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.campus-index-link b {
  font-family: var(--display);
  font-size: var(--fs-1);
  font-weight: 400;
  display: block;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.16em;
}
.campus-index-link span { display: block; color: var(--muted); font-size: var(--fs--1); margin-block-start: 0.15rem; }
.campus-index-link:hover b,
.campus-index-link:focus-visible b { color: var(--brand-blue); text-decoration-color: var(--accent); }

.campus-source { margin-block-start: 1.5rem; color: var(--muted); font-size: var(--fs--1); }
.campus-source a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
}

/* Pointing at a row in the index lights its region on the plan, so the two
   read as one instrument rather than a picture beside a list. */
.campus-map:has(#cm-index-sanctuary:hover) #cm-region-sanctuary .cm-hit,
.campus-map:has(#cm-index-sanctuary:focus-visible) #cm-region-sanctuary .cm-hit,
.campus-map:has(#cm-index-choir:hover) #cm-region-choir .cm-hit,
.campus-map:has(#cm-index-choir:focus-visible) #cm-region-choir .cm-hit,
.campus-map:has(#cm-index-chapel:hover) #cm-region-chapel .cm-hit,
.campus-map:has(#cm-index-chapel:focus-visible) #cm-region-chapel .cm-hit,
.campus-map:has(#cm-index-social-hall:hover) #cm-region-social-hall .cm-hit,
.campus-map:has(#cm-index-social-hall:focus-visible) #cm-region-social-hall .cm-hit,
.campus-map:has(#cm-index-fireside-room:hover) #cm-region-fireside-room .cm-hit,
.campus-map:has(#cm-index-fireside-room:focus-visible) #cm-region-fireside-room .cm-hit,
.campus-map:has(#cm-index-growing-footprints:hover) #cm-region-growing-footprints .cm-hit,
.campus-map:has(#cm-index-growing-footprints:focus-visible) #cm-region-growing-footprints .cm-hit,
.campus-map:has(#cm-index-youth-wing:hover) #cm-region-youth-wing .cm-hit,
.campus-map:has(#cm-index-youth-wing:focus-visible) #cm-region-youth-wing .cm-hit,
.campus-map:has(#cm-index-preschool-wing:hover) #cm-region-preschool-wing .cm-hit,
.campus-map:has(#cm-index-preschool-wing:focus-visible) #cm-region-preschool-wing .cm-hit,
.campus-map:has(#cm-index-childrens-wing:hover) #cm-region-childrens-wing .cm-hit,
.campus-map:has(#cm-index-childrens-wing:focus-visible) #cm-region-childrens-wing .cm-hit,
.campus-map:has(#cm-index-office:hover) #cm-region-office .cm-hit,
.campus-map:has(#cm-index-office:focus-visible) #cm-region-office .cm-hit { fill: var(--accent); }

.campus-map:has(#cm-index-memorial-garden:hover) #cm-region-memorial-garden .cm-hit,
.campus-map:has(#cm-index-memorial-garden:focus-visible) #cm-region-memorial-garden .cm-hit,
.campus-map:has(#cm-index-redwood-grove:hover) #cm-region-redwood-grove .cm-hit,
.campus-map:has(#cm-index-redwood-grove:focus-visible) #cm-region-redwood-grove .cm-hit,
.campus-map:has(#cm-index-playground:hover) #cm-region-playground .cm-hit,
.campus-map:has(#cm-index-playground:focus-visible) #cm-region-playground .cm-hit,
.campus-map:has(#cm-index-preschool-playground:hover) #cm-region-preschool-playground .cm-hit,
.campus-map:has(#cm-index-preschool-playground:focus-visible) #cm-region-preschool-playground .cm-hit,
.campus-map:has(#cm-index-parking:hover) #cm-region-parking .cm-hit,
.campus-map:has(#cm-index-parking:focus-visible) #cm-region-parking .cm-hit,
.campus-map:has(#cm-index-main-parking:hover) #cm-region-main-parking .cm-hit,
.campus-map:has(#cm-index-main-parking:focus-visible) #cm-region-main-parking .cm-hit { fill: var(--accent); fill-opacity: 0.16; }

@media (prefers-reduced-motion: reduce) {
  .cm-hit { transition: none; }
}

/* Save the date — the church's own calendar block.
   The date is a COLUMN, not a run-on prefix. Two adjacent inline spans butt
   together and the row reads "August 15Service Project building beds at PCLG",
   which is what Stephen hit on 2026-08-06. A real date column also lets the
   eye run down the month, which is the whole job of a save-the-date list. */
.calendar-list li {
  display: grid;
  grid-template-columns: minmax(min(7rem, 40%), auto) 1fr;
  gap: 0 1.4rem;
  align-items: baseline;
}
.calendar-list .date-head {
  margin: 0;
  font-size: var(--fs-0);
  color: var(--brand-blue);
  white-space: nowrap;
}
.calendar-list .calendar-what { display: block; }
.calendar-list .record { display: block; margin-block-start: 0.1rem; color: var(--muted); }
.calendar-list .calendar-actions { display: flex; margin-block: 0.8rem 0.15rem; }

@media (max-width: 560px) {
  /* Under a narrow column the date earns its own line rather than squeezing
     the title into three words per row. */
  .calendar-list li { grid-template-columns: 1fr; gap: 0.15rem 0; }
}

/* ---------------------------------------------------------------------------
   Print.

   People print this site. Not the whole site — This Week At PCLG and the
   Sunday bulletin, taken to a kitchen table or handed to someone who does not
   read email. The working group's brief was "EASY FOR OLD PEOPLE TO USE", and
   for part of that congregation the paper IS the interface.

   What a browser does to this page unaided: prints the nav as a list of bare
   words, the search field as an empty box, the proto-banner as a headline, and
   the photographs at full bleed across paper that costs money. Then it drops
   every link destination, so a printed sign-up sheet says "register here" and
   points nowhere.

   So: strip the chrome, keep the words, print the URL after any link that
   leaves the page, and let the reader keep the photographs off the page —
   except the one portrait that is part of a signed letter.
   --------------------------------------------------------------------------- */
@media print {
  /* Paper is not a 1440px screen and the palette assumes ink on white anyway. */
  html, body { background: #fff; color: #000; font-size: 11pt; }

  /* Navigation is a screen affordance. On paper it is a list of dead words. */
  .proto-banner,
  .skip-link,
  .site-header,
  .site-nav,
  .header-search,
  .menu-toggle,
  .header-watch,
  .footer-watch,
  .action-rail,
  .site-footer,
  .omnibox,
  .button-row,
  .signup-action,
  .pagination,
  .header-reading,
  .action-bar,
  [data-stoa-c="banner"],
  [data-live-now] { display: none !important; }

  /* The trail is not navigation on paper, but it is the only thing on the sheet
     that says which part of the site this page came out of, and a bulletin
     archive page printed without it is just a list of Sundays. Keep the words,
     drop the links' underlines. */
  .breadcrumb { margin: 0 0 1em; padding: 0; border: 0; font-size: 9pt; }
  .breadcrumb a { text-decoration: none; }

  /* One masthead line so a loose sheet can be identified after it is put down.
     The <title> is already in the browser's own header/footer, but a printout
     that gets photocopied loses that. */
  main::before {
    content: "Presbyterian Church of Los Gatos · 16575 Shannon Road, Los Gatos";
    display: block;
    margin-bottom: 1.5em;
    padding-bottom: 0.4em;
    border-bottom: 1pt solid #000;
    font-size: 9pt;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Photographs are the expensive part of a home printer's day, and none of
     them carry information the printed page needs. The pastor's portrait was
     kept at first, on the theory that it reads as letterhead — it does not.
     Once the grid collapses to one column it is a headshot floating above the
     letter, its caption saying what the signature already says, and it pushed
     the note itself onto the next sheet. */
  figure img,
  .threshold-photo,
  .welcome-band-photo,
  .feature-photo,
  .pastor-portrait,
  .life-bays { display: none; }

  /* Bands are screen rhythm; on paper they are wasted inches. */
  .band, .band-inner, .band-feint {
    padding: 0 !important;
    margin: 0 0 1.2em !important;
    background: none !important;
    max-width: none !important;
  }

  /* Every two-column band on this site pairs copy with a photograph, and the
     photographs are gone by the rule above — so the grid is left holding an
     empty track. That is what pushed the letter's prose into a half-width
     column running off the right edge, and gave the hero a whole sheet to say
     four lines. One column on paper, always. */
  .route-intro,
  .pastor-grid,
  .threshold-grid,
  .section-heading-row,
  .entry {
    display: block !important;
  }
  /* The date column of an announcement reads as a heading once the row is no
     longer a row. */
  .entry-when { margin-bottom: 0.2em; }
  .entry-when .date-head { display: inline; font-size: 11pt; font-weight: 700; }
  .entry-when .record { display: inline; }
  .entry-when .record::before { content: " · "; }

  /* The measure that suits a screen column is too narrow once the column is the
     whole sheet, and `ch` on a display face reflows badly at print sizes. */
  main, .band-inner, p, li { max-width: none; }

  /* A printed page that says "sign up here" and hides where is worse than no
     printout — but only for links that LEAVE the site. Internal ones were
     printed too at first, prefixed "pclg.org", which produced
     "pclg.org/giving/": a URL that resolves nowhere, since the site's own
     paths already carry /. A reader holding the sheet does not need our
     internal paths spelled out anyway; they need the sign-up link that goes
     somewhere else. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8.5pt;
    word-break: break-all;
  }
  /* Masked addresses resolve at runtime, so the printed fallback is the
     office line the span already carries — nothing extra to do but let it
     print as the ordinary text it is. */
  a[href^="mailto:"]::after, a[href^="tel:"]::after { content: ""; }

  /* Do not break a dated announcement across two sheets. The pastor's note is
     NOT in this list on purpose: it routinely runs longer than a page, and
     asking a page-and-a-half of prose not to break just moves the whole thing
     to the next sheet and leaves the first one empty. */
  .entry, .calendar-list li { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }

  /* Hairlines and ribs are ink for nothing at 300dpi. */
  .sanctuary-rib-divider, .sanctuary-rib-list::before { border: 0; }
}

/* The emailed letter, shown as an object rather than as page content. Without a
   frame the capture's own white ground melts into the band and the reader sees
   a photograph of the church with some text beside it — which is the one thing
   this image is not. The hairline and the slight lift say "this is a picture of
   a document". Top-aligned to the copy, since the crop's own subject sits at
   its top edge. */
.letter-preview { margin: 0; align-self: start; }
.letter-preview img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--rule), 0 12px 28px -18px rgba(22, 50, 63, 0.5);
}
.letter-preview figcaption {
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: var(--fs--1);
}

/* ---------------------------------------------------------------------------
   The home page's "this week" band.

   Two halves of the current week, both generated: the dates the church is
   holding out of the newest letter, and the last sermon out of the podcast
   feed. Stamped by scripts/build-pclg-home-week.mjs.
   --------------------------------------------------------------------------- */
.home-week-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(22rem, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
/* The rib that marks a set-apart block everywhere else on this site. */
.home-week-sermon {
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: clamp(1rem, 2vw, 1.6rem);
}
.home-week-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; }
.home-week-list li {
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  gap: 0 1rem;
  align-items: start;
  padding: 0.85rem 0;
  /* The rule between rows is drawn by the sibling selector below rather than
     here, so it follows what is VISIBLE. With a filtered row at the top, a
     border on :first-child leaves the first row a reader can actually see
     wearing a line that should only ever sit BETWEEN two rows. */
}
/* The band ships four rows plus four reserves so coming-up.js can promote one
   when a date passes. With scripting off there is nothing to promote, so the
   reserves stay out of the way and the reader sees the four the build chose;
   once the script has filtered, source order no longer decides what is shown
   and the cap has to lift. An author `display` beats the UA sheet's [hidden]
   here, same as the masthead's live dot, so it is stated. */
.home-week-list li:nth-child(n + 5) { display: none; }
/* :not([hidden]) keeps this off the reserves the script is still holding back —
   without it this rule (0,3,1) outranks the li[hidden] rule (0,2,1) below and
   every reserve renders. */
.home-week-list[data-coming-up="filtered"] li:nth-child(n + 5):not([hidden]) { display: grid; }
.home-week-list li[hidden] { display: none; }
.home-week-list[hidden] { display: none; }
/* Any visible row that has a visible row before it — i.e. every one but the
   first one showing, whichever that turns out to be after filtering. */
.home-week-list li:not([hidden]) ~ li:not([hidden]) { border-top: 1px solid var(--rule); }
/* The date reads as one object: month above, day large beneath, so a column of
   them scans as a calendar edge rather than as four dates in a sentence. */
.home-week-date {
  display: grid;
  align-content: start;
  padding: 0;
  color: var(--brand-blue);
  line-height: 1;
}
.home-week-mon {
  display: block;
  margin: 0 0 0.18rem;
  font-size: var(--label-size);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.home-week-day { display: block; font-family: var(--display); font-size: var(--fs-2); line-height: 0.9; }
.home-week-what { display: block; padding: 0; line-height: 1.18; }
.home-week-what .record { display: block; margin-block-start: 0.28rem; color: var(--muted); font-size: var(--fs--1); line-height: 1.2; }
.home-week-sermon-title {
  margin: 0.85rem 0 0.2rem;
  font-family: var(--display);
  font-size: var(--fs-2);
  line-height: 1.15;
}
.home-week-sermon-meta { margin: 0 0 0.45rem; color: var(--muted); font-size: var(--fs--1); }
.home-week-sermon-more { margin: 0; font-size: var(--fs--1); }
.home-sermon-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--deep);
  border: 1px solid var(--rule-strong);
}
.home-sermon-poster { color: var(--white); }
.home-sermon-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-week-carousel { margin-block-start: 0.45rem; }
.home-week-carousel .home-banner-slides {
  padding-inline-start: 1.1rem;
  border-inline-start: 3px solid var(--accent);
}
.home-week-carousel .home-banner-controls { margin-block: 1.5rem 0.35rem; }
.home-week-letter > .button-row { margin-block-start: 1.75rem; }
.preschool-gfp-logo {
  display: block;
  width: min(12rem, 70%);
  height: auto;
  margin: 0.75rem 0 1rem;
}
.this-week-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
  padding-block-start: clamp(1.5rem, 3vw, 2.5rem);
  border-block-start: 1px solid var(--rule-strong);
}
.this-week-actions h2 { font-size: clamp(1.45rem, 2.5vw, 2.2rem); }
.issue-date { color: var(--ink); font-family: var(--display); font-size: var(--fs-0); }
@media (max-width: 46rem) { .this-week-actions { grid-template-columns: 1fr; } }

.this-week-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: start;
}
.this-week-heading h1 { margin-block-end: 0.65rem; }
.current-issue-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  width: fit-content;
  max-width: 100%;
  min-height: 48px;
  padding: 0.45rem 0.55rem 0.45rem 0.8rem;
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-inline-start: 3px solid var(--accent);
}
.current-issue-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-inline-start: auto;
}
.current-issue-links a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding-inline: 0.75rem;
  border-inline-start: 1px solid var(--rule);
  font-size: var(--meta-size);
  font-weight: 700;
  letter-spacing: 0.055em;
  text-decoration: none;
  text-transform: uppercase;
}
.current-issue-links a:hover,
.current-issue-links a:focus-visible { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 0.18em; }
.this-week-heading .facilities-calendar-trigger { align-self: start; justify-self: end; }
.week-band-title {
  margin-block-end: 0;
  padding-block-end: 1.5rem;
  border-block-end: 1px solid var(--rule-strong);
  scroll-margin-block-start: 1.25rem;
}
.this-week-subscribe { border-block-start: 1px solid var(--rule-strong); }
.this-week-subscribe-form {
  min-width: min(22rem, 100%);
  padding: 1rem 1.15rem;
  gap: 0.75rem;
}
.this-week-subscribe-form .newsletter-field input { min-height: 46px; }
.this-week-subscribe-form .newsletter-name-fields { gap: 0.65rem; }
.contact-button-row { display: flex; flex-wrap: wrap; gap: 0.65rem; }

.facilities-calendar-trigger { justify-self: end; }
.facilities-calendar-dialog {
  width: min(76rem, calc(100vw - 2rem));
  height: min(52rem, calc(100dvh - 2rem));
  max-width: none;
  max-height: none;
  padding: 0;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 24px 80px rgb(5 47 65 / 0.3);
}
.facilities-calendar-dialog::backdrop { background: rgb(5 47 65 / 0.72); }
.facilities-calendar-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.facilities-calendar-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border-block-end: 1px solid var(--rule-strong);
}
.facilities-calendar-head h2 { margin: 0; font-size: var(--fs-1); }
.facilities-calendar-close {
  min-height: 40px;
  padding: 0.45rem 0.8rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  font: inherit;
  cursor: pointer;
}
.facilities-calendar-close:hover,
.facilities-calendar-close:focus-visible { color: var(--white); background: var(--deep); border-color: var(--deep); }
.facilities-calendar-frame { min-height: 32rem; overflow: auto; }
.facilities-calendar-status {
  margin: 1.25rem 1.1rem;
  color: var(--muted);
}
.facilities-week { min-height: 100%; }
.facilities-week-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  color: var(--white);
  background: var(--deep);
}
.facilities-week-label {
  margin: 0;
  flex: 1 1 8rem;
  font-size: var(--fs-0);
}
.facilities-week-today,
.facilities-week-shift {
  min-height: 40px;
  min-width: 40px;
  padding: 0.4rem 0.75rem;
  color: var(--white);
  background: transparent;
  border: 1px solid rgb(255 255 255 / 0.45);
  font: inherit;
  cursor: pointer;
}
.facilities-week-today:hover,
.facilities-week-shift:hover,
.facilities-week-today:focus-visible,
.facilities-week-shift:focus-visible {
  color: var(--deep);
  background: var(--white);
  border-color: var(--white);
}
.facilities-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(10.5rem, 1fr));
  gap: 0;
  min-width: 100%;
  overflow: auto;
}
.facilities-week-day {
  min-width: 10.5rem;
  padding: 0.75rem 0.7rem 1rem;
  border-inline-end: 1px solid var(--rule);
}
.facilities-week-day:last-child { border-inline-end: 0; }
.facilities-week-day.is-today { background: var(--fog); }
.facilities-week-day h3 {
  margin: 0 0 0.7rem;
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--label-size);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.facilities-week-day ul { margin: 0; padding: 0; list-style: none; }
.facilities-event {
  display: grid;
  gap: 0.15rem;
  max-width: none;
  margin-block-end: 0.65rem;
  padding: 0.45rem 0.55rem 0.5rem 0.65rem;
  border-inline-start: 4px solid var(--room, var(--brand-blue));
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.facilities-event p { margin: 0; }
.facilities-event-time,
.facilities-event-room { color: var(--muted); font-size: var(--meta-size); }
.facilities-event-title { font-size: var(--small-size); }
.facilities-event--empty {
  border-inline-start: 0;
  box-shadow: none;
  color: var(--muted);
  background: transparent;
}

@media (max-width: 46rem) {
  .this-week-heading { grid-template-columns: minmax(0, 1fr); }
  .this-week-heading .facilities-calendar-trigger { justify-self: start; }
  .current-issue-control { width: 100%; }
  .current-issue-links { width: 100%; margin-inline-start: 0; border-block-start: 1px solid var(--rule); }
  .current-issue-links a:first-child { border-inline-start: 0; padding-inline-start: 0; }
  .facilities-calendar-dialog { width: 100vw; height: 100dvh; margin: 0; border: 0; }
  .facilities-week-grid { grid-template-columns: 1fr; }
  .facilities-week-day {
    min-width: 0;
    border-inline-end: 0;
    border-block-end: 1px solid var(--rule);
  }
}

@media (max-width: 860px) {
  .home-week-grid { grid-template-columns: 1fr; }
  /* On one column the halves are in reading order, so the rib would be a rule
     down the side of the page rather than a mark on a set-apart block. */
  .home-week-sermon {
    border-inline-start: 0;
    border-top: 3px solid var(--accent);
    padding-inline-start: 0;
    padding-top: 1.1rem;
  }
  /* Sunday to Tuesday the sermon is the fresher half; live-now.js adds this. */
  .home-week--sermon-first .home-week-sermon { order: -1; border-top: 0; padding-top: 0; }
  .home-week--sermon-first .home-week-letter {
    border-top: 3px solid var(--accent);
    padding-top: 1.1rem;
  }
}

/* ---------------------------------------------------------------------------
   Bulletin archive — /bulletins/

   The shape is the TENM curriculum hub's: one bordered controls block holding
   the search and the facets, a live count under it, and a card grid whose media
   slab bleeds to the card's edge. What changes is everything else — the panel is
   fog inside the church's hairline rules rather than a shadowed white card, the
   chips are brick outlines rather than teal pills, and the cards square off
   because nothing else on this site has a rounded corner.

   The slab crops to the TOP of page one, which is where the church's mark and
   the date sit. A bulletin is a typed order of worship, so a full-page thumbnail
   is a grey rectangle; the top inch is the part that reads.
   --------------------------------------------------------------------------- */

/* The search lives in the same sticky navy bar the sermon archive uses — 93
   bulletins is four pages deep, and a find field that scrolls away at the top
   of page three is a find field nobody uses. The year rail stays in the flow
   below it: adding it to the sticky bar would push the controls past the
   viewport budget on a phone. */
.bulletins-hero {
  padding-block: clamp(1.5rem, 2.5vw, 2.35rem);
}
.bulletins-hero + .band { padding-block-start: clamp(1.75rem, 3vw, 2.75rem); }
.bulletins-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.58fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: end;
}
.bulletins-hero-copy > h1 { margin-block-end: 0.15rem; }
.bulletins-hero-copy > .lead { margin-block-end: 1.1rem; }
.bulletin-feature {
  display: grid;
  grid-template-columns: minmax(9rem, 11.5rem) minmax(0, 1fr);
  gap: clamp(1rem, 2.2vw, 1.75rem);
  max-width: 52rem;
  padding: clamp(0.85rem, 1.5vw, 1.25rem);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-inline-start: 4px solid var(--accent);
}
.bulletin-feature-cover { display: block; align-self: start; border: 1px solid var(--rule); background: var(--fog); }
.bulletin-feature-cover img { display: block; width: 100%; height: auto; }
.bulletin-feature-body { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.bulletin-feature-body .eyebrow { margin-block-end: 0.25rem; }
.bulletin-feature-body h2 { margin: 0 0 0.45rem; font-size: var(--fs-2); line-height: 1.05; }
.bulletin-feature-body h2 span { display: block; margin-block-start: 0.2rem; color: var(--muted); font-family: var(--sans); font-size: var(--meta-size); }
.bulletin-feature-sermon { margin: 0.45rem 0 0; font-family: var(--display); font-size: var(--fs-0); line-height: 1.22; }
.bulletin-feature-sermon span { display: block; margin-block-start: 0.15rem; color: var(--muted); font-family: var(--sans); font-size: var(--meta-size); }
.bulletin-feature-actions { margin-block-start: auto; padding-block-start: 0.7rem; }
.bulletin-feature-actions .btn > .fine { display: inline; }
.bulletin-collection-photo {
  width: min(100%, 25rem);
  justify-self: end;
}
.bulletin-collection-photo img { max-height: 34rem; }

@media (max-width: 900px) {
  .bulletins-hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .bulletin-collection-photo { width: min(100%, 25rem); justify-self: start; }
}
@media (max-width: 520px) {
  .bulletin-feature { grid-template-columns: minmax(0, 1fr); }
  .bulletin-feature-cover { width: min(10rem, 52vw); }
}

.bulletin-years { margin-block-start: 2rem; padding-block: 0.9rem 1.1rem; border-block-end: 1px solid var(--rule); }
.bulletin-years-label {
  margin: 0 0 0.5rem;
  color: var(--brand-blue);
  font-size: var(--label-size);
  letter-spacing: 0.105em;
  text-transform: uppercase;
}
.bulletin-years ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chip {
  display: inline-flex;
  gap: 0.4rem;
  align-items: baseline;
  min-height: 32px;
  padding: 0.3rem 0.8rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  font-family: var(--display);
  font-size: var(--small-size);
  text-decoration: none;
}
.chip:hover, .chip:focus-visible { color: var(--white); background: var(--accent); border-color: var(--accent); }
.chip-count { color: var(--muted); font-family: var(--sans); font-size: var(--label-size); }
.chip:hover .chip-count, .chip:focus-visible .chip-count { color: var(--accent-pale); }

/* Wide enough that page one is actually readable and "Read the bulletin (PDF)"
   fits on one line. At 11.5rem the cards held a thumbnail nobody could read and
   a button that wrapped mid-phrase. */
.bulletin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr));
  gap: 1.1rem 1rem;
}
.bulletin {
  display: flex;
  flex-direction: column;
  max-width: none;
  border: 1px solid var(--rule);
  background: var(--white);
}
.bulletin[id] {
  scroll-margin-block-start: calc(var(--stoa-index-sticky-top, 0px) + 6rem);
}
.bulletin-thumb { overflow: hidden; border-block-end: 1px solid var(--rule); background: var(--fog); }
/* A bulletin is a portrait page and the captures are 420x544. Framing them 4:3
   cropped a landscape sliver off the top of each one, so the wall read as rows
   of grey text-texture rather than as a stack of Sunday bulletins. Match the
   document. */
.bulletin-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
}
/* A Sunday with no surviving file still gets a tile, because the date is the
   fact we recovered. It reads as a blank sheet, which is what it is. */
.bulletin-thumb--absent {
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(135deg, var(--fog) 0 8px, var(--white) 8px 16px);
}
/* flex: 1 is what lets .bulletin-action's auto top margin reach the floor, so
   the buttons line up across a row whose titles wrap to different depths. */
.bulletin-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.35rem; padding: 0.9rem 1rem 1rem; }
.bulletin-body .date-head { margin: 0; font-size: var(--fs-1); line-height: 1.15; }
.bulletin-body .date-head .record { display: block; color: var(--muted); }
.bulletin-occasion {
  margin: 0;
  align-self: flex-start;
  padding: 0.1rem 0.45rem;
  color: var(--accent-dark);
  background: var(--accent-pale);
  font-size: var(--label-size);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bulletin-sermon {
  margin: 0.2rem 0 0;
  font-family: var(--display);
  font-size: var(--fs-0);
  line-height: 1.28;
}
.bulletin-sermon .record { display: block; color: var(--muted); font-family: var(--sans); }
.bulletin-scripture { margin: 0; color: var(--muted); font-size: var(--fs--1); }
.bulletin-action { margin: auto 0 0; padding-block-start: 0.7rem; }
/* The "(PDF)" marker is a .fine span, which is display:block sitewide. As a flex
   item beside the label it squeezed "Read the bulletin" into two lines inside a
   215px button. Keep the label whole; the grid's 15.5rem minimum guarantees the
   room for it. */
.bulletin-action .btn { width: 100%; justify-content: center; text-align: center; white-space: nowrap; }
.bulletin-action .btn .fine { display: inline; }
/* .btn is inline-flex, so a label split into "Read the bulletin" plus a quieter
   "(PDF)" becomes two flex items and the space between them is dropped
   entirely — gap is what puts it back. */
.btn > .fine { margin-inline-start: 0.35em; }
.bulletin-action.fact-note { margin-block-start: 0.5rem; }

/* A whole page of type at full column width runs 790px tall and leaves the copy
   beside it stranded in the top half. Height is the constraint that matters
   here, not width — cap it and let the width follow. */
.bulletin-hero-cover img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 33rem;
  margin-inline: auto;
  border: 1px solid var(--rule);
}

/* ---------------------------------------------------------------------------
   Home page announcement banner

   The office's slot: one thing at a time, set from data. It sits between the
   Sanctuary photograph and the action rail, reads as a notice rather than a
   second hero, and carries the site's brick rib on its leading edge so it is
   visibly the thing that changes.

   [hidden] is declared on every element this band's script reveals. The band
   ships with slide two onward hidden and the controls hidden, and an author
   `display` out-ranks the user-agent's [hidden] rule — without these lines a
   phantom slide stack would show for every reader.
   --------------------------------------------------------------------------- */

/* White, not fog: the band above it is the home page's fog hero, and two fog
   bands in a row read as one long band with a stray rule through it. */
.home-banner {
  padding-block: clamp(1.6rem, 2.6vw, 2.4rem);
  background: var(--white);
  border-block: 1px solid var(--rule);
}
.home-banner[hidden] { display: none; }
.home-banner-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}
.home-banner-title {
  flex: 0 0 100%;
  margin: 0;
  padding-block-end: 0.7rem;
  border-block-end: 1px solid var(--rule-strong);
  color: var(--brand-blue);
  font-size: var(--fs-1);
}
.home-banner-slides {
  flex: 1 1 26rem;
  padding-inline-start: 1.1rem;
  border-inline-start: 3px solid var(--accent);
}
.home-banner-slide { display: grid; gap: 0.3rem; }
.home-banner-slide[hidden] { display: none; }
.home-banner-copy { display: grid; gap: 0.3rem; align-content: start; }
.home-week-carousel[data-banner-enhanced] .home-banner-slides { display: grid; }
.home-week-carousel[data-banner-enhanced] .home-banner-slide {
  grid-area: 1 / 1;
  align-self: stretch;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(0.6rem);
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}
.home-week-carousel[data-banner-enhanced] .home-banner-slide[data-banner-active] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}
.home-week-carousel[data-banner-enhanced] .home-banner-slide[data-banner-has-media="false"] .home-banner-copy {
  min-height: 100%;
  align-content: center;
}
.home-banner-media {
  width: min(100%, 34rem);
  margin: 0 0 0.7rem;
  overflow: hidden;
  background: var(--fog);
  border-radius: 2px;
}
.home-banner-media img {
  display: block;
  width: 100%;
  height: auto;
}
.home-banner-media[data-banner-source="curated"] img {
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center;
}
.home-banner-media[data-banner-source="legacy-carousel"] img {
  aspect-ratio: auto;
  object-fit: contain;
}
.home-week-carousel .home-banner-media { width: 100%; max-width: none; }
.home-banner-media img[data-banner-crop="top"] { object-position: top; }
.home-banner-media img[data-banner-crop="bottom"] { object-position: bottom; }
.home-banner-media img[data-banner-crop="left"] { object-position: left; }
.home-banner-media img[data-banner-crop="right"] { object-position: right; }
.home-banner-headline {
  margin: 0;
  max-width: 46ch;
  font-family: var(--display);
  font-size: var(--fs-2);
  line-height: 1.14;
}
.home-banner-body { margin: 0; max-width: 62ch; color: var(--muted); font-size: var(--fs-0); }
.home-banner-action { margin: 0.5rem 0 0; }

.home-banner-controls { display: flex; gap: 0.5rem; align-items: center; }
.home-banner-controls[hidden] { display: none; }
.home-banner-controls ul {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The arrows and dots are CSS shapes: the media guardrail keeps hand-authored
   vector markup out of prototype sources, so UI glyphs are drawn here. */
.home-banner-controls button {
  display: grid;
  place-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  cursor: pointer;
}
.home-banner-controls button:hover { border-color: var(--accent); }
.home-banner-controls [data-banner-prev]::before,
.home-banner-controls [data-banner-next]::before {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--brand-blue);
  border-right: 2px solid var(--brand-blue);
}
/* The nudge has to come BEFORE the rotation in the transform list, or it is
   applied along the rotated axes: translate(-2px,-2px) after rotate(-135deg)
   pushed the previous arrow 2.8px down the button and the next arrow 2.8px up
   it, which is why the pair never lined up with each other or with the dots.
   Rotating about the centre leaves both chevrons geometrically centred; the
   1.5px screen-space shift away from each tip is the optical correction for an
   L-shape whose ink sits toward its corner. */
.home-banner-controls [data-banner-prev]::before { transform: translateX(1.5px) rotate(-135deg); }
.home-banner-controls [data-banner-next]::before { transform: translateX(-1.5px) rotate(45deg); }
.home-banner-controls .home-banner-dot {
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.home-banner-controls .home-banner-dot::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: auto;
  background: var(--rule-strong);
  border-radius: 50%;
}
.home-banner-controls .home-banner-dot[aria-current="true"]::before { background: var(--accent); }
.home-banner-controls .home-banner-dot:hover::before { background: var(--accent-dark); }

@media (max-width: 720px) {
  .home-banner-inner { justify-content: flex-start; }
  .home-banner-headline { font-size: var(--fs-1); }
}

@media (prefers-reduced-motion: reduce) {
  .home-week-carousel[data-banner-enhanced] .home-banner-slide { transition: none; }
}

/* The Sundays with no surviving file: a dated record, not a wall of blanks. */
.bulletin-lost {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
  gap: 0;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.bulletin-lost li {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-block-start: 1px solid var(--rule);
  color: var(--muted);
  font-size: var(--fs--1);
}
.bulletin-lost-date { color: var(--ink); font-family: var(--display); font-size: var(--fs-0); }
.bulletin-lost-occasion { flex-basis: 100%; color: var(--accent-dark); }

/* The pastor who signed an issue, on its card in the archive. */
.issue-author {
  width: 34px;
  height: 34px;
  margin-inline-end: 0.15rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  vertical-align: -0.7em;
}

.keep-together { white-space: nowrap; }

/* Hedvig Letters Serif fuses f + f into one wide form with a single shared
   crossbar. At body size it is fine; at display size it reads as a smudge in
   the middle of a word, and "offering" is a word this church's headings use.
   The subset carries the ligature glyphs correctly (f_f, f_f_i, f_i, f_l) — the
   shape itself is the problem — so common ligatures are switched off wherever
   the display face runs large, and left alone in running text. */
h1, h2, h3, .date-head, .their-words {
  font-variant-ligatures: no-common-ligatures;
}

/* --------------------------------------------------------------------------
   Morning review shared components
   -------------------------------------------------------------------------- */

/* Button skin lives on .btn above. This block only keeps shared motion and
   disabled states so a second rule cannot restyle some CTAs with a red rib. */
.btn:active,
.email-action a:active,
.page-action:active,
.owned-form button[type="submit"]:active,
.newsletter-form button[type="submit"]:active {
  transform: translateY(1px);
}
.btn:disabled,
.email-action a:disabled,
.page-action:disabled,
.owned-form button[type="submit"]:disabled,
.newsletter-form button[type="submit"]:disabled,
.btn[aria-disabled="true"],
.email-action a[aria-disabled="true"],
.page-action[aria-disabled="true"] {
  color: #d9e4e8;
  background: #55707c;
  border-color: #55707c;
  cursor: not-allowed;
  opacity: 0.78;
  transform: none;
}

/* A CTA is its own action, not part of a quotation or accent bar. */
:where(blockquote, .pullquote, .accent-note, .fact-note) .button-row,
:where(blockquote, .pullquote, .accent-note, .fact-note) > :where(.btn, .email-action) {
  margin-block-start: 1rem;
  padding-inline-start: 0;
  border-inline-start: 0;
}

/* Header and footer platform tiles come from one config and now use one visual
   rule too. The only difference is where they sit. */
.header-watch-link,
.footer-watch-link {
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.75rem;
  color: var(--ink);
  background: var(--fog);
  border: 1px solid var(--rule);
  border-inline-start-width: 3px;
  text-decoration: none;
  transition: color 120ms ease-out, background 120ms ease-out, border-color 120ms ease-out;
}
.header-watch-link:hover,
.footer-watch-link:hover {
  color: var(--brand-blue);
  background: var(--white);
  border-block-color: var(--rule-strong);
  border-inline-end-color: var(--rule-strong);
}
.header-watch-link:focus-visible,
.footer-watch-link:focus-visible {
  color: var(--brand-blue);
  background: var(--white);
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.header-watch-link:active,
.footer-watch-link:active { background: var(--on-deep-teal); }
.header-watch-mark,
.footer-watch-mark {
  display: block;
  width: min(6.75rem, 100%);
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}
.footer-watch-link--youtube .footer-watch-mark { height: auto; }
.footer-watch-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(19rem, 100%); gap: 0.4rem; }

/* C3 split-accent weekly-letter feature: a proper editorial tile beside the
   footer lockup, with the stream tiles kept as the distinct platform action. */
.footer-featured-action {
  position: relative;
  display: grid;
  width: min(19rem, 100%);
  min-height: 6.2rem;
  align-content: center;
  gap: 0.18rem;
  padding: 1rem 2.7rem 1rem 1.15rem;
  overflow: hidden;
  color: var(--ink);
  background:
    linear-gradient(90deg, var(--accent) 0 5px, transparent 5px),
    linear-gradient(135deg, var(--white) 0 73%, var(--fog) 73% 100%);
  border: 1px solid var(--brand-aqua);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--brand-blue) 24%, transparent);
  text-decoration: none;
  transition: color 120ms ease-out, border-color 120ms ease-out, box-shadow 120ms ease-out, transform 80ms ease-out;
}
.footer-featured-action::after {
  position: absolute;
  inset: 50% 1rem auto auto;
  content: "→";
  color: var(--accent);
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 700;
  transform: translateY(-50%);
}
.footer-featured-kicker,
.footer-featured-meta {
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--fs--2);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}
.footer-featured-label { font-family: var(--display); font-size: var(--fs-1); font-weight: 600; line-height: 1.05; }
.footer-featured-meta { letter-spacing: 0; text-transform: none; }
.footer-featured-action:hover {
  color: var(--brand-blue);
  border-color: var(--brand-blue);
  box-shadow: inset 0 -5px 0 color-mix(in srgb, var(--brand-aqua) 58%, transparent);
}
.footer-featured-action:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.footer-featured-action:active { transform: translateY(1px); }

/* Rows that are themselves links announce that fact through an arrow, hover
   surface, pointer, keyboard ring, and pressed state. */
:where(.link-row, .result-row, .resource-row, .directory-row, .calendar-row)[href],
:where(.link-ledger, .resource-list, .directory-list) > a {
  position: relative;
  cursor: pointer;
  text-decoration: none;
  transition: color 120ms ease-out, background 120ms ease-out, box-shadow 120ms ease-out;
}
:where(.link-row, .result-row, .resource-row, .directory-row, .calendar-row)[href]::after,
:where(.link-ledger, .resource-list, .directory-list) > a::after {
  content: "→";
  margin-inline-start: auto;
  color: var(--accent);
  font-weight: 700;
}
:where(.link-row, .result-row, .resource-row, .directory-row, .calendar-row)[href]:hover,
:where(.link-ledger, .resource-list, .directory-list) > a:hover {
  color: var(--brand-blue);
  background: var(--white);
}
:where(.link-row, .result-row, .resource-row, .directory-row, .calendar-row)[href]:focus-visible,
:where(.link-ledger, .resource-list, .directory-list) > a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
:where(.link-row, .result-row, .resource-row, .directory-row, .calendar-row)[href]:active,
:where(.link-ledger, .resource-list, .directory-list) > a:active { background: var(--accent-pale); }

/* Split introductions share a deliberate top edge; narrower screens stack in
   document order rather than preserving a false vertical centring. */
:where(.route-intro, .community-intro, .split-feature, .welcome-grid, .hero-split, .section-split) {
  align-items: start;
}

@media (prefers-reduced-motion: reduce) {
  :where(.btn, .email-action > a, .page-action, .owned-form button[type="submit"], .newsletter-form button[type="submit"]),
  .header-watch-link,
  .footer-watch-link,
  .footer-featured-action,
  :where(.link-row, .result-row, .resource-row, .directory-row, .calendar-row)[href],
  :where(.link-ledger, .resource-list, .directory-list) > a { transition: none; }
}

/* Calendar J1: dated events lead, the ordinary week is one disclosure, Sunday
   earns its own block, and the canonical map opens on demand. */
.calendar-upcoming { padding-block-start: clamp(1.5rem, 3vw, 3rem); }
.calendar-letter-cta { align-self: end; margin-block-start: 1rem; }
.dated-card-grid { display: grid; gap: 2rem; }
.dated-month { min-width: 0; }
.dated-month-name {
  margin-block-end: 0.75rem;
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--label-size);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.dated-card-grid .dated-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dated-card-grid .dated-card {
  display: grid;
  grid-template-columns: clamp(9rem, 14vw, 11rem) minmax(0, 1fr);
  grid-template-rows: auto;
  min-width: 0;
  max-width: none;
  padding: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-inline-start: 4px solid var(--accent);
}
.dated-card-issue {
  position: relative;
  display: block;
  overflow: hidden;
  color: inherit;
  background: var(--fog);
  border-block-end: 1px solid var(--rule);
  text-decoration: none;
}
.dated-card-issue:focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; }
.dated-card-image { width: 100%; height: 100%; padding: 0.7rem; object-fit: contain; object-position: center; transition: transform 180ms ease-out; }
.dated-card-issue:hover .dated-card-image { transform: scale(1.025); }
.dated-card-date-art {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 1rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  text-align: center;
}
.dated-card-date-month,
.dated-card-date-weekday {
  font-family: var(--sans);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1.1;
  text-transform: uppercase;
}
.dated-card-date-month { color: var(--accent-dark); }
.dated-card-date-day {
  margin-block: 0.35rem 0.45rem;
  font-family: var(--display);
  font-size: clamp(3.2rem, 6vw, 4.6rem);
  font-variant-numeric: lining-nums;
  line-height: 0.86;
}
.dated-card-date-weekday {
  width: 100%;
  padding-block-start: 0.45rem;
  border-block-start: 1px solid var(--rule);
  color: var(--muted);
}
.dated-card-copy { display: flex; min-width: 0; min-height: 13rem; flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 1.1rem 1.2rem; }
.dated-card .date-head { margin: 0; color: var(--accent-dark); font-family: var(--sans); font-size: var(--label-size); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.dated-card .dated-title { margin: 0; font-size: var(--fs-2); }
.dated-card .record { margin: 0; color: var(--muted); font-size: var(--fs--1); }
.dated-where { font-weight: 600; }
.dated-source { margin-block-start: auto; padding-block-start: 0.75rem; font-size: var(--fs--1); font-weight: 600; }
.calendar-week-compact {
  display: grid;
  grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.weekly-schedule { background: var(--white); border: 1px solid var(--rule-strong); border-inline-start: 4px solid var(--brand-aqua); }
.weekly-schedule[open] { border-inline-start-color: var(--accent); }
.weekly-schedule > summary {
  position: relative;
  min-height: 52px;
  padding: 0.9rem 3.2rem 0.9rem 1rem;
  font-family: var(--display);
  font-size: var(--fs-1);
  cursor: pointer;
  list-style: none;
}
.weekly-schedule > summary::-webkit-details-marker { display: none; }
.weekly-schedule > summary::after { position: absolute; inset: 50% 1rem auto auto; content: "+"; color: var(--accent); transform: translateY(-50%); font-family: var(--sans); font-size: 1.35rem; }
.weekly-schedule[open] > summary::after { content: "−"; }
.weekly-schedule > summary:hover { color: var(--brand-blue); background: var(--fog); }
.weekly-schedule > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.rhythm-week--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0 1rem 1rem; }
.rhythm-week--compact .rhythm-day { padding: 1rem; border-block-start: 1px solid var(--rule); }
.calendar-sunday-grid { display: grid; grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.sunday-rhythm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.sunday-rhythm .rhythm-entry { padding: 0.85rem 1rem; background: var(--fog); border: 1px solid var(--rule); }
.calendar-map-cta { padding-block: clamp(2rem, 4vw, 4rem); }

/* The later generic .visit-hero rule owns only the old route, so restate the
   compact review variant here at the end of the cascade. */
.visit-hero.visit-hero--compact { padding-block: clamp(1.7rem, 3vw, 3rem); }

@media (max-width: 900px) {
  .dated-card-grid .dated-list { grid-template-columns: minmax(0, 1fr); }
  .calendar-week-compact,
  .calendar-sunday-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .dated-card-grid .dated-list,
  .rhythm-week--compact,
  .sunday-rhythm { grid-template-columns: minmax(0, 1fr); }
  .dated-card-grid .dated-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 9rem auto;
  }
  .dated-card-copy { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dated-card-image { transition: none; }
}

/* Sermons review: finite year archives keep one clear gallery destination. */
.watch-hero--compact { padding-block: clamp(1.6rem, 3vw, 2.7rem) clamp(1.2rem, 2.4vw, 2rem); }
.watch-hero--compact .band-inner { display: grid; gap: 0.7rem; }
.watch-hero--compact h1 { margin: 0; }
.watch-hero--compact .lead { margin: 0; }
.watch-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-block-start: 0.45rem;
}
.watch-switcher a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2.75rem;
  padding: 0.62rem 0.85rem;
  color: var(--brand-blue);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  text-decoration: none;
}
.watch-switcher a:hover,
.watch-switcher a:focus-visible { border-color: var(--accent); text-decoration: underline; text-underline-offset: 0.16em; }
.watch-switcher a[aria-current="page"] { color: var(--white); background: var(--brand-blue); border-color: var(--brand-blue); }
/* The year already appears as the page's own h1 — "Sermons from 2019", or
   "Sermon Recordings / Last Sunday, plus the archive" on the current-year
   index — so drawing it again above a rule repeated the page title to itself.
   The heading stays for the section's accessible name and the heading outline;
   it is simply not painted. */
.sermon-index-head { display: grid; gap: 0.28rem; }
.sermon-index-head p { margin: 0; color: var(--muted); }
.sermon-play {
  position: absolute;
  z-index: 1;
  inset: 50% auto auto 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  display: grid;
  place-items: center;
  color: var(--white);
  background: rgb(5 47 65 / 0.9);
  border-radius: 50%;
  pointer-events: none;
}
.sermon-play::before {
  content: "";
  width: 16px;
  height: 18px;
  margin-inline-start: 3px;
  background: currentColor;
  clip-path: polygon(8% 0%, 100% 50%, 8% 100%);
}
.sermon-thumb--fallback .sermon-play { background: var(--brand-blue); }
.sermon-thumb-hit:hover .sermon-play,
.sermon-thumb-hit:focus-visible .sermon-play { background: var(--brand-blue); }
.sermon[data-sermon-playing] { border-block-end-color: var(--brand-blue); }
.sermon-year-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.35rem;
  margin-block-start: 2rem;
  padding: 0.15rem 0 0.15rem 1.1rem;
  border-block-start: 0;
  border-inline-start: 3px solid var(--accent);
}
.sermon-year-nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0.2rem 0;
  color: var(--ink);
  background: none;
  border: 0;
  font-family: var(--display);
  font-size: var(--fs-1);
  text-decoration: none;
}
.sermon-year-nav a:hover,
.sermon-year-nav a:focus-visible {
  color: var(--brand-blue);
  background: none;
}
.sermon-year-nav a[aria-current="page"] {
  color: var(--ink);
  background: none;
  box-shadow: inset 0 -2px 0 var(--accent);
}
.sermon-year-nav small { display: none; }
.sermon-index { padding-block: clamp(1.75rem, 3.5vw, 3.25rem); }
.sermon-index h2 { margin: 0; }
.sermon-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-block: 1rem clamp(1.8rem, 3vw, 3rem);
}
.sermon {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  align-content: start;
  min-width: 0;
  padding: 0 0 1.15rem;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-block-end: 3px solid var(--brand-aqua);
}
.sermon[hidden] { display: none; }
.sermon-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
}
.sermon-thumb-hit {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
  text-decoration: none;
}
.sermon-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 180ms ease-out, opacity 180ms ease-out; }
.sermon-thumb::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 44%, rgb(0 0 0 / 0.66)); pointer-events: none; }
.sermon-thumb--fallback { background: var(--fog); }
.sermon-thumb--fallback .sermon-thumb-hit { display: grid; place-items: center; }
.sermon-thumb--fallback::after { display: none; }
.sermon-thumb--fallback .sermon-fallback-mark {
  width: min(44%, 8rem);
  height: auto;
  object-fit: contain;
  border-radius: 50%;
}
.sermon-format {
  position: absolute;
  z-index: 1;
  inset: auto 0.65rem 0.6rem auto;
  padding: 0.24rem 0.48rem;
  color: var(--white);
  background: rgb(5 47 65 / 0.9);
  font-size: var(--fs--2);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sermon-thumb--fallback .sermon-format { color: var(--ink); background: rgb(255 255 255 / 0.9); border: 1px solid var(--rule-strong); }
.sermon-thumb-hit:hover img { opacity: 0.86; transform: scale(1.025); }
.sermon-thumb-hit:focus-visible { outline: 4px solid var(--accent); outline-offset: -4px; }
.sermon-thumb-hit:active img { transform: scale(1.01); }
.sermon-thumb iframe {
  position: absolute;
  inset: -3.25rem 0 0;
  z-index: 0;
  width: 100%;
  height: calc(100% + 3.25rem);
  border: 0;
  pointer-events: none;
}
.sv-scrim {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 3.4rem;
  background: linear-gradient(180deg, rgb(5 47 65 / 0.88), transparent);
  pointer-events: none;
}
.sermon-thumb--playing .sermon-play,
.sermon-thumb--playing .sermon-format { display: none; }
.sermon-thumb--playing::after { display: none; }
.sermon-thumb--playing .sermon-thumb-hit {
  z-index: 2;
  pointer-events: none;
}
.sermon-thumb--playing[data-video-on] .sermon-thumb-hit { opacity: 0; }
.sv-stage {
  position: absolute;
  inset: 0 0 3.5rem;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.sv-stage:focus-visible { outline: 4px solid var(--accent); outline-offset: -4px; }
.sermon-vplayer {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  gap: 0.28rem;
  margin: 0;
  padding: 0.4rem 0.4rem 0.45rem;
  background: rgb(5 47 65 / 0.94);
}
.sermon-vplayer .sp-toggle:hover,
.sermon-vplayer .sp-toggle:focus-visible { background-color: var(--brand-blue); color: var(--white); }
.sermon-vplayer .sp-clock { color: rgb(255 255 255 / 0.88); }
.sermon-vplayer .sp-slash { color: rgb(255 255 255 / 0.42); }
.sermon-vplayer .sp-seek::-webkit-slider-runnable-track {
  background:
    linear-gradient(var(--accent), var(--accent)) left / var(--sp-progress, 0%) 100% no-repeat,
    rgb(255 255 255 / 0.28);
}
.sermon-vplayer .sp-seek::-moz-range-track {
  background:
    linear-gradient(var(--accent), var(--accent)) left / var(--sp-progress, 0%) 100% no-repeat,
    rgb(255 255 255 / 0.28);
}
.sv-full,
.sv-close {
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  color: var(--white);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.sv-full:hover,
.sv-full:focus-visible,
.sv-close:hover,
.sv-close:focus-visible { color: var(--white); background: var(--brand-blue); }
.sv-full:focus-visible,
.sv-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sv-full-mark {
  width: 13px;
  height: 13px;
  background:
    linear-gradient(currentColor, currentColor) top left / 6px 2px no-repeat,
    linear-gradient(currentColor, currentColor) top left / 2px 6px no-repeat,
    linear-gradient(currentColor, currentColor) top right / 6px 2px no-repeat,
    linear-gradient(currentColor, currentColor) top right / 2px 6px no-repeat,
    linear-gradient(currentColor, currentColor) bottom left / 6px 2px no-repeat,
    linear-gradient(currentColor, currentColor) bottom left / 2px 6px no-repeat,
    linear-gradient(currentColor, currentColor) bottom right / 6px 2px no-repeat,
    linear-gradient(currentColor, currentColor) bottom right / 2px 6px no-repeat;
}
.sermon-thumb:fullscreen .sv-full-mark,
.sermon-thumb--theater .sv-full-mark {
  width: 12px;
  height: 12px;
  background:
    linear-gradient(currentColor, currentColor) top left / 2px 6px no-repeat,
    linear-gradient(currentColor, currentColor) top left / 6px 2px no-repeat,
    linear-gradient(currentColor, currentColor) bottom right / 2px 6px no-repeat,
    linear-gradient(currentColor, currentColor) bottom right / 6px 2px no-repeat;
  box-shadow: inset 0 0 0 2px currentColor;
}
.sv-close-mark {
  position: relative;
  width: 14px;
  height: 14px;
  background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat;
  transform: rotate(45deg);
}
.sv-close-mark::before {
  position: absolute;
  inset: 0;
  content: "";
  background: inherit;
  transform: rotate(90deg);
}
.sermon-thumb:fullscreen,
.sermon-thumb--theater {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  background: #000;
}
.sermon-thumb:fullscreen .sermon-vplayer,
.sermon-thumb--theater .sermon-vplayer {
  padding: 0.7rem 1rem 0.9rem;
  background: rgb(5 47 65 / 0.96);
}
.sermon-thumb--theater {
  position: fixed;
  inset: 0;
  z-index: 1100;
}
html.sermon-video-theater { overflow: hidden; }
.sermon-meta,
.sermon-title,
.sermon-preacher,
.sermon-scripture { margin-inline: 1rem; }
.sermon-meta { margin-block: 0.95rem 0.28rem; color: var(--accent-dark); font-size: var(--fs--2); line-height: 1.3; }
.sermon-title { margin-block-start: 0; font-size: var(--fs-1); line-height: 1.18; }
.sermon-preacher { margin-block: 0.12rem 0; color: var(--ink); font-size: var(--fs--1); font-weight: 600; }
.sermon-scripture { margin-block: 0.35rem 0; color: var(--muted); font-size: var(--fs--1); }
.sermon-title a { text-underline-offset: 0.16em; }
.sermon-title a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sermon-year-scroll { display: grid; justify-items: center; gap: 0.7rem; margin-block-start: 1.25rem; }
.sermon-year-scroll[hidden] { display: none; }
.sermon-year-scroll p { margin: 0; color: var(--muted); font-size: var(--fs--1); }
[data-year-scroll-sentinel] { width: 100%; height: 1px; }
.subscribe-compact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 3rem); align-items: center; margin-block-start: 1.35rem; }
.sermon-podcast {
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
.sermon-podcast .eyebrow { margin-block-end: 0.35rem; }
.sermon-podcast h2 { margin-block: 0 0.4rem; }
.sermon-podcast > .band-inner > p { max-width: 36rem; }
.podcast-show-art {
  display: block;
  width: min(100%, 16.5rem);
  height: auto;
  aspect-ratio: 1;
  border: 1px solid var(--rule-strong);
}
.podcast-link-list { display: grid; gap: 0; margin: 0; padding: 0 0 0 1.15rem; list-style: none; border-block-start: 1px solid var(--rule-strong); }
.podcast-link-list li { border-block-end: 1px solid var(--rule); }
.podcast-link-list a {
  display: grid;
  grid-template-columns: minmax(8rem, 0.34fr) minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  min-height: 58px;
  padding: 0.75rem 0;
  color: var(--ink);
  text-decoration: none;
}
.podcast-link-list a:hover,
.podcast-link-list a:focus-visible { color: var(--brand-blue); background: var(--fog); }
.podcast-link-list a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.podcast-link-list strong { font-family: var(--display); font-size: var(--fs-1); }
.podcast-link-list span { color: var(--muted); font-size: var(--fs--1); }
.podcast-link-list .podcast-link-arrow { color: var(--accent-dark); font-size: var(--fs-1); }

@media (max-width: 960px) {
  .sermon-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .subscribe-compact { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .podcast-show-art { width: min(100%, 12.5rem); }
  .sermon-list { grid-template-columns: minmax(0, 1fr); }
  .podcast-link-list a { grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.75rem; }
  .podcast-link-list a > span:not(.podcast-link-arrow) { grid-column: 1; }
  .podcast-link-list .podcast-link-arrow { grid-column: 2; grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) {
  .sermon-thumb img { transition: none; }
}

/* Search is a utility, not a second landing page. Keep the field and first
   results in one viewport, with the same accessible combobox behavior as the
   masthead search. */
.search-utility { position: relative; z-index: 20; padding-block: clamp(1.35rem, 2.5vw, 2.2rem); border-block-end: 1px solid var(--rule); }
.search-utility .band-inner { display: grid; grid-template-columns: auto minmax(12rem, 0.38fr) minmax(22rem, 0.62fr); gap: 0.75rem clamp(1rem, 3vw, 2.5rem); align-items: end; }
.search-utility h1 { margin: 0; font-size: var(--fs-3); }
.search-utility p { margin: 0 0 0.6rem; color: var(--muted); font-size: var(--fs--1); }
.search-typeahead { position: relative; min-width: 0; }
.search-hero .search-destination-form { max-width: none; }
.search-hero input[type="search"] { min-height: 46px; font-size: var(--fs-0); border-radius: 0; }
.search-hero input[type="search"]:focus { outline: none; }
.search-hero input[type="search"]:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--accent); outline-offset: -3px; box-shadow: none; }
.search-hero button { min-height: 46px; border-radius: 0; cursor: pointer; font-size: var(--fs--1); font-weight: 700; }
.search-hero button:hover { background: var(--brand-blue); border-color: var(--brand-blue); }
.search-hero button:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.search-suggestions {
  position: absolute;
  z-index: 50;
  inset: calc(100% + 2px) 0 auto;
  max-height: min(26rem, 58vh);
  margin: 0;
  padding: 0;
  overflow: auto;
  background: var(--white);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 14px 30px rgb(4 32 44 / 18%);
  list-style: none;
}
.search-suggestions:empty { display: none; }
.search-suggestions li { max-width: none; border-block-end: 1px solid var(--rule); }
.search-suggestions button { display: grid; width: 100%; min-height: 48px; gap: 0.1rem; padding: 0.65rem 0.8rem; color: var(--ink); background: var(--white); border: 0; text-align: left; cursor: pointer; }
.search-suggestions li[aria-selected="true"] button,
.search-suggestions button:hover { color: var(--brand-blue); background: var(--fog); box-shadow: inset 4px 0 0 var(--accent); }
.search-suggestions .omni-title { font-family: var(--display); font-size: var(--fs-0); }
.search-suggestions .omni-meta { max-width: 72ch; overflow: hidden; color: var(--muted); font-size: var(--fs--2); text-overflow: ellipsis; white-space: nowrap; }
.search-suggestions mark,
.result-list mark { padding: 0 0.08em; color: inherit; background: var(--accent-pale); }
.search-results-band { min-height: 18rem; padding-block: clamp(1.25rem, 2.5vw, 2.25rem) clamp(3rem, 5vw, 5rem); }
.search-results-band #results { display: grid; gap: clamp(1.4rem, 3vw, 2.5rem); }
.search-results-band .result-empty { margin: 0; padding: 1rem; }
.search-results-band .result-empty h3,
.search-results-band .result-empty p { margin-block: 0; }
.search-results-band .result-empty h3 + p { margin-block-start: 0.35rem; }
.result-group .rubric { margin: 0 0 0.4rem; color: var(--accent-dark); font-size: var(--fs--1); letter-spacing: 0.09em; text-transform: uppercase; }
.result-list li { padding: 0; }
.result-list a { position: relative; display: grid; min-height: 48px; align-content: center; padding: 0.72rem 2.5rem 0.72rem 0.55rem; color: var(--ink); font-size: var(--fs-1); text-decoration: none; }
.result-list a::after { position: absolute; inset: 50% 0.65rem auto auto; content: "→"; color: var(--accent); transform: translateY(-50%); }
.result-list a:hover { color: var(--brand-blue); background: var(--fog); }
.result-list a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.result-list .s-sub { padding: 0 0.55rem 0.72rem; line-height: 1.45; }

@media (max-width: 900px) {
  .search-utility .band-inner { grid-template-columns: auto minmax(0, 1fr); }
  .search-typeahead { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .search-utility .band-inner { grid-template-columns: minmax(0, 1fr); }
  .search-utility p,
  .search-typeahead { grid-column: 1; }
  .search-hero .search-destination-form { grid-template-columns: minmax(0, 1fr); }
  .search-hero input[type="search"] { border-inline-end: 1px solid var(--rule-strong); }
}

/* People: full source biographies read as a directory, not tiny portrait
   tiles. Portraits stay at or below their source width, and every role gets its
   own line. */
#staff .people-staff-group { margin-block-start: 2.1rem; }
#staff .section-heading-row + .people-staff-group { margin-block-start: 1.15rem; }
#staff h3 {
  margin-block: 0;
  font-size: var(--fs-2);
}
.people-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.6rem);
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}
.people-directory--pastors { grid-template-columns: minmax(0, 1fr); }
.people-pastors-group {
  max-width: 48rem;
  margin: 1.25rem 0 2rem;
}
.people-pastors-group img {
  width: 100%;
  height: auto;
  aspect-ratio: 986 / 891;
  object-fit: cover;
}
.person-card {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
  gap: 1rem clamp(1rem, 2vw, 1.5rem);
  max-width: none;
  align-items: start;
  padding-block: 1.1rem 1.5rem;
  border-block-start: 2px solid var(--brand-aqua);
}
.people-directory--pastors .person-card { grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); }
.person-portrait {
  display: block;
  width: min(100%, 12rem);
  height: auto;
  max-height: 15rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  background: var(--fog);
}
.people-directory--pastors .person-portrait { width: min(100%, 13rem); max-height: 16.25rem; }
.person-portrait--placeholder {
  display: grid;
  place-items: center;
  min-height: 12rem;
  color: var(--white);
  background: var(--brand-blue);
  font-family: var(--display);
  font-size: clamp(2.6rem, 5vw, 4.6rem);
}
.person-portrait--jim { object-position: 44% 13%; }
.person-card-copy { min-width: 0; }
.person-card h3 { margin: 0; font-size: var(--fs-2); line-height: 1.13; }
.person-roles { display: grid; gap: 0.05rem; margin: 0.35rem 0 0; color: var(--accent-dark); font-size: var(--fs--1); font-weight: 700; }
.person-bio { margin-block-start: 0.8rem; }
.person-bio p { margin-block: 0 0.65rem; font-size: var(--fs--1); line-height: 1.58; }
.person-actions { margin: 0.9rem 0 0; }
.person-actions .email-action { display: inline-flex; }
.person-actions .email-action > a,
.person-actions > a { min-width: 8rem; }
.roster--stacked .roster-roles { display: grid; gap: 0.08rem; color: var(--muted); font-size: var(--fs--1); text-align: right; }
.roster--stacked .roster-roles a { display: inline-flex; min-height: 24px; align-items: center; }

@media (max-width: 980px) {
  .people-directory { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .person-card,
  .people-directory--pastors .person-card { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .person-portrait,
  .people-directory--pastors .person-portrait { width: 6.5rem; max-height: 8.15rem; }
  .person-card h3 { font-size: var(--fs-1); }
}
@media (max-width: 440px) {
  .person-card,
  .people-directory--pastors .person-card { grid-template-columns: minmax(0, 1fr); }
  .person-portrait,
  .people-directory--pastors .person-portrait { width: 7.5rem; max-height: 9.4rem; }
}

/* Get involved: content-sized columns keep the volunteer grid intentional when
   its last row is short. The rest of the route uses one repeatable name/copy
   ledger, with deliberate stacking on phones. */
.signup-group + .signup-group { margin-block-start: clamp(1.75rem, 3vw, 2.5rem); }
.signup-group-title {
  margin: 1.35rem 0 1.1rem;
  padding-inline-start: 0.85rem;
  border-inline-start: 3px solid var(--accent);
  font-size: var(--fs-1);
  line-height: 1.15;
}
.signup-group:first-child .signup-group-title { margin-block-start: 0.4rem; }
.signup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  border: 0;
}
.signup {
  display: flex;
  flex-direction: column;
  width: auto;
  margin: 0;
  padding: 0 1.25rem 1.25rem;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-block-end: 3px solid var(--brand-aqua);
}
.signup:first-child { border-inline-start: 1px solid var(--rule-strong); }
.signup-image { width: calc(100% + 2.5rem); height: auto; aspect-ratio: 16 / 9; margin: 0 -1.25rem 1.15rem; object-fit: cover; }
[data-signup-id="kickoff-sunday"] .signup-image { aspect-ratio: 950 / 323; object-fit: contain; }
.signup h3,
.signup h4 { margin-block: 0 0.45rem; }
.signup .record {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding-block-start: 0.55rem;
  border-block-start: 1px solid var(--rule);
}
.signup:not(:has(.signup-image)) { padding-block-start: 1.15rem; }
.signup-action { margin-block-start: auto; padding-block-start: 1rem; }
.signup > :last-child { margin-block-end: 0; }
[data-signup-id="ushers"] .signup-image { object-position: center 18%; }
.signup-action .btn,
.signup-action .email-action > a { width: auto; max-width: 100%; }
.community-times { margin: 1.6rem 0 0; }
.community-times .btn {
  min-height: 3.15rem;
  padding: 0.9rem 1.4rem;
}
/* Long utility pages share one local navigation grammar. The label is the
   calm blue serif voice; the aqua rib and brick location line carry the PCLG
   identity without turning a useful index into another row of primary nav. */
.page-local-nav {
  position: sticky;
  inset-block-start: var(--pclg-site-nav-height, 42px);
  z-index: 50;
  color: var(--ink);
  background: rgb(255 255 255 / 97%);
  border-block: 1px solid var(--rule-strong);
  backdrop-filter: blur(10px);
}
.page-local-nav .band-inner {
  display: flex;
  align-items: center;
  gap: 0;
  padding-block: 0.35rem;
}
.page-local-nav-label {
  flex: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: clamp(0.7rem, 1.2vw, 1rem) clamp(0.9rem, 1.8vw, 1.35rem);
  color: var(--brand-blue);
  border-inline-start: 3px solid var(--brand-aqua);
  border-inline-end: 1px solid var(--rule);
  font-family: var(--display);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  line-height: 1;
  letter-spacing: -0.01em;
}
.page-local-nav-links {
  display: flex;
  min-width: 0;
  padding-inline-start: clamp(0.25rem, 0.8vw, 0.6rem);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}
.page-local-nav a {
  position: relative;
  flex: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.55rem clamp(0.55rem, 1vw, 0.82rem);
  color: var(--ink);
  font-size: clamp(0.9rem, 0.87rem + 0.12vw, 0.97rem);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.page-local-nav a::after {
  position: absolute;
  inset: auto 0.62rem -0.35rem;
  height: 3px;
  background: transparent;
  content: "";
}
.page-local-nav a:hover { color: var(--brand-blue); background: var(--fog); }
.page-local-nav a[aria-current="location"] { color: var(--accent-dark); background: var(--accent-pale); }
.page-local-nav a:hover::after { background: var(--rule-strong); }
.page-local-nav a[aria-current="location"]::after { background: var(--accent); }
.page-local-nav a:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.random-destination-list { margin-block-start: 1.25rem; }
.random-destination-list a { min-height: 100%; }
@media (max-width: 900px) {
  html { scroll-padding-top: 0; }
  html:has(.page-local-nav) { scroll-padding-top: var(--pclg-local-nav-height, 52px); }
  .page-local-nav { inset-block-start: 0; }
}
@media (max-width: 620px) {
  .page-local-nav .band-inner { padding-inline-end: 0; }
  .page-local-nav-label {
    padding-inline: 0.55rem 0.7rem;
    font-size: 0.94rem;
  }
  .page-local-nav-links { padding-inline-start: 0.2rem; }
  .page-local-nav-links { padding-inline-end: var(--band-x); }
}
.community-family-intro {
  margin: 0 0 1rem;
  padding: 0 0 0.9rem;
  border-block-end: 1px solid var(--rule-strong);
}
.community-leaders { display: grid; gap: 0.75rem; }
.community-leader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.7rem;
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-inline-start: 4px solid var(--brand-aqua);
}
.community-leader-identity {
  display: grid;
  grid-template-columns: 4.3rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}
.community-leader-identity:hover strong { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 0.14em; }
.community-leader-identity img { width: 4.3rem; height: 5rem; object-fit: cover; object-position: center 18%; }
.community-leader-identity > span { display: grid; gap: 0.08rem; }
.community-leader-identity strong { font-family: var(--serif); font-size: var(--fs-1); }
.community-leader-identity span span { color: var(--muted); font-size: var(--fs--1); line-height: 1.35; }
.community-leader > p { margin: 0; }
.community-leader .btn { min-height: 2.8rem; padding: 0.7rem 0.9rem; }
.community-contact-stack { display: grid; gap: 0.65rem; margin-block-start: 0.85rem; }
.community-contact-stack p { margin: 0; }
.community-youth-story {
  display: grid;
  grid-template-columns: minmax(18rem, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-block-start: clamp(2.5rem, 5vw, 4.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.4rem);
  border-block: 1px solid var(--rule-strong);
}
.community-youth-copy h3 { margin-block: 0.3rem 0.8rem; font-size: var(--fs-3); }
.community-youth-copy p { margin-block: 0; }
.community-youth-copy p + p { margin-block-start: 0.85rem; }
.community-youth-story .photo-card img,
.community-youth-gallery .photo-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.community-youth-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-block-start: 1rem;
}
.community-music-intro { align-items: center; margin-block: 1.35rem 1.85rem; }
.community-music-copy { max-width: 36rem; }
.community-music-copy p { margin-block: 0; }
.community-music-copy p + p { margin-block-start: 0.9rem; }
.community-fellows { grid-template-columns: minmax(0, 1.2fr) minmax(15rem, 0.8fr); }
.community-fellows .photo-card { max-width: 30rem; justify-self: end; }
.contact-context {
  margin: 0;
  padding: 0.8rem 0.95rem;
  color: var(--accent-dark);
  background: var(--fog);
  border-inline-start: 4px solid var(--accent);
}
.committees-head { align-items: end; }
.committees-head > div > p { margin-block: 0.45rem 0; max-width: 28rem; }
.committees-cta { margin: 0; justify-self: end; }
.committees-cta .btn { min-height: 3.15rem; padding: 0.9rem 1.4rem; }
.committees-invite { margin: 1.35rem 0 0; max-width: 40rem; }
.committees-table {
  width: 100%;
  margin-block-start: 0.35rem;
  border-collapse: collapse;
}
.committees-table th,
.committees-table td {
  padding: 0.85rem 0.75rem 0.85rem 0;
  text-align: left;
  vertical-align: top;
  border-block-end: 1px solid var(--rule);
}
.committees-table thead th {
  font-size: var(--fs--1);
  font-weight: 600;
  color: var(--muted);
  border-block-end: 1px solid var(--rule-strong);
}
.committees-table tbody th { font-family: var(--serif); font-size: var(--fs-1); font-weight: 600; }
.committees-roster { margin-block-start: 1.75rem; }
.anchor-alias { display: block; height: 0; overflow: hidden; }
.community-ledger { margin-block-start: 1.2rem; border-block-start: 1px solid var(--rule-strong); }
.community-ledger article { display: grid; grid-template-columns: minmax(11rem, 0.34fr) minmax(0, 0.66fr); gap: 1rem clamp(1.5rem, 4vw, 4rem); padding-block: 1.2rem; border-block-end: 1px solid var(--rule); }
.community-ledger h3 { margin: 0; font-size: var(--fs-1); }
.community-ledger article > div > p { margin-block: 0; }
.community-ledger article > div > p + p { margin-block-start: 0.75rem; }
.community-ledger-banner {
  max-width: 42rem;
  margin: 0 0 0.9rem;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.community-ledger-banner[hidden] { display: none; }
.community-ledger-banner img { display: block; width: 100%; height: auto; }
.community-photo-trio {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
}
.community-photo-trio img {
  height: 16rem;
  aspect-ratio: auto;
  object-fit: cover;
}
.mission-photo-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-block: 1.25rem;
}
.mission-photo-row--single { grid-template-columns: minmax(0, 640px); }
.mission-photo-row--mixed {
  grid-template-columns: minmax(15rem, 0.38fr) minmax(0, 0.62fr);
  align-items: end;
}
.mission-photo-row img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.mission-photo-row--mixed .photo-card:first-child { max-width: 30rem; }
.mission-photo-row--mixed .photo-card:first-child img { aspect-ratio: 3 / 4; }
.community-feature-row { display: grid; grid-template-columns: minmax(18rem, 0.42fr) minmax(0, 0.58fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-block-start: 1.3rem; }
.community-feature-row .photo-card { position: sticky; inset-block-start: 1rem; }
.community-ledger--compact { margin-block-start: 0; }
.community-ledger--compact article { grid-template-columns: minmax(9rem, 0.36fr) minmax(0, 0.64fr); gap: 1rem; padding-block: 0.9rem; }
.studies-feature { display: grid; grid-template-columns: minmax(18rem, 0.44fr) minmax(0, 0.56fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.studies-feature > div > h2 { margin-block-start: 0; }
.study-cards { display: grid; gap: 0; border-block-start: 1px solid var(--rule-strong); }
.study-cards article { padding-block: 1rem 1.2rem; border-block-end: 1px solid var(--rule); }
.study-cards h3,
.study-cards p { margin-block: 0; }
.study-cards h3 + p,
.study-cards p + p { margin-block-start: 0.55rem; }
.scholarship-hero-side .photo-card { margin-block-start: 1.1rem; max-width: 430px; }

@media (max-width: 860px) {
  .community-feature-row,
  .studies-feature { grid-template-columns: minmax(0, 1fr); }
  .community-feature-row .photo-card { position: static; }
  .community-youth-story { grid-template-columns: minmax(0, 1fr); }
  .community-fellows { grid-template-columns: minmax(0, 1fr); }
  .community-fellows .photo-card { max-width: 25rem; justify-self: start; }
}
@media (max-width: 860px) {
  .signup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mission-photo-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .signup-grid { grid-template-columns: minmax(0, 1fr); }
  .community-photo-trio { grid-template-columns: minmax(0, 1fr); }
  .community-photo-trio img { height: 14rem; }
  .community-ledger article,
  .community-ledger--compact article { grid-template-columns: minmax(0, 1fr); gap: 0.45rem; }
  .community-leader { grid-template-columns: minmax(0, 1fr); }
  .community-leader > p { margin-inline-start: 5.1rem; }
  .community-youth-gallery { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .page-local-nav { display: none; }
}

/* The PCLG preschool landing is a concise handoff, not a second licensing
   record. Keep the program, rooms, director, location, and map close together. */
.preschool-program-grid,
.preschool-visit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.preschool-program-grid h2,
.preschool-visit-grid h2 { margin-block-start: 0; }
.preschool-room-note { padding: clamp(1rem, 2vw, 1.5rem); background: var(--white); border: 1px solid var(--rule-strong); border-inline-start: 4px solid var(--accent); }
.preschool-room-note h3,
.preschool-room-note p { margin-block: 0; }
.preschool-room-note h3 + p,
.preschool-room-note p + p { margin-block-start: 0.7rem; }
.preschool-visit-grid .photo-card img { max-height: 28rem; object-fit: cover; object-position: center 22%; }
@media (max-width: 760px) {
  .preschool-program-grid,
  .preschool-visit-grid { grid-template-columns: minmax(0, 1fr); }
}

/* History opener: the three dates turn an orphaned archival photograph into a
   clear then-to-now threshold. */
.history-hero { padding-block: clamp(2rem, 4vw, 4rem); color: var(--ink); background: var(--white); border-block-end: 1px solid var(--rule); }
.history-hero-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.history-hero h1 { margin-block-start: 0.15rem; }
.history-hero .photo-card { padding: 0.7rem; background: var(--fog); border: 1px solid var(--rule-strong); border-block-end: 4px solid var(--brand-aqua); }
.history-hero .photo-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: contrast(1.04); }
.history-hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-block-start: 1.4rem; border-block: 1px solid var(--rule-strong); }
.history-hero-facts div { padding: 0.8rem; border-inline-end: 1px solid var(--rule); }
.history-hero-facts div:last-child { border-inline-end: 0; }
.history-hero-facts dt { color: var(--accent-dark); font-family: var(--display); font-size: var(--fs-1); }
.history-hero-facts dd { margin: 0.2rem 0 0; color: var(--muted); font-size: var(--fs--2); }
@media (max-width: 760px) {
  .history-hero-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .history-hero-facts { grid-template-columns: minmax(0, 1fr); }
  .history-hero-facts div { border-inline-end: 0; border-block-end: 1px solid var(--rule); }
  .history-hero-facts div:last-child { border-block-end: 0; }
}