/* ==========================================================================
   St Thomas Church, Bury — design system

   Palette is taken from the building itself: the near-black of a Lancashire
   night, the buff sandstone of the walls, the blue-grey of the slate roof,
   candle gold, and one deep liturgical red reserved for the cross.

   Two typefaces, both self-hosted:
     Playfair Display  — display. A Victorian high-contrast serif, set heavy and
                         tight so headings read as carved rather than written.
     Inter             — everything functional.

   The red is a signal, not a decoration. It carries the mark, the creed band and
   the primary action, and nothing else competes with it.
   ========================================================================== */

:root {
  /* Ground */
  --night: #0b0f0d;
  --night-2: #131a17;
  --slate: #26312f;
  --ink: #171c19;
  --ink-soft: #5a645e;
  --green: #16362f;

  /* Stone */
  --stone: #e8e0d1;
  --stone-2: #dcd1bd;
  --paper: #fbf8f2;
  --white: #ffffff;

  /* Light and blood */
  --gold: #a8792a;
  --gold-2: #e2c185;
  --passion: #b3121b;        /* signal red — the cross, on light grounds */
  --passion-deep: #8b0d14;   /* hover */

  --line: rgba(23, 28, 25, .18);
  --line-strong: rgba(23, 28, 25, .42);
  --line-light: rgba(255, 255, 255, .18);
  --shadow: 0 30px 80px rgba(11, 20, 16, .16);
  --shadow-soft: 0 14px 40px rgba(11, 20, 16, .09);

  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --shell: min(1280px, calc(100vw - 3rem));
  --gutter: max(1.5rem, calc((100vw - 1280px) / 2));
  --ease: cubic-bezier(.16, .84, .44, 1);
}

/* --------------------------------------------------------------- base --- */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* "clip" rather than "hidden": it stops decorative outsets creating a
     horizontal scrollbar without turning the body into a scroll container,
     which would break position: sticky on the header. */
  overflow-x: clip;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body, button, input, select, textarea { font-family: var(--sans); }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; }
