/* ======================================================================
   PORTMORE SEVENTH-DAY ADVENTIST CHURCH
   7 Port Henderson Road, Portmore, St. Catherine, Jamaica
   Central Jamaica Conference

   Design system: "Harbour" — limestone paper, deep sea, brass.
   Built on the Bevsan SDA site architecture; own visual identity.
   ====================================================================== */

/* ---- Fonts: self-hosted, see fonts.css ---- */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, picture, video { max-width: 100%; display: block; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ---- Design Tokens ----
   Brand colours supplied by the church: Deep Red #B22222 (primary),
   Gold #D4AF37 (secondary), White (neutral), Sand #F4F1EA (accent).
   Headline face Montserrat, body face Inter, per the brand guidance. */
:root {
  /* Brand */
  --red:        #b22222;
  --red-deep:   #6d1717;
  --red-light:  #c94a4a;
  --gold:       #d4af37;
  --gold-light: #e3c667;
  --gold-pale:  #f7efd8;
  --gold-deep:  #7d6218;   /* gold darkened for small text — AA on white and sand */
  --white:      #ffffff;
  --sand:       #f4f1ea;
  --sand-deep:  #e7e2d5;
  --rule:       #ded8c9;

  /* Ink */
  --ink:        #1a1a1a;
  --ink-soft:   #3d3d3d;
  --ink-muted:  #5f5f5f;

  /* Type */
  --display: 'Montserrat', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --sans:    'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;

  /* Corner radii — 10px buttons, 12px images and containers, per brand */
  --r-btn:   10px;
  --r-img:   12px;
  --r-card:  12px;
  --r-sm:     8px;

  /* Scale */
  --container: 1280px;
  --gap: clamp(1.25rem, 3vw, 2rem);
  --nav-h: 76px;

  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   clamp(1.2rem, 1.08rem + 0.45vw, 1.42rem);
  --t-xl:   clamp(1.55rem, 1.2rem + 1.4vw, 2.2rem);
  --t-2xl:  clamp(2rem, 1.4rem + 2.5vw, 3.4rem);
  --t-3xl:  clamp(2.6rem, 1.8rem + 4.2vw, 5rem);
  --t-hero: clamp(2.9rem, 2rem + 5.6vw, 6.6rem);

  --ease: cubic-bezier(.2,.8,.2,1);
}

/* ---- Base ---- */
body {
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}

/* Subtle paper texture via layered gradients */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(212,175,55,0.06), transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgba(178,34,34,0.05), transparent 55%);
  mix-blend-mode: multiply;
}

/* Noise overlay for paper feel */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main, header, footer { position: relative; z-index: 2; }

::selection { background: var(--red); color: var(--white); }

/* ---- Typography utilities ---- */
.serif { font-family: var(--display); }
.sans  { font-family: var(--sans); }
.italic { font-style: italic; }

.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--red);
}

.eyebrow--gold { color: var(--gold); }
.eyebrow--white { color: var(--white); opacity: 0.8; }

.rule {
  display: inline-block;
  width: 2.5rem;
  height: 1px;
  background: var(--red);
  vertical-align: middle;
  margin-right: 0.75rem;
}

.rule-h { width: 100%; height: 1px; background: var(--rule); border: 0; margin: 0; }
.rule-thick { width: 100%; height: 2px; background: var(--ink); border: 0; }

/* Display headings */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.96;
  color: var(--ink);
}
h1 em, h2 em, h3 em { font-style: italic; color: var(--red); }

.display-xl { font-size: var(--t-hero); letter-spacing: -0.035em; line-height: 0.92; }
.display-lg { font-size: var(--t-3xl); letter-spacing: -0.03em; }
.display-md { font-size: var(--t-2xl); letter-spacing: -0.025em; line-height: 1; }
.display-sm { font-size: var(--t-xl); letter-spacing: -0.02em; line-height: 1.04; }

/* ---- Layout primitives ---- */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 clamp(1.25rem, 3vw, 2.5rem); }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 clamp(1.25rem, 3vw, 2.5rem); }

.section { padding: clamp(4rem, 8vw, 8rem) 0; position: relative; }
.section-tight { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }

/* =====================================================================
   NAVIGATION / MASTHEAD
   ===================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--white) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
}

.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0.9rem clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}

.nav__brand {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  line-height: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav__brand strong { font-weight: 500; }
.nav__brand small {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}

.nav__center {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__link {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  padding: 4px 2px;
  transition: color .25s ease;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1px;
  background: var(--red);
  transition: right .35s cubic-bezier(.2,.8,.2,1);
}
.nav__link:hover { color: var(--red); }
.nav__link:hover::after { right: 0; }
.nav__link.is-active { color: var(--red); }
.nav__link.is-active::after { right: 0; }

.nav__right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
}

.nav__cta {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0.65rem 1.1rem;
  background: var(--ink);
  color: var(--white);
  border-radius: 999px;
  transition: background .25s ease, transform .25s ease;
}
.nav__cta:hover { background: var(--red); transform: translateY(-1px); }

.nav__toggle { display: none; }

@media (max-width: 900px) {
  .nav__inner { grid-template-columns: 1fr auto; }
  .nav__center, .nav__right { display: none; }
  .nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid color-mix(in oklab, var(--ink) 25%, transparent);
    border-radius: 999px;
    color: var(--ink);
  }
  .nav__toggle svg { width: 18px; height: 18px; }
}

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 100;
  transform: translateY(-100%);
  transition: transform .5s cubic-bezier(.7,0,.2,1);
  display: flex;
  flex-direction: column;
  padding: 1.5rem clamp(1.5rem, 4vw, 2.5rem) 2rem;
}
.nav-drawer.is-open { transform: translateY(0); }
.nav-drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; }
.nav-drawer__list { display: flex; flex-direction: column; gap: 1.5rem; }
.nav-drawer__list a {
  font-family: var(--display);
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.nav-drawer__list a em { color: var(--red); }
.nav-drawer__sub {
  margin-top: auto;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8rem;
  color: var(--ink-muted);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative;
  min-height: min(92vh, 1000px);
  overflow: hidden;
  color: var(--white);
  isolation: isolate;
  display: flex;
  align-items: flex-end;
}

.hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__img img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  animation: slowZoom 20s ease-out forwards;
}
@keyframes slowZoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
.hero__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(26,26,26,0.85) 0%, rgba(26,26,26,0.35) 40%, rgba(26,26,26,0.25) 100%),
    linear-gradient(to right, rgba(178,34,34,0.35), rgba(26,26,26,0.1));
  z-index: 1;
}

.hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  mix-blend-mode: overlay;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__content {
  position: relative;
  z-index: 2;
  padding: clamp(2rem, 6vw, 5rem) clamp(1.25rem, 3vw, 2.5rem) clamp(2.5rem, 6vw, 5rem);
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.hero__masthead {
  font-family: var(--display);
  color: var(--white);
  font-size: clamp(3.75rem, 1rem + 10vw, 10rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
  font-weight: 300;
}
.hero__masthead em {
  font-style: italic;
  color: var(--gold-light);
  font-weight: 300;
}
.hero__masthead .small-word {
  font-size: 0.45em;
  letter-spacing: 0.05em;
  vertical-align: 0.3em;
  color: var(--gold-light);
}

.hero__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245,237,224,0.3);
}
.hero__meta-item { max-width: 22rem; }
.hero__meta-label {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 500;
  margin-bottom: 0.6rem;
}
.hero__meta-value {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1vw + 0.75rem, 1.45rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--white);
}

/* Masthead strip above hero */
.masthead-strip {
  position: relative;
  z-index: 3;
  background: var(--ink);
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.masthead-strip__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0.65rem clamp(1.25rem, 3vw, 2.5rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.masthead-strip__inner span { opacity: 0.85; }
.masthead-strip__dot { color: var(--gold-light); margin: 0 0.5rem; }
@media (max-width: 720px) {
  .masthead-strip__inner > :nth-child(2),
  .masthead-strip__inner > :nth-child(3) { display: none; }
}

/* =====================================================================
   SECTIONS - generic building blocks
   ===================================================================== */
.section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem 2.5rem;
  align-items: baseline;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.section-head__number {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--red);
}
.section-head__title h2 {
  font-size: var(--t-2xl);
  margin-bottom: 0.6rem;
}
.section-head__title p {
  max-width: 40rem;
  color: var(--ink-soft);
  font-size: var(--t-md);
  line-height: 1.55;
}

@media (max-width: 700px) {
  .section-head { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* =====================================================================
   WELCOME / INTRO section (editorial)
   ===================================================================== */
.welcome {
  padding-top: clamp(5rem, 9vw, 9rem);
  padding-bottom: clamp(4rem, 7vw, 7rem);
  position: relative;
}
.welcome__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) {
  .welcome__grid { grid-template-columns: 1fr; }
}

.welcome__pretitle {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 2rem;
}
.welcome__pretitle::before {
  content: '';
  display: inline-block;
  width: 2rem;
  height: 1px;
  background: var(--red);
  margin-right: 0.8rem;
  vertical-align: middle;
}

.welcome__title {
  font-size: clamp(2.25rem, 1rem + 4vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.028em;
  max-width: 11ch;
}
.welcome__title em {
  font-style: italic;
  color: var(--red);
}

.welcome__body {
  font-family: var(--display);
  font-size: clamp(1.05rem, 0.4vw + 1rem, 1.25rem);
  line-height: 1.55;
  color: var(--ink-soft);
}
.welcome__body p + p { margin-top: 1.25rem; text-indent: 1.5em; }
.welcome__body p:first-child::first-letter {
  font-size: 4em;
  float: left;
  line-height: 0.85;
  padding: 0.1em 0.1em 0 0;
  font-weight: 400;
  color: var(--red);
}
.welcome__signature {
  margin-top: 2rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-muted);
}

/* Pull quote */
.pullquote {
  max-width: 40rem;
  margin: clamp(3rem, 6vw, 5rem) auto;
  text-align: center;
  position: relative;
  padding: 0 1.5rem;
}
.pullquote__mark {
  font-family: var(--display);
  font-style: italic;
  font-size: 5rem;
  color: var(--gold);
  line-height: 0.2;
  display: block;
  height: 2rem;
}
.pullquote__body {
  font-family: var(--display);
  font-size: clamp(1.4rem, 0.8rem + 1.5vw, 2.25rem);
  line-height: 1.25;
  font-style: italic;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.pullquote__cite {
  margin-top: 1.5rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 500;
}

/* =====================================================================
   SERVICE TIMES - newspaper bulletin grid
   ===================================================================== */
.services {
  background: var(--sand);
  padding: clamp(4rem, 8vw, 7rem) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.services__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
}
.services__head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.services__head h2 { font-size: var(--t-2xl); }

.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.services__item {
  padding: 2rem 1.5rem;
  text-align: center;
  border-right: 1px solid var(--rule);
  position: relative;
}
.services__item:last-child { border-right: none; }
.services__item-day {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 500;
  margin-bottom: 0.8rem;
}
.services__item-name {
  font-family: var(--display);
  font-size: clamp(1.15rem, 0.4vw + 1rem, 1.5rem);
  line-height: 1.1;
  margin-bottom: 0.75rem;
}
.services__item-time {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-muted);
  margin-bottom: 0.6rem;
}
.services__item-where {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}
@media (max-width: 900px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .services__item:nth-child(2) { border-right: none; }
  .services__item:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 520px) {
  .services__grid { grid-template-columns: 1fr; }
  .services__item { border-right: none; border-bottom: 1px solid var(--rule); }
  .services__item:last-child { border-bottom: none; }
}

.services__weekly {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px dashed var(--rule);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  text-align: center;
}
.services__weekly-item {
  padding: 1rem;
}
.services__weekly-item strong {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  margin-bottom: 0.3rem;
  font-weight: 500;
}
.services__weekly-item span {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-muted);
}
@media (max-width: 700px) {
  .services__weekly { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* =====================================================================
   EDITORIAL / STORY sections
   ===================================================================== */
.story-section { padding: clamp(5rem, 9vw, 9rem) 0; }
.story-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.story-grid--flip { grid-template-columns: 7fr 5fr; }
@media (max-width: 900px) {
  .story-grid, .story-grid--flip { grid-template-columns: 1fr; }
  .story-grid--flip .story-grid__text { order: 2; }
}

.story-grid__img {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.story-grid__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s cubic-bezier(.2,.8,.2,1); }
.story-grid__img:hover img { transform: scale(1.03); }
.story-grid__img::after {
  content: attr(data-caption);
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  background: linear-gradient(to top, rgba(26,26,26,0.75), transparent);
}

.story-grid__text .eyebrow { margin-bottom: 1.5rem; display: block; }
.story-grid__text h2 { font-size: var(--t-2xl); margin-bottom: 1.5rem; }
.story-grid__text p {
  font-family: var(--display);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.story-grid__text p + p { margin-top: 1rem; }

/* Meet the pastor */
.pastor-titles {
  font-family: var(--sans) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red) !important;
  margin-top: 0.5rem;
}
.pastor-portrait {
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  box-shadow: 0 24px 60px -30px rgba(26,26,26,0.55);
  background: var(--sand);
}
.pastor-portrait img { display: block; width: 100%; height: auto; }
.pastor-meta {
  margin-top: 2rem;
  display: grid;
  gap: 1.25rem;
  border-top: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  padding-top: 1.75rem;
}
.pastor-meta dt {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.35rem;
}
.pastor-meta dd {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--ink-soft);
}
.pastor-meta a { color: var(--red); border-bottom: 1px solid rgba(178,34,34,0.3); transition: border-color .3s ease; }
.pastor-meta a:hover { border-color: var(--red); }

/* =====================================================================
   MINISTRIES / Cards
   ===================================================================== */
.ministries { padding: clamp(5rem, 9vw, 9rem) 0; background: var(--white); }
.ministries__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}
.ministry {
  grid-column: span 6;
  background: var(--sand);
  border: 1px solid var(--rule);
  padding: 2rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1.5rem;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .3s ease;
  position: relative;
  overflow: hidden;
}
.ministry:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(178,34,34,0.25); border-color: var(--red); }
.ministry--large { grid-column: span 8; grid-row: span 2; }
.ministry--small { grid-column: span 4; }

