/* ==========================================================================
   Maranatha Romanian Pentecostal Church — Phoenix, AZ
   style.css — single stylesheet, no build step, no dependencies
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette */
  --ink:        #0e1626;
  --ink-2:      #172335;
  --ink-3:      #24334a;
  --gold:       #c9a227;
  --gold-soft:  #e0be55;
  --gold-wash:  #f6efdc;
  --cream:      #faf8f4;
  --paper:      #ffffff;
  --line:       #e4ded3;
  --line-dark:  rgba(255, 255, 255, .14);
  --body:       #3c4655;
  --body-soft:  #6b7688;
  --body-invert:rgba(255, 255, 255, .78);

  /* Type */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --wrap:      1180px;
  --wrap-text: 760px;
  --gutter:    clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(3.75rem, 9vw, 7.5rem);
  --radius:    4px;
  --radius-lg: 10px;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(14, 22, 38, .06), 0 4px 12px rgba(14, 22, 38, .05);
  --shadow-md: 0 2px 6px rgba(14, 22, 38, .07), 0 18px 40px -14px rgba(14, 22, 38, .18);
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --header-h:  76px;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.14;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 6.2vw, 4.15rem); }
h2 { font-size: clamp(1.95rem, 4.2vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
h4 { font-size: 1.125rem; font-family: var(--font-body); font-weight: 650; letter-spacing: -.005em; }

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

a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--gold); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

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

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

::selection { background: var(--gold-wash); color: var(--ink); }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--text { max-width: calc(var(--wrap-text) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.section--cream { background: var(--cream); }
.section--ink { background: var(--ink); color: var(--body-invert); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.section--ink a { color: var(--gold-soft); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.15fr .85fr; }
}

/* Giving page: the Zelle QR column only exists once the church's real QR image
   is in place (see initZelleQR in main.js). Without it — and with JavaScript
   off — the section collapses to one centred column instead of leaving a hole. */
@media (min-width: 900px) {
  [data-give-split]:not(.has-qr) { grid-template-columns: 1fr; max-width: 48rem; }
}

.stack > * + * { margin-top: 1.15rem; }
.center { text-align: center; }
.center .eyebrow::before { display: none; }
.center .section-head { margin-inline: auto; }

/* --------------------------------------------------------------------------
   4. Typographic helpers
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 30px; height: 1px;
  background: currentColor;
  opacity: .6;
}
.section--ink .eyebrow { color: var(--gold-soft); }

.lead {
  font-size: clamp(1.125rem, 1.9vw, 1.3rem);
  line-height: 1.62;
  color: var(--body);
}
.section--ink .lead { color: var(--body-invert); }

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }

.verse {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 2.05rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}
.verse cite {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .92rem 1.85rem;
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 650;
  letter-spacing: .04em;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn--primary { background: var(--gold); color: var(--ink); }
.btn--primary:hover { background: var(--gold-soft); color: var(--ink); }

.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-3); color: #fff; }

.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

.btn--ghost-invert { border-color: var(--line-dark); color: #fff; background: transparent; }
.btn--ghost-invert:hover { border-color: var(--gold); background: var(--gold); color: var(--ink); }

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

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.link-arrow::after {
  content: "→";
  transition: transform .25s var(--ease);
}
.link-arrow:hover::after { transform: translateX(4px); }
.section--ink .link-arrow { color: var(--gold-soft); }

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.brand:hover { color: var(--ink); }
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.brand__sub {
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--body-soft);
  margin-top: 2px;
}

.nav { display: none; }
@media (min-width: 1000px) { .nav { display: block; } }

/* Between the desktop breakpoint and 1200px there is not enough room for the
   logo, seven Romanian menu labels and the "Planifica o vizita" button all on
   one line - measured at 1000px wide, the header wanted 1162px and the page
   scrolled sideways. The menu is the thing people need, so the button steps
   aside in that band; the same link is still in the hero and the mobile menu. */
@media (min-width: 1000px) and (max-width: 1199.98px) {
  .header__actions .btn--cta { display: none; }
}

.nav__list {
  display: flex;
  align-items: center;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  display: block;
  /* "Despre noi" and "Arhiva video" are two words, and the desktop bar starts
     at 1000px, where the flex row is tight enough to break them across two
     lines - which makes the whole header look a row taller on some screens.
     A menu item is a label, not prose: it never wraps. */
  white-space: nowrap;
  padding: .6rem .7rem;
  font-size: .875rem;
  font-weight: 550;
  text-decoration: none;
  color: var(--body);
  border-radius: var(--radius);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav__link:hover { color: var(--ink); background: var(--cream); }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 650; }
.nav__link[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 4px;
  background: var(--gold);
  border-radius: 2px;
}

.header__actions { display: flex; align-items: center; gap: .6rem; flex: none; }

/* Facebook and YouTube beside the language switch. Hidden below 1200px on
   purpose: this header was already wider than a 1000px window before these
   were added.

   This comment used to justify that by saying the same two links were in the
   footer and the mobile drawer, so nothing was lost. That was wrong, and it
   went unchecked for a while: the drawer had no social links at all, and the
   footer carried Facebook and Vimeo but never YouTube. On a phone -- which is
   how most people arrive -- YouTube could not be reached from anywhere on the
   site. Both are now genuinely in the drawer and the footer, so the claim is
   finally true. */
.header__social { display: none; align-items: center; gap: .1rem; flex: none; }

/* Shown only between 390px and 999px -- that is, on phones and tablets, where
   the hamburger stands in for the nav and there is room to spare.

   Not on desktop, and this is the part worth writing down. The old rule showed
   them from 1200px up, which looked fine in English and was quietly broken in
   Romanian: .wrap caps the header at max-width 1180px, so a wider screen never
   buys the row a single extra pixel. Measured in Romanian at 1280px the header
   is 1180 of 1180 used with the icons hidden -- exactly full -- and 1207 of
   1180 with them shown. The same 27px overflow appears at 1400px and would at
   any width, because the cap, not the viewport, is the constraint. No
   breakpoint can fix that; only removing something can. So on desktop the
   seven-item nav wins and the footer carries the two links, which it now does
   for both Facebook and YouTube.

   On a narrow phone the wordmark gives way instead, which is what makes this
   work at every width rather than only above 390px -- see .brand__text below.
   The gutter cannot help: --gutter is already at its 20px floor by 400px. */
@media (max-width: 999.98px) { .header__social { display: inline-flex; } }

.header__social a {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--body-soft); border-radius: var(--radius);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.header__social a:hover { color: var(--ink); background: var(--cream); }
.header__social svg { width: 18px; height: 18px; }
.header__actions .btn { padding: .72rem 1.3rem; }
@media (max-width: 640px) { .header__actions .btn--cta { display: none; } }

/* Language switch */
.lang {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  flex: none;
}
.lang__btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: .5rem .68rem;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--body-soft);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.lang__btn:hover { color: var(--ink); }
.lang__btn[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* Small screens: find the ~60px the social pair needs, rather than shrinking
   the tap targets to nothing. The subtitle under the logo repeats what the
   page title and the footer already say, the gap either side of the brand is
   generous for a phone, and the language buttons carry desktop padding.

   This block sits here, after .header__social and .lang__btn, on purpose --
   the first draft put it above them and lost every declaration to the base
   rules, which have equal specificity and came later. Same reason it cannot
   move back up. */
@media (max-width: 639.98px) {
  .brand__sub { display: none; }
  .site-header__inner { gap: .75rem; }
  .lang__btn { padding: .5rem .4rem; }
  .header__social a { width: 32px; height: 32px; }
  .header__social svg { width: 17px; height: 17px; }
}

/* Under 390px the wordmark goes and the logo mark stands alone. That single
   change frees about 100px -- the brand is 141px of the 343px the row uses,
   and the mark is 38px of it -- which is far more than trimming padding could
   ever return, and it is why the social pair now fits on any phone rather
   than only above 390px. The church's name is still the first thing on the
   page below, in the h1. */
@media (max-width: 389.98px) {
  .brand__text { display: none; }
}

/* Mobile menu toggle */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
@media (min-width: 1000px) { .nav-toggle { display: none; } }
.nav-toggle__bars { position: relative; width: 18px; height: 12px; }
.nav-toggle__bars span {
  position: absolute; left: 0;
  width: 100%; height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 99;
  background: var(--paper);
  padding: 2rem var(--gutter) 3rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 1000px) { .mobile-nav { display: none; } }
.mobile-nav__list { list-style: none; margin: 0 0 2rem; padding: 0; }
.mobile-nav__list li { border-bottom: 1px solid var(--line); margin: 0; }
.mobile-nav__link {
  display: block;
  padding: 1.05rem 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-decoration: none;
  color: var(--ink);
}
.mobile-nav__link[aria-current="page"] { color: var(--gold); }

/* The two social links inside the drawer -- the only route to them on a phone,
   since the header pair is hidden below 1200px. 44px boxes rather than the
   header's 34px: this is a thumb on glass, not a mouse pointer, and 44 is the
   size a touch target is meant to be. */
/* The drawer sits on --paper with --ink links, so these follow the header
   pair's colours rather than the light-on-dark I first reached for. */

body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* The home hero plays a silent loop of the church's own services behind the
   text. Two things keep it readable: the video sits at z-index -1 like the
   SVG it replaced, and a scrim goes over it -- heaviest on the left, where
   the headline and the lead sit, and lighter on the right so the picture is
   still legible. Both are behind the content because .hero isolates itself. */
/* The still lives here rather than in a poster="" attribute so that a media
   query can choose it. A phone gets the 3:4 still to match the 3:4 loop; the
   attribute takes one value and could not. It shows until the first frame
   paints, and again for anyone the loop is withheld from. */
.hero__film {
  background: var(--ink) url("../img/hero-poster.jpg") center / cover no-repeat;
}
@media (max-width: 767px) {
  .hero__film { background-image: url("../img/hero-poster-mobile.jpg"); }
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(14, 22, 38, .94) 0%, rgba(14, 22, 38, .86) 38%,
                            rgba(14, 22, 38, .58) 72%, rgba(14, 22, 38, .42) 100%),
    linear-gradient(to bottom, rgba(14, 22, 38, .30), rgba(14, 22, 38, .62));
}
/* On a narrow screen the text runs the full width, so the sideways gradient
   is no use -- it has to darken top to bottom instead. Lighter than it looks
   it should be: the phone crops the 16:9 frame hard to fill a tall box, and
   a heavy scrim on top of that leaves nothing to see. */
@media (max-width: 767px) {
  .hero__scrim {
    background: linear-gradient(to bottom, rgba(14, 22, 38, .66), rgba(14, 22, 38, .84));
  }
}
.hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(78vh, 720px);
  padding-block: clamp(4.5rem, 12vw, 8rem);
  max-width: 46rem;
}
/* The inner-page banner is a title and a sentence, not a landing page. It
   inherited the home hero's proportions -- up to 128px of padding above and
   below plus a 380px floor -- which pushed the thing each page is actually
   about, the live player most of all, below the fold on a laptop. Its own
   padding and a much lower floor; the home hero above is untouched. */
.hero--page .hero__inner {
  min-height: 0;
  padding-block: clamp(1.5rem, 3vw, 2rem);
}
/* The section that follows a page banner starts with 120px of air on top of
   the banner's own padding, which on the live page pushed the player most of
   the way out of view. The banner already separates it from the header; it
   does not need a second gap that size. Only the first section is affected --
   the rhythm further down the page is unchanged. */
.hero--page + .section { padding-top: clamp(2rem, 4vw, 3rem); }
.hero--page h1 { margin-bottom: .5rem; }
.hero--page .lead { margin-bottom: 0; }
.hero h1 { color: #fff; }
.hero .lead { color: rgba(255, 255, 255, .8); max-width: 44ch; }
.hero .eyebrow { color: var(--gold-soft); }
.hero .btn-row { margin-top: 2.25rem; }

/* The home hero, rebuilt after Otniel asked for a welcome line and less text
   over the film. Two lines in the proportion waterstonechurch.org uses: a
   light introducer at roughly 0.45 the size of the name under it, both
   uppercase, both set solid. Measured off their page at a 1280px viewport --
   32px over 72px -- and the clamps below land on the same pair there.

   The face stays Cormorant Garamond, the display font the rest of the site is
   built on, so this borrows their scale and not their identity. Weight stays
   600 because that is the heaviest cut we load; 700 would mean pulling a
   second font file in front of the largest text on the page, and the hero is
   what decides how fast the site feels.

   Uppercase needs the tracking opened up. The base heading rule sets -.012em,
   which is right for mixed case and wrong here -- capitals set tight enough to
   touch at 72px. */
.hero--film .hero__inner { max-width: 54rem; }

.hero__welcome {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.9vw, 2rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  margin: 0 0 .35em;
}
.hero__name {
  font-size: clamp(2.75rem, 6.5vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: .015em;
  text-transform: uppercase;
  margin-bottom: 0;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.75rem;
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line-dark);
}
.hero__meta-item { display: flex; flex-direction: column; gap: .3rem; }
.hero__meta-label {
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.hero__meta-value { font-size: .975rem; color: rgba(255, 255, 255, .88); line-height: 1.45; }

/* Breadcrumb */
.crumb {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 1rem;
}
.crumb a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.crumb a:hover { color: var(--gold-soft); }

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
.card h3 { margin-bottom: .55rem; }
.card p { color: var(--body-soft); font-size: .975rem; }
.card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold-wash);
  color: var(--ink);
  margin-bottom: 1.15rem;
}
.card__icon svg { width: 21px; height: 21px; }
.card > .link-arrow { margin-top: 1.25rem; }

.card--ink {
  background: var(--ink-2);
  border-color: var(--line-dark);
  color: var(--body-invert);
}
.card--ink p { color: rgba(255, 255, 255, .68); }
.card--ink .card__icon { background: rgba(201, 162, 39, .18); color: var(--gold-soft); }

/* --------------------------------------------------------------------------
   9. Schedule
   -------------------------------------------------------------------------- */
.schedule { display: grid; gap: 0; border-top: 1px solid var(--line); }
.section--ink .schedule { border-color: var(--line-dark); }

.schedule__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .3rem 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.section--ink .schedule__row { border-color: var(--line-dark); }
@media (min-width: 720px) {
  .schedule__row { grid-template-columns: 9.5rem 1fr auto; }
}
.schedule__day {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
}
.section--ink .schedule__day { color: #fff; }
.schedule__name { font-weight: 550; color: var(--body); }
.section--ink .schedule__name { color: rgba(255, 255, 255, .85); }
.schedule__note { display: block; font-size: .875rem; color: var(--body-soft); font-weight: 400; }
.section--ink .schedule__note { color: rgba(255, 255, 255, .55); }
.schedule__time {
  font-variant-numeric: tabular-nums;
  font-size: .9rem;
  font-weight: 650;
  letter-spacing: .03em;
  color: var(--gold);
  white-space: nowrap;
}
.section--ink .schedule__time { color: var(--gold-soft); }

/* Next-service banner (populated by JS) */
.next-service {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  padding: 1rem 1.35rem;
  background: var(--gold-wash);
  border-radius: var(--radius-lg);
  font-size: .95rem;
  color: var(--ink);
}
.next-service__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
  box-shadow: 0 0 0 4px rgba(201, 162, 39, .22);
}
.next-service strong { font-weight: 650; }

/* --------------------------------------------------------------------------
   10. Accordion (statement of faith)
   -------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__btn {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  width: 100%;
  padding: 1.15rem 0;
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-size: 1.03rem;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.accordion__btn:hover { color: var(--gold); }
.accordion__num {
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
  font-weight: 700;
  color: var(--gold);
  flex: none;
  min-width: 1.6rem;
}
.accordion__btn > span:nth-child(2) { flex: 1; }
.accordion__chev {
  flex: none;
  width: 12px; height: 12px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--ease);
  opacity: .5;
}
.accordion__btn[aria-expanded="true"] .accordion__chev { transform: rotate(-135deg) translate(-2px, -2px); }
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s var(--ease);
}
.accordion__panel.is-open { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p {
  padding-left: 2.75rem;
  padding-bottom: 1.4rem;
  margin: 0;
  color: var(--body-soft);
  font-size: .975rem;
}

/* The official article text, pulled in when an article is opened. */
.creed__full:empty { display: none; }   /* no stray rule before the text arrives */
.creed__full {
  margin-left: 2.75rem;
  border-top: 1px solid var(--line);
  padding: 1.35rem 0 .4rem;
}
.creed__full p {
  padding-left: 0;
  padding-bottom: .95rem;
  font-size: .93rem;
  line-height: 1.75;
}
.creed__full .creed__label {
  font-size: .7rem;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   11. People
   -------------------------------------------------------------------------- */
.person { text-align: center; }
.person__avatar {
  width: 108px; height: 108px;
  margin: 0 auto 1.15rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--gold-soft);
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: .02em;
}
/* Same circle, but holding a photograph instead of initials. */
.person__avatar--photo {
  width: 132px; height: 132px;
  background: var(--cream);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
}
.person__avatar--photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* The portraits are head-and-shoulders, so bias the crop upward. */
  object-position: 50% 20%;
  border-radius: 50%;
}