button { color: inherit; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { color: var(--night); background: var(--gold-2); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 2px; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.shell { width: var(--shell); margin-inline: auto; }
.section { padding: clamp(4.5rem, 9vw, 9rem) 0; }
.section--stone { background: var(--stone); }
.section--paper { background: var(--paper); }

.skip-link {
  position: fixed; z-index: 3000; top: .75rem; left: .75rem;
  padding: .8rem 1.2rem; color: var(--night); background: var(--gold-2);
  font-size: .8rem; font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* The house mark — a cross patteé, filled with currentColor.
   Deliberately not called ".mark": Bootstrap's reboot claims that class for its
   text-highlight utility and would paint a yellow box behind the artwork. */
.house-mark { width: 1.9rem; height: auto; aspect-ratio: 1; color: var(--passion); }

/* --------------------------------------------------------- typography --- */

.eyebrow {
  margin: 0 0 1.1rem;
  color: var(--passion);
  font-size: .7rem; font-weight: 600; letter-spacing: .2em; line-height: 1.4;
  text-transform: uppercase;
}
.eyebrow--light { color: var(--gold-2); }

.kicker {
  display: flex; align-items: center; gap: .85rem;
  margin: 0 0 1.6rem;
  color: var(--gold-2);
  font-size: .7rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase;
}
.kicker span { flex: none; width: 2.6rem; height: 1px; background: currentColor; opacity: .8; }

.display-heading {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.35rem, 5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.02;
}
.display-heading em { font-style: italic; font-weight: 700; color: var(--passion); }
.display-heading--light { color: #fff; }
.display-heading--light em { color: var(--gold-2); }

/* Display headings carry no bottom margin, so give whatever follows some air. */
.display-heading + p, .display-heading + .lead, .display-heading + ul, .display-heading + address { margin-top: 1.6rem; }

.lead {
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.012em;
}

.verse {
  margin: 2.5rem 0 0;
  padding-left: 1.6rem;
  border-left: 2px solid var(--gold-2);
}
.verse p {
  margin: 0;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.38;
}
.verse cite {
  display: block; margin-top: .9rem;
  color: var(--gold-2);
  font-size: .72rem; font-style: normal; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase;
}
.verse--centred {
  max-width: 60ch; margin-inline: auto;
  padding: 0; border: 0; text-align: center;
}
.verse--centred p { font-size: clamp(1.6rem, 3.2vw, 2.8rem); }

.section-heading--split {
  display: grid; grid-template-columns: 1.2fr .8fr;
  gap: clamp(2.5rem, 8vw, 8rem); align-items: end;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.section-heading--split > p { margin: 0; color: var(--ink-soft); }
.chapter--dark .section-heading--split > p { color: rgba(255, 255, 255, .72); }

/* --------------------------------------------------- buttons and links --- */

.button {
  display: inline-flex; min-height: 3.4rem;
  align-items: center; justify-content: center; gap: .75rem;
  padding: .85rem 1.6rem;
  border: 1px solid transparent; border-radius: 0;
  font-size: .74rem; font-weight: 600; letter-spacing: .13em; line-height: 1.2;
  text-decoration: none; text-transform: uppercase;
  transition: color .25s var(--ease), background .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.button:hover { transform: translateY(-2px); }
.button span { transition: transform .25s var(--ease); }
.button:hover span { transform: translateX(4px); }

.button--red { color: #fff; background: var(--passion); }
.button--red:hover { color: #fff; background: var(--passion-deep); }
.button--light { color: var(--ink); background: #fff; }
.button--light:hover { color: #fff; background: var(--passion); }
.button--ink { color: #fff; background: var(--ink); }
.button--ink:hover { color: var(--night); background: var(--gold-2); }
.button--green { color: #fff; background: var(--green); }
.button--green:hover { color: var(--night); background: var(--gold-2); }
.button--outline { color: var(--ink); border-color: var(--line-strong); background: transparent; }
.button--outline:hover { color: #fff; border-color: var(--ink); background: var(--ink); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.75rem; margin-top: 2.25rem; }
.actions--centred { justify-content: center; }

.quiet-link, .arrow-link {
  display: inline-flex; align-items: center; gap: .65rem;
  font-size: .76rem; font-weight: 600; letter-spacing: .12em;
  text-decoration: none; text-transform: uppercase;
}
.quiet-link { padding-bottom: .3rem; border-bottom: 1px solid currentColor; }
.quiet-link--light { color: #fff; }
.arrow-link { padding-bottom: .45rem; border-bottom: 1px solid var(--line-strong); }
.arrow-link span, .quiet-link span { transition: transform .25s var(--ease); }
.arrow-link:hover span, .quiet-link:hover span { transform: translateX(5px); }
.chapter--dark .arrow-link { border-color: var(--line-light); }

.text-button, .button-link {
  padding: 0; border: 0; background: none;
  font-size: .78rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: .25em;
}

/* --------------------------------------------------------- reveal ------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .95s var(--ease), transform .95s var(--ease);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* ---------------------------------------------------------- header ------ */

.site-header {
  position: sticky; z-index: 1000; top: 0;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .35s var(--ease);
}
.site-header.is-pinned { box-shadow: 0 1px 24px rgba(11, 20, 16, .12); }

.service-ribbon {
  color: rgba(255, 255, 255, .82);
  background: var(--night);
  font-size: .72rem; letter-spacing: .03em;
  transition: background .35s var(--ease);
}
.service-ribbon__inner { min-height: 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.service-ribbon p { margin: 0; }
.service-ribbon a { color: inherit; text-decoration: none; white-space: nowrap; }
.service-ribbon a:hover { color: var(--gold-2); }

/* The masthead creed, stated before anything else on the page. */
.slogan { display: flex; align-items: baseline; gap: .5rem; overflow: hidden; white-space: nowrap; }
.slogan strong {
  color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
}
.slogan em { color: rgba(255, 255, 255, .62); font-style: italic; }
/* The separator belongs to the definition, so hiding the definition on a
   narrow screen never leaves a bar dangling at the end of the line. */
.slogan .def { overflow: hidden; text-overflow: ellipsis; }
.slogan .def::before { content: "|"; margin-right: .5rem; color: rgba(255, 255, 255, .3); }
.slogan .bar { color: rgba(255, 255, 255, .3); }
.live-dot {
  display: inline-block; width: .4rem; height: .4rem; margin-right: .6rem;
  border-radius: 50%; background: var(--gold-2);
  box-shadow: 0 0 0 .22rem rgba(226, 193, 133, .16);
}

.navbar { min-height: 5rem; padding: 0; }
/* Wrapping matters: below the lg breakpoint Bootstrap gives .navbar-collapse a
   flex-basis of 100%, and without wrap it is crushed onto the same row as the
   wordmark instead of dropping beneath it. */
.navbar-shell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.church-brand { flex: 0 1 auto; min-width: 0; }

.church-brand { display: inline-flex; align-items: center; gap: .9rem; text-decoration: none; color: inherit; }
.church-brand .house-mark { width: 1.5rem; color: var(--passion); }
.brand-words { display: grid; line-height: 1; }
.brand-words strong { font-family: var(--display); font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.brand-words small {
  margin-top: .4rem; color: var(--ink-soft);
  font-size: .56rem; font-weight: 600; letter-spacing: .19em; text-transform: uppercase;
}

.navbar-nav { gap: .05rem; }
.navbar .nav-link {
  padding: .7rem .75rem !important;
  color: inherit;
  font-size: .73rem; font-weight: 600; letter-spacing: .1em;
  text-decoration: none; text-transform: uppercase;
  transition: color .2s var(--ease);
}
.navbar .nav-link:hover { color: var(--passion); }

.account-nav { margin-left: .7rem; padding-left: .7rem; border-left: 1px solid var(--line); }
.navbar .account-link, .navbar .admin-link {
  color: var(--night) !important; background: var(--gold-2);
  padding-inline: 1.05rem !important;
}
.navbar .account-link:hover, .navbar .admin-link:hover { color: #fff !important; background: var(--passion); }
.button-link { width: 100%; text-align: left; }

.menu-button {
  position: relative; width: 2.8rem; height: 2.8rem; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 50%; background: transparent;
}
.menu-button span { position: absolute; left: .78rem; width: 1.1rem; height: 1px; background: currentColor; }
.menu-button span:first-child { top: 1.08rem; }
.menu-button span:last-child { top: 1.58rem; }

/* ------------------------------------------------------------- hero ----- */

.hero {
  position: relative;
  min-height: min(820px, calc(100svh - 7.5rem));
  display: flex; align-items: flex-end;
  overflow: hidden;
  color: #fff; background: var(--night);
}
.hero--tall { min-height: min(700px, calc(100svh - 9rem)); }
.hero__frame { position: absolute; inset: 0; overflow: hidden; }
.hero__image {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 52%;
  filter: saturate(.9) contrast(1.03) brightness(.96);
  transform: scale(1.05);
  animation: hero-drift 26s var(--ease) forwards;
}
/* The east window is a tall portrait in a wide frame, pulled up to keep its
   tracery in shot. (The home page no longer crops a photograph at all — see
   .hero--masthead.) */
.hero__image--glass { object-position: center 18%; }
@keyframes hero-drift {
  from { transform: scale(1.05); }
  to { transform: scale(1.13) translateY(-1.2%); }
}
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(7, 12, 10, .88) 0%, rgba(7, 12, 10, .58) 44%, rgba(7, 12, 10, .06) 78%),
    linear-gradient(0deg, rgba(7, 12, 10, .82) 0%, rgba(7, 12, 10, .1) 42%);
}

.hero__content {
  position: relative; z-index: 1;
  padding: clamp(4.5rem, 9vw, 7.5rem) 0 clamp(6rem, 12vw, 10rem);
}
.hero h1, .page-head h1 {
  max-width: 16ch; margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 7.4vw, 6.6rem);
  font-weight: 700; letter-spacing: -.03em; line-height: .98;
}
.hero h1 em, .page-head h1 em { font-style: italic; font-weight: 700; color: var(--gold-2); }
/* A word set as an inscription rather than an aside: upright and tracked out, so
   it matches how TRUTH is set in the masthead strip and the creed band. */
.hero h1 em.inscribed { font-style: normal; letter-spacing: .02em; }
.hero__copy {
  max-width: 46ch; margin: 2rem 0 0;
  color: rgba(255, 255, 255, .88);
  font-family: var(--display); font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.45;
}
.hero .actions { margin-top: 2.75rem; }

.hero--masthead .hero__ledger {
  position: static; margin-top: clamp(1.75rem, 3vw, 2.5rem);
  background: transparent; backdrop-filter: none;
}
.hero__ledger {
  position: absolute; z-index: 1; inset: auto 0 0;
  border-top: 1px solid rgba(255, 255, 255, .2);
  background: rgba(7, 12, 10, .5);
  backdrop-filter: blur(10px);
}
.hero__ledger-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.hero__ledger-grid > div { padding: 1.15rem 1.5rem 1.15rem 0; }
.hero__ledger-grid > div + div { padding-left: 1.5rem; border-left: 1px solid rgba(255, 255, 255, .16); }
.hero__ledger span {
  display: block; margin-bottom: .3rem;
  color: var(--gold-2);
  font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.hero__ledger strong { font-family: var(--display); font-size: 1.35rem; font-weight: 700; letter-spacing: -.015em; }

/* The home page masthead.

   Rather than cropping a photograph to fill a wide band, the two best frames in
   the collection are shown entire. A 3fr / 4fr grid is what makes that work: a
   square image and a 4:3 image placed in those columns resolve to exactly the
   same height with nothing trimmed from either, at any width and with any gap. */
.hero--masthead {
  display: block; min-height: 0;
  padding-bottom: 0;
  color: #fff; background: var(--night);
}
.hero__masthead {
  display: grid; grid-template-columns: 1.25fr .75fr;
  gap: clamp(1.5rem, 4.5vw, 4rem); align-items: end;
  padding: clamp(3rem, 5.5vw, 4.75rem) 0 clamp(2.25rem, 3.5vw, 3rem);
}
/* Allow room for the longer "& those who understand" line while retaining
   the authored three-line headline and its separate gold TRUTH line. */
.hero--masthead h1 { max-width: none; font-size: clamp(1.8rem, 4.8vw, 4.1rem); }
.hero__aside { padding-bottom: .35rem; }
.hero__aside .hero__copy { margin-top: 0; }
.hero__aside .actions { margin-top: 1.75rem; }

.hero__pair { display: grid; grid-template-columns: 3fr 4fr; gap: clamp(.75rem, 1.2vw, 1.25rem); }
.hero__pair figure { margin: 0; min-width: 0; }
.hero__pair img { width: 100%; height: auto; }
.hero__pair figcaption {
  padding-top: .8rem;
  color: rgba(255, 255, 255, .6);
  font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}

/* Compact head used by pages with no hero photograph. */
.page-head { padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem); background: var(--stone); }
.page-head--dark { color: #fff; background: var(--night); }
.page-head .kicker { color: var(--passion); }
.page-head--dark .kicker { color: var(--gold-2); }
.page-head h1 { font-size: clamp(3rem, 7vw, 6.2rem); }
.page-head h1 em { color: var(--passion); }
.page-head--dark h1 em { color: var(--gold-2); }
.page-head__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2.5rem, 7vw, 7rem); align-items: end; }
.page-head__grid > div:last-child > p:last-child { margin-bottom: 0; color: var(--ink-soft); }
.page-head--dark .page-head__grid > div:last-child > p:last-child { color: rgba(255, 255, 255, .7); }
.page-head--dark .lead { color: #fff; }

/* --------------------------------------------------------- home page ---- */

.welcome-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2.5rem, 8vw, 7rem); align-items: end; }
.welcome-copy > p:not(.lead) { color: var(--ink-soft); }
.welcome-copy .arrow-link { margin-top: 1.4rem; }

/* The argument of the site: why a mill town built this. */
.why { color: #fff; background: var(--night); }
.plate { position: relative; margin: 0; }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate--tall { height: clamp(340px, 58vh, 620px); }
.plate figcaption {
  position: absolute; inset: auto 0 0;
  padding: 5rem var(--gutter) 1.6rem;
  color: rgba(255, 255, 255, .78);
  font-size: .85rem; line-height: 1.6;
  background: linear-gradient(0deg, rgba(7, 12, 10, .92), transparent);
}
.plate figcaption span {
  display: block; margin-bottom: .3rem;
  color: var(--gold-2);
  font-size: .64rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.why__body {
  display: grid; grid-template-columns: .95fr 1.05fr;
  gap: clamp(2.5rem, 7vw, 6rem);
  padding: clamp(4rem, 8vw, 7.5rem) 0;
}
.why__head { align-self: start; position: sticky; top: 8rem; }
.why__columns > p { color: rgba(255, 255, 255, .76); }
.why__columns .lead { color: #fff; }
.why__conclusion {
  margin-top: 2rem; padding-top: 2rem;
  border-top: 1px solid var(--line-light);
  color: #fff !important;
  font-family: var(--display); font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.45;
}

/* Worship belongs to Christ alone. */
.passion { color: #fff; background: var(--slate); }
.passion__grid {
  display: grid; grid-template-columns: .82fr 1.18fr;
  gap: clamp(2.5rem, 8vw, 7rem); align-items: center;
  padding: clamp(4rem, 9vw, 8rem) 0;
}
.arch-frame { position: relative; margin: 0; }
.arch-frame img {
  clip-path: url(#lancet);
  aspect-ratio: 3 / 4.4; width: 100%; height: auto;
  object-fit: cover; object-position: center 30%;
}
.arch-frame::after {
  content: ""; position: absolute; inset: -1.4rem -1.4rem 0;
  z-index: -1;
  border: 1px solid var(--gold-2); opacity: .34;
  clip-path: url(#lancet);
}
.arch-frame--light::after { border-color: var(--passion); opacity: .3; }
.passion__copy > p { color: rgba(255, 255, 255, .78); }
.passion__copy > p:first-of-type { color: #fff; }

.sunday__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.portrait-frame { position: relative; margin: 0; overflow: hidden; background: var(--stone-2); }
.portrait-frame img { aspect-ratio: 4 / 5; width: 100%; height: 100%; object-fit: cover; }
.image-note {
  position: absolute; right: 0; bottom: 0;
  padding: .7rem 1.1rem; color: #fff; background: var(--night);
  font-size: .63rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.sunday__content > p:not(.eyebrow) { max-width: 52ch; margin: 1.75rem 0 2.25rem; color: var(--ink-soft); }
.service-time {
  display: grid; grid-template-columns: auto 1fr; align-items: end;
  margin: 0 0 2.25rem; padding: 1.3rem 0;
  border-block: 1px solid var(--line-strong);
}
.service-time span {
  align-self: center; padding-right: 1.3rem; color: var(--passion);
  font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.service-time strong { font-family: var(--display); font-size: 3.2rem; font-weight: 700; line-height: 1; text-align: right; letter-spacing: -.025em; }
.service-time small { grid-column: 2; color: var(--ink-soft); font-size: .8rem; text-align: right; }

/* Full-bleed photographic banner with copy over it. */
.banner { position: relative; display: flex; align-items: center; min-height: clamp(480px, 78vh, 760px); overflow: hidden; color: #fff; background: var(--night); }
.banner--short { min-height: clamp(400px, 60vh, 600px); }
.banner__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) brightness(.9); }
.banner__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(95deg, rgba(7, 12, 10, .9) 0%, rgba(7, 12, 10, .6) 46%, rgba(7, 12, 10, .1) 80%),
    linear-gradient(0deg, rgba(7, 12, 10, .5), transparent 55%);
}
.banner__content { position: relative; z-index: 1; padding-block: clamp(3rem, 7vw, 6rem); }
.banner__content > p:not(.eyebrow) { max-width: 46ch; margin: 1.75rem 0 0; color: rgba(255, 255, 255, .82); font-size: 1.1rem; }
.banner__content .button { margin-top: 2.25rem; }

.community__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2.5rem, 8vw, 7rem); }
.community__aside { margin-top: 2rem; color: var(--ink-soft); }
.community__list article {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem;
  padding: 2rem 0; border-top: 1px solid var(--line);
}
.community__list article:last-child { border-bottom: 1px solid var(--line); }
.community__list article > span { color: var(--passion); font-size: .68rem; font-weight: 600; letter-spacing: .1em; }
.community__list h3 { margin: 0 0 .5rem; font-family: var(--display); font-size: 1.6rem; font-weight: 600; letter-spacing: -.015em; }
.community__list p { margin: 0; color: var(--ink-soft); }

.renewal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 8vw, 7rem); align-items: center; }
.renewal__image { position: relative; margin: 0; padding: 0 0 2.5rem 2.5rem; }
.renewal__image::before { content: ""; position: absolute; inset: 2.5rem 2.5rem 0 0; background: var(--stone-2); }
.renewal__image img { position: relative; aspect-ratio: 4 / 5; width: 100%; height: auto; object-fit: cover; object-position: center 78%; }
.renewal__grid > div:last-child > p:not(.eyebrow):not(.lead) { color: var(--ink-soft); }
.renewal__grid .arrow-link { margin-top: 1.4rem; }

.gallery-preview .section-heading--split { align-items: center; }
/* Scrollable rather than clipped, so the photographs past the right edge can
   actually be reached by dragging, swiping or shift-scrolling. */
.ribbon {
  display: flex; gap: 1.1rem;
  padding-inline: var(--gutter); padding-bottom: 1rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: thin;
  scrollbar-color: rgba(23, 28, 25, .35) transparent;
}
.ribbon figure { flex: none; width: clamp(230px, 24vw, 360px); margin: 0; scroll-snap-align: center; }
.ribbon figure:nth-child(even) { margin-top: 3rem; }
.ribbon img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; }
.ribbon figcaption { padding-top: .8rem; font-family: var(--display); font-size: 1rem; font-weight: 600; letter-spacing: -.012em; }

.invitation {
  padding: clamp(5rem, 11vw, 10rem) 0;
  color: #fff; text-align: center;
  background:
    linear-gradient(rgba(9, 14, 12, .9), rgba(9, 14, 12, .93)),
    url('../images/church/medium/img-0561.webp') center / cover;
  /* The shorthand above resets background-color to transparent. Without this the
     section falls back to the paper page ground if the photograph fails to load,
     and the white text becomes invisible. */
  background-color: var(--night);
}
.invitation__inner .house-mark { width: 2.4rem; margin: 0 auto 2.5rem; color: #fff; }
.invitation .actions { margin-top: 3rem; }

/* A single band of signal red: the one place on the site where the colour is
   the whole statement rather than an accent. */
.creed { padding: clamp(3.25rem, 7vw, 5.5rem) 0; color: #fff; background: var(--passion); }
.creed__inner { display: grid; justify-items: center; text-align: center; }
.creed .house-mark { width: clamp(2.4rem, 4vw, 3.2rem); margin-bottom: 1.75rem; color: #fff; }
.creed__line {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: .35rem 1.1rem; margin: 0;
  font-family: var(--display); font-size: clamp(1.55rem, 3.6vw, 3rem);
  font-weight: 700; letter-spacing: -.025em; line-height: 1.12;
}
.creed__term { display: inline-flex; align-items: baseline; gap: .8rem; white-space: nowrap; }
.creed__line strong { font-weight: 700; letter-spacing: .01em; text-transform: uppercase; }
.creed__line em { font-style: italic; font-weight: 500; opacity: .82; }
.creed__line .bar { font-weight: 400; opacity: .45; }
/* The separator belongs to the definition, so a wrap never leaves a bar
   dangling at the end of the line. */
.creed__def::before { content: "|"; margin-right: 1.1rem; font-weight: 400; opacity: .45; }

/* ------------------------------------------------------ building page --- */

.building-intro__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2.5rem, 8vw, 7rem); align-items: start; }
.building-intro__grid > div:last-child > p:not(.lead) { color: var(--ink-soft); }

.fact-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 2.5rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--line-strong); list-style: none; }
.fact-row li { display: grid; gap: .25rem; }
.fact-row strong { font-family: var(--display); font-size: 1.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.fact-row span { color: var(--ink-soft); font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

.chapter--dark { padding: clamp(4.5rem, 9vw, 8.5rem) 0; color: #fff; background: var(--night); }
.chapter--unseen { background: var(--slate); }
.chapter__head { display: grid; grid-template-columns: 6rem 1fr; gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.chapter__number {
  margin: 0; padding-top: .3rem;
  color: var(--passion);
  font-family: var(--display); font-size: 2.4rem; font-weight: 700; line-height: 1;
}
.chapter--dark .chapter__number { color: var(--gold-2); }
.chapter__body { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.chapter__text { max-width: 62ch; }
.chapter__text--wide { max-width: 78ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.chapter__text > p { color: var(--ink-soft); }
.chapter--dark .chapter__text > p { color: rgba(255, 255, 255, .76); }
.chapter__text > .lead { color: var(--ink); }
.chapter--dark .chapter__text > .lead { color: #fff; }
.chapter__punchline {
  margin-top: 2rem; padding-top: 1.75rem;
  border-top: 1px solid var(--line-light);
  color: #fff !important;
  font-family: var(--display); font-size: clamp(1.3rem, 2.1vw, 1.8rem); font-style: italic; line-height: 1.4;
}

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.pair--wide { margin-top: clamp(2rem, 4vw, 3rem); }
.pair figure, .trio figure { margin: 0; }
.pair img { aspect-ratio: 3 / 2; width: 100%; height: auto; object-fit: cover; }
.pair figcaption, .trio figcaption { padding-top: .85rem; color: var(--ink-soft); font-size: .86rem; line-height: 1.6; }
.chapter--dark .pair figcaption, .trio--dark figcaption { color: rgba(255, 255, 255, .68); }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.trio img { aspect-ratio: 4 / 5; width: 100%; height: auto; object-fit: cover; }
.trio figcaption span {
  display: block; margin-bottom: .35rem;
  color: var(--passion);
  font-size: .64rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.trio--dark figcaption span { color: var(--gold-2); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 7vw, 6rem); align-items: center; }
.split--reverse .split__image, .split--reverse figure { order: 2; }
.split__image { margin: 0; }
.split__image img { aspect-ratio: 3 / 2; width: 100%; height: auto; object-fit: cover; }
.split__image figcaption { padding-top: .85rem; color: var(--ink-soft); font-size: .86rem; }
.split__text > p:not(.lead) { color: var(--ink-soft); }

/* --------------------------------------------------------- story page --- */

.story-intro__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2.5rem, 8vw, 7rem); align-items: start; }
.story-intro__grid > div:last-child > p:not(.lead) { color: var(--ink-soft); }

.timeline-section { padding: clamp(4.5rem, 9vw, 8.5rem) 0; color: #fff; background: var(--night); }
.timeline { margin-top: 3rem; border-top: 1px solid var(--line-light); }
.timeline article {
  display: grid; grid-template-columns: 9rem 1fr; gap: clamp(1.5rem, 5vw, 4rem);
  padding: 2.75rem 0; border-bottom: 1px solid var(--line-light);
}
.timeline time { color: var(--gold-2); font-family: var(--display); font-size: clamp(2.1rem, 3.2vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -.025em; }
.timeline h2 { margin: 0 0 .6rem; font-family: var(--display); font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; }
.timeline p { max-width: 68ch; margin: 0; color: rgba(255, 255, 255, .7); }

.inheritance .trio figcaption { max-width: 42ch; }
.living-story__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 8vw, 7rem); align-items: start; }
.living-story__grid > div:last-child > p:not(.lead) { color: var(--ink-soft); }

.sources-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2.5rem, 7vw, 6rem); align-items: start; }
.sources-note { margin-top: 1.5rem; color: var(--ink-soft); font-size: .92rem; }
.sources-grid ul { margin: 0; padding: 0; border-top: 1px solid var(--line-strong); list-style: none; }
.sources-grid li { border-bottom: 1px solid var(--line); }
.sources-grid a {
  display: grid; grid-template-columns: 11rem 1fr auto; gap: 1rem;
  padding: 1.35rem 0; text-decoration: none;
  transition: color .2s var(--ease);
}
.sources-grid a:hover { color: var(--passion); }
.sources-grid a span { color: var(--passion); font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sources-grid a em { font-style: normal; }

/* --------------------------------------------------------- visit page --- */

.visit-grid { display: grid; grid-template-columns: 1fr .7fr; gap: clamp(2.5rem, 8vw, 7rem); align-items: start; }
.visit-grid > div > p:not(.eyebrow):not(.lead) { color: var(--ink-soft); }
.visit-schedule { align-self: start; padding: 1.9rem; border-top: 3px solid var(--passion); background: var(--stone); }
.schedule-item { display: grid; grid-template-columns: 1fr auto; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.schedule-item span { color: var(--passion); font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.schedule-item strong { grid-row: span 2; font-family: var(--display); font-size: 2.3rem; font-weight: 700; line-height: 1; letter-spacing: -.025em; }
.schedule-item p { margin: .3rem 0 0; color: var(--ink-soft); font-size: .92rem; }
.visit-schedule > a { display: inline-block; margin-top: 1.5rem; font-size: .78rem; font-weight: 600; }

.expect-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line-strong); }
.expect-grid article { padding: 2.25rem 2rem 2.25rem 0; }
.expect-grid article + article { padding-left: 2rem; border-left: 1px solid var(--line); }
.expect-grid span { color: var(--passion); font-size: .68rem; font-weight: 600; letter-spacing: .1em; }
.expect-grid h3 { margin: 2.5rem 0 .7rem; font-family: var(--display); font-size: 1.6rem; font-weight: 600; letter-spacing: -.015em; }
.expect-grid p { margin: 0; color: var(--ink-soft); }

.access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 8vw, 7rem); align-items: center; }
.access-image { position: relative; margin: 0; }
.access-image::after { content: ""; position: absolute; inset: 1.4rem -1.4rem -1.4rem 1.4rem; z-index: -1; border: 1px solid var(--gold); opacity: .5; }
.access-image img { aspect-ratio: 4 / 5; width: 100%; height: auto; object-fit: cover; }
.access-grid > div:last-child > p:not(.eyebrow) { color: var(--ink-soft); }
.access-list { display: grid; gap: .85rem; margin: 1.9rem 0; padding: 0; list-style: none; }
.access-list li { display: grid; grid-template-columns: 1.4rem 1fr; }
.access-list span { color: var(--passion); font-weight: 700; }

.location-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2.5rem, 8vw, 7rem); align-items: center; }
.location-grid address { margin: 2rem 0 1.25rem; font-style: normal; font-size: 1.05rem; }
.location-grid address strong { font-family: var(--display); font-size: 1.55rem; font-weight: 600; letter-spacing: -.015em; }
.location-grid > div > p { color: var(--ink-soft); }
.map-card {
  position: relative; min-height: 460px; overflow: hidden;
  border: 1px solid var(--line);
  background-color: #d9ded6;
  background-image:
    linear-gradient(30deg, rgba(255, 255, 255, .3) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, .3) 87.5%),
    linear-gradient(150deg, rgba(255, 255, 255, .3) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, .3) 87.5%);
  background-size: 80px 140px;
}
.map-road { position: absolute; display: block; background: var(--paper); box-shadow: 0 0 0 1px rgba(23, 28, 25, .1); }
.map-road--one { inset: 42% -10% auto; height: 2rem; transform: rotate(-14deg); }
.map-road--two { top: -10%; left: 30%; width: 1.4rem; height: 120%; transform: rotate(22deg); }
.map-road--three { top: 66%; left: -10%; width: 120%; height: 1rem; transform: rotate(8deg); }
.map-pin {
  position: absolute; z-index: 1; top: 47%; left: 55%;
  display: grid; justify-items: center;
  padding: 1.4rem 1.6rem; background: var(--paper); box-shadow: var(--shadow);
  transform: translate(-50%, -50%);
}
.map-pin .house-mark { width: 2rem; margin-bottom: .7rem; color: var(--passion); }
.map-pin strong { font-family: var(--display); font-size: 1.3rem; font-weight: 600; letter-spacing: -.015em; }
.map-pin small { color: var(--ink-soft); font-size: .74rem; }

/* ------------------------------------------------------- gallery -------- */

.gallery-toolbar { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.25rem; }
.filter-button {
  padding: .6rem 1.05rem;
  border: 1px solid var(--line-strong); background: transparent;
  font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.filter-button span { margin-left: .45rem; color: var(--ink-soft); }
.filter-button:hover { border-color: var(--ink); }
.filter-button.is-active { color: #fff; border-color: var(--night); background: var(--night); }
.filter-button.is-active span { color: var(--gold-2); }
.gallery-status { margin: 0 0 2.5rem; color: var(--ink-soft); font-size: .82rem; }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.5rem 1.25rem; }
.photo-card { margin: 0; }
.photo-card[hidden] { display: none; }
.photo-card button {
  position: relative; display: block; width: 100%; padding: 0;
  overflow: hidden; border: 0; background: var(--stone-2); cursor: zoom-in;
}
.photo-card img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; transition: transform .7s var(--ease), filter .35s var(--ease); }
.photo-card button:hover img, .photo-card button:focus-visible img { filter: brightness(.76); transform: scale(1.04); }
.photo-card__open {
  position: absolute; right: .9rem; bottom: .9rem;
  padding: .45rem .8rem; color: var(--night); background: var(--gold-2);
  font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  opacity: 0; transform: translateY(.4rem);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.photo-card button:hover .photo-card__open, .photo-card button:focus-visible .photo-card__open { opacity: 1; transform: none; }
.photo-card figcaption { padding-top: .75rem; }
.photo-card figcaption strong { display: block; font-family: var(--display); font-size: 1.1rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.3; }
.photo-card figcaption span { display: block; margin-top: .3rem; color: var(--ink-soft); font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

.lightbox {
  width: 100vw; max-width: none; height: 100svh; max-height: none;
  margin: 0; padding: 1.4rem;
  border: 0; color: #fff; background: rgba(6, 10, 9, .985);
}
.lightbox::backdrop { background: rgba(6, 10, 9, .95); }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; }
.lightbox__bar p { margin: 0; color: rgba(255, 255, 255, .6); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.lightbox__bar button { border: 0; color: #fff; background: none; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.lightbox__bar button span { margin-left: .5rem; font-size: 1.5rem; font-weight: 300; vertical-align: -.15em; }
.lightbox__stage { min-height: 0; display: grid; grid-template-columns: 3.2rem 1fr 3.2rem; place-items: center; gap: 1rem; }
.lightbox__stage img { max-width: min(1200px, 84vw); max-height: 70svh; width: auto; height: auto; object-fit: contain; }
.lightbox__nav {
  width: 3.2rem; height: 3.2rem;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%;
  color: #fff; background: transparent;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.lightbox__nav:hover { color: var(--night); border-color: var(--gold-2); background: var(--gold-2); }
.lightbox__caption { text-align: center; }
.lightbox__caption .eyebrow { margin-bottom: .25rem; }
.lightbox__caption h2 { margin: 0; font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 600; letter-spacing: -.02em; }
.lightbox__hint { margin: .5rem 0 0; color: rgba(255, 255, 255, .45); font-size: .72rem; }

/* -------------------------------------------------- contact and forms --- */

.contact-grid { display: grid; grid-template-columns: 1.15fr .7fr; gap: clamp(2.5rem, 8vw, 7rem); align-items: start; }
.contact-form { display: grid; gap: 1.4rem; margin-top: 2.5rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.field { display: grid; gap: .45rem; }
.field label { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.field input, .field select, .field textarea {
  width: 100%; padding: .9rem .1rem;
  border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  background: transparent; font-size: 1rem; color: inherit;
}
.field select { padding-right: 2rem; }
.field textarea { min-height: 11rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--passion); box-shadow: 0 1px 0 var(--passion);
}
.field small { color: var(--ink-soft); }
.field > span, .check-field > span, .validation-summary, .text-danger { color: #9c2033; font-size: .84rem; }
.validation-summary:empty { display: none; }
.validation-summary ul { margin: 0; padding-left: 1.2rem; }
.check-field { display: grid; grid-template-columns: 1.3rem 1fr; gap: .75rem; align-items: start; }
.check-field input { width: 1.15rem; height: 1.15rem; margin-top: .3rem; accent-color: var(--green); }
.check-field span { grid-column: 2; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .button { justify-self: start; }

.contact-aside { background: var(--stone); }
.contact-aside > img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; }
.contact-aside__address { padding: 2rem; }
.contact-aside address { margin: 0 0 .9rem; font-style: normal; }
.contact-aside address strong { font-family: var(--display); font-size: 1.4rem; font-weight: 600; letter-spacing: -.015em; }
.contact-aside__time { margin: 0 0 1.25rem; color: var(--ink-soft); font-size: .92rem; }
.contact-note { padding: 1.75rem 2rem; color: rgba(255, 255, 255, .82); background: var(--night); }
.contact-note strong { display: block; margin-bottom: .5rem; color: #fff; font-family: var(--display); font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; }
.contact-note p { margin: 0; font-size: .9rem; }
.contact-note a { color: var(--gold-2); }

.form-success {
  display: grid; grid-template-columns: auto 1fr; gap: 1.5rem;
  padding: 2.25rem; border-top: 3px solid var(--green); background: var(--stone);
}
.form-success > span { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 50%; color: #fff; background: var(--green); }
.form-success h2 { margin: 0 0 .6rem; font-family: var(--display); font-size: 1.85rem; font-weight: 700; letter-spacing: -.02em; }
.form-success p { color: var(--ink-soft); }
.form-success .arrow-link { margin-top: .5rem; }

/* ------------------------------------------------- error & not found ---- */

.error-reference { margin-top: 1.4rem; color: rgba(255, 255, 255, .55); font-size: .8rem; }
.error-reference code { font-size: .78rem; word-break: break-all; }
.error-routes .eyebrow { margin-bottom: 1.6rem; }
.error-links {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 6vw, 5rem);
  margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--line-strong);
}
.error-links li { border-bottom: 1px solid var(--line); }
.error-links a { display: grid; gap: .2rem; padding: 1.15rem 0; text-decoration: none; }
.error-links strong { font-family: var(--display); font-size: 1.35rem; font-weight: 600; letter-spacing: -.015em; }
.error-links span { color: var(--ink-soft); font-size: .92rem; }
.error-links a:hover strong { color: var(--passion); }

/* --------------------------------------------------- privacy, accounts -- */

.legal-grid { display: grid; grid-template-columns: .28fr 1fr; gap: clamp(2.5rem, 8vw, 7rem); }
.legal-grid aside nav { position: sticky; top: 8rem; display: grid; border-top: 1px solid var(--line-strong); }
.legal-grid aside a {
  padding: .8rem 0; border-bottom: 1px solid var(--line);
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-decoration: none; text-transform: uppercase;
}
.legal-grid aside a:hover { color: var(--passion); }
.legal-grid article { max-width: 74ch; }
.legal-grid article section { margin-bottom: 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line); scroll-margin-top: 8rem; }
.legal-grid article section:last-child { border-bottom: 0; }
.legal-grid h2 { font-family: var(--display); font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 700; letter-spacing: -.025em; }
.legal-grid p { color: var(--ink-soft); }
.data-table { margin: 2rem 0; border-top: 1px solid var(--line-strong); }
.data-table div { display: grid; grid-template-columns: .55fr 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.data-table strong { font-family: var(--sans); font-size: .88rem; font-weight: 600; }
.data-table span { color: var(--ink-soft); font-size: .9rem; }
.legal-updated { font-size: .8rem; font-weight: 600; }

.account-shell { min-height: 70vh; display: grid; place-items: center; }
.account-card { width: min(620px, calc(100vw - 3rem)); padding: clamp(2rem, 5vw, 3.5rem); background: var(--paper); box-shadow: var(--shadow); }
.account-card h1 { font-family: var(--display); font-size: 2.4rem; font-weight: 700; letter-spacing: -.025em; }
.compact-form .field small { color: var(--ink-soft); }

.identity-page { min-height: 70vh; background: var(--stone); }
.identity-frame { max-width: 1000px; padding: clamp(2rem, 5vw, 3.5rem); background: var(--paper); box-shadow: var(--shadow); }
.identity-frame h1, .identity-frame h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.025em; }
.identity-frame > h1 { margin-bottom: 2rem; font-size: clamp(2.4rem, 5vw, 3.8rem); }
.identity-frame h2 { font-size: 1.8rem; }
.identity-frame .row { row-gap: 2rem; }
.identity-frame .form-control, .identity-frame .form-select { border-radius: 0; }
.identity-frame .form-control:focus { border-color: var(--passion); box-shadow: 0 0 0 .2rem rgba(123, 36, 48, .12); }
.identity-frame .btn-primary { border-color: var(--night); border-radius: 0; background: var(--night); }
.identity-frame .btn-primary:hover { color: var(--night); border-color: var(--gold-2); background: var(--gold-2); }
.identity-frame .nav-pills .nav-link { border-radius: 0; color: var(--ink); }
.identity-frame .nav-pills .nav-link.active { background: var(--night); }

/* The packaged Identity UI tells visitors, on a public sign-in page, that "there
   are no external authentication services configured" and links them to an MSDN
   article about setting up ASP.NET. That is developer scaffolding, not content.
   Matching on that link hides the block only while it is in its unconfigured
   state — wire up a real provider and the section reappears by itself. */
.identity-frame section:has(a[href*="LinkID=532715"]) { display: none; }


/* ------------------------------------------------------- dashboard ------ */

.admin-page { background: #edefec; }
.dashboard-header { padding: clamp(4rem, 7vw, 6rem) 0 3rem; color: #fff; background: var(--night); }
.dashboard-header__inner { display: flex; align-items: end; justify-content: space-between; gap: 3rem; }
.dashboard-header h1 { max-width: 20ch; margin: 0; font-family: var(--display); font-size: clamp(2.3rem, 4.2vw, 3.8rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.02; }
.dashboard-header .eyebrow { color: var(--gold-2); }
.dashboard-header__inner > div:first-child > p:last-child { color: rgba(255, 255, 255, .66); }
.dashboard-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .7rem; }
.dashboard-actions > span { width: 100%; color: rgba(255, 255, 255, .5); font-size: .72rem; text-align: right; }
.dashboard-header .button--outline { color: #fff; border-color: rgba(255, 255, 255, .45); }
.dashboard-header .button--outline:hover { color: var(--night); border-color: #fff; background: #fff; }
.dashboard-main { padding-top: 3rem; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: -5rem; margin-bottom: 1rem; }
.stat-grid article { display: grid; min-height: 172px; padding: 1.5rem; border-top: 3px solid var(--gold); background: var(--paper); box-shadow: var(--shadow-soft); }
.stat-grid span { font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
/* Cormorant defaults to old-style figures, which are lovely for a date like
   1866 but make a lone "1" read as a capital I. Numbers that have to be read
   accurately get lining, tabular figures instead. */
.stat-grid strong, .metric-list strong, .dashboard-table, .bar-chart {
  font-variant-numeric: lining-nums tabular-nums;
}
.stat-grid strong { align-self: end; font-family: var(--display); font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -.025em; }
.stat-grid small { color: var(--ink-soft); font-size: .78rem; }
.stat-grid .stat-card--alert { border-color: var(--passion); }

.dashboard-grid { display: grid; gap: 1rem; margin-bottom: 1rem; }
.dashboard-grid--primary { grid-template-columns: 1.5fr .7fr; }
.dashboard-grid--thirds { grid-template-columns: repeat(3, 1fr); }
.dashboard-grid--halves { grid-template-columns: 1fr 1fr; }
.dashboard-card { padding: 1.6rem; background: var(--paper); }
.card-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1.7rem; }
.card-heading .eyebrow { margin-bottom: .3rem; }
.card-heading h2 { margin: 0; font-family: var(--display); font-size: 1.6rem; font-weight: 600; letter-spacing: -.015em; }
.card-heading > span, .card-heading > a { color: var(--ink-soft); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

.bar-chart {
  height: 260px; display: grid; grid-template-columns: repeat(14, 1fr); gap: .45rem;
  align-items: end; padding-top: 1.5rem; border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(to top, transparent 0, transparent 63px, rgba(23, 28, 25, .07) 64px);
}
.bar-chart__day { height: 100%; display: grid; grid-template-rows: 1fr auto; align-items: end; text-align: center; }
.bar-chart__bar { position: relative; display: block; width: 100%; height: var(--bar-height); min-height: 3px; background: var(--green); transition: background .2s var(--ease); }
.bar-chart__bar:hover { background: var(--passion); }
.bar-chart__bar i { position: absolute; top: -.25rem; left: 50%; font-size: .62rem; font-style: normal; font-weight: 700; opacity: 0; transform: translate(-50%, -100%); }
.bar-chart__bar:hover i { opacity: 1; }
.bar-chart small { padding-top: .5rem; color: var(--ink-soft); font-size: .6rem; }

.metric-list { margin: 0; padding: 0; list-style: none; counter-reset: top-pages; }
.metric-list li { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); counter-increment: top-pages; }
.metric-list:not(.metric-list--plain) li:not(.empty-state)::before { content: "0" counter(top-pages); grid-row: 1; color: var(--passion); font-size: .62rem; font-weight: 700; }
.metric-list:not(.metric-list--plain) li span { grid-column: 1; }
.metric-list:not(.metric-list--plain) li strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.metric-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dashboard-card--privacy { color: #fff; background: var(--green); }
.dashboard-card--privacy .eyebrow { color: var(--gold-2); }
.dashboard-card--privacy h2 { font-family: var(--display); font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; }
.dashboard-card--privacy ul { padding-left: 1.2rem; color: rgba(255, 255, 255, .74); }
.dashboard-card--privacy a { color: var(--gold-2); font-weight: 600; }

.dashboard-table-card { margin-bottom: 1rem; }
.table-responsive { overflow-x: auto; }
.dashboard-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.dashboard-table th { padding: .7rem; border-bottom: 1px solid var(--ink); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-align: left; text-transform: uppercase; }
.dashboard-table td { min-width: 100px; padding: 1rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.dashboard-table td:nth-child(4) { min-width: 340px; }
.dashboard-table tr.is-unread td { background: rgba(168, 121, 42, .1); }
.dashboard-table td > strong, .dashboard-table td > small, .dashboard-table td > a { display: block; }
.dashboard-table td > p { max-width: 580px; margin: .25rem 0 0; color: var(--ink-soft); white-space: pre-line; }
.status-pill { display: inline-block; padding: .25rem .55rem; border: 1px solid var(--line-strong); border-radius: 2rem; font-size: .6rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.is-unread .status-pill { color: #fff; border-color: var(--passion); background: var(--passion); }
.empty-state { color: var(--ink-soft); font-style: italic; }

/* ------------------------------------------------ footer and consent ---- */

.site-footer { padding-top: clamp(3.5rem, 7vw, 5.5rem); color: rgba(255, 255, 255, .7); background: var(--night); }
.footer-grid { display: grid; grid-template-columns: 1.35fr repeat(3, .6fr); gap: clamp(2rem, 5vw, 3.5rem); }
.footer-intro .house-mark { width: 2rem; margin-bottom: 1.75rem; color: #fff; }
.footer-intro h2 { margin: 0; color: #fff; font-family: var(--display); font-size: clamp(1.8rem, 2.8vw, 2.4rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.footer-intro h2 em { font-style: italic; color: var(--gold-2); }
.footer-note { max-width: 42ch; margin-top: 1.5rem; font-size: .84rem; line-height: 1.65; color: rgba(255, 255, 255, .55); }
.site-footer h3 { margin: 0 0 1.3rem; color: #fff; font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.site-footer address { margin: 0 0 1rem; font-style: normal; font-size: .95rem; line-height: 1.75; }
.footer-time { margin: 0; color: var(--gold-2); font-size: .88rem; font-weight: 500; }
.footer-links { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; font-size: .95rem; }
.footer-links a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.footer-links a:hover { color: var(--gold-2); }
.footer-base {
  display: flex; justify-content: space-between; gap: 2rem;
  margin-top: clamp(3rem, 6vw, 4.5rem); padding: 1.3rem 0;
  border-top: 1px solid rgba(255, 255, 255, .12); font-size: .74rem;
}
.footer-base p { margin: 0; }
.footer-credit { text-align: right; }
.footer-credit a { color: var(--gold-2); }

.consent-banner {
  position: fixed; z-index: 1500; right: 1rem; bottom: 1rem;
  width: min(740px, calc(100vw - 2rem));
  display: grid; grid-template-columns: 1fr auto; gap: 2rem;
  padding: 1.6rem; border-top: 3px solid var(--gold-2);
  background: var(--paper); box-shadow: 0 24px 80px rgba(0, 0, 0, .3);
}
.consent-banner[hidden] { display: none; }
.consent-banner .eyebrow { margin-bottom: .35rem; }
.consent-banner h2 { margin: 0; font-family: var(--display); font-size: 1.6rem; font-weight: 600; letter-spacing: -.015em; }
.consent-banner p:last-child { margin: .5rem 0 0; color: var(--ink-soft); font-size: .88rem; }
.consent-actions { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: .75rem; text-align: center; }
.consent-actions > a { font-size: .72rem; }

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

@media (max-width: 1199.98px) {
  .navbar .nav-link { padding: .7rem .55rem !important; letter-spacing: .06em; }
}

@media (max-width: 780px) {
  .service-ribbon a { display: none; }
  .service-ribbon__inner { justify-content: center; }
  .slogan { gap: .45rem; }
  /* Stacked on a narrow screen, so drop the separator entirely. */
  .creed__def::before { display: none; }
}

@media (max-width: 991.98px) {
  :root { --shell: min(100% - 2rem, 780px); --gutter: max(1rem, calc((100vw - 780px) / 2)); }

  .navbar { min-height: 4.4rem; }
  .navbar-collapse { padding: 1rem 0 1.5rem; border-top: 1px solid var(--line); }
  .navbar-nav { align-items: stretch !important; }
  .navbar .nav-link { padding: .7rem 0 !important; }
  .account-nav { margin: .7rem 0 0; padding: .7rem 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .navbar .account-link, .navbar .admin-link { padding-inline: .9rem !important; }

  .hero { min-height: 660px; }
  .hero--tall { min-height: 600px; }
  .hero__content { padding: 4.5rem 0 11.5rem; }
  .hero__veil { background: linear-gradient(100deg, rgba(7, 12, 10, .9), rgba(7, 12, 10, .5)), linear-gradient(0deg, rgba(7, 12, 10, .85), transparent 55%); }
  .hero__masthead { grid-template-columns: 1fr; align-items: start; gap: 1.75rem; }
  .hero__aside { padding-bottom: 0; }
  .hero__ledger-grid { grid-template-columns: 1fr 1fr; }
  .hero__ledger-grid > div { padding: .9rem 1rem .9rem 0; }
  .hero__ledger-grid > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .hero__ledger-grid > div:nth-child(even) { padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, .16); }
  .hero__ledger-grid > div:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .16); }
  .hero__ledger strong { font-size: 1.25rem; }

  .welcome-grid, .why__body, .passion__grid, .sunday__grid, .community__grid, .renewal__grid,
  .building-intro__grid, .story-intro__grid, .living-story__grid, .visit-grid, .access-grid,
  .location-grid, .contact-grid, .legal-grid, .sources-grid, .split, .page-head__grid,
  .section-heading--split { grid-template-columns: 1fr; }
  .why__head { position: static; }
  .split--reverse .split__image, .split--reverse figure { order: 0; }
  .pair, .trio { grid-template-columns: 1fr 1fr; }
  .trio figure:last-child { grid-column: span 2; }
  .trio figure:last-child img { aspect-ratio: 16 / 9; }
  .fact-row { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .chapter__head { grid-template-columns: 1fr; gap: .5rem; }
  .chapter__number { padding-top: 0; }
  .arch-frame img { aspect-ratio: 3 / 3.6; }
  .expect-grid { grid-template-columns: 1fr; }
  .expect-grid article { padding: 1.9rem 0; }
  .expect-grid article + article { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .expect-grid h3 { margin-top: 1.25rem; }
  .legal-grid aside { display: none; }
  .sources-grid a { grid-template-columns: 1fr auto; }
  .sources-grid a span { grid-column: 1 / -1; }
  .renewal__image { padding: 0 0 1.75rem 1.75rem; }
  .access-image::after { inset: 1rem -1rem -1rem 1rem; }

  .dashboard-header__inner { display: grid; }
  .dashboard-actions { justify-content: flex-start; }
  .dashboard-actions > span { text-align: left; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-grid--primary, .dashboard-grid--thirds, .dashboard-grid--halves { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-intro { grid-column: span 2; }
}

@media (max-width: 640px) {
  :root { --shell: calc(100vw - 2rem); --gutter: 1rem; }
  /* Decorative frames must not reach past the edge of a phone screen. */
  .arch-frame::after { inset: -.75rem 0 0; }
  .access-image::after { inset: .75rem 0 -.75rem .75rem; }
  .renewal__image { padding: 0 0 1.25rem 1.25rem; }
  .renewal__image::before { inset: 1.25rem 1.25rem 0 0; }
  body { font-size: 1rem; }
  .section { padding: 3.75rem 0; }

  .brand-words strong { font-size: 1.35rem; }

  .hero { min-height: 620px; align-items: flex-end; }
  .hero--tall { min-height: 560px; }
  .hero__content { padding: 3.5rem 0 11rem; }
  .hero h1, .page-head h1 { font-size: clamp(2.6rem, 11.5vw, 4.2rem); }
  /* The masthead headline is longer than the others, so it is set smaller here
     to keep its three-line break rather than orphaning a word on a fourth. */
  .hero--masthead h1 { font-size: clamp(1.55rem, 7.8vw, 2.75rem); }
  .hero__copy { font-size: 1.1rem; }

  /* Side by side, two photographs on a phone are too small to read. */
  .hero__pair { grid-template-columns: 1fr; gap: 1rem; }
  .pair, .trio { grid-template-columns: 1fr; }
  .trio figure:last-child { grid-column: auto; }
  .trio figure:last-child img { aspect-ratio: 4 / 5; }
  .fact-row { grid-template-columns: 1fr 1fr; }

  .timeline article { grid-template-columns: 1fr; gap: .75rem; }
  .service-time strong { font-size: 2.8rem; }
  .photo-grid { grid-template-columns: 1fr; }
  .photo-card figcaption { flex-direction: column; gap: .1rem; }
  .photo-card figcaption span { padding-top: 0; }

  .lightbox { padding: .8rem; }
  .lightbox__stage { grid-template-columns: 1fr 1fr; align-content: center; }
  .lightbox__stage img { grid-column: 1 / -1; grid-row: 1; max-width: 96vw; max-height: 62svh; }
  .lightbox__nav { grid-row: 2; }
  .lightbox__nav--previous { justify-self: end; }
  .lightbox__nav--next { justify-self: start; }

  .error-links { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .form-success { grid-template-columns: 1fr; gap: 1rem; padding: 1.75rem; }
  .data-table div { grid-template-columns: 1fr; gap: .2rem; }
  .map-card { min-height: 340px; }

  .stat-grid article { min-height: 140px; padding: 1.1rem; }
  .stat-grid strong { font-size: 2.6rem; }
  .bar-chart { gap: .2rem; }
  .bar-chart small { font-size: .5rem; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-intro { grid-column: auto; }
  .footer-base { display: grid; }
  .footer-credit { text-align: left; }
  /* Compact on a phone: at full size this covers most of the hero, which is a
     poor first impression for the one screen most visitors will ever see. */
  .consent-banner {
    grid-template-columns: 1fr; gap: .9rem;
    right: .5rem; bottom: .5rem; width: calc(100vw - 1rem);
    padding: 1.1rem 1.1rem 1rem;
  }
  .consent-banner h2 { font-size: 1.3rem; }
  .consent-banner p:last-child { margin-top: .35rem; font-size: .8rem; line-height: 1.55; }
  .consent-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; }
  .consent-actions .button { flex: 1 1 auto; min-height: 2.9rem; padding-inline: 1rem; }
  .consent-actions > a { flex: 1 0 100%; }
}

/* -------------------------------------------------------- preferences --- */

@media (max-width: 380px) {
  /* The full line measures about 307px; below this there is no longer room
     for it beside the term, so the definition is dropped rather than clipped. */
  .slogan .def { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__image { animation: none; transform: none; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .consent-banner, .button, .gallery-toolbar,
  .hero__ledger, .lightbox, .skip-link, .map-card { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .section, .chapter--dark, .why__body, .creed, .timeline-section { padding: 1.5rem 0; }

  /* Every light-on-dark section has to invert wholesale, including its children:
     printers do not paint backgrounds, so anything left white disappears. */
  .hero, .hero *, .banner, .banner *, .why, .why *, .passion, .passion *,
  .chapter--dark, .chapter--dark *, .timeline-section, .timeline-section *,
  .page-head--dark, .page-head--dark *, .invitation, .invitation *,
  .creed, .creed *, .contact-note, .contact-note *, .plate figcaption,
  .image-note, .dashboard-header, .dashboard-header * {
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .creed { border-block: 2px solid #000; }
  .house-mark { color: #000 !important; }
  .hero__veil, .banner__veil { display: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  a { text-decoration: underline; }
}

/* The hosted example links back to its portfolio without changing the church masthead. */
.demo-notice { background: #f4f1eb; color: #151715; font-size: .75rem; }
.demo-notice .shell { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem 1.5rem; padding-block: .6rem; }
.demo-notice a { color: inherit; font-weight: 700; text-underline-offset: .2em; }
@media print { .demo-notice { display: none; } }