@media (max-width: 900px) {
  .ministry, .ministry--large, .ministry--small { grid-column: span 12; grid-row: auto; }
}

.ministry__num {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--red);
}
.ministry__img {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  margin: 0 -2rem;
}
.ministry--large .ministry__img { aspect-ratio: 16/11; }
.ministry__img img { width: 100%; height: 100%; object-fit: cover; }
.ministry__title {
  font-family: var(--display);
  font-size: 1.65rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.ministry__body {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* =====================================================================
   SERMONS archive
   ===================================================================== */
.sermons { padding: clamp(4rem, 8vw, 7rem) 0; }
.sermons__list {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
}
.sermon-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 2rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  transition: background .25s ease, padding .25s ease;
}
.sermon-row:hover { background: color-mix(in oklab, var(--gold-pale) 50%, transparent); padding-left: 1rem; padding-right: 1rem; }
.sermon-row:first-child { border-top: 2px solid var(--ink); }

.sermon-row__year {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--red);
  min-width: 3.5rem;
}
.sermon-row__title {
  font-family: var(--display);
  font-size: clamp(1.25rem, 0.5vw + 1.1rem, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.sermon-row__cat {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
  white-space: nowrap;
}
.sermon-row__arrow {
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--red);
  transition: transform .3s ease;
  display: inline-block;
}
.sermon-row:hover .sermon-row__arrow { transform: translateX(8px); }

@media (max-width: 800px) {
  .sermon-row { grid-template-columns: auto 1fr auto; gap: 1rem; }
  .sermon-row__cat { display: none; }
  .sermon-row__title { font-size: 1.2rem; }
}

/* Sermon group header */
.sermon-group-head {
  padding: 3rem 0 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.sermon-group-head h3 {
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 500;
}
.sermon-group-head::before,
.sermon-group-head::after { content: ''; flex: 0 1 auto; height: 1px; background: var(--rule); }
.sermon-group-head::before { flex: 0 0 2rem; }
.sermon-group-head::after { flex: 1 1 auto; }

/* =====================================================================
   GALLERY
   ===================================================================== */
.gallery {
  padding: clamp(5rem, 9vw, 9rem) 0;
}
.gallery__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 200px;
  gap: 1.25rem;
}
.gallery__item {
  overflow: hidden;
  position: relative;
}
.gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.5s cubic-bezier(.2,.8,.2,1), filter .6s ease;
  filter: saturate(0.95);
}
.gallery__item:hover img { transform: scale(1.05); filter: saturate(1.1); }
.gallery__item::after {
  content: attr(data-caption);
  position: absolute;
  bottom: 0.75rem; left: 0.75rem;
  background: rgba(26,26,26,0.75);
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  opacity: 0;
  transition: opacity .3s ease;
}
.gallery__item:hover::after { opacity: 1; }

/* Asymmetric layouts */
.gi-1 { grid-column: span 5; grid-row: span 2; }
.gi-2 { grid-column: span 4; grid-row: span 1; }
.gi-3 { grid-column: span 3; grid-row: span 1; }
.gi-4 { grid-column: span 4; grid-row: span 2; }
.gi-5 { grid-column: span 3; grid-row: span 1; }
.gi-6 { grid-column: span 5; grid-row: span 1; }
.gi-7 { grid-column: span 4; grid-row: span 2; }
.gi-8 { grid-column: span 4; grid-row: span 1; }
.gi-9 { grid-column: span 4; grid-row: span 1; }

@media (max-width: 900px) {
  .gallery__grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 160px; }
  .gi-1, .gi-4, .gi-7 { grid-column: span 6; grid-row: span 2; }
  .gi-2, .gi-3, .gi-5, .gi-6, .gi-8, .gi-9 { grid-column: span 3; grid-row: span 1; }
}

/* =====================================================================
   BUTTONS / CTAs
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.6rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  border-radius: 999px;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.btn:hover { background: var(--ink); color: var(--white); transform: translateY(-2px); }
.btn__arrow { display: inline-block; transition: transform .3s ease; }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--red { background: var(--red); color: var(--white); border-color: var(--red); }
.btn--red:hover { background: var(--red-deep); border-color: var(--red-deep); color: var(--white); }

.btn--white { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--white:hover { background: transparent; border-color: var(--white); color: var(--white); }

.btn--ghost-paper { border-color: var(--white); color: var(--white); }
.btn--ghost-paper:hover { background: var(--white); color: var(--ink); }

/* =====================================================================
   VISIT / Call to worship section
   ===================================================================== */
.visit {
  background: var(--ink);
  color: var(--white);
  padding: clamp(5rem, 9vw, 9rem) 0;
  position: relative;
  overflow: hidden;
}
.visit::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 85% 20%, rgba(212,175,55,0.22), transparent 50%),
    radial-gradient(ellipse at 10% 90%, rgba(178,34,34,0.5), transparent 55%);
}
.visit__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) { .visit__inner { grid-template-columns: 1fr; } }
.visit h2 { color: var(--white); font-size: var(--t-2xl); margin-bottom: 1.5rem; }
.visit h2 em { color: var(--gold-light); }
.visit p {
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.55;
  color: color-mix(in oklab, var(--white) 85%, transparent);
  margin-bottom: 2rem;
  max-width: 36rem;
}
.visit__details {
  font-family: var(--sans);
  border-left: 1px solid rgba(245,237,224,0.22);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  gap: 1.75rem;
}
.visit__detail-label {
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.4rem;
  font-weight: 500;
}
.visit__detail-value {
  font-family: var(--display);
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--white);
}
.visit__detail-value a { border-bottom: 1px solid rgba(212,175,55,0.4); transition: border-color .3s ease; }
.visit__detail-value a:hover { border-color: var(--gold-light); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer {
  background: var(--red-deep);
  color: var(--white);
  padding: clamp(4rem, 7vw, 7rem) 0 2rem;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% -40%, rgba(212,175,55,0.28), transparent 60%);
}
.footer__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(245,237,224,0.15);
}
@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer__top { grid-template-columns: 1fr; } }

.footer__brand h3 {
  font-family: var(--display);
  color: var(--white);
  font-size: clamp(2rem, 1rem + 2vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 300;
  margin-bottom: 1rem;
}
.footer__brand h3 em { font-style: italic; color: var(--gold-light); }
.footer__brand p {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.95rem;
  color: color-mix(in oklab, var(--white) 75%, transparent);
  max-width: 28rem;
}
.footer__col h4 {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 500;
  margin-bottom: 1.25rem;
}
.footer__col ul { display: flex; flex-direction: column; gap: 0.65rem; }
.footer__col a {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: color-mix(in oklab, var(--white) 80%, transparent);
  transition: color .25s ease;
}
.footer__col a:hover { color: var(--gold-light); }

.footer__bottom {
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: color-mix(in oklab, var(--white) 60%, transparent);
}
.footer__social { display: flex; gap: 0.5rem; }
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(245,237,224,0.25);
  border-radius: 999px;
  transition: background .25s ease, border-color .25s ease;
}
.footer__social a:hover { background: var(--gold); border-color: var(--gold); }
.footer__social svg { width: 16px; height: 16px; }

/* =====================================================================
   PAGE HEADER (secondary pages)
   ===================================================================== */