.person__name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--ink); margin: 0 0 .2rem; }
.person__role { font-size: .74rem; font-weight: 650; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); margin: 0; }

/* --------------------------------------------------------------------------
   12. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: .45rem; }
.field label {
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.field label .req { color: var(--gold); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: .85rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .16);
}
.field textarea { min-height: 150px; resize: vertical; }
.field__hint { font-size: .82rem; color: var(--body-soft); }
.form__note { font-size: .85rem; color: var(--body-soft); }
.honeypot { position: absolute; left: -9999px; opacity: 0; }

.form-status {
  padding: .9rem 1.15rem;
  border-radius: var(--radius);
  font-size: .93rem;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status--ok { background: var(--gold-wash); color: var(--ink); }
.form-status--err { background: #fdeceb; color: #8e2b21; }

/* --------------------------------------------------------------------------
   13. Media / video
   -------------------------------------------------------------------------- */
.embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.embed iframe, .embed video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.embed__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
  color: rgba(255, 255, 255, .8);
}
.embed__placeholder svg { width: 46px; height: 46px; color: var(--gold-soft); }

/* Sits over a service that started muted. Bottom-left so it never covers a
   face, and large enough to hit on a phone without aiming. */
.live__unmute {
  position: absolute;
  left: 1rem; bottom: 1rem;
  z-index: 2;
  display: inline-flex; align-items: center; gap: .45rem;
  font: inherit; font-size: .9rem; font-weight: 600;
  padding: .6rem 1rem;
  color: var(--ink);
  background: rgba(255, 255, 255, .94);
  border: 0; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
  cursor: pointer;
}
.live__unmute::before { content: "🔊"; font-size: 1rem; line-height: 1; }
.live__unmute:hover { background: #fff; }
.live__unmute:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   14. Misc blocks
   -------------------------------------------------------------------------- */
.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--cream);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }

