/* ==========================================================================
   Hemphill Free Methodist Church
   ========================================================================== */

:root {
  --ink:          #0e1725;
  --navy:         #16273f;
  --navy-2:       #1f3757;
  --navy-soft:    #2b4a72;
  --brass:        #b08542;
  --brass-light:  #d7b077;
  --brass-pale:   #f0e4d0;
  --cream:        #f8f5ef;
  --cream-2:      #f1ece2;
  --paper:        #ffffff;
  --line:         #e2dbcf;
  --line-soft:    #ece6db;
  --text:         #29313f;
  --muted:        #5e6879;

  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --wrap:    1180px;
  --gutter:  24px;
  --radius:  4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(14, 23, 37, .06), 0 2px 8px rgba(14, 23, 37, .05);
  --shadow-md: 0 2px 6px rgba(14, 23, 37, .07), 0 12px 32px rgba(14, 23, 37, .09);
  --shadow-lg: 0 4px 12px rgba(14, 23, 37, .09), 0 24px 60px rgba(14, 23, 37, .14);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 .55em;
  font-weight: 600;
  letter-spacing: -.008em;
}

h1 { font-size: clamp(2.15rem, 1.5rem + 2.6vw, 3.35rem); }
h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.42rem); }
h4 { font-size: 1.08rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brass); }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 3rem 0;
}

::selection { background: var(--brass-pale); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink);
  color: #fff;
  padding: .8rem 1.4rem;
  font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 820px; }
.wrap--mid { max-width: 980px; }

/* --------------------------------------------------------------------------
   Shared type helpers
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 .85rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.eyebrow::after {
  content: "";
  flex: 0 0 34px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}
.eyebrow--light { color: var(--brass-light); }
.eyebrow--center { justify-content: center; }
.eyebrow--center::before {
  content: "";
  flex: 0 0 34px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}

.lede {
  font-size: 1.16rem;
  line-height: 1.66;
  color: var(--muted);
}

.section {
  padding: clamp(3.5rem, 2rem + 5vw, 6.5rem) 0;
}
.section--tight { padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0; }
.section--cream { background: var(--cream); }
.section--navy {
  background: var(--navy);
  color: #dfe5ee;
}
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy a { color: var(--brass-light); }

.section-head { max-width: 760px; margin-bottom: 2.75rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--muted); font-size: 1.08rem; margin-bottom: 0; }
.section--navy .section-head p { color: #b9c4d4; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .82rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--navy);
  color: #fff;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .15s var(--ease),
              box-shadow .2s var(--ease);
}
.btn:hover {
  background: var(--navy-2);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn:active { transform: translateY(0); }

.btn--gold { background: var(--brass); color: #fff; }
.btn--gold:hover { background: #9c7538; color: #fff; }

.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}
.btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.btn--outline {
  background: transparent;
  border-color: var(--line);
  color: var(--navy);
}
.btn--outline:hover { background: var(--cream); border-color: var(--brass); color: var(--navy); }

.btn--sm { padding: .55rem 1.05rem; font-size: .86rem; }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 1.9rem;
}

/* Text link with a moving arrow */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  color: var(--navy-2);
}
.arrow-link::after {
  content: "\2192";
  transition: transform .2s var(--ease);
}
.arrow-link:hover { color: var(--brass); }
.arrow-link:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Utility bar
   -------------------------------------------------------------------------- */

