/* Stoneham Memorial SDA Church — one stylesheet, no framework. */

:root {
  --teal:        #134C5F;
  --teal-dark:   #0D3A49;
  --teal-mid:    #1D7A97;
  --teal-line:   #235165;
  --gold:        #C8960C;
  --gold-soft:   #E9C46A;
  --gold-ink:    #2E2200;
  --gold-deep:   #A87C08;
  --cream:       #F4F1E8;
  --cream-line:  #DED8C6;
  --ink:         #16262D;
  --body:        #4A5560;
  --muted:       #7C868D;
  --rule:        #E7E3D6;
  --white:       #FFFFFF;

  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans:  'Lato', Helvetica, Arial, sans-serif;

  --wrap: 1260px;
  --pad:  90px;
}

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a   { color: var(--teal); text-decoration: none; }
a:hover { color: var(--gold-deep); }

h1, h2, h3, h4 { margin: 0; font-weight: 500; color: var(--teal); line-height: 1.22; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.sr, .skip {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; top: 8px; left: 8px; z-index: 50;
  width: auto; height: auto; clip: auto; margin: 0;
  padding: 10px 18px; background: var(--gold); color: var(--gold-ink);
  font-weight: 700;
}
.hp { position: absolute; left: -9999px; }   /* honeypot */

.h-serif  { font-family: var(--serif); font-size: 30px; font-weight: 500; color: var(--teal); }
.h-serif--lg { font-size: 36px; }
.lede     { font-size: 17px; font-weight: 300; line-height: 1.75; color: #5D686F; }
.dot      { opacity: .5; }
.rule     { display: block; width: 58px; height: 3px; background: var(--gold); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block; border: 1px solid transparent; border-radius: 4px;
  padding: 14px 32px; font-size: 14px; font-weight: 700; letter-spacing: .14em;
  text-align: center; cursor: pointer; font-family: var(--sans);
  transition: background .2s ease, border-color .2s ease, color .2s ease,
              transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(13,58,73,.16); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn--gold  { background: var(--gold); color: var(--gold-ink); }
.btn--gold:hover  { background: #B5870B; color: var(--gold-ink); }
.btn--teal  { background: var(--teal); color: var(--white); }
.btn--teal:hover  { background: var(--teal-dark); color: var(--white); }
.btn--ghost { border-color: rgba(255,255,255,.5); color: var(--white); }
.btn--ghost:hover { background: rgba(255,255,255,.12); color: var(--white); }
.btn--line  { border-color: #C5BCA3; color: var(--teal); }
.btn--line:hover  { border-color: var(--teal); color: var(--teal); }
.btn--sm    { padding: 10px 26px; }
.btn--block { display: block; width: 100%; }

.more {
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: var(--gold-deep); text-transform: uppercase;
}

/* ---------- top bar ---------- */

.topbar { background: var(--teal-dark); }
.topbar__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 40px; flex-wrap: wrap;
}
/* 13px at 300 weight needs more contrast than the palette's mid tone gives:
   #BDD5DE is 8:1 on the dark bar, against 5.4:1 before. */
.topbar__contact { margin: 0; font-size: 13px; font-weight: 300; color: #BDD5DE; }
.topbar__contact a { color: #BDD5DE; }
.topbar__contact a:hover { color: var(--gold-soft); }

.social { display: flex; gap: 10px; align-items: center; }
.social a { display: block; }
.social svg { display: block; }
.social--bar a { color: #8EB2BF; }
.social--bar a:hover { color: var(--gold-soft); }
.social--bar svg { width: 17px; height: 17px; }
.social--foot a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gold); color: var(--gold-ink);
}
.social--foot a:hover { background: var(--gold-soft); }
.social--foot svg { width: 16px; height: 16px; }

/* ---------- masthead ---------- */

.masthead { background: var(--teal); }
.masthead__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 74px; flex-wrap: wrap;
}

/* One SVG: church name in Advent Sans (outlined) over the official SDA logo. */
.brand { display: block; }
/* The artwork is trimmed tight, so this height is the mark, not padding. */
.brand img { display: block; width: auto; height: 54px; }
.brand--foot img { height: 56px; }

.nav ul { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.nav a  { position: relative; font-size: 15px; color: #E6EFF2; transition: color .2s ease; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold-soft); }
.nav a[aria-current="page"] { font-weight: 700; }
/* A rule that grows from the left rather than appearing all at once. */
.nav ul > li > a:not(.btn)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.nav ul > li > a:not(.btn):hover::after,
.nav ul > li > a[aria-current="page"]::after { transform: scaleX(1); }
.nav .btn { color: var(--gold-ink); }

.navtoggle, .navtoggle__btn { display: none; }

/* ---------- page banner (inner pages) ---------- */

.banner { background: var(--cream); padding: 52px 0 46px; }
.banner .rule { margin-bottom: 18px; }
.banner__title { font-family: var(--serif); font-size: 44px; }
.banner__intro { margin: 14px 0 0; max-width: 620px; font-size: 18px; font-weight: 300; color: #5D686F; }

/* ---------- hero (homepage) ---------- */

.hero { position: relative; min-height: 560px; display: flex; align-items: center; overflow: hidden; }
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 62%;
}
/* Copy sits right; the wash is heaviest there so the steeple stays clear on the left. */
.hero__wash {
  position: absolute; inset: 0;
  background: linear-gradient(266deg,
    rgba(10,44,56,.95) 0%, rgba(11,52,66,.88) 42%, rgba(13,58,73,.10) 100%);
}
.hero__in { position: relative; padding: 70px 24px; }
.hero__copy { max-width: 520px; margin-left: auto; }
.hero h1 {
  margin: 18px 0 0; font-family: var(--serif); font-size: 56px;
  font-weight: 400; color: var(--white); line-height: 1.1;
}
.hero__lede { margin: 18px 0 0; max-width: 430px; font-size: 18px; font-weight: 300; color: #B9D2DB; }

.times { display: flex; gap: 38px; margin: 28px 0 0; }
.times__item { display: flex; flex-direction: column; gap: 4px; }
.times__label { font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--gold-soft); }
.times__time  { font-family: var(--serif); font-size: 31px; color: var(--white); line-height: 1.2; }
.times__sep   { width: 1px; background: rgba(255,255,255,.26); }

.hero__cta { display: flex; gap: 13px; margin: 30px 0 0; flex-wrap: wrap; }

/* ---------- sunset strip ---------- */

.sunset { background: var(--gold); }
.sunset__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 24px; flex-wrap: wrap;
}
.sunset__label {
  display: flex; align-items: center; gap: 13px; margin: 0;
  font-size: 13px; font-weight: 700; letter-spacing: .1em;
  color: #3D2E02; text-transform: uppercase;
}
.sunset__label svg { width: 20px; height: 20px; flex: none; }
.sunset__count { margin: 0; font-size: 14px; color: #4A3803; }
/* On a gold bar a link has to be its own shape: pale-on-gold reads as disabled,
   and a colour-only hover is almost invisible against it. */
.sunset__count a {
  display: inline-block; padding: 7px 15px; border-radius: 4px;
  font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gold-ink); background: rgba(255,255,255,.34);
  border: 1px solid rgba(61,46,2,.28);
  transition: background .16s, color .16s, border-color .16s;
}
.sunset__count a:hover,
.sunset__count a:focus-visible { background: var(--gold-ink); color: var(--gold-soft); border-color: var(--gold-ink); }
.sunset__count a:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }

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

.sec       { padding: 76px 0; }
.sec--cream{ background: var(--cream); }
.sec--tight{ padding: 56px 0; }

.sechead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; border-bottom: 2px solid var(--teal); padding-bottom: 11px; margin-bottom: 26px;
}
.sechead h2 { font-family: var(--serif); font-size: 27px; }

.sechead--mid { display: flex; flex-direction: column; align-items: center; gap: 14px;
                border: 0; text-align: center; margin-bottom: 38px; }
.sechead--mid h2 { font-family: var(--serif); font-size: 36px; }

/* ---------- watch + bulletin ---------- */

.watchgrid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; }

/* Poster + custom play button. No YouTube iframe until someone presses play. */
.player {
  position: relative; display: block; background: var(--ink);
  aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer;
}
.player__poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s ease, filter .3s ease;
}
.player::after {           /* subtle scrim so the button always has contrast */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(10,38,48,.34) 0%, rgba(10,38,48,.10) 55%, rgba(10,38,48,.34) 100%);
  transition: opacity .3s ease;
}
.player:hover .player__poster { transform: scale(1.03); }