.page-header {
  position: relative;
  padding: clamp(7rem, 12vw, 10rem) 0 clamp(3rem, 6vw, 5rem);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212,175,55,0.2), transparent 55%),
    radial-gradient(ellipse at 20% 100%, rgba(178,34,34,0.12), transparent 50%);
  z-index: -1;
}
.page-header__eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 500;
  margin-bottom: 1.5rem;
}
.page-header__eyebrow::before,
.page-header__eyebrow::after {
  content: '';
  display: inline-block;
  width: 2rem;
  height: 1px;
  background: var(--red);
  vertical-align: middle;
  margin: 0 0.8rem;
}
.page-header h1 {
  font-size: clamp(2.75rem, 1rem + 6.5vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 300;
  margin: 0 auto;
  max-width: 16ch;
}
.page-header h1 em {
  font-style: italic;
  color: var(--red);
}
.page-header p {
  max-width: 40rem;
  margin: 1.5rem auto 0;
  font-family: var(--display);
  font-size: clamp(1.05rem, 0.4vw + 1rem, 1.25rem);
  line-height: 1.55;
  color: var(--ink-soft);
  font-style: italic;
}

/* =====================================================================
   CONTENT PROSE
   ===================================================================== */
.prose {
  font-family: var(--display);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.prose h2 {
  font-family: var(--display);
  font-size: clamp(1.75rem, 0.5vw + 1.5rem, 2.5rem);
  line-height: 1.05;
  margin: 3rem 0 1.25rem;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.prose h2 em { font-style: italic; color: var(--red); }
.prose h3 {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
  margin: 2.5rem 0 0.85rem;
}
.prose p { margin-bottom: 1.25rem; }
.prose p + p { text-indent: 1.5em; margin-bottom: 0; margin-top: 0; padding-top: 1.25rem; }
.prose p.prose__lede {
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 2rem;
  text-indent: 0;
}
.prose strong { color: var(--ink); font-weight: 500; }
.prose a { border-bottom: 1px solid var(--rule); transition: border-color .3s ease, color .3s ease; color: var(--red); }
.prose a:hover { border-color: var(--red); color: var(--red-deep); }

.prose__aside {
  margin: 3rem 0;
  padding: 2rem;
  border: 1px solid var(--rule);
  background: var(--sand);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
}
.prose__aside strong {
  display: block;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.75rem;
  font-weight: 600;
}

/* =====================================================================
   MEDIA PAGE tiles
   ===================================================================== */
.media-tiles {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(5rem, 9vw, 9rem);
}
.media-tiles__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 700px) { .media-tiles__grid { grid-template-columns: 1fr; } }
.media-tile {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  padding: 2.5rem 2rem;
  background: var(--sand);
  border: 1px solid var(--rule);
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
  overflow: hidden;
}
.media-tile:hover { background: var(--ink); color: var(--white); border-color: var(--ink); transform: translateY(-3px); }
.media-tile:hover .media-tile__num,
.media-tile:hover .media-tile__arrow,
.media-tile:hover .media-tile__title,
.media-tile:hover .media-tile__body { color: var(--white); }
.media-tile:hover .media-tile__num { color: var(--gold-light); }
.media-tile:hover .media-tile__arrow { color: var(--gold-light); }

.media-tile__text { display: flex; flex-direction: column; gap: 0.4rem; }
.media-tile__num {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--red);
}
.media-tile__title {
  font-family: var(--display);
  font-size: 1.7rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.media-tile__body {
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-top: 0.4rem;
}
.media-tile__arrow {
  align-self: center;
  font-family: var(--display);
  font-size: 2rem;
  color: var(--red);
  transition: transform .3s ease;
}
.media-tile:hover .media-tile__arrow { transform: translateX(6px); }

/* =====================================================================
   GIVING page
   ===================================================================== */
.giving-hero {
  padding: clamp(3rem, 5vw, 5rem) 0 clamp(2rem, 3vw, 3rem);
}
.giving-hero__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) { .giving-hero__inner { grid-template-columns: 1fr; } }
.giving-hero p {
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
.giving-hero__img {
  aspect-ratio: 4/5;
  overflow: hidden;
}
.giving-hero__img img { width: 100%; height: 100%; object-fit: cover; }

.giving-ways {
  background: var(--sand);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(4rem, 7vw, 6rem) 0;
}
.giving-ways__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 900px) { .giving-ways__grid { grid-template-columns: 1fr; } }
.giving-way {
  padding: 2rem;
  background: var(--white);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.giving-way__num {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--red);
}
.giving-way h3 {
  font-family: var(--display);
  font-size: 1.55rem;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.giving-way p { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; }
.giving-way__cta {
  margin-top: auto;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--red);
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  transition: color .25s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  align-self: flex-start;
}
.giving-way__cta::after { content: '→'; transition: transform .3s ease; }
.giving-way__cta:hover { color: var(--red-deep); }
.giving-way__cta:hover::after { transform: translateX(4px); }

/* =====================================================================
   CONTACT page
   ===================================================================== */
.contact-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card {
  padding: 2.5rem;
  background: var(--sand);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: background .3s ease, border-color .3s ease;
}
.contact-card:hover { background: var(--white); border-color: var(--ink); }
.contact-card h3 {
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.contact-card p { font-size: 1rem; line-height: 1.55; color: var(--ink-soft); }
.contact-card__link {
  margin-top: 0.75rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  align-self: flex-start;
}
.contact-card__link::after { content: '→'; transition: transform .3s ease; }
.contact-card__link:hover::after { transform: translateX(4px); }

.contact-info {
  max-width: var(--container);
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.contact-info > div {
  padding: 2rem 1.5rem;
  border-right: 1px solid var(--rule);
  text-align: center;
}
.contact-info > div:last-child { border-right: none; }
.contact-info dt {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 500;
  margin-bottom: 0.8rem;
}
.contact-info dd {
  font-family: var(--display);
  font-size: 1.1rem;
  line-height: 1.3;
}
@media (max-width: 700px) {
  .contact-info { grid-template-columns: 1fr; }
  .contact-info > div { border-right: none; border-bottom: 1px solid var(--rule); }
  .contact-info > div:last-child { border-bottom: none; }
}

/* =====================================================================
   Scroll reveal (fade-up)
   ===================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   Affiliate / resource strip
   ===================================================================== */
.affiliates {
  padding: clamp(3rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--rule);
  background: var(--sand);
}
.affiliates__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 800px) { .affiliates__inner { grid-template-columns: 1fr; gap: 1.5rem; } }
.affiliates__label {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-muted);
}
.affiliates__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.affiliates__list a {
  color: var(--ink-soft);
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.affiliates__list a:hover { color: var(--red); border-color: var(--red); }


/* ======================================================================
   THE WORLDWIDE CHURCH — shared template section (on every page)
   ====================================================================== */
.worldchurch {
  background: var(--sand);
  border-top: 1px solid var(--rule);
  padding: clamp(3.5rem, 7vw, 6.5rem) 0;
}
.worldchurch__head { max-width: 680px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.worldchurch__head .eyebrow { margin-bottom: 1.25rem; }
.worldchurch__head h2 { margin-bottom: 1rem; }
.worldchurch__head p { color: var(--ink-soft); max-width: 60ch; }

.worldchurch__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (max-width: 900px) { .worldchurch__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .worldchurch__grid { grid-template-columns: 1fr; } }

.worldchurch__tile {
  position: relative;
  background: var(--white);
  padding: 1.75rem 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: background 0.25s ease;
}
.worldchurch__tile:hover { background: var(--gold-pale); }
.worldchurch__tile-label {
  font-family: var(--sans);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
}
.worldchurch__tile h3 {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 550;
  line-height: 1.25;
  color: var(--ink);
}
.worldchurch__tile p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 32ch;
}
.worldchurch__tile-arrow {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  color: var(--gold);
  font-size: 1.05rem;
  transition: transform 0.25s ease;
}
.worldchurch__tile:hover .worldchurch__tile-arrow { transform: translateX(4px); }

.worldchurch__chain {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
}
.worldchurch__chain-label {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.worldchurch__chain-links { display: inline-flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: baseline; }
.worldchurch__chain-links a {
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.worldchurch__chain-links a:hover { color: var(--red); border-color: var(--red); }
.worldchurch__chain-sep { color: var(--gold); }

/* ======================================================================
   PORTMORE LAYER
   Everything below is specific to this build — accessibility, the
   condensing masthead, the Sabbath order-of-service card, the stat band,
   the lightbox, the enquiry form, and print.
   ====================================================================== */

/* ---- Accessibility ------------------------------------------------- */
.skip-link {
  position: absolute; left: 0.75rem; top: -100px; z-index: 999;
  background: var(--red); color: var(--white);
  font-family: var(--sans); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.08em; padding: 0.75rem 1.25rem;
  transition: top .2s ease;
}
.skip-link:focus { top: 0.75rem; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- Masthead strip: harbour rule ---------------------------------- */
.masthead-strip {
  background: var(--red-deep);
  color: var(--white);
  border-bottom: 1px solid rgba(212,175,55,0.28);
}
.masthead-strip__inner { font-size: 0.68rem; letter-spacing: 0.16em; }
.masthead-strip__dot { color: var(--gold-light); }
[data-sabbath] { font-variant-numeric: tabular-nums; }

/* ---- Nav: sticky + condensing -------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in oklab, var(--white) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .35s var(--ease), border-color .35s ease, background .35s ease;
}
.nav__inner { transition: padding .35s var(--ease); }
.nav.is-stuck {
  border-bottom-color: var(--rule);
  box-shadow: 0 14px 34px -28px rgba(26,26,26,0.7);
}
.nav.is-stuck .nav__inner { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.nav.is-stuck .nav__brand small { opacity: 0; transform: translateY(-4px); }
.nav__brand small { transition: opacity .3s ease, transform .3s ease; }
.nav__brand strong { letter-spacing: -0.015em; }
.nav__cta {
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.nav__cta::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #e2564b; margin-right: 0.55rem; flex: none;
  box-shadow: 0 0 0 0 rgba(226,86,75,0.65);
  animation: livepulse 2.4s infinite;
}
@keyframes livepulse {
  0%   { box-shadow: 0 0 0 0 rgba(226,86,75,0.6); }
  70%  { box-shadow: 0 0 0 7px rgba(226,86,75,0); }
  100% { box-shadow: 0 0 0 0 rgba(226,86,75,0); }
}
.nav__cta { display: inline-flex; align-items: center; }

/* ---- Hero ----------------------------------------------------------- */
.hero { min-height: min(88vh, 860px); }
.hero__img::after {
  background:
    linear-gradient(180deg, rgba(60,12,12,0.62) 0%, rgba(60,12,12,0.20) 38%, rgba(60,12,12,0.86) 100%),
    linear-gradient(90deg, rgba(60,12,12,0.60) 0%, rgba(60,12,12,0.05) 62%);
}
.hero__masthead { letter-spacing: -0.038em; }
.hero__masthead em { color: var(--gold-light); }

/* Order-of-service card, inset in the hero */
.hero__card {
  background: color-mix(in oklab, var(--white) 96%, transparent);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  padding: 1.6rem 1.75rem 1.5rem;
  max-width: 23rem;
  box-shadow: 0 30px 70px -40px rgba(60,12,12,0.85);
}
.hero__card-head {
  font-family: var(--sans);
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
  padding-bottom: 0.85rem; margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 1rem;
}
.hero__card-list { display: grid; gap: 0.55rem; }
.hero__card-row {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem;
  align-items: baseline;
  font-family: var(--display); font-size: 1rem; color: var(--ink);
}
.hero__card-row span:last-child {
  font-family: var(--sans); font-size: 0.8rem; font-weight: 600;
  color: var(--red); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hero__card-foot {
  margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: 0.75rem; color: var(--ink-muted); line-height: 1.5;
}
@media (max-width: 900px) { .hero__card { max-width: none; } }

/* ---- Editorial section numbering ------------------------------------ */
.sectionmark {
  display: flex; align-items: baseline; gap: 0.9rem;
  font-family: var(--sans); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 1.25rem;
}
.sectionmark::after { content: ''; height: 1px; flex: 1 1 auto; background: var(--rule); }
.sectionmark b { font-weight: 600; color: var(--red); font-variant-numeric: tabular-nums; }

/* ---- Stat band ------------------------------------------------------- */
.statband { background: var(--red-deep); color: var(--white); padding: clamp(2.75rem,5vw,4rem) 0; }
.statband__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(212,175,55,0.22);
  border-top: 1px solid rgba(212,175,55,0.22);
  border-bottom: 1px solid rgba(212,175,55,0.22);
}
.statband__item { background: var(--red-deep); padding: 1.75rem 1.5rem; }
.statband__value {
  font-family: var(--display); font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem);
  line-height: 1; letter-spacing: -0.03em; color: var(--gold-light);
}
.statband__label {
  margin-top: 0.6rem; font-family: var(--sans); font-size: 0.68rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.72);
}
@media (max-width: 820px) { .statband__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .statband__grid { grid-template-columns: 1fr; } }

/* ---- Gallery: captions readable on touch, lightbox trigger ---------- */
.gallery__item { cursor: zoom-in; background: var(--sand-deep); }
.gallery__item::after { background: rgba(60,12,12,0.82); }
@media (hover: none) { .gallery__item::after { opacity: 1; } }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(24,10,10,0.94);
  display: none; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: min(1200px, 94vw); max-height: 82vh;
  width: auto; height: auto; object-fit: contain;
  box-shadow: 0 40px 90px -40px #000;
}
.lightbox__cap {
  position: absolute; bottom: clamp(1rem,3vw,2.25rem); left: 50%; transform: translateX(-50%);
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.8); text-align: center;
}
.lightbox__close, .lightbox__nav {
  position: absolute; color: var(--white);
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.3); background: rgba(0,0,0,0.25);
  font-size: 1.25rem; line-height: 1;
}
.lightbox__close { top: clamp(1rem,3vw,2rem); right: clamp(1rem,3vw,2rem); }
.lightbox__nav--prev { left: clamp(0.5rem,2vw,2rem); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: clamp(0.5rem,2vw,2rem); top: 50%; transform: translateY(-50%); }
.lightbox__close:hover, .lightbox__nav:hover { background: var(--gold); border-color: var(--gold); }