.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.info-list li { margin: 0; display: flex; gap: 1rem; align-items: flex-start; }
.info-list svg { width: 20px; height: 20px; flex: none; margin-top: 4px; color: var(--gold); }
.info-list__label {
  display: block;
  font-size: .7rem;
  font-weight: 650;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--body-soft);
  margin-bottom: .18rem;
}
.info-list__value { color: var(--ink); font-weight: 500; }
.section--ink .info-list__value { color: #fff; }
.section--ink .info-list__label { color: rgba(255, 255, 255, .5); }

.callout {
  border-left: 3px solid var(--gold);
  padding: .35rem 0 .35rem 1.5rem;
  color: var(--body);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .85rem;
  border-radius: 100px;
  background: var(--gold-wash);
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.badge--live { background: rgba(217, 48, 37, .12); color: #b4271c; }
.badge--live .badge__dot {
  width: 7px; height: 7px; border-radius: 50%; background: #d93025;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .62);
  padding-block: clamp(3.25rem, 7vw, 5rem) 2rem;
  font-size: .93rem;
}
.site-footer h4 {
  color: #fff;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .17em;
  text-transform: uppercase;
  margin-bottom: 1.15rem;
}
.site-footer a { color: rgba(255, 255, 255, .62); text-decoration: none; }
.site-footer a:hover { color: var(--gold-soft); }
.footer__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding-bottom: 2.75rem;
  border-bottom: 1px solid var(--line-dark);
}
.footer__brand { grid-column: 1 / -1; }
@media (min-width: 860px) { .footer__brand { grid-column: auto; max-width: 22rem; } }
.footer__brand .brand__name, .footer__brand .brand { color: #fff; }
.footer__brand .brand__sub { color: rgba(255, 255, 255, .45); }
.footer__brand p { margin-top: 1.15rem; font-size: .93rem; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .68rem; }
.footer__list li { margin: 0; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  font-size: .82rem;
  color: rgba(255, 255, 255, .42);
}
.footer__filming {
  flex-basis: 100%;
  max-width: 68ch;
  color: rgba(255, 255, 255, .3);
  font-size: .76rem;
  line-height: 1.5;
}

.socials { display: flex; gap: .6rem; margin-top: 1.5rem; }
.socials a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.socials svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------------------
   16. Reveal-on-scroll
   -------------------------------------------------------------------------- */
/* Scoped to .js so that if JavaScript is disabled, blocked by a proxy, or
   errors out, every section stays fully visible instead of being stuck at
   opacity:0. The .js class is set by an inline script in each page's <head>. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

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

/* --------------------------------------------------------------------------
   17. Video library (media.html)
   --------------------------------------------------------------------------
   The archive grid. Every thumbnail here is loaded straight from Vimeo's CDN
   with loading="lazy", and the player itself only appears once a visitor
   clicks — see assets/js/library.js.
   -------------------------------------------------------------------------- */
.lib__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  padding-bottom: 1.5rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--line);
}
.lib__search { flex: 1 1 260px; }
.lib__input {
  width: 100%; font: inherit; font-size: .975rem; color: var(--ink);
  padding: .7rem 1rem; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.lib__input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; }

.lib__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.lib__chip {
  font: inherit; font-size: .85rem; font-weight: 550; color: var(--body-soft);
  padding: .45rem .9rem; background: transparent; cursor: pointer;
  border: 1px solid var(--line); border-radius: 100px;
  transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.lib__chip:hover { color: var(--ink); border-color: var(--ink); }
.lib__chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.lib__count { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--body-soft); margin: 0 0 1.25rem; }

.lib__grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 285px), 1fr)); }