.utility-bar {
  background: var(--ink);
  color: #a9b4c6;
  font-size: .83rem;
  letter-spacing: .01em;
}
.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 40px;
  padding-block: .35rem;
}
.utility-bar p { margin: 0; }
.utility-bar strong { color: var(--brass-light); font-weight: 600; }
.utility-bar a { color: inherit; text-decoration: none; }
.utility-bar a:hover { color: #fff; text-decoration: underline; }
.utility-bar__sep { opacity: .45; margin-inline: .45rem; }

@media (max-width: 860px) {
  .utility-bar__inner { justify-content: center; text-align: center; }
  .utility-bar__contact { display: none; }
}

/* --------------------------------------------------------------------------
   Header and navigation
   -------------------------------------------------------------------------- */

.site-header {
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line-soft);
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .25s var(--ease);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 84px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}
.brand__mark {
  /* Flex so the box shrink-wraps the mark. The logo is portrait, so it is
     sized by height and left to work out its own width - never give it a
     square box, and never leave this as a bare inline span, which would
     ignore sizing altogether and let the image fill its column. */
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: fit-content;
}
.brand__mark img,
.brand__mark svg {
  display: block;
  height: 54px;
  width: auto;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
}
.brand__sub {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .18rem;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.primary-nav__list {
  display: flex;
  align-items: center;
  gap: .25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-nav__item { position: relative; }

.primary-nav__item > a,
.primary-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .6rem .8rem;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: .97rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.primary-nav__item > a:hover,
.primary-nav__trigger:hover { color: var(--brass); background: var(--cream); }

.primary-nav__item > a[aria-current="page"],
.primary-nav__item.is-current > .primary-nav__trigger { color: var(--brass); }
.primary-nav__item > a[aria-current="page"]::after,
.primary-nav__item.is-current > .primary-nav__trigger::after {
  content: "";
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: -2px;
  height: 2px;
  background: var(--brass);
}

.chev {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s var(--ease);
  opacity: .65;
}
.primary-nav__item.is-open .chev { transform: rotate(-135deg) translate(-2px, -2px); }

.submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: -.35rem;
  min-width: 286px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-top: 3px solid var(--brass);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1rem 0 .65rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.primary-nav__item.is-open .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.submenu ul { list-style: none; margin: 0; padding: 0; }
.submenu li { margin: 0; }
.submenu a {
  display: block;
  padding: .52rem 1.35rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.submenu a:hover { background: var(--cream); border-left-color: var(--brass); color: var(--navy-2); }

.submenu__note {
  margin: 0 1.35rem .7rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: .84rem;
  line-height: 1.5;
  color: var(--muted);
}
.submenu__sub { margin-bottom: .35rem; }
.submenu__sub a {
  padding: .32rem 1.35rem .32rem 2.15rem;
  font-size: .89rem;
  font-weight: 400;
  color: var(--muted);
}
.submenu__sub a::before { content: "\2014"; margin-right: .5rem; opacity: .45; }

.submenu__external {
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px solid var(--line-soft);
}
.submenu__external a { font-weight: 400; font-size: .88rem; color: var(--muted); }
.ext {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: .35rem;
  border: 1.4px solid currentColor;
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(45deg);
  opacity: .6;
  vertical-align: middle;
}

.nav-cta { flex-shrink: 0; }

.nav-close { display: none; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: .6rem;
  padding: .55rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle__bars {
  display: grid;
  gap: 4px;
  width: 18px;
}
.nav-toggle__bars span {
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1040px) {
  /* The closed nav panel sits off the right edge. Without this it counts
     toward the document width and every page scrolls sideways. `clip` is used
     ahead of `hidden` because it does not turn <html> into a scroll container,
     which would break the sticky header. */
  html {
    overflow-x: hidden;
    overflow-x: clip;
  }

  .site-header__inner { min-height: 74px; }
  .nav-toggle { display: inline-flex; }

  .primary-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(300px, 80%);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4.25rem 1.15rem 2rem;
    /* Translucent sheet: the page shows through, frosted heavily so dark ink
       still reads over whatever photograph happens to sit behind it. */
    background: rgba(255, 255, 255, .42);
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    border-left: 1px solid rgba(255, 255, 255, .38);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s var(--ease), visibility .3s;
  }
  .primary-nav.is-open { transform: translateX(0); visibility: visible; }

  .primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav__item { border-bottom: 1px solid var(--line-soft); }
  .primary-nav__item > a,
  .primary-nav__trigger {
    width: 100%;
    justify-content: space-between;
    padding: .72rem .25rem;
    font-size: .98rem;
    border-radius: 0;
  }
  .primary-nav__item > a:hover,
  .primary-nav__trigger:hover { background: none; }
  .primary-nav__item > a[aria-current="page"]::after,
  .primary-nav__item.is-current > .primary-nav__trigger::after { display: none; }

  .submenu {
    position: static;
    min-width: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 .85rem;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .primary-nav__item.is-open .submenu { display: block; }
  .submenu__note { margin-inline: .25rem; }
  .submenu a { padding-inline: .9rem; }

  .nav-cta { margin-top: 1.25rem; }

  /* The panel's own dismiss control, top-right inside the sheet. */
  .nav-close {
    display: flex;
    position: absolute;
    top: .85rem;
    right: .85rem;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--ink);
    background: rgba(255, 255, 255, .5);
    border: 1px solid rgba(14, 23, 37, .14);
    border-radius: 50%;
    cursor: pointer;
  }
  .nav-close:hover { background: rgba(255, 255, 255, .8); }

  body.nav-open { overflow: hidden; }
  .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(14, 23, 37, .3);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s;
  }
  .nav-scrim.is-open { opacity: 1; visibility: visible; }
}

/* --------------------------------------------------------------------------
   Home hero slideshow
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  /* No type sits on this any more, so it can be a plain picture band. Holding
     it at the 16:9 of the slides is what stops cover from cropping hard - the
     old full-height hero was the whole reason photos looked zoomed in. */
  /* Deliberately NOT aspect-ratio: combined with a min-height it grows the box
     on both axes and the band ends up wider than the viewport. An explicit
     width with a vw-derived height is predictable. 58vw is close to the 16:9
     of the slides, and the vh cap stops it dominating a short window. */
  width: 100%;
  /* Full viewport. On a 16:9 monitor this is the ideal case - the window and
     the slides are the same shape, so nothing is cropped at all. svh is used
     ahead of vh so a phone's collapsing address bar does not resize the band
     mid-scroll; vh stays as the fallback for older browsers. */
  height: 100vh;
  height: 100svh;
  min-height: 420px;
  display: block;
  overflow: hidden;
  background: var(--navy);
  isolation: isolate;
}

.hero__slides { position: absolute; inset: 0; z-index: -2; }

.hero__slide {
  position: absolute;
  inset: 0;
  background-image: var(--slide);
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.5s var(--ease);
  will-change: opacity, transform;
}

/* A wide photograph: fill the frame, crop as needed. */
.hero__slide--cover { background-size: cover; }

/* A poster or portrait graphic: never crop it - taking an edge off one of
   these removes its heading. The whole picture is shown, standing on the
   band's own dark ground. It used to stand on a blurred enlargement of
   itself, which on a wide window meant a small picture marooned in a smear;
   a plain ground reads as a deliberate frame instead. */
.hero__slide--contain {
  background-size: contain;
  background-color: var(--navy);
}
/* No Ken Burns on a contained slide. The drift starts at scale(1.08), which
   would push the edges of an uncropped poster outside the frame and clip the
   very thing 'contain' is there to protect. Photographs still drift. */
.hero__slide--contain,
.hero__slide--contain.is-active {
  transform: none;
  animation: none;
}
.hero__slide.is-active {
  opacity: 1;
  animation: ken-burns 11.5s ease-out forwards;
}

/* Slow drift across the photo. The duration is deliberately tied to the slide
   interval in index.php (10s hold + 1.5s crossfade): if the animation outruns
   the slide, the drift is cut off partway and restarts, which reads as a jolt
   rather than as breathing. Change one and change the other. */
@keyframes ken-burns {
  from { transform: scale(1.08) translate3d(0, 0, 0); }
  to   { transform: scale(1) translate3d(0, -1.2%, 0); }
}

/* The old bottom-up gradient existed purely to make white type readable. The
   type has gone, so only a light top scrim remains - just enough for the
   floating nav to sit on. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(9, 16, 27, .34) 0%, rgba(9, 16, 27, .06) 34%, transparent 60%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(120% 100% at 50% 42%, transparent 45%, rgba(6, 11, 20, .55) 100%),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  background-size: cover, 140px 140px;
  mix-blend-mode: soft-light;
  opacity: .5;
}

.hero__controls {
  position: absolute;
  right: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  bottom: clamp(3rem, 2rem + 6vw, 5.5rem);
  display: flex;
  align-items: center;
  gap: .5rem;
  z-index: 3;
}
.hero__dot {
  width: 34px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, .35);
  cursor: pointer;
  transition: background .25s var(--ease), width .25s var(--ease);
}
.hero__dot:hover { background: rgba(255, 255, 255, .6); }
.hero__dot.is-active { background: var(--brass-light); width: 48px; }

.hero--empty {
  background:
    radial-gradient(120% 90% at 20% 0%, #24405f 0%, transparent 60%),
    linear-gradient(160deg, #1b2e49 0%, #101c2e 100%);
}
.hero__empty {
  display: grid;
  place-items: center;
  height: 100%;
  padding-block: 2rem;
}
.hero__hint {
  margin-top: 0;
  padding: 1rem 1.25rem;
  border: 1px dashed rgba(255, 255, 255, .35);
  border-radius: var(--radius);
  font-size: .92rem;
  color: #cfd8e5;
  max-width: 60ch;
}
.hero__hint code {
  background: rgba(255, 255, 255, .12);
  padding: .1rem .4rem;
  border-radius: 3px;
  font-size: .88em;
}

@media (max-width: 700px) {
  /* A phone viewport is tall and narrow; the slides are wide. Holding the band
     at the full portrait viewport made `cover` slice most of each photograph
     away. A squarer band, sized from the viewport width, is far closer to the
     shape of the pictures. */
  /* The band takes the shape of the slide that is showing (--slide-ratio is
     set by the slideshow script from the file's own dimensions). A phone is
     too narrow for one compromise shape to serve a 16:9 photograph and an
     upright poster: whichever it favoured, the other was either cropped to
     pieces or floated in a field of blur. Matching the picture means neither.
     The script clamps the number so an extreme file cannot produce a sliver
     or a tower. */
  .hero {
    height: auto;
    min-height: 0;
    aspect-ratio: var(--slide-ratio, 1.5);
    max-height: 82svh;
    /* No transition here: animating aspect-ratio whose value comes from a
       custom property leaves Chrome stuck on the fallback and the band never
       changes shape. The crossfade between slides covers the resize anyway. */
  }

  /* With the frame already the picture's shape, both fits resolve to the same
     thing and the blurred backdrop has nothing left to fill. The Ken Burns
     drift goes: starting at scale(1.08) crops back 8% of what we just fitted. */
  .hero__slide { background-size: contain; transform: none; }
  .hero__slide.is-active { transform: none; animation: none; }

  .hero__controls { left: var(--gutter); right: auto; bottom: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__slide { transition: opacity .01ms; transform: none !important; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   Interior page banner
   -------------------------------------------------------------------------- */

.page-head {
  position: relative;
  padding: clamp(3.25rem, 2rem + 5vw, 5.5rem) 0;
  background: var(--navy);
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--banner);
  background-size: cover;
  background-position: center;
}
.page-head::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, rgba(11, 20, 33, .93) 0%, rgba(11, 20, 33, .78) 55%, rgba(11, 20, 33, .58) 100%);
}
.page-head h1 { color: #fff; margin-bottom: .3em; }
.page-head__intro {
  max-width: 62ch;
  font-size: 1.12rem;
  color: #d5dde8;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Cards and grids
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: 1.75rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line);
}
.card__body { padding: 1.6rem 1.7rem 1.75rem; flex: 1; }
.card__body h3 { margin-bottom: .5rem; }
.card__body p { color: var(--muted); font-size: .98rem; }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card--link:hover .card__media img { transform: scale(1.04); }
.card__foot {
  padding: 0 1.7rem 1.6rem;
  margin-top: auto;
}