/* ---- Enquiry form (Netlify Forms) ----------------------------------- */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.form__field { display: grid; gap: 0.4rem; }
.form__field label {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted);
}
.form__field input,
.form__field select,
.form__field textarea {
  font: inherit; font-family: var(--sans); font-size: 0.95rem;
  color: var(--ink); background: var(--white);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 0.8rem 0.9rem; width: 100%;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.form__field textarea { min-height: 9rem; resize: vertical; }
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(178,34,34,0.12);
}
.form__note { font-family: var(--sans); font-size: 0.78rem; color: var(--ink-muted); line-height: 1.6; }
.form__hp { position: absolute; left: -9999px; }

/* ---- Prayer / request callout --------------------------------------- */
.callout {
  border: 1px solid var(--rule); border-left: 3px solid var(--gold);
  background: var(--sand); padding: 1.75rem 1.9rem;
}
.callout h3 {
  font-family: var(--display); font-size: 1.35rem; margin-bottom: 0.6rem;
  letter-spacing: -0.015em;
}
.callout p { font-family: var(--sans); font-size: 0.95rem; color: var(--ink-soft); line-height: 1.6; }

/* ---- Refinements over the base layer -------------------------------- */
.services__item-time { font-variant-numeric: tabular-nums; }
.worldchurch__tile:hover { background: var(--gold-pale); border-color: var(--gold); }
.media-tile:hover .media-tile__num,
.media-tile:hover .media-tile__arrow { color: var(--gold-light); }
.pullquote__body { }
.footer { background: var(--red-deep); }
.visit { background: var(--red-deep); }

/* Serif optical sizing — Newsreader */
h1, .display-xl { }
h2, .display-lg, .display-md { }
h3, .display-sm { }

/* ---- Print ---------------------------------------------------------- */
@media print {
  .nav, .nav-drawer, .masthead-strip, .hero__img, .hero__grain,
  .lightbox, .footer__social, .btn, .nav__cta { display: none !important; }
  body { background: #fff; color: #000; }
  body::before, body::after { display: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.7em; word-break: break-all; }
  .section, .story-section, .ministries, .gallery { padding: 1rem 0 !important; }
}

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

/* Contact page: asymmetric split that collapses properly on small screens */
.contact-grid--split { grid-template-columns: 1.25fr 1fr; align-items: start; }
@media (max-width: 900px) { .contact-grid--split { grid-template-columns: 1fr; } }

/* Long unbreakable tokens (the church email, URLs) must not force a grid
   track wider than the viewport. Grid/flex children default to min-width:auto. */
.contact-grid > *, .contact-info > *, .form__row > *,
.giving-ways__grid > *, .media-tiles__grid > *,
.worldchurch__grid > *, .visit__details > * { min-width: 0; }

.contact-card__link,
.contact-info dd,
.visit__detail-value,
.pastor-meta dd { overflow-wrap: anywhere; }

/* --- Contrast corrections -------------------------------------------
   The brass used for rules and hovers is too light for small uppercase
   label text on paper (3.7:1). A darker tone is used wherever brass
   carries text, keeping the lighter tone for rules, borders and hovers. */
:root { --gold-deep: #8a6224; }

.eyebrow, .sectionmark,
.hero__card-head,
.media-tile__num, .giving-way__num,
.worldchurch__tile-label,
.pastor-meta dt, .contact-info dt,
.services__item-day, .visit__detail-label,
.footer__col h4 { color: var(--gold-deep); }

/* On dark grounds the light brass is correct — restore it there. */
.visit__detail-label, .footer__col h4,
.statband__label, .eyebrow--white,
.hero__content .eyebrow { color: var(--gold-light); }

/* Decorative arrows and separators also carry brass; darken for AA. */
.worldchurch__tile-arrow, .worldchurch__chain-sep,
.sermon-row__arrow, .ministry__num { color: var(--gold-deep); }

/* Hero lockup: the full church name sits under the place name at a
   smaller optical size so the whole title still reads as one unit. */
.hero__masthead-sub {
  display: block;
  font-size: clamp(1.35rem, 0.6rem + 2.1vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: 0.35em;
}

/* ======================================================================
   READABILITY LAYER
   Institutional register runs to long sentences. To stop that becoming
   a wall, the measure is capped, leading is opened up, the print-style
   paragraph indent is removed, and facts that were buried in prose are
   pulled out into labelled rows and lists.
   ====================================================================== */

.prose { line-height: 1.75; max-width: 64ch; }
.prose p { margin-bottom: 1.45rem; }
.prose p + p { text-indent: 0; margin-top: 0; padding-top: 0; margin-bottom: 1.45rem; }
.prose h2 { margin-top: 3.25rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 2.25rem; margin-bottom: 0.75rem; font-size: 1.15rem; }
.prose__lede { line-height: 1.65; }

.welcome__body { line-height: 1.75; }
.welcome__body p + p { text-indent: 0; margin-top: 1.35rem; }
.story-grid__text p { line-height: 1.72; }
.story-grid__text p + p { margin-top: 1.2rem; }

/* Labelled fact rows — for anything that is really a table of facts */
.factlist {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
  margin: 2rem 0;
}
.factlist__row {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.factlist__row dt,
.factlist__label {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  line-height: 1.5;
}
.factlist__row dd,
.factlist__value {
  font-family: var(--display);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 640px) {
  .factlist__row { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* Plain bulleted list, for genuine lists that were prose before */
.plainlist { display: grid; gap: 0.7rem; margin: 1.5rem 0; }
.plainlist li {
  position: relative;
  padding-left: 1.4rem;
  font-family: var(--display);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.plainlist li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  background: var(--gold);
}
.plainlist li strong { color: var(--ink); font-weight: 500; }

/* Pastor page */
.pastor-lead {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .pastor-lead { grid-template-columns: 1fr; } }
.pastor-figure { position: sticky; top: 108px; }
@media (max-width: 900px) { .pastor-figure { position: static; } }
.pastor-figure__frame {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  background: var(--sand);
  padding: 0.75rem;
}
.pastor-figure__frame img { width: 100%; height: auto; display: block; }
.pastor-figure__placeholder {
  aspect-ratio: 4/5;
  display: grid;
  place-content: center;
  gap: 0.75rem;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(212,175,55,0.06) 10px 20px),
    var(--sand-deep);
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2rem;
}
.pastor-figure__cap {
  margin-top: 0.9rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--ink-muted);
}
.pastor-figure__cap strong {
  display: block;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 0.2rem;
  text-transform: none;
}

/* ======================================================================
   BRAND LAYER
   Applies the church's typography and corner radii over the base sheet.
   ====================================================================== */

/* ---- Headline face: Montserrat, ExtraBold for display ---------------- */
h1, h2, h3, h4,
.display-xl, .display-lg, .display-md, .display-sm,
.hero__masthead, .statband__value, .welcome__title,
.pastor-figure__cap strong, .callout h3, .footer__brand h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.022em;
  font-style: normal;
}
.hero__masthead { font-weight: 800; letter-spacing: -0.035em; }
.hero__masthead-sub { font-weight: 700; letter-spacing: -0.02em; }
h3, .display-sm, .ministry__title, .worldchurch__tile h3,
.giving-way h3, .contact-card h3 { font-weight: 700; letter-spacing: -0.015em; }
.pullquote__body { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; }

/* Emphasis inside a heading is carried by the gold, not by an italic —
   a heavy geometric italic reads as a mistake at display sizes. */
h1 em, h2 em, h3 em,
.hero__masthead em, .welcome__title em, .footer__brand h3 em {
  font-style: normal;
  color: var(--red);
}
.hero__masthead em, .footer__brand h3 em,
.visit h2 em, .statband em { color: var(--gold); }

/* Body face: Inter */
body, p, li, dd, input, select, textarea, button {
  font-family: var(--sans);
}
.prose, .prose p, .welcome__body, .welcome__body p,
.story-grid__text p, .ministry__body,
.factlist__row dd, .factlist__value, .plainlist li,
.hero__card-row { font-family: var(--sans); }
.hero__card-row { font-weight: 500; }
.hero__card-row span:last-child { font-weight: 600; color: var(--red); }
.plainlist li strong, .factlist__row dd strong { font-weight: 600; }

/* Inter runs a shade large at a given size next to Montserrat */
.prose { font-size: 1rem; line-height: 1.72; }
.prose__lede { font-size: 1.12rem; font-weight: 400; line-height: 1.62; }

/* ---- Corner radii ---------------------------------------------------- */
.btn, .nav__cta, button[type="submit"] { border-radius: var(--r-btn); }
.form__field input,
.form__field select,
.form__field textarea { border-radius: var(--r-btn); }

.hero__img,
.hero__img img,
.story-grid__img,
.story-grid__img img,
.giving-hero__img,
.giving-hero__img img,
.ministry__img,
.ministry__img img,
.gallery__item,
.gallery__item img,
.pastor-figure__frame,
.pastor-figure__frame img,
.pastor-figure__placeholder,
.lightbox img { border-radius: var(--r-img); }

.hero__card,
.callout,
.worldchurch__tile,
.media-tile,
.contact-card,
.giving-way,
.statband__item,
.prose__aside { border-radius: var(--r-card); }

.gallery__item, .story-grid__img, .ministry__img,
.giving-hero__img, .pastor-figure__frame { overflow: hidden; }

.sectionmark::after, .rule { border-radius: 2px; }
.plainlist li::before { border-radius: 2px; }

/* The hero is full-bleed — square it off again */
.hero, .hero__img, .hero__img img { border-radius: 0; }

/* Dark grounds sit on deep red now */
.footer, .visit, .statband { background: var(--red-deep); }
.statband__item { background: var(--red-deep); border-radius: 0; }
.statband__grid { background: rgba(212,175,55,0.24); border-radius: var(--r-card); overflow: hidden; }
.statband__value { color: var(--gold-light); }

/* Alternate section ground is Sand, page ground is White */
body { background: var(--white); }
.services, .ministries { background: var(--sand); }

/* Live dot on the nav button reads better in gold on red */
.nav__cta { background: var(--red); color: var(--white); border-color: var(--red); }
.nav__cta:hover { background: var(--red-deep); border-color: var(--red-deep); }

/* The oversized decorative quote glyph in brand gold does not carry
   enough contrast on white at any size, so it uses the darkened gold. */
.pullquote__mark { color: var(--gold-deep); opacity: 0.9; }

/* ======================================================================
   HERO AND THE SANCTUARY BACKGROUND
   ====================================================================== */

/* The hero photograph is already dark, so the scrim is lighter than the
   base sheet's — enough to hold the wordmark, not enough to flatten faces. */
.hero__img::after {
  background:
    linear-gradient(180deg, rgba(45,10,10,0.56) 0%, rgba(45,10,10,0.16) 42%, rgba(45,10,10,0.80) 100%),
    linear-gradient(90deg, rgba(45,10,10,0.54) 0%, rgba(45,10,10,0.02) 62%);
}
.hero__img img { object-position: center 42%; }

/* The wide sanctuary interior now sits behind the visit band, where it
   reads as texture rather than competing with the wordmark. It appears
   on every page, which is what "in a background somewhere" asked for. */
.visit {
  position: relative;
  isolation: isolate;
  background: var(--red-deep);
  overflow: hidden;
}
.visit::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('images/sanctuary-bg.webp') center 38% / cover no-repeat;
  opacity: 0.20;
}
.visit::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(109,23,23,0.86) 0%, rgba(109,23,23,0.62) 55%, rgba(109,23,23,0.80) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 900px) { .visit::before { background-attachment: fixed; } }
}