.lib__status {
  text-align: center; color: var(--body-soft); padding: 3rem 1rem;
  display: grid; gap: 1.25rem; justify-items: center;
}
.lib__morewrap { display: flex; justify-content: center; margin-top: 2.5rem; }
/* `display` set by a class beats the browser's own [hidden] rule, so say it
   again here — otherwise the "nothing found" line shows under a full grid. */
.lib__status[hidden], .lib__morewrap[hidden], .lib__more[hidden] { display: none; }

/* ---------------------------------------------------------------- a card */
.vcard {
  display: flex; flex-direction: column; text-align: left; gap: .85rem;
  font: inherit; color: inherit; padding: 0; background: none; border: 0; cursor: pointer;
}
.vcard__shot {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--ink-2); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.vcard__shot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease), opacity .3s var(--ease);
}
.vcard:hover .vcard__shot img, .vcard:focus-visible .vcard__shot img { transform: scale(1.045); }
.vcard__shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14, 22, 38, .55), rgba(14, 22, 38, 0) 55%);
}
.vcard__play {
  position: absolute; z-index: 1; inset: 0; margin: auto; width: 54px; height: 54px;
  border-radius: 50%; background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 20px rgba(14, 22, 38, .3);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.vcard__play::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--ink);
  transform: translateX(2px);
}
.vcard:hover .vcard__play, .vcard:focus-visible .vcard__play { transform: scale(1.09); background: var(--gold); }
.vcard__time {
  position: absolute; z-index: 1; right: .6rem; bottom: .6rem;
  font-size: .76rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: #fff; background: rgba(14, 22, 38, .78); padding: .18rem .45rem; border-radius: 3px;
}
.vcard__flag {
  position: absolute; z-index: 1; left: .6rem; top: .6rem;
  font-size: .8rem; color: var(--ink); background: var(--gold-soft);
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
}
.vcard__body { display: block; }
.vcard__title {
  display: block; font-family: var(--font-display); font-size: 1.22rem; font-weight: 600;
  line-height: 1.25; color: var(--ink); letter-spacing: -.01em;
  transition: color .2s var(--ease);
}
.vcard:hover .vcard__title, .vcard:focus-visible .vcard__title { color: var(--gold); }
.vcard__meta {
  display: block; margin-top: .35rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--body-soft);
}
.vcard__desc {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: .55rem; font-size: .93rem; line-height: 1.6; color: var(--body-soft);
}
.vcard:focus { outline: none; }
.vcard:focus-visible .vcard__shot { outline: 2px solid var(--gold); outline-offset: 3px; }