/* Feature panel: two columns, image and prose */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
.split__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 5 / 4;
  background: var(--cream-2);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media--frame::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--radius);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Service times panel
   -------------------------------------------------------------------------- */

.times-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.times-panel__item {
  background: var(--paper);
  padding: 1.7rem 1.6rem;
}
.times-panel__name {
  font-family: var(--font-display);
  font-size: 1.22rem;
  color: var(--ink);
  margin: 0 0 .35rem;
}
.times-panel__when {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 .55rem;
}
.times-panel__note { font-size: .93rem; color: var(--muted); margin: 0; }

/* --------------------------------------------------------------------------
   Events
   -------------------------------------------------------------------------- */

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

.event-row {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.event-row:first-child { border-top: 1px solid var(--line-soft); }

.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .65rem .4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
  text-align: center;
  line-height: 1.1;
}
.event-date__month {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
}
.event-date__day {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--ink);
}
.event-date__weekday {
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.event-row__title { margin: 0 0 .25rem; font-size: 1.18rem; }
.event-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .95rem;
  font-size: .92rem;
  color: var(--muted);
  margin: 0;
}
.event-row__desc {
  margin: .5rem 0 0;
  font-size: .95rem;
  color: var(--muted);
  max-width: 70ch;
}

.tag {
  display: inline-block;
  padding: .18rem .6rem;
  border-radius: 100px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.tag--featured { background: var(--brass-pale); border-color: #e2cba6; color: #7d5a1f; }

@media (max-width: 720px) {
  .event-row { grid-template-columns: 68px 1fr; gap: 1rem; }
  .event-row > .btn { grid-column: 2; justify-self: start; }
  .event-date__day { font-size: 1.5rem; }
}

/* Calendar grid */
.calendar-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.calendar-bar h2 { margin: 0; }
.calendar-nav { display: flex; align-items: center; gap: .5rem; }

.calendar {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  table-layout: fixed;
}
.calendar th {
  padding: .8rem .5rem;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.calendar td {
  height: 118px;
  padding: .5rem .55rem;
  border: 1px solid var(--line-soft);
  vertical-align: top;
  background: var(--paper);
}
.calendar td.is-outside { background: var(--cream); color: var(--muted); }
.calendar td.is-today { background: #fffaf0; box-shadow: inset 0 0 0 2px var(--brass); }
.calendar__num {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .3rem;
}
.calendar td.is-outside .calendar__num { color: #a9b1bf; }
.calendar__events { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.calendar__event {
  display: block;
  padding: .22rem .4rem;
  border-radius: 3px;
  border-left: 3px solid var(--brass);
  background: var(--cream-2);
  font-size: .76rem;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar__event:hover { background: var(--brass-pale); color: var(--ink); }
.calendar__event time { font-weight: 700; color: var(--muted); }

.cat-worship         { border-left-color: #7b4fa8; }
.cat-bible-study     { border-left-color: #2f7d63; }
.cat-community       { border-left-color: #b08542; }
.cat-recovery        { border-left-color: #2b6ca3; }
.cat-fellowship      { border-left-color: #c2703b; }
.cat-missions        { border-left-color: #9b3d55; }
.cat-youth           { border-left-color: #4f8a2f; }
.cat-special-service { border-left-color: #a8442d; }
.cat-church-business { border-left-color: #6b7280; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.35rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  font-size: .86rem;
  color: var(--muted);
}
.legend li { display: flex; align-items: center; gap: .45rem; }
.legend span {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: currentColor;
}

/* On phones the month grid becomes an agenda list */
.calendar-scroll { overflow-x: auto; }
@media (max-width: 760px) {
  .calendar { min-width: 640px; }
  .calendar td { height: 92px; }
}

/* --------------------------------------------------------------------------
   Ministry blocks (Community page)
   -------------------------------------------------------------------------- */

.ministry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.25rem);
  align-items: start;
  padding: clamp(2rem, 1.2rem + 3vw, 3.25rem) 0;
  border-bottom: 1px solid var(--line-soft);
  scroll-margin-top: 120px;
}
.ministry:last-of-type { border-bottom: 0; }
.ministry__aside { position: sticky; top: 120px; }
.ministry__when {
  border-left: 3px solid var(--brass);
  padding-left: 1.1rem;
}
.ministry__when dt {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .9rem;
}
.ministry__when dt:first-child { margin-top: 0; }
.ministry__when dd {
  margin: .15rem 0 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--ink);
}
.ministry h2 { margin-bottom: .4rem; }
.ministry__lead { color: var(--muted); font-size: 1.06rem; }

@media (max-width: 860px) {
  .ministry { grid-template-columns: 1fr; }
  .ministry__aside { position: static; }
}

/* --------------------------------------------------------------------------
   Staff
   -------------------------------------------------------------------------- */

.staff-card { text-align: left; }
.staff-card__photo {
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--cream-2);
  margin-bottom: 1.1rem;
}
.staff-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.staff-card__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--brass);
  background: linear-gradient(150deg, var(--cream) 0%, var(--cream-2) 100%);
}
.staff-card h3 { margin-bottom: .15rem; }
.staff-card__role {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 .7rem;
}
.staff-card__bio { font-size: .96rem; color: var(--muted); }
.staff-card__contact { margin-top: .8rem; font-size: .9rem; }

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.gallery-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2rem;
}
.gallery-filter a {
  padding: .45rem 1rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: all .18s var(--ease);
}
.gallery-filter a:hover { border-color: var(--brass); color: var(--navy); }
.gallery-filter a.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 1rem;
}
.gallery-item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream-2);
  cursor: zoom-in;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2rem .9rem .8rem;
  background: linear-gradient(to top, rgba(9, 16, 27, .85), transparent);
  color: #fff;
  font-size: .88rem;
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.gallery-item:hover .gallery-item__caption,
.gallery-item:focus-visible .gallery-item__caption { opacity: 1; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  background: rgba(9, 16, 27, .93);
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.lightbox__caption {
  position: absolute;
  bottom: 1.4rem;
  left: 0;
  right: 0;
  text-align: center;
  color: #dbe2ec;
  font-size: .95rem;
  padding-inline: 1.5rem;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 1.3rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, .2); }
.lightbox__close { top: 1.4rem; right: 1.4rem; }
.lightbox__nav--prev { left: 1.4rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 1.4rem; top: 50%; transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-panel {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 1rem + 3vw, 2.75rem);
  box-shadow: var(--shadow-sm);
}

.field { margin-bottom: 1.35rem; }
.field:last-child { margin-bottom: 0; }
.field label,
.field > .field__label {
  display: block;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: .45rem;
}
.field__hint {
  display: block;
  font-size: .87rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  margin-top: .3rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: .72rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235e6879' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 12px;
  padding-right: 2.4rem;
}
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(176, 133, 66, .18);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.35rem;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
}
.checkbox input { width: 18px; height: 18px; margin-top: .25rem; accent-color: var(--brass); flex-shrink: 0; }
.checkbox label,
.checkbox span {
  font-size: .97rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  margin: 0;
}

/* Honeypot: hidden from people, visible to bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.alert {
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  border-left: 4px solid;
  margin-bottom: 1.5rem;
  font-size: .97rem;
}
.alert--success { background: #eef7f0; border-color: #3d8a58; color: #1f4c30; }
.alert--error   { background: #fdf0ee; border-color: #b3462f; color: #7a2b1a; }
.alert--info    { background: var(--cream); border-color: var(--brass); color: #6b4f22; }

/* --------------------------------------------------------------------------
   Giving
   -------------------------------------------------------------------------- */

.give-list { list-style: none; margin: 0; padding: 0; counter-reset: give; }
.give-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 1.35rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.give-item:last-child { border-bottom: 0; }
.give-item__num {
  counter-increment: give;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--cream);
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--brass);
}
.give-item__num::before { content: counter(give); }
.give-item h3 { margin-bottom: .3rem; }
.give-item p { color: var(--muted); font-size: .99rem; margin: 0; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.75rem;
}
.contact-block {
  padding: 1.6rem 1.7rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.contact-block h3 { font-size: 1.12rem; margin-bottom: .5rem; }
.contact-block p, .contact-block address {
  margin: 0;
  font-style: normal;
  color: var(--muted);
  font-size: .99rem;
  line-height: 1.65;
}
.contact-block a { color: var(--navy-2); font-weight: 600; }

.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 7;
  background: var(--cream-2);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --------------------------------------------------------------------------
   Beliefs
   -------------------------------------------------------------------------- */

.belief-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.belief-item {
  padding-left: 1.6rem;
  border-left: 3px solid var(--brass);
}
.belief-item h3 { margin-bottom: .3rem; }
.belief-item p { color: var(--muted); margin: 0; }

.pullquote {
  margin: 0;
  padding: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  background: var(--cream);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--brass);
}
.pullquote p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.65rem);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 .8rem;
}
.pullquote cite {
  font-style: normal;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.empty-state {
  padding: 3rem 2rem;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--cream);
  color: var(--muted);
}
.empty-state h3 { color: var(--ink); margin-bottom: .4rem; }
.empty-state p { margin: 0 auto; max-width: 52ch; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: #9dabc0;
  font-size: .95rem;
  margin-top: 0;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
}
@media (max-width: 980px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 2.25rem; }
}
@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