/* The gold subtitle fell to 1.7:1 where it crossed the bronze lace in the
   photograph. The scrim now protects the left text column specifically and
   fades out across the faces, rather than dimming the whole frame. */
.hero__img::after {
  background:
    linear-gradient(180deg, rgba(45,10,10,0.50) 0%, rgba(45,10,10,0.22) 45%, rgba(45,10,10,0.82) 100%),
    linear-gradient(90deg, rgba(45,10,10,0.74) 0%, rgba(45,10,10,0.50) 40%, rgba(45,10,10,0.04) 72%);
}
.hero__masthead,
.hero__masthead-sub,
.hero__content .eyebrow { text-shadow: 0 2px 26px rgba(30,6,6,0.5); }
/* Hug the text so the box matches the glyphs (and so the scrim behind it
   is the scrim it actually sits on). */
.hero__masthead-sub { display: inline-block; }

/* ======================================================================
   CHURCH LOGO
   Supplied as a stacked lockup: emblem over three lines of type. The
   smallest of those lines is 8% of the mark's height, so at any nav-bar
   size it would set below 5px and read as noise. The nav therefore uses
   the emblem alone beside type set in the brand face, and the full
   lockup is reversed out in white in the footer where it has room.
   ====================================================================== */
.nav__brand {
  flex-direction: row;
  align-items: center;
  gap: 0.7rem;
}
.nav__brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav__logo {
  height: 40px;
  width: auto;
  display: block;
  flex: none;
  transition: height .35s var(--ease);
}
.nav.is-stuck .nav__logo { height: 32px; }
.nav-drawer__head .nav__logo { height: 38px; }

.footer__logo {
  width: clamp(190px, 17vw, 240px);
  height: auto;
  display: block;
  margin-bottom: 1.25rem;
}

@media (max-width: 560px) {
  .nav__logo { height: 34px; }
  .nav__brand small { display: none; }
}

/* The emblem adds ~55px to the brand block, which tips the nav into
   wrapping before the mobile drawer takes over. The subtitle goes first,
   then the wordmark, so the emblem and the links survive longest. */
@media (max-width: 1180px) {
  .nav__brand small { display: none; }
}
@media (max-width: 1040px) {
  .nav__center { gap: 1.1rem; }
  .nav__link { font-size: 0.72rem; letter-spacing: 0.1em; }
}
@media (max-width: 960px) {
  .nav__brand-text { display: none; }
  .nav__logo { height: 38px; }
}

/* ======================================================================
   NAV BRAND LOCKUP  (revision)
   The wordmark beside the emblem is set in Lato, which is the face used
   in the church's own logo — matched by comparing letterforms against
   the "PORTMORE" line in the supplied artwork (74.7% overlap; the next
   candidate scored 62%). Lato is also on the church's approved list.

   Three fixes here:
     · "St. Catherine" moves to its own row rather than trailing the
       church name after an interpunct
     · nothing wraps, at any width
     · the condensed state keeps the whole lockup instead of collapsing
       to "Portmore" on its own
   ====================================================================== */
:root { --brandface: 'Lato', -apple-system, system-ui, sans-serif; }

.nav__brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}
.nav__brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}
.nav__brand strong {
  font-family: var(--brandface);
  font-weight: 700;
  font-size: 1.22rem;
  line-height: 1.06;
  letter-spacing: -0.005em;
  color: var(--ink);
  white-space: nowrap;
  transition: font-size .35s var(--ease);
}
.nav__brand small {
  font-family: var(--brandface);
  font-weight: 400;
  font-size: 0.585rem;
  line-height: 1.35;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  display: block;
  opacity: 1;
  transform: none;
  transition: font-size .35s var(--ease);
}
.nav__logo {
  height: 46px;
  width: auto;
  display: block;
  flex: none;
  transition: height .35s var(--ease);
}

/* Condensed: the lockup stays whole, it just tightens. */
.nav.is-stuck .nav__logo      { height: 38px; }
.nav.is-stuck .nav__brand strong { font-size: 1.08rem; }
.nav.is-stuck .nav__brand small  { font-size: 0.54rem; opacity: 1; transform: none; }

.nav-drawer__head .nav__logo { height: 42px; }

/* Degradation order: second subtitle row, then the first, then the
   wordmark. The emblem is the last thing to go, and never does. */
@media (max-width: 1150px) { .nav__brand small + small { display: none; } }
@media (max-width: 1060px) { .nav__brand small { display: none; } }
@media (max-width: 1340px) { .nav__center { gap: 1.15rem; } .nav__link { font-size: 0.72rem; letter-spacing: 0.09em; } }
@media (max-width: 1060px) { .nav__center { gap: 0.95rem; } .nav__link { font-size: 0.69rem; letter-spacing: 0.07em; } }
@media (max-width: 960px)  { .nav__brand-text { display: none; } }

/* The drawer has room — always show the full three rows there. */
.nav-drawer__head .nav__brand-text { display: flex !important; }
.nav-drawer__head .nav__brand small { display: block !important; }

/* ======================================================================
   NAV GRID — collision fix
   The base sheet used `1fr auto 1fr`, which sizes the brand track to a
   third of the bar regardless of what is in it. Once the emblem and a
   three-row wordmark went in, the brand outgrew that track and spilled
   over the links — grid items overflow silently, so the bar never
   wrapped and a height-based check could never have caught it.
   `auto 1fr auto` sizes the brand and the button to their content and
   gives the links whatever is left.
   ====================================================================== */
.nav__inner { grid-template-columns: auto 1fr auto; gap: 1.5rem; }
.nav__center { justify-content: center; flex-wrap: nowrap; min-width: 0; }
.nav__brand { min-width: 0; }

/* ======================================================================
   ADDITIONS — August 2026
   Navigation menus, Sabbath School ticker, search, reading options,
   events, announcements, memorial, sermon cards, ministries, beliefs,
   FAQ and extended form controls. Same tokens as the base system.
   ====================================================================== */

/* ---- Navigation dropdowns ------------------------------------------- */
.nav__item { position: relative; display: flex; align-items: center; }

.nav__link--menu {
  display: inline-flex; align-items: center; gap: 0.3rem;
  cursor: pointer; font: inherit; letter-spacing: inherit;
}
.nav__chev { width: 13px; height: 13px; transition: transform .25s var(--ease); flex: none; }
.nav__item.is-open .nav__chev { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px);
  min-width: 246px; padding: 0.55rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: 0 18px 44px rgba(26,26,26,.14), 0 2px 6px rgba(26,26,26,.06);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index: 60;
}
.nav__item.is-open .nav__menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav__menu::before {
  content: ''; position: absolute; top: -6px; left: 50%; margin-left: -6px;
  width: 11px; height: 11px; background: var(--white);
  border-left: 1px solid var(--rule); border-top: 1px solid var(--rule);
  transform: rotate(45deg);
}
.nav__menu a {
  position: relative; display: block; padding: 0.62rem 0.85rem;
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 500;
  color: var(--ink-soft); border-radius: var(--r-sm);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.nav__menu a:hover, .nav__menu a:focus-visible { background: var(--sand); color: var(--red); }
.nav__menu-cta {
  margin-top: 0.35rem; border-top: 1px solid var(--rule);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  color: var(--red) !important; font-weight: 600 !important;
}

/* Icon buttons in the nav bar */
.nav__icon {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: var(--ink-soft);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.nav__icon svg { width: 19px; height: 19px; }
.nav__icon:hover, .nav__icon:focus-visible { background: var(--sand); color: var(--red); }
@media (max-width: 1150px) { .nav__icon { display: none; } }

/* Drawer group labels */
.nav-drawer__group {
  margin: 1.1rem 0 0.2rem; padding-top: 0.9rem;
  border-top: 1px solid rgba(255,255,255,.16);
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; opacity: .62;
}

/* ---- Sabbath School ticker ------------------------------------------ */
.lesson-ticker {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(90deg, var(--gold-pale), var(--sand) 55%, var(--gold-pale));
}
.lesson-ticker__inner {
  max-width: var(--container); margin: 0 auto;
  padding: 0.72rem var(--gap);
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-soft);
}
.lesson-ticker__tag {
  flex: none; display: inline-flex; align-items: center; gap: .45rem;
  padding: .28rem .62rem; border-radius: 100px;
  background: var(--red); color: var(--white);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.lesson-ticker__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold-light);
  animation: tickerPulse 2.4s var(--ease) infinite;
}
@keyframes tickerPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
.lesson-ticker__track { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.lesson-ticker__text {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lesson-ticker__text b { font-weight: 700; color: var(--ink); }
.lesson-ticker__text .sep { color: var(--gold-deep); margin: 0 .5rem; }
.lesson-ticker__link {
  flex: none; font-weight: 600; color: var(--red); white-space: nowrap;
  border-bottom: 1px solid transparent; transition: border-color .2s var(--ease);
}
.lesson-ticker__link:hover { border-bottom-color: var(--red); }
@media (max-width: 720px) {
  .lesson-ticker__inner { gap: .7rem; padding: .6rem var(--gap); font-size: var(--t-xs); }
  .lesson-ticker__link { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lesson-ticker__dot { animation: none; } }

/* ---- Search overlay -------------------------------------------------- */
.search {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(26,26,26,.55); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s;
  padding: clamp(3rem, 12vh, 8rem) var(--gap) var(--gap);
}
.search.is-open { opacity: 1; visibility: visible; }
.search__panel {
  max-width: 720px; margin: 0 auto;
  background: var(--white); border-radius: var(--r-card);
  box-shadow: 0 30px 80px rgba(0,0,0,.32);
  overflow: hidden; transform: translateY(-12px);
  transition: transform .28s var(--ease);
}
.search.is-open .search__panel { transform: none; }
.search__bar { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--rule); }
.search__bar svg { width: 20px; height: 20px; color: var(--ink-muted); flex: none; }
.search__input {
  flex: 1; border: none; outline: none; background: none;
  font-family: var(--display); font-size: var(--t-lg); font-weight: 500; color: var(--ink);
}
.search__close { color: var(--ink-muted); font-size: 1.5rem; line-height: 1; padding: .2rem .4rem; }
.search__results { max-height: min(58vh, 460px); overflow-y: auto; }
.search__result { display: block; padding: .95rem 1.25rem; border-bottom: 1px solid var(--sand-deep); }
.search__result:last-child { border-bottom: none; }
.search__result:hover, .search__result:focus-visible { background: var(--sand); }
.search__result h4 { font-family: var(--display); font-size: var(--t-base); font-weight: 600; color: var(--ink); margin-bottom: .18rem; }
.search__result p { font-size: var(--t-sm); color: var(--ink-muted); line-height: 1.5; }
.search__result mark { background: var(--gold-pale); color: inherit; padding: 0 .12em; }
.search__empty { padding: 1.6rem 1.25rem; font-size: var(--t-sm); color: var(--ink-muted); }
.search__hint { padding: .7rem 1.25rem; border-top: 1px solid var(--rule); background: var(--sand); font-size: var(--t-xs); color: var(--ink-muted); }

/* ---- Reading options (accessibility) --------------------------------- */
.a11y {
  position: fixed; right: var(--gap); top: calc(var(--nav-h) + 30px); z-index: 190;
  width: 288px; padding: 1.15rem;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-card);
  box-shadow: 0 22px 54px rgba(26,26,26,.18);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.a11y.is-open { opacity: 1; visibility: visible; transform: none; }
.a11y h4 { font-family: var(--display); font-size: var(--t-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .9rem; color: var(--ink); }
.a11y__row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-top: 1px solid var(--sand-deep); }
.a11y__row:first-of-type { border-top: none; }
.a11y__row span { font-size: var(--t-sm); color: var(--ink-soft); }
.a11y__toggle {
  flex: none; width: 46px; height: 26px; border-radius: 100px;
  background: var(--sand-deep); position: relative; transition: background .2s var(--ease);
}
.a11y__toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .2s var(--ease);
}
.a11y__toggle[aria-pressed="true"] { background: var(--red); }
.a11y__toggle[aria-pressed="true"]::after { transform: translateX(20px); }
.a11y__reset { margin-top: .9rem; font-size: var(--t-xs); color: var(--ink-muted); text-decoration: underline; }

html.a11y-large { font-size: 118%; }
html.a11y-contrast body { background: #fff; }
html.a11y-contrast body::before, html.a11y-contrast body::after { display: none; }
html.a11y-contrast {
  --ink: #000; --ink-soft: #14161a; --ink-muted: #24272c;
  --sand: #f2f2f2; --sand-deep: #dcdcdc; --rule: #8a8a8a;
  --red: #8f1414; --gold-deep: #4d3c0d;
}
/* (Removed: a blanket underline on every link put lines under the church
   name, the navigation and the Sabbath School band. text-decoration is
   inherited through descendants and cannot be undone by a child rule, so
   the underline has to be applied only where it is wanted. See the scoped
   prose rules further down.) */
html.a11y-nomotion *, html.a11y-nomotion *::before, html.a11y-nomotion *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}

/* ---- Card grids (events, announcements, ministries, sermons) ---------- */
.cards { display: grid; gap: 1.25rem; }
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); }