/* --------------------------------------------------------------- player */
.vmodal {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: clamp(.75rem, 3vw, 2.5rem); background: rgba(9, 14, 24, .88);
  animation: vmodal-in .2s var(--ease);
}
@keyframes vmodal-in { from { opacity: 0; } to { opacity: 1; } }
.vmodal__box { width: min(1040px, 100%); max-height: 100%; overflow: auto; }
.vmodal__head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: .85rem; }
.vmodal__title { flex: 1; margin: 0; color: #fff; font-size: clamp(1.1rem, 2.4vw, 1.6rem); }
.vmodal__close {
  flex: none; width: 40px; height: 40px; font-size: 1.7rem; line-height: 1;
  color: #fff; background: rgba(255, 255, 255, .1); border: 0; border-radius: 50%; cursor: pointer;
  transition: background .18s var(--ease);
}
.vmodal__close:hover { background: rgba(255, 255, 255, .22); }
.vmodal__frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-lg); overflow: hidden; }
.vmodal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vmodal__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  margin-top: .85rem; font-size: .85rem; color: rgba(255, 255, 255, .62);
}
.vmodal__link { color: var(--gold-soft); text-decoration: none; font-weight: 600; }
.vmodal__link:hover { color: #fff; }

/* --------------------------------------------------------------------------
   18. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .mobile-nav, .site-footer, .btn, .hero__bg, .hero__scrim, .socials { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .hero { background: none; color: #000; }
  .hero h1, .hero .lead { color: #000; }
  .section { padding-block: 1rem; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* --------------------------------------------------------------------------
   16. On-page editor (assets/js/edit.js)
   --------------------------------------------------------------------------
   Only ever rendered for a logged-in maintainer. An ordinary visitor never
   downloads a byte of this beyond the rule itself, and never sees the bar.
   -------------------------------------------------------------------------- */
#mrn-editbar {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: .55rem;
  max-width: calc(100vw - 2rem);
  flex-wrap: wrap;
  justify-content: center;
  padding: .6rem .75rem;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 10px 30px -8px rgba(14, 22, 38, .55);
  font-family: var(--font-body);
  font-size: .85rem;
}
.mrn-edit__who { font-weight: 650; padding-left: .5rem; white-space: nowrap; }
.mrn-edit__msg { color: rgba(255, 255, 255, .72); max-width: 32ch; }
.mrn-edit__msg.is-ok  { color: #9ae6a4; }
.mrn-edit__msg.is-err { color: #ffb4ab; }

.mrn-edit__btn {
  appearance: none;
  border: 1px solid transparent;
  background: var(--gold);
  color: var(--ink);
  font: inherit;
  font-weight: 650;
  padding: .45rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.mrn-edit__btn:hover { filter: brightness(1.07); }
.mrn-edit__btn--save { background: #2f9e57; color: #fff; }
.mrn-edit__btn--ghost {
  background: transparent;
  color: rgba(255, 255, 255, .8);
  border-color: rgba(255, 255, 255, .28);
}
.mrn-edit__btn--ghost:hover { color: #fff; border-color: rgba(255, 255, 255, .55); }

/* An outline that shows what can be typed into, without moving anything:
   outline does not take part in layout, so the page cannot shift when edit
   mode turns on and a maintainer is never editing a different layout from
   the one visitors see. */
.mrn-editable {
  outline: 1px dashed rgba(201, 162, 39, .75);
  outline-offset: 3px;
  border-radius: 2px;
}
.mrn-editable:focus {
  outline: 2px solid var(--gold);
  background: rgba(201, 162, 39, .08);
}
body.mrn-editing { cursor: text; }
body.mrn-editing a { pointer-events: none; }      /* don't navigate mid-edit */
body.mrn-editing #mrn-editbar a { pointer-events: auto; }

@media (max-width: 640px) {
  .mrn-edit__who, .mrn-edit__msg { display: none; }
}
@media print { #mrn-editbar { display: none; } }