.player__btn {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  width: 86px; height: 86px; margin: -43px 0 0 -43px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(13, 58, 73, .62);
  border: 2px solid rgba(255, 255, 255, .92);
  color: #fff;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.player__btn svg { width: 30px; height: 34px; margin-left: 5px; fill: currentColor; }

/* Expanding ring on hover */
.player__btn::before {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--gold);
  opacity: 0; transform: scale(.85);
  transition: opacity .35s ease, transform .35s ease;
}
.player:hover .player__btn,
.player:focus-visible .player__btn {
  background: var(--gold); border-color: var(--gold); color: var(--gold-ink);
  transform: scale(1.06);
}
.player:hover .player__btn::before { opacity: 1; transform: scale(1.22); }
.player:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.player__live {
  position: absolute; top: 0; left: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  background: #B8321C; padding: 8px 15px;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--white);
}
.player__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .player__poster, .player__btn, .player__btn::before { transition: none; }
  .player:hover .player__poster { transform: none; }
}

/* ---------- lightbox ---------- */

body.is-locked { overflow: hidden; }

.lightbox { position: fixed; inset: 0; z-index: 100; display: flex;
            align-items: center; justify-content: center; padding: 24px; }
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(8, 26, 33, .92); }
.lightbox__inner { position: relative; width: 100%; max-width: 1100px; }
.lightbox__inner:has(.lightbox__frame--doc) { max-width: 760px; }
.lightbox__inner:has(.lightbox__frame--panel) { max-width: 460px; }
.lightbox__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
/* Hymn pages are documents, not video: taller frame, light ground. */
.lightbox__frame--doc { aspect-ratio: auto; height: min(82vh, 900px); background: var(--white); }
/* Our own hymn card: no iframe, sized to its content. */
.lightbox__frame--panel { aspect-ratio: auto; height: auto; background: var(--white); }
.lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lightbox__close {
  position: absolute; top: -46px; right: 0;
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  background: none; border: 0; color: #fff;
}
.lightbox__close svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.lightbox__close:hover { color: var(--gold); }
.lightbox__close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 860px) {
  .player__btn { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .player__btn svg { width: 22px; height: 26px; }
  .lightbox { padding: 16px; }
  .lightbox__close { top: -40px; }
}

.watch__meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 14px; }
.watch__title { font-family: var(--serif); font-size: 21px; color: var(--ink); }
.watch__sub   { margin: 4px 0 0; font-size: 14px; font-weight: 300; color: var(--muted); }
.watch__links { display: flex; gap: 20px; font-size: 13px; font-weight: 700; letter-spacing: .06em; }

.bcard {
  background: var(--cream); border-top: 4px solid var(--gold);
  padding: 28px; display: flex; flex-direction: column; gap: 18px;
}
.bcard__date { font-family: var(--serif); font-size: 22px; color: var(--ink); line-height: 1.3; }
.bcard__list { display: flex; flex-direction: column; gap: 11px;
               border-top: 1px solid var(--cream-line); padding-top: 17px; }
.bcard__row  { display: flex; gap: 12px; }
.bcard__row dt {
  flex: none; width: 68px; padding-top: 2px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; color: #9A8C6A; text-transform: uppercase;
}
.bcard__row dd { margin: 0; font-size: 14px; color: #414C54; }
.bcard__cta { display: flex; flex-direction: column; gap: 9px; margin-top: auto; padding-top: 14px; }
.bcard__cta .btn { padding: 12px 0; letter-spacing: .1em; font-size: 13px; }

/* ---------- tiles: photo + solid caption bar ---------- */

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.tile  { display: flex; flex-direction: column; background: var(--white); overflow: hidden; }
.sec--cream .tile { background: var(--white); }
.tile__img {
  width: 100%; height: 215px; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2, .6, .25, 1);
}
.tile:hover .tile__img { transform: scale(1.06); }
.tile__bar { background: var(--teal); padding: 15px 22px; }
.tile__bar h3 { font-size: 17px; font-weight: 700; letter-spacing: .04em; color: var(--white); }
.tile__body { padding: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; }
.tile__body p { font-size: 15px; font-weight: 300; line-height: 1.7; color: #5D686F; }
.tile__body .more { margin-top: auto; padding-top: 8px; }

/* ---------- media rows: round thumb + text ---------- */

.split { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: start; }
.split__aside .rule { margin-bottom: 16px; }
.split__aside h2 { font-family: var(--serif); font-size: 34px; margin-bottom: 14px; }

/* ---------- Sabbath School age bands ----------
   There are no photographs of the classes, so the age range does the work a
   picture would: it is what a parent scans for, so it leads each card. */
.agegrid__label {
  margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.agegrid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 0; padding: 0; list-style: none;
}
.ageband {
  position: relative; overflow: hidden;
  background: var(--white); border: 1px solid var(--rule); border-radius: 3px;
  padding: 19px 20px 17px 23px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ageband:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(13,58,73,.10); }
.ageband::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gold);
}
.ageband__ages {
  display: block; margin-bottom: 5px; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep);
}
.ageband__name {
  display: block; font-family: var(--serif); font-size: 20px; color: var(--teal);
  line-height: 1.25;
}