.brand__mark--footer { margin-bottom: 1rem; }
.brand__mark--footer img { height: 50px; }
.site-footer__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: #fff;
  margin: 0 0 .3rem;
}
.site-footer__tagline { color: #8d9bb0; margin-bottom: 1.35rem; max-width: 34ch; }
.site-footer__address { font-style: normal; line-height: 1.75; }
.site-footer a { color: #b8c4d6; text-decoration: none; }
.site-footer a:hover { color: var(--brass-light); text-decoration: underline; }

.site-footer__heading {
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin: 0 0 1.1rem;
}
.site-footer__links,
.site-footer__times { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .55rem; }
.site-footer__links:last-child, .site-footer__times:last-child { margin-bottom: 0; }
.site-footer__links--muted { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .88rem; }
.site-footer__times-name { display: block; color: #e4eaf3; font-weight: 600; }
.site-footer__times-when { display: block; font-size: .89rem; color: #8d9bb0; }
.site-footer__hours { font-size: .89rem; color: #8d9bb0; margin: 0; }
.site-footer__hours strong { color: #b8c4d6; }

.social-list {
  display: flex;
  gap: .6rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}
.social-list a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  color: #b8c4d6;
  transition: all .2s var(--ease);
}
.social-list a:hover { background: var(--brass); border-color: var(--brass); color: #fff; }
.social-list svg { width: 18px; height: 18px; }

.site-footer__bar {
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .85rem;
  color: #7d8ba0;
}
.site-footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-block: 1.35rem;
}
.site-footer__bar p { margin: 0; }
.site-footer__sep { opacity: .4; margin-inline: .5rem; }

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

@media print {
  .utility-bar, .site-header, .site-footer, .hero__controls, .btn, .nav-toggle { display: none !important; }
  body { font-size: 12pt; }
  .hero, .page-head { min-height: 0; color: #000; background: none; }
  .hero::after, .page-head::before, .page-head::after { display: none; }
  .page-head h1 { color: #000; text-shadow: none; }
}

/* ==========================================================================
   Polish layer
   Everything below is presentation only. It is all switched off under
   prefers-reduced-motion at the end of this file, and nothing here is load
   bearing - if it never runs, the page still reads correctly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Live "what's on next" strip
   -------------------------------------------------------------------------- */

.utility-bar__next {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: inherit;
}
.utility-bar__next:hover { color: #fff; }
.utility-bar__next:hover .utility-bar__when { color: #cfd8e5; }
.utility-bar__when { color: #8fa0b8; }

.pulse {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brass-light);
  flex-shrink: 0;
}
.utility-bar__next.is-live .pulse { background: #52c07a; }
.utility-bar__next.is-live .pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid #52c07a;
  animation: pulse-ring 1.9s ease-out infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(.55); opacity: .9; }
  100% { transform: scale(1.7);  opacity: 0; }
}

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

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .09s; }
[data-reveal][data-delay="2"] { transition-delay: .18s; }
[data-reveal][data-delay="3"] { transition-delay: .27s; }
[data-reveal][data-delay="4"] { transition-delay: .36s; }

/* No JS, no problem: without .js-on the content is simply visible. */
html:not(.js-on) [data-reveal] { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Section ornament under centred headings
   -------------------------------------------------------------------------- */

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin: 1.4rem auto 0;
  color: var(--brass);
}
.ornament::before,
.ornament::after {
  content: "";
  height: 1px;
  width: 54px;
  background: currentColor;
  opacity: .45;
}
.ornament span {
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  border: 1px solid currentColor;
}

/* --------------------------------------------------------------------------
   Scripture band
   -------------------------------------------------------------------------- */

.verse-band {
  position: relative;
  padding: clamp(3.5rem, 2rem + 5vw, 6rem) 0;
  background: var(--ink);
  color: #e7ecf4;
  overflow: hidden;
  isolation: isolate;
}
.verse-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 120% at 15% 0%, rgba(176, 133, 66, .22) 0%, transparent 55%),
    radial-gradient(70% 100% at 95% 100%, rgba(43, 74, 114, .38) 0%, transparent 60%);
}
.verse-band__inner { max-width: 860px; margin-inline: auto; text-align: center; padding-inline: var(--gutter); }
.verse-band blockquote { margin: 0; }
.verse-band p {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.05rem + 1.5vw, 2.15rem);
  line-height: 1.45;
  color: #fff;
  margin: 0 0 1.35rem;
  text-wrap: balance;
}
.verse-band cite {
  font-style: normal;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-light);
}
.verse-band__mark {
  display: block;
  width: 62px;
  margin: 0 auto 1.75rem;
  opacity: .95;
}

/* --------------------------------------------------------------------------
   Photographs: settle in rather than snap in
   -------------------------------------------------------------------------- */

.gallery-item img,
.card__media img,
.split__media img {
  opacity: 0;
  transition: opacity .6s var(--ease), transform .5s var(--ease);
}
.gallery-item img.is-loaded,
.card__media img.is-loaded,
.split__media img.is-loaded { opacity: 1; }
html:not(.js-on) .gallery-item img,
html:not(.js-on) .card__media img,
html:not(.js-on) .split__media img { opacity: 1; }

/* A quiet lift on the framed home-page photo */
.split__media--frame {
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.split__media--frame:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* --------------------------------------------------------------------------
   Everything above is optional. Turn it all off for anyone who asked.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__slide.is-active { animation: none !important; transform: none !important; }
  .pulse::after { animation: none !important; }
  .gallery-item img, .card__media img, .split__media img { opacity: 1 !important; }
  .split__media--frame:hover { transform: none !important; }
}

/* ==========================================================================
   Floating top chrome
   The bar sits over the hero photograph rather than above it, then turns
   solid once you scroll past the artwork. A permanently transparent bar (as
   on the site this was modelled on) only works when every section behind it
   is dark; below the fold this site is white, and white-on-white nav is
   unusable - hence the pinned state.
   ========================================================================== */

.site-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: transform .35s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}

/* Visible only at the top of the page. Any scroll away from the top slides
   the whole bar out of the way so nothing sits over the content. */
.site-top.is-hidden { transform: translateY(-100%); }


/* ---- Floating over the artwork ---- */

.has-overlay-top .site-top .utility-bar {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.has-overlay-top .site-top .site-header {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Everything in the bar goes white while it floats */
.has-overlay-top .site-top .brand__name,
.has-overlay-top .site-top .primary-nav__item > a,
.has-overlay-top .site-top .primary-nav__trigger,
.has-overlay-top .site-top .nav-toggle {
  color: #fff;
}
.has-overlay-top .site-top .brand__sub {
  color: rgba(255, 255, 255, .72);
}
.has-overlay-top .site-top .nav-toggle {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .35);
}
.has-overlay-top .site-top .primary-nav__item > a:hover,
.has-overlay-top .site-top .primary-nav__trigger:hover {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}
/* A soft scrim so white type survives a pale patch of sky */
.has-overlay-top .site-top::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 190px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(8, 14, 24, .62) 0%, rgba(8, 14, 24, .28) 55%, transparent 100%);
}

/* ---- Give the artwork room for the bar sitting on top of it ---- */

/* The picture band runs full-bleed under the floating bar - no padding, or
   the top of every photograph would be a strip of empty colour. Interior
   pages still need the clearance because their banner carries a heading. */
.has-overlay-top .hero { padding-top: 0; }
.has-overlay-top .page-head { padding-top: calc(var(--chrome-h, 125px) + clamp(2rem, 1rem + 3vw, 3.5rem)); }

/* The dropdown panels stay light, so keep their own text dark */
.has-overlay-top .site-top .submenu a { color: var(--ink); }
.has-overlay-top .site-top .submenu__note,
.has-overlay-top .site-top .submenu__sub a,
.has-overlay-top .site-top .submenu__external a { color: var(--muted); }

@media (max-width: 1040px) {
  /* The mobile panel is a frosted translucent sheet - contents stay dark. */
  .has-overlay-top .site-top .primary-nav.is-open .primary-nav__item > a,
  .has-overlay-top .site-top .primary-nav.is-open .primary-nav__trigger,
  .has-overlay-top .site-top .primary-nav.is-open .nav-close {
    color: var(--ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-top { transition: none !important; }
}

/* --------------------------------------------------------------------------
   Intro band - the words that used to sit on the photographs
   -------------------------------------------------------------------------- */

.intro-band {
  background: var(--paper);
  padding: clamp(2.75rem, 1.75rem + 4vw, 4.5rem) 0 clamp(2rem, 1.25rem + 3vw, 3.25rem);
  text-align: center;
}
.intro-band__inner { max-width: 780px; margin-inline: auto; }
.intro-band h1 {
  margin: 0 0 .35em;
  font-size: clamp(1.95rem, 1.4rem + 2.4vw, 3.05rem);
  text-wrap: balance;
}
.intro-band__tagline {
  font-size: clamp(1.05rem, .95rem + .5vw, 1.28rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 58ch;
  margin: 0 auto;
  text-wrap: balance;
}
.intro-band .btn-row { margin-top: 1.9rem; }

/* --------------------------------------------------------------------------
   Scroll cue
   A full-viewport hero gives a visitor no evidence that anything exists below
   it. This is the only thing telling them to keep going.
   -------------------------------------------------------------------------- */

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.9rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: .5rem .9rem;
  text-decoration: none;
  color: #fff;
  opacity: .88;
  transition: opacity .25s var(--ease);
}
.hero__scroll:hover { opacity: 1; color: #fff; }
.hero__scroll-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}
.hero__scroll-arrow {
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .55));
  animation: nudge 2.1s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%      { transform: rotate(45deg) translate(4px, 4px); }
}

/* On a phone both controls want the bottom centre, so stack them instead of
   letting them fight for the same strip. */
@media (max-width: 700px) {
  .hero__controls {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 1.15rem;
  }
  .hero__scroll { bottom: 2.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-arrow { animation: none !important; }
}