.card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-card);
  overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
a.card:hover, a.card:focus-visible {
  transform: translateY(-3px); border-color: var(--gold);
  box-shadow: 0 16px 38px rgba(26,26,26,.10);
}
.card__media { position: relative; aspect-ratio: 16 / 9; background: var(--sand-deep); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
a.card:hover .card__media img { transform: scale(1.04); }
.card__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(26,26,26,0) 35%, rgba(26,26,26,.45));
}
.card__play svg { width: 52px; height: 52px; color: var(--white); filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.card__badge {
  position: absolute; right: .6rem; bottom: .6rem;
  padding: .2rem .48rem; border-radius: var(--r-sm);
  background: rgba(26,26,26,.82); color: var(--white);
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 600;
}
.card__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.card__kicker {
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep);
}
.card__title { font-family: var(--display); font-size: var(--t-md); font-weight: 600; line-height: 1.3; color: var(--ink); }
.card__meta { font-size: var(--t-sm); color: var(--ink-muted); }
.card__text { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.6; }
.card__foot { margin-top: auto; padding-top: .6rem; font-size: var(--t-sm); font-weight: 600; color: var(--red); }

/* ---- Date-led list (events, announcements) --------------------------- */
.datelist { border-top: 1px solid var(--rule); }
.datelist__item {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 1.4rem; align-items: start;
  padding: 1.4rem 0; border-bottom: 1px solid var(--rule);
}
.datelist__date {
  text-align: center; padding: .55rem .3rem; border-radius: var(--r-sm);
  background: var(--sand); border: 1px solid var(--sand-deep);
}
.datelist__day { display: block; font-family: var(--display); font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--red); }
.datelist__mon { display: block; margin-top: .2rem; font-family: var(--sans); font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.datelist__body h3 { font-family: var(--display); font-size: var(--t-lg); font-weight: 600; color: var(--ink); margin-bottom: .3rem; }
.datelist__body p { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.6; }
.datelist__when { font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-muted); white-space: nowrap; padding-top: .2rem; }
.datelist__tag {
  display: inline-block; margin-bottom: .4rem; padding: .16rem .5rem; border-radius: 100px;
  background: var(--gold-pale); color: var(--gold-deep);
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
@media (max-width: 720px) {
  .datelist__item { grid-template-columns: 68px 1fr; gap: 1rem; }
  .datelist__when { grid-column: 2; white-space: normal; padding-top: 0; }
}

/* ---- Empty states ---------------------------------------------------- */
.empty {
  padding: 3rem 1.5rem; text-align: center;
  background: var(--sand); border: 1px dashed var(--rule); border-radius: var(--r-card);
}
.empty h3 { font-family: var(--display); font-size: var(--t-lg); font-weight: 600; margin-bottom: .5rem; color: var(--ink); }
.empty p { font-size: var(--t-sm); color: var(--ink-muted); max-width: 46ch; margin: 0 auto; line-height: 1.65; }

/* ---- Memorial -------------------------------------------------------- */
.memorial-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }
.memorial {
  padding: 1.5rem 1.35rem; text-align: center;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-card);
  border-top: 3px solid var(--gold);
}
.memorial__name { font-family: var(--display); font-size: var(--t-md); font-weight: 600; color: var(--ink); }
.memorial__years { margin-top: .3rem; font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-muted); letter-spacing: .04em; }
.memorial__note { margin-top: .7rem; font-size: var(--t-sm); color: var(--ink-soft); font-style: italic; line-height: 1.6; }
.memorial-verse {
  margin: 0 auto 2.6rem; max-width: 56ch; text-align: center;
  font-family: var(--display); font-size: var(--t-lg); font-style: italic; color: var(--ink-soft); line-height: 1.6;
}
.memorial-verse cite { display: block; margin-top: .7rem; font-family: var(--sans); font-size: var(--t-sm); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); }

/* ---- Beliefs --------------------------------------------------------- */
.beliefs { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; }
.belief { background: var(--white); padding: 1.5rem 1.6rem; display: grid; grid-template-columns: 54px 1fr; gap: 1.1rem; }
.belief__num { font-family: var(--display); font-size: var(--t-lg); font-weight: 700; color: var(--gold); line-height: 1.2; }
.belief__title { font-family: var(--display); font-size: var(--t-md); font-weight: 600; color: var(--ink); margin-bottom: .35rem; }
.belief__text { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.65; }
.belief__ref { display: block; margin-top: .45rem; font-family: var(--sans); font-size: var(--t-xs); letter-spacing: .06em; color: var(--gold-deep); }
@media (max-width: 620px) { .belief { grid-template-columns: 38px 1fr; gap: .8rem; padding: 1.25rem 1.1rem; } }

/* ---- FAQ ------------------------------------------------------------- */
.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem;
  padding: 1.25rem 0; text-align: left;
  font-family: var(--display); font-size: var(--t-md); font-weight: 600; color: var(--ink);
}
.faq__q:hover { color: var(--red); }
.faq__sign { flex: none; width: 22px; height: 22px; margin-top: .18rem; position: relative; }
.faq__sign::before, .faq__sign::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: var(--red);
  transform: translate(-50%,-50%); transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.faq__sign::before { width: 14px; height: 2px; }
.faq__sign::after  { width: 2px; height: 14px; }
.faq__item.is-open .faq__sign::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.faq__a { display: none; padding: 0 0 1.4rem; max-width: 74ch; }
.faq__item.is-open .faq__a { display: block; }
.faq__a p { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.75; }
.faq__a p + p { margin-top: .8rem; }
.faq__a a { color: var(--red); border-bottom: 1px solid rgba(178,34,34,.35); }

/* ---- Video embeds ---------------------------------------------------- */
.embed {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  border-radius: var(--r-img); overflow: hidden; background: #000;
  border: 1px solid var(--rule);
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Ministry hub ---------------------------------------------------- */
.minhub { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); }
.minhub__card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 260px; padding: 1.5rem; overflow: hidden;
  border-radius: var(--r-card); color: var(--white); isolation: isolate;
}
.minhub__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--ease); }
.minhub__card::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(26,26,26,.12) 30%, rgba(26,26,26,.86));
}
.minhub__card:hover img { transform: scale(1.05); }
.minhub__num { font-family: var(--sans); font-size: var(--t-xs); font-weight: 700; letter-spacing: .18em; color: var(--gold-light); }
.minhub__title { margin-top: .4rem; font-family: var(--display); font-size: var(--t-lg); font-weight: 600; }
.minhub__meta { margin-top: .35rem; font-size: var(--t-sm); opacity: .84; }

/* Homepage ministries teaser (replaces the six cards) */
.min-teaser { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.min-teaser__names { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 1.8rem; }
.min-teaser__names span {
  padding: .42rem .85rem; border-radius: 100px;
  background: var(--white); border: 1px solid var(--rule);
  font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-soft);
}
.min-teaser__stat { text-align: center; padding: 2.4rem 1.5rem; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-card); }
.min-teaser__stat b { display: block; font-family: var(--display); font-size: clamp(3.4rem, 7vw, 5.4rem); font-weight: 700; line-height: 1; color: var(--red); }
.min-teaser__stat span { display: block; margin-top: .6rem; font-family: var(--sans); font-size: var(--t-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); }
@media (max-width: 860px) { .min-teaser { grid-template-columns: 1fr; } }

/* ---- Extended form controls ------------------------------------------ */
.form__field--check { display: flex; align-items: flex-start; gap: .7rem; }
.form__field--check input { width: 18px; height: 18px; margin-top: .18rem; accent-color: var(--red); flex: none; }
.form__field--check label { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.55; font-weight: 400; letter-spacing: 0; text-transform: none; }
.form__optional { font-weight: 400; color: var(--ink-muted); text-transform: none; letter-spacing: 0; }
.checkgrid { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.checkgrid label {
  display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-sm);
  font-size: var(--t-sm); color: var(--ink-soft); cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.checkgrid label:hover { border-color: var(--gold); background: var(--sand); }
.checkgrid input { accent-color: var(--red); width: 17px; height: 17px; flex: none; }

.privacy-note {
  margin-top: 1.1rem; padding: 1rem 1.15rem;
  background: var(--gold-pale); border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.65;
}
.privacy-note strong { color: var(--ink); }

/* ---- Small utilities -------------------------------------------------- */
.stack > * + * { margin-top: 1.15rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.center { text-align: center; }
.muted { color: var(--ink-muted); }
.bg-sand { background: var(--sand); }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filters button {
  padding: .48rem 1rem; border-radius: 100px; border: 1px solid var(--rule);
  background: var(--white); font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-soft);
  transition: all .2s var(--ease);
}
.filters button:hover { border-color: var(--gold); }
.filters button.is-active { background: var(--red); border-color: var(--red); color: var(--white); font-weight: 600; }

/* ---- Mobile drawer: corrections for the longer menu -------------------
   The drawer is translated off-screen when closed, but with a full menu
   its content is taller than the viewport and used to spill back into the
   page, where the links intercepted clicks on desktop. Hiding it outright
   when closed fixes that, and the list now scrolls instead of running off
   the bottom on small phones. */
.nav-drawer {
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.7,0,.2,1), visibility .5s;
}
.nav-drawer.is-open { visibility: visible; pointer-events: auto; }
.nav-drawer__head { margin-bottom: 1.5rem; }
.nav-drawer__list {
  gap: 0.5rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: .5rem;
}
.nav-drawer__list a {
  font-size: clamp(1.3rem, 5vw, 1.75rem);
  line-height: 1.25;
  display: block;
  padding: .12rem 0;
}
.nav-drawer__sub { margin-top: 1.25rem; padding-top: 1.25rem; }