/* Three across needs the full-width column; in the narrower split, two. */
@media (max-width: 1040px) { .agegrid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- event list ---------- */

.events { display: flex; flex-direction: column; gap: 14px; }
.event  {
  display: flex; align-items: center; gap: 26px; background: var(--white);
  padding: 18px 24px; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.event:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(13,58,73,.10); }
.sec--cream .event { background: var(--white); }
.event__date {
  display: flex; flex-direction: column; align-items: center; flex: none;
  min-width: 58px; padding-right: 22px; border-right: 1px solid var(--rule);
}
.event__mon { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--gold); }
.event__day { font-family: var(--serif); font-size: 26px; font-weight: 500; color: var(--teal); line-height: 1.2; }
.event__body { flex: 1 1 auto; }
.event__body h3 { font-size: 17px; font-weight: 700; color: var(--ink); }
.event__body p  { margin: 3px 0 0; font-size: 14px; font-weight: 300; color: var(--muted); }
.event__thumb {
  width: 92px; height: 62px; object-fit: cover; display: block; flex: none;
  transition: transform .5s cubic-bezier(.2, .6, .25, 1);
}
.event:hover .event__thumb { transform: scale(1.09); }

/* One colour per category, written down once. The tag on an event row and the
   filter chip above the list both read these, so a category can never end up
   two different colours. */
.tag--fellowship,     .chip--fellowship,     .cal__ev--fellowship     { --cat-bg: #F6EDD6; --cat-ink: #7A5E08; }
.tag--youth,          .chip--youth,          .cal__ev--youth          { --cat-bg: #E9F0E2; --cat-ink: #3F5B2E; }
.tag--worship,        .chip--worship,        .cal__ev--worship        { --cat-bg: #E8EEF0; --cat-ink: #134C5F; }
.tag--bible-study,    .chip--bible-study,    .cal__ev--bible-study    { --cat-bg: #EFE6F5; --cat-ink: #5B3E82; }
.tag--camp-meeting,   .chip--camp-meeting,   .cal__ev--camp-meeting   { --cat-bg: #DCEFEA; --cat-ink: #12695A; }
.tag--memorial,       .chip--memorial,       .cal__ev--memorial       { --cat-bg: #EDEBE7; --cat-ink: #5C5347; }
.tag--health,         .chip--health,         .cal__ev--health         { --cat-bg: #F7E3DE; --cat-ink: #8A3B24; }
.tag--administration, .chip--administration, .cal__ev--administration { --cat-bg: #E6EAF0; --cat-ink: #33475B; }
.tag--outreach,       .chip--outreach,       .cal__ev--outreach       { --cat-bg: #FBEAD9; --cat-ink: #9A5B12; }

.tag {
  flex: none; padding: 6px 13px; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--cat-bg, #E8EEF0); color: var(--cat-ink, var(--teal));
}
.tag--off { background: #9A2C2C; color: var(--white); }

/* A cancelled event still shows — people need to know it is off — but it must
   never be mistaken for one that is going ahead. */
.event--off { background: #FBF7F6; }
.event--off .event__day,
.event--off .event__mon { color: #9A7A78; }
.event--off .event__body h3 { color: var(--muted); font-weight: 400; }
.event--off .event__body h3 s { text-decoration-thickness: 2px; }
.event--off .event__thumb { filter: grayscale(1); opacity: .55; }

/* ---------- hymn card ---------- */

.hymnbox { padding: 40px 38px 34px; text-align: center; }
.hymnbox__eyebrow {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .2em;
  color: #9A8C6A; text-transform: uppercase;
}
.hymnbox__no {
  margin: 10px 0 0; font-family: var(--serif); font-size: 56px;
  font-weight: 500; color: var(--gold); line-height: 1;
}
.hymnbox__title {
  margin: 6px 0 0; font-family: var(--serif); font-size: 26px;
  font-weight: 500; color: var(--teal); line-height: 1.25;
}
.hymnbox__sung {
  margin: 18px 0 0; font-size: 15px; font-weight: 300; color: #5D686F;
  padding-top: 16px; border-top: 1px solid var(--rule);
}
.hymnbox__sung strong { font-weight: 700; color: var(--ink); }
.hymnbox__dates {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 7px;
  margin: 14px 0 0;
}
.hymnbox__dates a {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--teal); background: #E8EEF0; padding: 5px 11px; border-radius: 3px;
}
.hymnbox__dates a:hover { background: var(--gold); color: var(--gold-ink); }
.hymnbox .btn { margin-top: 24px; }
.hymnbox__note { margin: 12px 0 0; font-size: 12px; color: var(--muted); font-weight: 300; }

a.hymn { color: var(--teal); border-bottom: 1px dotted var(--gold); }
a.hymn:hover { color: var(--gold-deep); border-bottom-color: var(--gold-deep); }

/* ---------- prose ---------- */

.prose { max-width: 760px; }
.prose h2 { font-family: var(--serif); font-size: 28px; margin: 40px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 26px 0 8px; }
.prose p, .prose li { font-size: 17px; font-weight: 300; line-height: 1.8; color: #4F5A62; }
.prose ul { margin: 0 0 1em; padding-left: 22px; list-style: disc; }
.prose li { margin-bottom: .4em; }
.prose a { text-decoration: underline; }

.cols2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }

.card {
  background: var(--white); border: 1px solid var(--rule);
  padding: 28px; display: flex; flex-direction: column; gap: 12px;
}
.card h3 { font-family: var(--serif); font-size: 21px; }
.card p  { font-size: 15px; font-weight: 300; line-height: 1.7; color: #5D686F; }

.factlist { display: flex; flex-direction: column; gap: 0; }
.factlist div { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.factlist dt { flex: none; width: 150px; font-weight: 700; font-size: 14px; color: var(--teal); }
.factlist dd { margin: 0; font-size: 15px; font-weight: 300; color: #5D686F; }

/* ---------- media library ---------- */

.vidgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.vid .player__btn { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-width: 2px; }
.vid .player__btn svg { width: 19px; height: 22px; margin-left: 3px; }
.vid h3  { font-family: var(--serif); font-size: 18px; margin-top: 12px; }
.vid p   { margin: 4px 0 0; font-size: 14px; font-weight: 300; color: var(--muted); }

.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.filters a, .filters button {
  border: 1px solid var(--rule); background: var(--white); border-radius: 3px;
  padding: 8px 16px; font-family: var(--sans); font-size: 13px; font-weight: 700;
  letter-spacing: .06em; color: var(--teal); cursor: pointer;
}
.filters .is-on { background: var(--teal); border-color: var(--teal); color: var(--white); }

/* ---------- bulletin archive ---------- */

.filters__n { opacity: .55; font-weight: 400; }

.arch__year {
  font-family: var(--serif); font-size: 26px; color: var(--teal);
  margin: 34px 0 6px; padding-bottom: 8px; border-bottom: 2px solid var(--teal);
}
.arch__year:first-child { margin-top: 0; }

.arch__row {
  display: flex; align-items: center; gap: 18px;
  padding: 13px 0; border-bottom: 1px solid var(--rule);
}
/* The cover, where there is one. The empty state keeps its place so the date
   and title columns stay aligned down the whole list. */
.arch__cover {
  flex: none; width: 58px; height: 75px; display: block;
  background: var(--cream); border: 1px solid var(--cream-line); overflow: hidden;
}
/* Anchored to the top: a bulletin's masthead and artwork are at the head of the
   page, and the middle of a shrunken scan is mostly blank paper. */
.arch__cover img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.arch__cover--none { background: repeating-linear-gradient(
  -45deg, var(--cream), var(--cream) 5px, #EFEADC 5px, #EFEADC 10px); }
.arch__cover:hover { border-color: var(--gold-soft); }
.arch__date {
  flex: none; width: 86px; font-size: 13px; font-weight: 700;
  letter-spacing: .06em; color: var(--gold-deep); text-transform: uppercase;
}
.arch__body { flex: 1 1 auto; min-width: 0; }
.arch__title { font-size: 17px; color: var(--ink); }
.arch__title:hover { color: var(--gold-deep); }
.arch__title--plain { color: var(--muted); font-style: italic; }
.arch__meta { margin: 3px 0 0; font-size: 14px; font-weight: 300; color: var(--muted); }
.arch__pdf {
  flex: none; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--teal); background: #E8EEF0; padding: 5px 11px; border-radius: 3px;
}
.arch__pdf:hover { background: var(--gold); color: var(--gold-ink); }

.aside__head {
  margin: 34px 0 12px; font-size: 12px; font-weight: 700;
  letter-spacing: .16em; color: #9A8C6A;
}
.aside__list li { padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.aside__list li.is-on a { font-weight: 700; color: var(--gold-deep); }

@media (max-width: 860px) {
  /* Narrow: two lines beside the cover — date and PDF on the first, the
     sermon underneath — rather than four things wrapping unpredictably. */
  .arch__row {
    display: grid; grid-template-columns: 48px 1fr auto;
    grid-template-areas: "cover date pdf" "cover body body";
    column-gap: 13px; row-gap: 3px; align-items: center;
  }
  .arch__cover { grid-area: cover; width: 48px; height: 62px; align-self: start; }
  .arch__date  { grid-area: date; width: auto; }
  .arch__body  { grid-area: body; min-width: 0; }
  .arch__pdf   { grid-area: pdf; justify-self: end; }
}

/* ---------- forms ---------- */

input[type=text], input[type=email], input[type=tel], textarea, select {
  width: 100%; border: 1px solid #D8D2C2; border-radius: 3px;
  padding: 13px 16px; font-family: var(--sans); font-size: 15px;
  color: var(--ink); background: var(--white);
}
input::placeholder, textarea::placeholder { color: #9AA5AB; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--teal-mid); outline-offset: 1px; }
textarea { min-height: 150px; resize: vertical; }

.field { margin-bottom: 12px; }
.field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--teal); }

.note { padding: 14px 18px; border-left: 3px solid var(--gold); background: var(--cream); font-size: 15px; }
.note--ok  { border-color: #4E7538; background: #EDF3E8; }
.note--bad { border-color: #B8321C; background: #FBECE9; }



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

.foot { background: var(--teal-dark); color: #A8C4CE; padding: 64px 0 34px; }
.foot__in { display: flex; justify-content: space-between; gap: 64px; flex-wrap: wrap; }
.foot__brand { max-width: 330px; display: flex; flex-direction: column; gap: 18px; }
.foot__addr { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.85; color: #A8C4CE; }
.foot__addr a { color: #A8C4CE; }
.foot__addr a:hover { color: var(--gold-soft); }
.foot__cols { display: flex; gap: 64px; flex-wrap: wrap; }
.foot__cols h3 {
  margin-bottom: 14px; font-size: 11px; font-weight: 700;
  letter-spacing: .18em; color: var(--gold);
}
.foot__cols li { margin-bottom: 12px; }
.foot__cols a  { font-size: 14px; font-weight: 300; color: #D6E4E9; }
.foot__cols a:hover { color: var(--gold-soft); }
.foot__legal {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--teal-line);
}
.foot__legal p { margin: 0; font-size: 13px; font-weight: 300; color: #6E97A6; }

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

@media (max-width: 1040px) {
  .tiles, .cols3, .vidgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .navtoggle__btn {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; cursor: pointer; margin-left: auto;
  }
  .navtoggle__btn span { display: block; height: 2px; background: #E6EFF2; border-radius: 2px; }
  .nav { flex-basis: 100%; display: none; }
  .navtoggle:checked ~ .nav { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 16px; }
  .nav li { border-top: 1px solid rgba(255,255,255,.12); }
  .nav a  { display: block; padding: 13px 0; }
  .nav .btn { margin-top: 14px; }

  .masthead__in { min-height: 72px; padding-top: 12px; padding-bottom: 12px; }
  .brand img { height: 34px; }
  .topbar__in   { justify-content: center; text-align: center; padding: 8px 24px; }

  .hero h1 { font-size: 40px; }
  .hero__copy { max-width: none; margin-left: 0; }
  .hero__wash { background: linear-gradient(180deg, rgba(10,44,56,.92) 0%, rgba(11,52,66,.86) 100%); }
  .banner__title { font-size: 34px; }
  .times { gap: 24px; }

  /* Every multi-column grid has to collapse here. .watchgrid and .split were
     missing, so the homepage and the bulletin page stayed two-column on a phone
     and pushed the layout off screen. */
  .tiles, .cols2, .cols3, .vidgrid,
  .watchgrid, .split { grid-template-columns: 1fr; }
  .watchgrid, .split { gap: 34px; }
  .sec { padding: 52px 0; }

  .event { flex-wrap: wrap; gap: 16px; }
  .event__thumb, .event .tag { display: none; }
  .event .tag--off { display: block; }   /* the one tag that must survive the narrow layout */

  .foot__in { flex-direction: column; gap: 40px; }
  .foot__cols { gap: 40px; }
  .factlist div { flex-direction: column; gap: 4px; }
  .factlist dt { width: auto; }
}

/* ---------- registration ---------- */
.wrap--narrow { max-width: 680px; }
.reg-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.reg-layout__photo img { width: 100%; height: auto; display: block; border-radius: 6px; }
.reg { display: flex; flex-direction: column; gap: 22px; margin-top: 26px; }
.reg label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
.reg input[type="text"], .reg input[type="email"], .reg input[type="tel"],
.reg input[type="number"], .reg input[type="date"], .reg select, .reg textarea {
  font: inherit; font-weight: 400; padding: 11px 13px; border: 1px solid var(--cream-line);
  border-radius: 5px; background: var(--white); color: var(--ink); width: 100%;
}
.reg__h { font-family: var(--serif); font-size: 21px; margin: 6px 0 0; }
.reg__intro, .reg__note { font-weight: 300; line-height: 1.7; color: #4A5560; }
.reg__help { font-size: 13px; font-weight: 400; color: var(--muted); }
.reg__left { display: inline-block; padding: 5px 12px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; background: #FDF3E3; color: #7A5308; }

.reg__people, .reg__choices { border: none; padding: 0; margin: 0; }
.reg__people legend, .reg__choices legend { font-family: var(--serif); font-size: 21px; padding: 0; margin-bottom: 10px; }
.person {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; position: relative;
  background: var(--cream); border: 1px solid var(--cream-line); border-radius: 6px;
  padding: 16px 44px 16px 16px; margin-bottom: 12px;
}
.person__n { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }
.person__x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; padding: 0;
  font: inherit; font-size: 17px; line-height: 1; background: none; border: 1px solid var(--cream-line);
  border-radius: 50%; color: #9A2C2C; cursor: pointer; }
.reg__add { align-self: flex-start; padding: 9px 16px; font: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; background: none; color: var(--teal); border: 1px solid var(--teal-line);
  border-radius: 5px; cursor: pointer; }
.reg__add:hover { background: var(--white); }

.reg__opt, .reg__consent { flex-direction: row; align-items: flex-start; gap: 9px; font-weight: 400; margin-bottom: 7px; }
.reg__opt input, .reg__consent input { margin-top: 3px; flex: none; }

.reg__pay { border-top: 1px solid var(--rule); padding-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.reg__total { font-family: var(--serif); font-size: 30px; color: var(--teal); margin: 0; }
.reg__total-note { display: block; font-family: var(--sans); font-size: 13px; color: var(--muted); }
.reg__card { padding: 13px; border: 1px solid var(--cream-line); border-radius: 5px; background: var(--white); }
.reg__secure, .reg__test { font-size: 13px; color: var(--muted); margin: 0; }
.reg__test { padding: 9px 12px; background: #FDF3E3; color: #7A5308; border-radius: 4px; }

.reg__errors { background: #FBEFEF; border-left: 3px solid #9A2C2C; padding: 12px 16px; }
.reg__errors p { margin: 0 0 4px; font-size: 14px; color: #7A2222; }
.reg__errors p:last-child { margin-bottom: 0; }

.reg__closed { background: var(--cream); border-left: 3px solid var(--gold); padding: 16px 20px; margin: 22px 0; }
.reg__closed p { margin: 0 0 8px; }
.reg__closed p:last-child { margin: 0; }
.reg__done { background: var(--cream); border-left: 3px solid var(--teal); padding: 20px 24px; margin: 22px 0; }
.reg__done p { margin: 0 0 10px; line-height: 1.7; }
.reg__ref { font-size: 13px; color: var(--muted); }

@media (max-width: 560px) { .person { grid-template-columns: 1fr; } }
.event__reg { margin-top: 5px !important; }
.event__reg a { font-size: 13px; font-weight: 700; color: var(--gold-ink); letter-spacing: .02em;
  border-bottom: 1px solid var(--gold-soft); }
.event__reg a:hover { color: var(--teal); border-color: var(--teal-line); }

/* The bulletin cover on a single bulletin, beside the order of service. */
.bcover {
  display: block; margin-top: 18px; max-width: 260px;
  border: 1px solid var(--cream-line); background: var(--cream);
  box-shadow: 0 1px 3px rgba(22,38,45,.08); line-height: 0;
}
/* Reserve the space before the picture arrives. Without a ratio the box
   collapses to a 1px line while loading and the page jumps when it fills.
   Covers are portrait scans of varying shape, so `contain` fits them whole
   rather than cropping to a guess. */
.bcover img { width: 100%; height: 100%; display: block; object-fit: contain; }
.bcover { aspect-ratio: 4 / 5; }
a.bcover:hover { border-color: var(--gold-soft); box-shadow: 0 2px 10px rgba(22,38,45,.14); }
@media (max-width: 900px) { .bcover { max-width: 200px; } }

/* ---------- homepage slider ---------- */
/* One slide renders as a plain hero: no controls, no script, nothing to see. */
.hs { position: relative; }
/* .eyebrow is built for pale backgrounds; over a photograph it needs to be light. */
.hero .eyebrow { color: var(--gold-soft); }

/* Every slide sits in the same grid cell, so the track is as tall as the
   tallest and nothing jumps when it advances. The inactive ones keep their
   space but are hidden — visibility, not display, or the cell would collapse
   and take the equal heights with it. It also keeps them out of the tab order. */
.hs--many .hs__track { display: grid; }
.hs--many .hs__slide {
  grid-area: 1 / 1; visibility: hidden;
  display: flex; flex-direction: column;
}
.hs--many .hs__slide.is-on { visibility: visible; }
.hs--many .hs__slide .hero { flex: 1 1 auto; }   /* the banner stays at the foot */

.hs__arrow {
  position: absolute; top: 38%; z-index: 3; width: 46px; height: 46px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--white); cursor: pointer;
  background: rgba(13,58,73,.42); border: 1px solid rgba(255,255,255,.35); border-radius: 50%;
  transition: background .18s, border-color .18s;
}
.hs__arrow svg { width: 15px; height: 15px; display: block; }
/* Optical centring: a chevron's ink sits to one side of its own box. */
.hs__arrow--prev svg { margin-right: 2px; }
.hs__arrow--next svg { margin-left: 2px; }
.hs__arrow:hover { background: rgba(13,58,73,.8); border-color: var(--gold-soft); }
.hs__arrow:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
.hs__arrow--prev { left: 18px; }
.hs__arrow--next { right: 18px; }

.hs__dots {
  position: absolute; left: 0; right: 0; bottom: 92px; z-index: 3;
  display: flex; justify-content: center; gap: 9px;
}
.hs__dot {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.42); border: none; transition: background .18s, transform .18s;
}
.hs__dot.is-on { background: var(--gold-soft); transform: scale(1.25); }
.hs__dot:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }

@media (max-width: 860px) {
  .hs__arrow { width: 38px; height: 38px; }
  .hs__arrow svg { width: 13px; height: 13px; }
  .hs__arrow--prev { left: 8px; }
  .hs__arrow--next { right: 8px; }
  .hs__dots { bottom: 112px; }
}
/* On a phone the arrows land on top of the words. Swiping and the dots do the
   same job without covering anything. */
@media (max-width: 640px) {
  .hs__arrow { display: none; }
  .hs__dots { bottom: 16px; }
}

@media (max-width: 860px) {
  .reg-layout { grid-template-columns: 1fr; gap: 34px; }
  .reg-layout__photo { order: -1; }
}

/* Optional donation: an amount the visitor may change or zero out. */
/* An author `display` beats the browser's own [hidden] rule, so a hidden label
   stays on screen. Say it explicitly for anything the form hides. */
.reg [hidden] { display: none !important; }
.reg__give { gap: 8px; }
.reg__giverow { display: flex; align-items: center; max-width: 220px; }
.reg__cur {
  padding: 11px 12px; font-size: 16px; color: var(--muted);
  border: 1px solid var(--cream-line); border-right: none; border-radius: 5px 0 0 5px; background: var(--cream);
}
.reg .reg__giverow input { border-radius: 0 5px 5px 0; font-size: 17px; }

/* Suggested donation: pick an amount, or none at all. */
.amounts { display: flex; flex-wrap: wrap; gap: 9px; }
.amount {
  min-width: 68px; padding: 11px 16px; font: inherit; font-size: 15px; font-weight: 700;
  color: var(--teal); background: var(--white); cursor: pointer;
  border: 1px solid var(--cream-line); border-radius: 5px;
  transition: border-color .15s, background .15s, color .15s;
}
.amount:hover { border-color: var(--teal-line); background: var(--cream); }
.amount.is-on { background: var(--teal); border-color: var(--teal); color: var(--white); }
.amount:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.amount--other { font-weight: 400; }

.reg__addr { font-style: normal; font-weight: 300; line-height: 1.7; color: #4A5560; margin: 0 0 4px; }

/* ---------- page hero (every page opens the same way) ----------
   A photograph with the page's name over it, then — where the page has them —
   the handful of facts a visitor checks before reading anything else. Shared by
   the content pages and by every registration form. */
.phero { position: relative; overflow: hidden; background: var(--teal-dark); }
.phero--plain { background: var(--teal); }
.phero picture { display: contents; }
.phero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
.phero__wash {
  position: absolute; inset: 0;
  /* Heavy enough for white type at any size, light enough that the photograph
     still reads. Darkest at the foot, where the title sits. */
  background: linear-gradient(180deg, rgba(10,44,56,.55) 0%, rgba(11,52,66,.82) 100%);
}
.phero__in { position: relative; padding: 52px 24px 46px; }
.phero__eyebrow, .phero__title, .phero__intro {
  /* The wash alone can't cover every photograph — a bright patch under the
     standfirst would drop it below contrast. This costs the picture nothing. */
  text-shadow: 0 1px 14px rgba(6, 28, 36, .5);
}
.phero__eyebrow {
  margin: 0 0 14px; font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft);
}
.phero .rule { margin-bottom: 18px; }
.phero__title {
  font-family: var(--serif); font-size: 44px; font-weight: 500;
  line-height: 1.12; color: var(--white); margin: 0; max-width: 16ch;
}
.phero__intro {
  margin: 16px 0 0; max-width: 56ch; font-size: 18px; font-weight: 300;
  line-height: 1.65; color: rgba(255,255,255,.93);
}

/* The facts someone checks before filling anything in. */
.pfacts { background: var(--cream); border-bottom: 1px solid var(--rule); }
.pfacts__in {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 26px 32px; padding: 26px 24px;
}
.pfact { display: flex; gap: 13px; align-items: flex-start; }
.pfact__icon { flex: none; color: var(--gold-deep); }
.pfact__icon svg { width: 22px; height: 22px; display: block; }
.pfact__label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.pfact__value {
  display: block; font-size: 15px; line-height: 1.55; color: var(--ink);
  font-style: normal; font-weight: 400;
}
.pfact__note { color: var(--muted); font-size: 13px; }

/* ---------- the events toolbar ----------
   View, span and category were three stacked rows of identical buttons, which
   made them look like one long undifferentiated list. They are three different
   questions, so they now look like three different controls. */
.ebar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  padding-bottom: 18px; border-bottom: 1px solid var(--rule); margin-bottom: 18px;
}
.seg { display: flex; border: 1px solid var(--cream-line); border-radius: 4px; overflow: hidden; }
.seg a {
  display: flex; align-items: center; gap: 8px; padding: 9px 17px;
  background: var(--white); font-size: 13px; font-weight: 700; letter-spacing: .05em;
  color: var(--teal); white-space: nowrap;
}
.seg a + a { border-left: 1px solid var(--cream-line); }
.seg a { transition: background .18s ease, color .18s ease; }
.seg a:hover { background: var(--cream); }
.seg a.is-on { background: var(--teal); color: var(--white); }
.seg svg { width: 16px; height: 16px; flex: none; }
.seg__n { font-weight: 400; opacity: .6; }

.srch { display: flex; border: 1px solid var(--cream-line); border-radius: 4px; overflow: hidden; }
.srch__in {
  border: 0; outline: 0; background: var(--white); min-width: 250px;
  padding: 9px 15px; font-family: var(--sans); font-size: 14px; color: var(--ink);
}
.srch__in::placeholder { color: var(--muted); }
.srch:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(19,76,95,.12); }
.srch__go {
  border: 0; border-left: 1px solid var(--cream-line); cursor: pointer;
  background: var(--white); padding: 9px 18px; font-family: var(--sans);
  font-size: 13px; font-weight: 700; letter-spacing: .05em; color: var(--teal);
  transition: background .18s ease, color .18s ease;
}
.srch__go:hover { background: var(--teal); color: var(--white); }

.ebar__clear {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.ebar__clear:hover { color: var(--gold-deep); }

.ebar__count {
  margin: 0 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}

/* The category filter carries each category's own colour, so the chip and the
   tag on the event row below are recognisably the same thing. */
.cbar { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.cbar__label {
  margin: 0 5px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border: 1px solid var(--rule); border-radius: 100px;
  background: var(--white); font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--teal); white-space: nowrap;
}
.chip { transition: background .18s ease, border-color .18s ease, color .18s ease; }
.chip__n { font-weight: 400; opacity: .55; }

/* The ministries jump list is the same row of chips, closed off with a rule. */
.cbar--jump { padding-bottom: 26px; border-bottom: 1px solid var(--rule); margin-bottom: 42px; }
.chip__dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--cat-ink, var(--teal));
}
.chip:hover { border-color: var(--cat-ink, var(--teal)); color: var(--cat-ink, var(--teal)); }
.chip.is-on {
  background: var(--cat-bg, var(--teal)); border-color: var(--cat-ink, var(--teal));
  color: var(--cat-ink, var(--white));
}
.chip--all.is-on { background: var(--teal); border-color: var(--teal); color: var(--white); }

/* ---------- event calendar ---------- */
.filters--view { margin-bottom: 18px; }

.calbar { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
.calbar__month { font-family: var(--serif); font-size: 26px; margin: 0; min-width: 210px; }
.calbar__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none; border: 1px solid var(--cream-line);
  background: var(--cream); color: var(--teal); font-size: 16px; border-radius: 2px;
}
.calbar__arrow { transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.calbar__arrow:hover { background: var(--teal); border-color: var(--teal); color: var(--white); }
.calbar__arrow:hover { transform: translateY(-1px); }
.calbar__today {
  margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--teal);
}

.cal {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.cal__dow {
  background: var(--teal); color: var(--white); text-align: center; padding: 9px 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.cal__cell { background: var(--white); min-height: 112px; padding: 7px 8px 9px; }
.cal__cell--blank { background: #FBFAF6; }
.cal__cell--sabbath { background: #FCFAF3; }
.cal__cell--today { box-shadow: inset 0 0 0 2px var(--gold); }
.cal__num { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 5px; }
.cal__full { display: none; }

.cal__ev {
  display: block; margin-bottom: 4px; padding: 5px 7px; border-radius: 2px;
  border-left: 3px solid var(--cat-ink, var(--teal-mid));
  background: var(--cat-bg, var(--cream));
  font-size: 12px; line-height: 1.35; color: var(--ink);
}
.cal__ev { transition: background .18s ease, border-color .18s ease, color .18s ease; }
a.cal__ev:hover { background: var(--teal); border-left-color: var(--gold); color: var(--white); }
a.cal__ev:hover .cal__time { color: rgba(255,255,255,.8); }
.cal__time { display: block; font-size: 11px; color: var(--muted); }
.cal__title { display: block; font-weight: 700; }
.cal__ev--off { opacity: .6; }
.cal__ev--off .cal__title { text-decoration: line-through; }
.cal__off {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #9A4B3B;
}

/* ---------- ministries ---------- */

/* One card per ministry, all the same width and — within a row — the same
   height, whatever the length of the writing. A ministry with more to say folds
   the extra into its own disclosure rather than pushing its neighbours around. */
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.mcard {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--rule); border-radius: 3px;
  overflow: hidden; scroll-margin-top: 20px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.mcard:hover {
  transform: translateY(-4px); border-color: var(--cream-line);
  box-shadow: 0 14px 30px rgba(13,58,73,.13);
}
.mcard__img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2, .6, .25, 1);
}
.mcard:hover .mcard__img { transform: scale(1.07); }
.mcard__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 22px 24px 24px; }
.mcard__title { font-family: var(--serif); font-size: 21px; margin: 0 0 5px; }
.mcard__when {
  margin: 0 0 13px; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-deep);
}
.mcard__lede { font-size: 15px; font-weight: 300; line-height: 1.7; color: #4F5A62; }

.mcard__more { margin: 2px 0 0; }
.mcard__more summary {
  cursor: pointer; list-style: none; padding: 9px 0;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--teal);
}
.mcard__more summary::-webkit-details-marker { display: none; }
.mcard__more summary::after {
  content: '+'; display: inline-block; margin-left: 6px; color: var(--gold-deep);
  transition: transform .25s ease;
}
.mcard__more[open] summary::after { transform: rotate(45deg); }
.mcard__more summary:hover { color: var(--gold-deep); }
.mcard__more p {
  font-size: 15px; font-weight: 300; line-height: 1.7; color: #4F5A62;
  margin: 0 0 .9em;
}
.mcard__detail strong {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 2px;
}

/* Pinned to the foot of the card so the contact details line up across a row. */
.mcard__foot { margin-top: auto; padding-top: 16px; }
.mcard__contact {
  margin: 0; padding-left: 13px; border-left: 3px solid var(--gold);
  font-size: 14px; line-height: 1.6; color: var(--ink);
}
.mcard__contact a { text-decoration: underline; }
.mcard__foot p + p { margin-top: 12px; }

@media (max-width: 1040px) { .mgrid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }

/* ---------- new here ---------- */
.pastor {
  max-width: 760px; margin: 0 auto; padding: 0 0 0 26px;
  border-left: 3px solid var(--gold);
}
.pastor p {
  margin: 0; font-family: var(--serif); font-size: 21px; font-style: italic;
  line-height: 1.65; color: var(--ink);
}
.pastor__by {
  display: block; margin-top: 16px; font-style: normal; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep);
}
.pastor__cta { margin: 30px 0 0; text-align: center; }

/* ---------- giving ---------- */
.scripture {
  margin: 0 0 28px; padding: 4px 0 4px 22px; border-left: 3px solid var(--gold);
}
.scripture p {
  margin: 0; font-family: var(--serif); font-size: 23px; font-style: italic;
  line-height: 1.5; color: var(--ink);
}
.scripture cite {
  display: block; margin-top: 8px; font-style: normal; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep);
}

.levels { margin: 0 0 1em; padding: 0; list-style: none; }
.levels li { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.levels__name {
  display: block; font-family: var(--serif); font-size: 18px; color: var(--ink);
}
.levels__name em { font-style: normal; font-size: 13px; color: var(--muted); }
.levels__what { display: block; font-size: 15px; font-weight: 300; line-height: 1.7; color: #4F5A62; }

/* ---------- who we are ---------- */
.ages { margin: 0 0 1em; padding: 0; list-style: none; }
.ages li {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 9px 0; border-bottom: 1px dotted var(--cream-line);
}
.ages__name { font-weight: 700; color: var(--ink); font-size: 15px; }
.ages__who  { color: var(--muted); font-size: 15px; text-align: right; }

.motto { background: var(--teal); color: var(--white); }
.motto__in { padding: 56px 24px; text-align: center; }
.motto__label {
  margin: 0 0 16px; font-size: 12px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-soft);
}
.motto__quote {
  margin: 0; font-family: var(--serif); font-size: 30px; font-weight: 500;
  line-height: 1.4; color: var(--white);
}

.sec--tight { padding-top: 44px; }

@media (max-width: 700px) {
  .ebar { gap: 10px; }
  .srch { display: flex; border: 1px solid var(--cream-line); border-radius: 4px; overflow: hidden; }
.srch__in {
  border: 0; outline: 0; background: var(--white); min-width: 250px;
  padding: 9px 15px; font-family: var(--sans); font-size: 14px; color: var(--ink);
}
.srch__in::placeholder { color: var(--muted); }
.srch:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(19,76,95,.12); }
.srch__go {
  border: 0; border-left: 1px solid var(--cream-line); cursor: pointer;
  background: var(--white); padding: 9px 18px; font-family: var(--sans);
  font-size: 13px; font-weight: 700; letter-spacing: .05em; color: var(--teal);
  transition: background .18s ease, color .18s ease;
}
.srch__go:hover { background: var(--teal); color: var(--white); }

.ebar__clear {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.ebar__clear:hover { color: var(--gold-deep); }

.ebar__count { margin-left: 0; flex: 1 0 100%; }
  .seg a { padding: 9px 13px; font-size: 12px; }
  .cbar { gap: 7px; }
  .chip { padding: 6px 12px; font-size: 11px; }

  .calbar { flex-wrap: wrap; gap: 10px 12px; }
  .calbar__month { order: -1; flex: 1 0 100%; font-size: 21px; min-width: 0; }
  .calbar__today { margin-left: 4px; }
  .cal { grid-template-columns: 1fr; border: 0; gap: 0; background: none; }
  .cal__dow, .cal__cell--blank, .cal__cell--empty { display: none; }
  .cal__cell { min-height: 0; padding: 14px 0; border-bottom: 1px solid var(--rule); box-shadow: none; }
  .cal__cell--sabbath { background: none; }
  .cal__cell--today .cal__full { color: var(--gold-deep); }
  .cal__num { display: none; }
  .cal__full {
    display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink); margin-bottom: 8px;
  }
  .cal__ev { font-size: 14px; padding: 9px 11px; }

  .pastor { padding-left: 18px; }
  .pastor p { font-size: 18px; }


  .mgrid { grid-template-columns: 1fr; gap: 20px; }
  .agegrid { grid-template-columns: repeat(2, 1fr); gap: 11px; }
  .ageband { padding: 15px 14px 14px 17px; }
  .ageband__name { font-size: 17px; }
  .motto__quote { font-size: 23px; }
  .motto__in { padding: 42px 24px; }
  .ages li { flex-direction: column; gap: 2px; }
  .ages__who { text-align: left; }
  .phero__in { padding: 38px 24px 34px; }
  .phero__title { font-size: 32px; }
  .phero__intro { font-size: 16px; }
  .pfacts__in { gap: 20px; padding: 22px 24px; }
}

/* ---------- motion ----------
   Everything here is decoration: the site is complete and usable with all of it
   switched off, which is exactly what happens under prefers-reduced-motion and
   in any browser without scroll-driven animation. */

/* The hero settles rather than snapping into place. */
@keyframes heroDrift { from { transform: scale(1.055); } to { transform: scale(1); } }
@keyframes heroIn    { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes riseIn    { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .phero__img { animation: heroDrift 14s cubic-bezier(.2, .6, .25, 1) both; }
  .phero__eyebrow { animation: heroIn .6s ease both; }
  .phero__title   { animation: heroIn .6s ease .07s both; }
  .phero__intro   { animation: heroIn .6s ease .14s both; }

  /* Scroll-driven, where the browser can do it without JavaScript. Whole blocks
     rather than single cards, so nothing fights a hover transform. */
  @supports (animation-timeline: view()) {
    .tiles, .mgrid, .agegrid, .events, .cols2, .cal {
      animation: riseIn linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .mcard:hover, .event:hover, .ageband:hover, .btn:hover { transform: none; }
  .mcard:hover .mcard__img, .tile:hover .tile__img, .event:hover .event__thumb { transform: none; }
}