/* ---- Desktop nav: fitting the fuller menu ----------------------------
   The bar now carries two dropdowns and two icon buttons on top of the
   original links, so the centre column was overrunning the right one and
   sitting on top of the Watch Live button. Tighter tracking above
   1200px, and the drawer takes over below it. */
@media (min-width: 1201px) {
  .nav__inner { gap: 1.25rem; }
  .nav__center { gap: 1.35rem; min-width: 0; }
  .nav__link { font-size: 0.72rem; letter-spacing: 0.09em; white-space: nowrap; }
  .nav__right { gap: 0.5rem; }
}
@media (min-width: 1441px) {
  .nav__center { gap: 1.75rem; }
  .nav__link { font-size: 0.75rem; letter-spacing: 0.12em; }
}
@media (max-width: 1200px) {
  .nav__inner { grid-template-columns: 1fr auto; gap: 1rem; }
  .nav__center, .nav__right { display: none; }
  .nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid color-mix(in oklab, var(--ink) 25%, transparent);
    border-radius: 999px;
    color: var(--ink);
  }
  .nav__toggle svg { width: 18px; height: 18px; }
}
.nav-drawer__tools { display: flex; gap: .6rem; margin-top: 1.25rem; flex-wrap: wrap; }
.nav-drawer__tools button {
  padding: .6rem 1rem; border-radius: 100px;
  border: 1px solid color-mix(in oklab, var(--ink) 22%, transparent);
  font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-soft);
}
.nav-drawer__tools button:hover { border-color: var(--red); color: var(--red); }
/* Drawer head: keep the brand clear of the close button on narrow phones */
.nav-drawer__head .nav__brand-text small { font-size: .62rem; }
.nav-drawer__head .nav__brand { max-width: calc(100% - 60px); }
.nav-drawer__head .nav__logo { width: 92px; height: auto; }
/* Signal that the menu scrolls */
.nav-drawer__list {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}


/* ======================================================================
   HERO REWORK — August 2026
   The place name and the church name now set as a single lockup, divided
   by a rule that spans the width of "Portmore", so the full name reads as
   part of the masthead instead of a caption under it. The name is no
   longer repeated in the kicker above. On wide screens the order of
   service sits beside the lockup rather than under it, which keeps the
   hero short enough that the Sabbath School band and the first section
   are both visible on landing.
   ====================================================================== */

.hero { min-height: min(76vh, 720px); }

.hero__content {
  align-items: end;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 1080px) {
  .hero__content {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

.hero__lockup { display: inline-block; max-width: 100%; }

.hero__kicker {
  font-family: var(--sans);
  font-size: clamp(0.66rem, 0.55vw + 0.5rem, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: clamp(1rem, 2vw, 1.6rem);
  text-shadow: 0 2px 18px rgba(30, 6, 6, 0.6);
}
.hero__kicker span { margin: 0 0.5rem; opacity: 0.75; }

.hero__masthead {
  display: block;
  font-size: clamp(3.4rem, 8.2vw, 8.5rem);
  line-height: 0.86;
  letter-spacing: -0.042em;
}

/* The rule is on the sub, so it spans the h1 box — the width of the word
   "Portmore" — and ties the two lines together. */
.hero__masthead-sub {
  display: block;
  font-family: var(--sans);
  font-size: clamp(0.7rem, 0.85vw + 0.4rem, 1.12rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-top: clamp(0.9rem, 1.6vw, 1.4rem);
  padding-top: clamp(0.9rem, 1.6vw, 1.4rem);
  border-top: 1px solid rgba(227, 198, 103, 0.5);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .hero__masthead-sub { white-space: normal; letter-spacing: 0.22em; }
}

.hero__welcome {
  margin-top: clamp(1.2rem, 2.2vw, 1.8rem);
  max-width: 34ch;
  font-family: var(--display);
  font-size: clamp(1rem, 0.6vw + 0.85rem, 1.2rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 20px rgba(30, 6, 6, 0.65);
}

/* Crop: hold the faces rather than the ceiling, and ease off the zoom so
   heads are not pushed out of frame on wide monitors. */
.hero__img img {
  object-position: 58% 32%;
  transform: scale(1.02);
  animation: slowZoomTight 26s ease-out forwards;
}
@keyframes slowZoomTight {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__img img { animation: none; transform: none; }
}

/* Scrim: darker at the left where the type sits, so the lockup holds at
   any window width without dimming the whole photograph. */
.hero__img::after {
  background:
    linear-gradient(180deg, rgba(52, 10, 10, 0.55) 0%, rgba(52, 10, 10, 0.12) 34%, rgba(40, 8, 8, 0.88) 100%),
    linear-gradient(90deg, rgba(40, 8, 8, 0.78) 0%, rgba(40, 8, 8, 0.42) 42%, rgba(40, 8, 8, 0.05) 78%);
}

/* Order of service */
.hero__card {
  max-width: 24rem;
  padding: 1.5rem 1.65rem 1.4rem;
  border-radius: var(--r-card);
}
@media (min-width: 1080px) {
  .hero__card { width: 24rem; }
}
.hero__card-foot { text-wrap: pretty; }

/* The ticker now sits between the nav and the hero */
.lesson-ticker { border-top: none; }

/* Rule under the masthead should span the word, not the paragraph below it */
.hero__masthead { width: fit-content; max-width: 100%; }

/* Brand lockup was allowed to shrink below its content and spill over the
   nav links on wide screens. Give it its own space back. */
@media (min-width: 1201px) {
  .nav__inner { gap: clamp(1.25rem, 2.5vw, 3rem); }
  .nav__brand { min-width: auto; flex: none; }
  .nav__brand-text small { white-space: nowrap; }
}

/* The bar is capped at the 1280px container, so it does not gain room on a
   wider monitor. The earlier "roomier above 1440" rule therefore pushed the
   links past their track and the brand overlapped HOME. Fixed tracking at
   every desktop width instead. */
@media (min-width: 1441px) {
  .nav__center { gap: 1.05rem; }
  .nav__link { font-size: 0.72rem; letter-spacing: 0.08em; }
}
@media (min-width: 1201px) {
  .nav__inner { gap: 2rem; }
  .nav__center { gap: 1.05rem; }
  .nav__link { letter-spacing: 0.08em; }
}


/* ======================================================================
   HERO, SECOND PASS — August 2026
   The name of the church is Portmore Seventh-day Adventist Church. It was
   setting as one enormous word with a caption, so the gold line now takes
   real weight and the two lines read as a single name. The conference
   kicker is gone because the red strip above already says it.
   ====================================================================== */

.hero__masthead {
  font-size: clamp(2.9rem, 6.4vw, 6.4rem);
  line-height: 0.88;
  letter-spacing: -0.04em;
}

.hero__masthead-sub {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.5vw, 2.35rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: normal;
  color: var(--gold-light);
  margin-top: clamp(0.7rem, 1.2vw, 1.05rem);
  padding-top: clamp(0.7rem, 1.2vw, 1.05rem);
  border-top: 2px solid rgba(227, 198, 103, 0.55);
  max-width: 15ch;
}
@media (max-width: 560px) {
  .hero__masthead-sub { letter-spacing: 0.01em; max-width: 13ch; }
}

.hero__welcome { margin-top: clamp(1.4rem, 2.4vw, 2rem); }

/* ---- Sabbath School band: one tappable link at every size ------------- */
a.lesson-ticker { display: block; color: inherit; text-decoration: none; }
a.lesson-ticker:hover .lesson-ticker__cta { color: var(--red-deep); }
a.lesson-ticker:hover { background: linear-gradient(90deg, var(--gold-pale), #f6f0df 55%, var(--gold-pale)); }

.lesson-ticker__inner { display: flex; align-items: center; gap: 1rem; }

.lesson-ticker__cta {
  flex: none;
  font-weight: 600;
  color: var(--red);
  white-space: nowrap;
}
.lesson-ticker__arrow { display: inline-block; transition: transform .2s var(--ease); }
a.lesson-ticker:hover .lesson-ticker__arrow { transform: translateX(3px); }

@media (max-width: 780px) {
  .lesson-ticker__inner { flex-wrap: wrap; gap: 0.5rem 0.7rem; padding: 0.65rem var(--gap); }
  .lesson-ticker__track { flex: 1 1 100%; order: 3; }
  /* Let the lesson wrap onto a second line instead of ending in an ellipsis */
  .lesson-ticker__text { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; }
  .lesson-ticker__cta { margin-left: auto; }
}
@media (max-width: 480px) {
  .lesson-ticker__tag { font-size: 0.62rem; padding: 0.24rem 0.55rem; }
  .lesson-ticker__cta { font-size: 0.78rem; }
}

/* On a phone the name should use the whole column rather than being
   squeezed into the width of the word above it. */
@media (max-width: 640px) {
  .hero__masthead { width: auto; }
  .hero__masthead-sub { max-width: none; }
  .hero__lockup { display: block; width: 100%; }
}

/* ======================================================================
   MOBILE POLISH — August 2026
   Touch targets, iOS zoom-on-focus, and anchor offsets under the sticky
   header. Nothing here changes the desktop rendering.
   ====================================================================== */
@media (max-width: 900px) {
  /* 16px is the threshold below which iOS Safari zooms the page on focus */
  .form input, .form select, .form textarea {
    font-size: 16px;
    min-height: 48px;
    padding: 0.85rem 0.9rem;
  }
  .form textarea { min-height: 8.5rem; }

  /* Comfortable targets */
  .btn, .nav__cta, .form button[type="submit"] {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .checkgrid label { min-height: 48px; }
  .checkgrid input,
  .form__field--check input { width: 22px; height: 22px; }

  /* Inline back-links and small text links get a real hit area */
  a.muted, .card__foot, .contact-card__link { display: inline-block; padding: 0.35rem 0; }

  /* Accordion rows */
  .faq__q { min-height: 56px; }

  /* Sermon and ministry cards go single column and keep their proportions */
  .cards--2, .cards--3 { grid-template-columns: 1fr; }
  .minhub { grid-template-columns: 1fr; }
  .minhub__card { min-height: 210px; }

  /* Long words in headings should break rather than push the page wide */
  h1, h2, h3, .display-md, .display-sm { overflow-wrap: break-word; }
}

/* Jumping to an id should not tuck the heading under the sticky header */
:target, [id] { scroll-margin-top: calc(var(--nav-h) + 56px); }

/* Stop the grey flash on tap */
a, button { -webkit-tap-highlight-color: rgba(178, 34, 34, 0.12); }


/* ======================================================================
   ROUND THREE — church feedback, August 2026
   ====================================================================== */

/* ---- 3. Tracking. The display face was set very tight and the letters
   were touching at large sizes. Opened up across the board. ------------ */
.hero__masthead { letter-spacing: -0.018em; }
h1, h2, .display-md, .display-sm, .welcome__title,
.page-header h1, .statband__value, .min-teaser__stat b {
  letter-spacing: -0.012em;
}
.hero__masthead-sub { letter-spacing: 0.035em; }
.card__title, .belief__title, .datelist__body h3, .minhub__title { letter-spacing: -0.005em; }

/* ---- 5. Service times: any leftover item centres instead of hanging on
   the left of a new row. --------------------------------------------- */
.services__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.services__item {
  flex: 1 1 clamp(160px, 19%, 250px);
  border-right: none;
  border-left: 1px solid var(--rule);
}
.services__item:first-child { border-left: none; }
@media (max-width: 900px) {
  .services__item { flex: 1 1 45%; border-left: none; border-top: 1px solid var(--rule); }
  .services__item:first-child, .services__item:nth-child(2) { border-top: none; }
}
@media (max-width: 520px) {
  .services__item { flex: 1 1 100%; }
  .services__item:nth-child(2) { border-top: 1px solid var(--rule); }
}

/* Optional note on the Sabbath card, for a week out of the usual order */
.hero__card-note {
  margin: -0.35rem 0 0.85rem;
  padding: 0.5rem 0.7rem;
  background: var(--gold-pale);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-family: var(--sans);
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ---- 2. Quick bar replaces the repeated service times ---------------- */
.quickbar { background: var(--red-deep); color: var(--white); padding: clamp(1.5rem, 3vw, 2.25rem) 0; }
.quickbar__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(212, 175, 55, 0.22);
  border-top: 1px solid rgba(212, 175, 55, 0.22);
  border-bottom: 1px solid rgba(212, 175, 55, 0.22);
}
.quickbar__item {
  background: var(--red-deep);
  padding: 1.35rem 1.4rem;
  display: flex; flex-direction: column; gap: 0.25rem;
  transition: background .25s var(--ease);
}
.quickbar__item:hover, .quickbar__item:focus-visible { background: #7d1a1a; }
.quickbar__icon { font-size: 0.8rem; color: var(--gold-light); }
.quickbar__label {
  font-family: var(--display); font-size: clamp(1.05rem, 0.6vw + 0.9rem, 1.3rem);
  font-weight: 600; color: var(--white); letter-spacing: -0.01em;
}
.quickbar__sub {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 820px) { .quickbar__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .quickbar__grid { grid-template-columns: 1fr; } }

/* ---- 6. Tighter vertical rhythm. Sections were running long. --------- */
.section { padding-block: clamp(3rem, 5.5vw, 5.5rem); }
.section-tight { padding-block: clamp(2.5rem, 4.5vw, 4rem); }
.services__inner { padding-block: clamp(2.5rem, 4.5vw, 4rem); }
.welcome__grid { gap: clamp(1.75rem, 3.5vw, 3rem); }
.story-section { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.worldchurch { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.page-header { padding-block: clamp(2.75rem, 5vw, 5rem); }
.section-head { margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }
.gallery { padding-block: clamp(2.5rem, 4.5vw, 4rem); }
.visit { padding-block: clamp(2.75rem, 5vw, 4.5rem); }

/* ---- Beliefs grouped by doctrine ------------------------------------- */
.beliefnav {
  display: grid; gap: 0.6rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.beliefnav__item {
  display: block; padding: 0.9rem 1rem;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-sm);
  font-family: var(--display); font-size: var(--t-base); font-weight: 600; color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.beliefnav__item:hover, .beliefnav__item:focus-visible {
  border-color: var(--gold); background: var(--sand); transform: translateY(-2px);
}
.beliefnav__item span {
  display: block; font-family: var(--sans); font-size: var(--t-xs);
  font-weight: 700; letter-spacing: 0.16em; color: var(--gold-deep); margin-bottom: 0.2rem;
}
.beliefnav__item em {
  display: block; margin-top: 0.25rem; font-style: normal;
  font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-muted);
}
.beliefgroup__head {
  display: flex; gap: 1.25rem; align-items: flex-start;
  margin-bottom: 1.5rem; padding-top: 1.25rem; border-top: 2px solid var(--ink);
}
.beliefgroup__num {
  flex: none; font-family: var(--display); font-size: 1.35rem;
  font-weight: 700; color: var(--gold); line-height: 1.4;
}
.beliefgroup__head p { max-width: 62ch; margin-top: 0.5rem; font-size: var(--t-sm); line-height: 1.65; }
.beliefgroup__range {
  display: inline-block; margin-top: 0.7rem;
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep);
}

/* ======================================================================
   HIGHER CONTRAST — strengthened, August 2026
   The church asked for more contrast, and for the underlining to make
   sense. Underlines now appear only on links inside body copy, where a
   link is otherwise distinguishable by colour alone. Cards, buttons, the
   navigation and the footer are already obvious as targets, so they stay
   clean.
   ====================================================================== */
html.a11y-contrast {
  --ink:        #000000;
  --ink-soft:   #101010;
  --ink-muted:  #1c1c1c;
  --white:      #ffffff;
  --sand:       #eeeeee;
  --sand-deep:  #cfcfcf;
  --rule:       #5a5a5a;
  --red:        #7a0f0f;
  --red-deep:   #4a0808;
  --gold:       #6b5310;
  --gold-deep:  #3f3008;
  --gold-light: #f0d68a;
  --gold-pale:  #f7f0dc;
}

/* Flat white page, no tints or texture competing with the text */
html.a11y-contrast body { background: #fff; }
html.a11y-contrast .bg-sand,
html.a11y-contrast .section.bg-sand,
html.a11y-contrast .section-tight.bg-sand { background: var(--sand); }

/* Borders and rules carry real weight */
html.a11y-contrast .card,
html.a11y-contrast .beliefnav__item,
html.a11y-contrast .contact-card,
html.a11y-contrast .memorial,
html.a11y-contrast .empty,
html.a11y-contrast .min-teaser__stat,
html.a11y-contrast .checkgrid label,
html.a11y-contrast .form input,
html.a11y-contrast .form select,
html.a11y-contrast .form textarea { border-width: 2px; border-color: #333; }
html.a11y-contrast .datelist__item,
html.a11y-contrast .faq__item,
html.a11y-contrast .beliefs { border-color: #333; }
html.a11y-contrast .beliefs { border-width: 2px; }

/* Body copy links: colour plus an underline, because colour alone is not
   enough for a reader who needs this mode */
html.a11y-contrast .prose a,
html.a11y-contrast .faq__a a,
html.a11y-contrast .card__text a,
html.a11y-contrast p a,
html.a11y-contrast li a:not(.footer__col a):not(.nav-drawer__list a) {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
/* Everything that is already obviously a control stays undecorated */
html.a11y-contrast .btn,
html.a11y-contrast .nav__cta,
html.a11y-contrast .nav__link,
html.a11y-contrast .nav__menu a,
html.a11y-contrast .nav-drawer__list a,
html.a11y-contrast .footer a,
html.a11y-contrast .card,
html.a11y-contrast .card *,
html.a11y-contrast .quickbar__item,
html.a11y-contrast .quickbar__item *,
html.a11y-contrast .beliefnav__item,
html.a11y-contrast .minhub__card,
html.a11y-contrast .contact-card,
html.a11y-contrast .search__result,
html.a11y-contrast .lesson-ticker,
html.a11y-contrast .lesson-ticker * { text-decoration: none; }

/* Reversed-out areas: full-strength white on a deeper ground */
html.a11y-contrast .quickbar,
html.a11y-contrast .footer { background: #2b0606; }
html.a11y-contrast .quickbar__item { background: #2b0606; }
html.a11y-contrast .quickbar__item:hover { background: #4a0808; }
html.a11y-contrast .quickbar__sub,
html.a11y-contrast .footer p,
html.a11y-contrast .footer a { color: #ffffff; }
html.a11y-contrast .quickbar__icon,
html.a11y-contrast .footer h4 { color: #ffd97a; }
html.a11y-contrast .masthead-strip { background: #4a0808; color: #fff; }

/* The hero photograph gets a much heavier scrim so the reversed type is
   not sitting on a picture */
html.a11y-contrast .hero__img::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.88) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0.35) 100%);
}
html.a11y-contrast .hero__masthead,
html.a11y-contrast .hero__welcome { color: #fff; text-shadow: none; }
html.a11y-contrast .hero__masthead-sub { color: #ffd97a; text-shadow: none; }

/* Sabbath School band */
html.a11y-contrast .lesson-ticker { background: #f4ecd6; border-block: 2px solid #333; }
html.a11y-contrast .lesson-ticker__text,
html.a11y-contrast .lesson-ticker__text b { color: #000; }
html.a11y-contrast .lesson-ticker__cta { color: #7a0f0f; font-weight: 700; }

/* Small print stops being small print */
html.a11y-contrast .muted,
html.a11y-contrast .card__meta,
html.a11y-contrast .card__text,
html.a11y-contrast .form__note,
html.a11y-contrast .hero__card-foot,
html.a11y-contrast .services__item-where { color: #1c1c1c; }

/* Keyboard focus is unmissable in this mode */
html.a11y-contrast a:focus-visible,
html.a11y-contrast button:focus-visible,
html.a11y-contrast input:focus-visible,
html.a11y-contrast select:focus-visible,
html.a11y-contrast textarea:focus-visible {
  outline: 3px solid #7a0f0f;
  outline-offset: 2px;
}

/* ---- Navigation fit guard -------------------------------------------
   Applied by scripts.js when the links genuinely do not fit, for example
   when a visitor has turned on larger text. Same treatment the drawer
   gets below 1200px. */
.nav.nav--compact .nav__inner { grid-template-columns: 1fr auto; gap: 1rem; }
.nav.nav--compact .nav__center,
.nav.nav--compact .nav__right { display: none; }
.nav.nav--compact .nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid color-mix(in oklab, var(--ink) 25%, transparent);
  border-radius: 999px; color: var(--ink);
}
.nav.nav--compact .nav__toggle svg { width: 18px; height: 18px; }

/* Also stop the links from ever painting outside their column while the
   measurement settles on first paint. */
.nav__center { min-width: 0; }
.nav__link { white-space: nowrap; }

/* Middle setting: squeeze the links before falling back to the drawer */
.nav.nav--tight .nav__inner { gap: 1rem; }
.nav.nav--tight .nav__center { gap: 0.8rem; }
.nav.nav--tight .nav__link { font-size: 0.68rem; letter-spacing: 0.05em; }
.nav.nav--tight .nav__brand-text small { font-size: 0.58rem; }
.nav.nav--tight .nav__right { gap: 0.35rem; }
.nav.nav--tight .nav__cta { padding-inline: 0.9rem; font-size: 0.68rem; }

/* ---- Hero: lighter. The scrim had grown heavy enough that the
   photograph read as a dark block. Pulled back, with the type carrying
   its own shadow instead. */
.hero__img::after {
  background:
    linear-gradient(180deg, rgba(46,10,10,0.34) 0%, rgba(46,10,10,0.06) 34%, rgba(34,7,7,0.62) 100%),
    linear-gradient(90deg, rgba(34,7,7,0.62) 0%, rgba(34,7,7,0.24) 46%, rgba(34,7,7,0) 78%);
}
.hero__masthead { text-shadow: 0 2px 18px rgba(24,4,4,0.62), 0 1px 2px rgba(24,4,4,0.5); }
.hero__masthead-sub { text-shadow: 0 2px 14px rgba(24,4,4,0.7), 0 1px 2px rgba(24,4,4,0.6); }
.hero__welcome { color: #fff; text-shadow: 0 2px 14px rgba(24,4,4,0.75), 0 1px 2px rgba(24,4,4,0.6); }
.hero__img img { filter: brightness(1.06) saturate(1.03); }