/* ==========================================================================
   ABIDE CITY – component kit
   Each component is lifted from a reference in the Website Inspiration frame.
   The source is named so the lineage stays legible.
   ========================================================================== */

/* --------------------------------------------------------------------------
   .edge-label – tiny mono label pinned at the outer margin
   Source: CYBERCULT / SYNCHRODOGS
   -------------------------------------------------------------------------- */
.edge-label {
  font-family: var(--mono);
  font-size: var(--t6);
  letter-spacing: 0;
  text-transform: uppercase;
  opacity: .55;
}

/* --------------------------------------------------------------------------
   .topbar – wordmark left, underlined mono nav right
   Source: CYBERCULT / SYNCHRODOGS
   -------------------------------------------------------------------------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s3) var(--edge);
  background: transparent;
  color: var(--paper);
  transition: background .3s ease, color .3s ease;
}
/* once the hero has scrolled past, the bar lands on paper */
.topbar.is-solid { background: var(--paper); color: var(--ink); }
.topbar img { filter: invert(1); transition: filter .3s ease; }
.topbar.is-solid img { filter: none; }
.topbar__mark { height: 22px; }

/* the page you are on keeps a quiet rule */

/* --------------------------------------------------------------------------
   .pill – outlined capsule, used as a button and as a quiet tag
   Source: Natural Purpose
   -------------------------------------------------------------------------- */
/* RETIRED – the pill read as a UI button rather than part of the system.
   Kept only so any stray markup degrades to the underlined link style. */

/* --------------------------------------------------------------------------
   .bracket – ( BRACKETED LINK )
   Source: Studio Rippl
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   .hero-bleed – full-bleed image, display type centred over it
   Source: Natural Purpose
   -------------------------------------------------------------------------- */

/* .scroll-dot – circular scroll cue. Source: Natural Purpose */

@keyframes nudge { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,7px); } }

/* --------------------------------------------------------------------------
   .plate-column – centred column of photographs at varying widths, nudged
   off-centre, with the number and caption hung OUTSIDE the image.
   Source: CYBERCULT / SYNCHRODOGS  – this is the clear-space engine
   -------------------------------------------------------------------------- */

/* The legacy .plate rules from the old plate-column system lived here and
   were still giving every full-bleed photograph a 112px bottom margin –
   that was the white bar under the images. The live definition is further
   down, under "An image left to carry a section on its own". */

/* --------------------------------------------------------------------------
   .index-list – vertical index where only the active item is set large
   Source: CYBERCULT / SYNCHRODOGS
   -------------------------------------------------------------------------- */

.index-list li.is-active {
  font-family: var(--display); font-size: var(--t3); font-weight: var(--w-mid);
  letter-spacing: var(--track); text-transform: none; opacity: 1; margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   .card-over – white card inset over a full-bleed photograph
   Source: Natural Purpose
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   .label-row – label left, content right, hairline between
   Source: Studio Rippl
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   .step-list – numbered sequence with hairlines
   Source: Studio Rippl numbering + AVISION restraint
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   .colour-band – the one saturated colour moment
   Source: DRENTS colour blocks
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   .tag – small pill tag sat on a card image
   Source: DRENTS
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   .site-footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--footer-bg); color: var(--footer-fg); padding: var(--section-y) var(--edge) var(--s5); }
.site-footer li a { position: relative; }
.site-footer li a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.6,.2,1);
}
.site-footer li a:hover::after { transform: scaleX(1); }
.site-footer__base {
  display: flex; justify-content: space-between;
  margin-top: var(--section-y); padding-top: var(--s3); border-top: 1px solid rgba(var(--paper-rgb), .2);
  font-family: var(--mono); font-size: var(--t6); letter-spacing: 0;
  text-transform: uppercase; opacity: .45;
}

/* --------------------------------------------------------------------------
   .split-headline – headline above and below a horizontal image rail
   Source: AVISION
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   .compare – two columns, one recessed, on a dark band
   Source: DRENTS colour blocks + LADIES MEN STILL ruled grid
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   .pillar-body – copy that swaps as the plate column scrolls
   Source: CYBERCULT index behaviour
   -------------------------------------------------------------------------- */

.pillar-body p.is-active { opacity: .65; position: relative; pointer-events: auto; }

/* --------------------------------------------------------------------------
   .verse – a scripture block set large and quiet
   -------------------------------------------------------------------------- */
.verse { font-size: var(--t3); font-weight: 400; line-height: 1.45; opacity: .8;
  letter-spacing: var(--track-title);
}
.verse__ref {
  display: block; margin-top: var(--s3);
  font-family: var(--mono); font-size: var(--t6); letter-spacing: 0;
  text-transform: uppercase; opacity: .5;
}

/* --------------------------------------------------------------------------
   .page-head – inner-page header. Quieter than the home hero: the page sits
   on paper and the title carries it, with one micro label above.
   Source: Studio Rippl opening
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   .stack – a long-form numbered section, image alternating side to side
   Source: Studio Rippl + Natural Purpose card rhythm
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   .link-cards – three quiet cards at the foot of a page
   Source: Studio Rippl footer rail
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   .form – Connect In / Prayer and Praise. Wix Forms equivalent.
   -------------------------------------------------------------------------- */
.form { max-width: 620px; }
.form__field { margin-bottom: var(--s4); }
.form__field label {
  font-family: var(--mono); font-size: var(--t6); letter-spacing: 0;
  text-transform: uppercase; opacity: .55; display: block; margin-bottom: var(--s1);
}
.form__field input, .form__field textarea {
  width: 100%; border: 0; border-bottom: 1px solid rgba(var(--ink-rgb), .3);
  background: none; padding: 10px 0; font-family: var(--display);
  font-size: 1.15rem; letter-spacing: var(--track); color: var(--ink);
}
.form__field input:focus, .form__field textarea:focus { outline: 0; border-bottom-color: var(--ink); }
.form__field textarea { resize: vertical; min-height: 110px; }

/* ==========================================================================
   GRID DEVICES – from the grid inspo
   ========================================================================== */

/* --------------------------------------------------------------------------
   .masthead – giant flush-left headline with a meta row distributed across
   the columns directly beneath it, all on one baseline.
   Source: NARRATIVE
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   .spec-head – title, then labelled meta columns beside it.
   Source: Creative Studio / Inner Echo
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   .duo – two images, deliberately uneven heights, with a large soft number
   sitting under the shorter one.
   Source: Creative Studio / Inner Echo
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   .topbar__nav--list – comma-separated nav, the current page in full ink,
   the rest stepped back. No permanent rules.
   Source: Creative Studio / Inner Echo
   -------------------------------------------------------------------------- */
/* nav sits right, small, no separators – the current page is the only one in full ink */

/* the right-hand call, underlined */

/* --------------------------------------------------------------------------
   .index-rows – full-width rows; the active one goes solid with thumbnails
   appearing inline on the right.
   Source: NARRATIVE
   -------------------------------------------------------------------------- */
.index-rows { border-top: 1px solid rgba(var(--ink-rgb), .18); }
.index-rows__row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: var(--s4); align-items: center;
  padding: var(--s3) 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), .18);
  transition: background .3s ease, color .3s ease;
  cursor: pointer;
}
.index-rows__name { font-size: var(--t3); font-weight: var(--w-mid);
  letter-spacing: var(--track-title);
}
.index-rows__tag {
  font-family: var(--mono); font-size: var(--t6); letter-spacing: 0;
  text-transform: uppercase; opacity: .5;
}
.index-rows__thumbs { display: flex; gap: 8px; opacity: 0; transition: opacity .3s ease; }
.index-rows__thumbs img { width: 56px; height: 42px; object-fit: cover; }
.index-rows__row:hover { background: var(--ink); color: var(--paper); }
.index-rows__row:hover .index-rows__tag { opacity: .6; }
.index-rows__row:hover .index-rows__thumbs { opacity: 1; }

@media (max-width: 1024px) {
  .site-footer__cols { grid-template-columns: 1fr 1fr; row-gap: var(--s5); }
  
  
  
  .index-rows__row { grid-template-columns: 1fr auto; }
  .index-rows__thumbs { display: none; }
}

/* ==========================================================================
   SYSTEM PASS – one CTA, one bleeding image column, one info strip
   ========================================================================== */

/* --------------------------------------------------------------------------
   .cta – the single inline call to action. Underlined mono. No arrow.
   The pill is now reserved for the hero alone.
   -------------------------------------------------------------------------- */
.cta {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-family: var(--mono); font-size: var(--t6-nav); letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
  opacity: .8; transition: opacity .22s ease;
}
.cta { text-decoration-color: currentColor; }
.cta:hover { opacity: 1; }
/* The one place colour appears. Every call to action that is not on a
   photograph is the brand neutral; --cta lifts itself on dark grounds. */
.cta { color: var(--cta); opacity: 1; }
.cta:hover { text-decoration-thickness: 2px; }
.cta--light,
button.cta--light { color: var(--on-photo); }
/* on a dark ground the brand neutral has nothing to sit on */
.section--ink .cta, .section--ink button.cta,
.bleed-hero .cta, .bleed-hero button.cta { color: var(--on-photo); }

/* --------------------------------------------------------------------------
   Two button styles, and only two.
   1 · .cta          the typographic underline. For a link that sits inside
                     running copy and reads as text.
   2 · .cta--box     the outlined box. For an action: anything that ends a
                     block, opens a drawer, submits a form, or sits on a
                     photograph.
   -------------------------------------------------------------------------- */
.cta--box {
  display: inline-flex; align-items: center;
  padding: var(--s2) var(--s3);
  border: 1px solid currentColor;
  text-decoration: none;
  opacity: 1;
  transition: background .3s ease, color .3s ease;
}
.cta--box { border-color: currentColor; }
.cta--box:hover { background: var(--cta); border-color: var(--cta); color: var(--paper); }
.cta--light.cta--box:hover { background: var(--on-photo); border-color: var(--on-photo); color: #16160F; }

/* --------------------------------------------------------------------------
   The filter bar is attached to the photograph above it: full bleed, no gap
   at the top – but it still has to close itself off at the bottom, or the
   last line of a panel (Discipleship's "Sign up here") sits almost on the
   section that follows. It carried no bottom padding at all.
   -------------------------------------------------------------------------- */
.section--bar { padding-top: 0; padding-bottom: var(--section-y); }
/* The bar itself runs the full width of the window – rules and dividers reach
   both edges rather than stopping at the page margin, so it reads as one
   control across the page. Only the first label is inset, to the same margin
   as everything else, so the type still lands on the grid. */

/* --------------------------------------------------------------------------
   .hope – the pinned pillar index at one quarter, images bleeding from there
   to the right edge of the window. Tight gaps: the images do the talking.
   -------------------------------------------------------------------------- */

.hope__plate.is-current img { filter: grayscale(0); transform: scale(1.012); }

/* --------------------------------------------------------------------------
   .info-strip – key facts on the grid. Replaces the old card-over on home.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   .loader – the opener. A square in the middle of an ink field that cuts
   through photographs, tonal-grid cards and fragments of the mark, with a
   counter underneath. Reference: hellohello.is
   The tonal cards are drawn in CSS – bright ground, deep square set low and
   right – so they cost nothing to load. Source: TONAL GRID in the Figma file.
   ========================================================================== */
.loader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--field-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s4);
  transition: opacity .55s ease, visibility .55s;
}
.loader.is-done { opacity: 0; visibility: hidden; }

/* tonal-grid card: bright ground, deep square low and right */
/* brand fragment: a ground with the mark sitting on it */


/* the page sits still until the opener is finished */
body.is-loading { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
}

/* --------------------------------------------------------------------------
   .strip – a row of photographs that share the width evenly until you hover
   one, which takes more of it while the rest give way. A small mono chip
   fades in on the hovered tile.
   Reference: stateofaidesign.com
   -------------------------------------------------------------------------- */

/* the chip – sits in the corner, fades in with the tile */

/* the number stays on, quietly, so the row reads as a sequence at rest */

/* ==========================================================================
   .rail – page furniture. A thin mono line pinned at the top and bottom of
   the content, left / centre / right. The same on every page, which is most
   of what makes a site feel like one system.
   Reference: Template.Systems
   ========================================================================== */

/* ==========================================================================
   .split – one half a full image with a thin margin, the other half type at
   a larger step with room around it.
   Reference: Template.Systems / Creative Studio
   ========================================================================== */

          /* the thin padding around the image */

/* type to the top, meta pinned to the bottom, clear space between –
   not vertically centred. Reference: Ben Gilchrist */

/* the hero split fills what is left of the first screen under the band */

/* the mark, sitting in the corner of the image – and it opens scripture */

/* ==========================================================================
   .tone-block – a tonal-grid card used at page scale: bright ground, deep
   square set low and right. Source: TONAL GRID in the Figma file.
   ========================================================================== */

/* a texture plate, for when an image would be too literal */

/* ==========================================================================
   .scripture – a verse, typed out on an ink field.
   ========================================================================== */

.topbar.is-solid .topbar__scripture:hover { color: var(--paper); }
.topbar:not(.is-solid) .topbar__scripture:hover { color: var(--ink); }

.scripture {
  position: fixed; inset: 0; z-index: 180;
  background: var(--verse-bg); color: var(--field-fg);
  /* two rows: the verse centres in the first, the notice sits under it –
     both in the same 46ch column, so their left edges line up. */
  display: grid; grid-template-rows: 1fr auto;
  padding: var(--s6) var(--edge);
  /* one measure for both the verse and the notice. It has to be px, not ch:
     the notice is set in the mono face, so 46ch there is a different width. */
  --verse-w: 440px;
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease, visibility .4s;
}
.scripture.is-open { opacity: 1; visibility: visible; }
.scripture__inner { max-width: var(--verse-w); width: 100%; margin: auto; text-align: left; }
.scripture__text {
  font-size: var(--t3); font-weight: var(--w-mid); line-height: 1.3;
  letter-spacing: var(--track);
  min-height: 7em;          /* holds the space so the controls do not jump */
}
/* the caret blinks while it writes, and stops once it is done */
.scripture__text::after {
  content: ''; display: inline-block; width: .5ch; height: 1em;
  background: currentColor; margin-left: .12em; vertical-align: -.08em;
  animation: caret .9s step-end infinite;
}
.scripture.is-typed .scripture__text::after { animation: none; opacity: 0; }
@keyframes caret { 50% { opacity: 0; } }

.scripture__ref {
  display: block; margin-top: var(--s4);
  font-family: var(--mono); font-size: var(--t6); letter-spacing: 0;
  text-transform: uppercase; opacity: .6;
}
.scripture__controls { display: flex; gap: var(--s4); margin-top: var(--s6); }
.scripture__again, .scripture__close {
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  font-family: var(--mono); font-size: var(--t6); letter-spacing: 0;
  text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px;
  opacity: .7; transition: opacity .22s ease;
}
.scripture__again:hover, .scripture__close:hover { opacity: 1; }
.scripture__notice {
  max-width: var(--verse-w); width: 100%; margin: var(--s5) auto 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0; line-height: 1.7;
  opacity: .35;
}
@media (max-width: 880px) { .scripture { --verse-w: none; } }

/* ==========================================================================
   .band – the masthead. Columns of small information on one baseline.
   Static, not fixed: it belongs to the top of the page, like a colophon.
   Reference: DOTHINGS, THEO
   ========================================================================== */
/* ==========================================================================
   .band – wordmark left, the pages inline, then the two things you can do
   The slide-out menu is gone on desktop: the pages are visible in the bar,
   which is how the v2 header worked and the part of it she wanted kept. The
   overlay survives only below 900px, where six links will not fit.
   Connect and Give still slide in from the right – they are things you do,
   not places you go, so they sit behind a rule.
   ========================================================================== */
/* Centre, not baseline. On baselines the divider before Connect measured
   24-46 while the wordmark and the cross measured 24-50 and 17-57 – the rule
   sat 2px above the optical centre of the bar, which is what read as "not
   quite centred". Centring puts every item in the band on the same midline. */
.band {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--edge);
  position: relative;
  z-index: 40;
}
.band > * { margin: 0; }

.band__mark { flex: none; line-height: 0; }
.band__mark img { height: 26px; width: auto; display: block; }

/* The gap gives way before the type does, and nothing wraps: at around
   1050px "I'm New" was breaking onto two lines, which pushed the cross out
   of the bar altogether. */
.band__nav {
  display: flex; align-items: center;
  gap: clamp(var(--s2), 1.5vw, var(--s4));
  margin-left: auto;
  font-family: var(--mono); font-size: var(--t6-nav);
  letter-spacing: 0; text-transform: uppercase;
}
.band__nav a, .band__nav button {
  position: relative; padding-bottom: 2px; white-space: nowrap;
  appearance: none; background: none; border: 0; cursor: pointer;
  color: inherit; font: inherit; letter-spacing: inherit;
  /* `font: inherit` does not carry text-transform, and the UA sheet sets it
     to none on form controls – without this the two buttons render in
     sentence case at the wrong size beside the links. */
  text-transform: inherit;
  opacity: .55; transition: opacity .2s ease;
}
.band__nav a::after, .band__nav button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.band__nav a:hover, .band__nav button:hover,
.band__nav a:focus-visible, .band__nav button:focus-visible { opacity: 1; }
.band__nav a:hover::after, .band__nav button:hover::after,
.band__nav a:focus-visible::after, .band__nav button:focus-visible::after { transform: scaleX(1); }
.band__nav a[aria-current="page"] { opacity: 1; }
.band__nav a[aria-current="page"]::after { transform: scaleX(1); }

.band__act {
  display: flex; align-items: center; gap: var(--s3);
  padding-left: clamp(var(--s2), 1.5vw, var(--s4));
  border-left: 1px solid rgba(var(--ink-rgb), .18);
}
.band__act button { opacity: 1; }

/* The cross opens Scripture and turns a quarter on hover. The mark stays
   small; the button around it is 40px so it can actually be hit. */
.band__cross {
  flex: none; width: 40px; height: 40px; margin: -12px -10px -12px var(--s2);
  display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  opacity: .7; transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .25s ease;
}
.band__cross img { width: 15px; height: 15px; display: block; }
.band__cross:hover { transform: rotate(90deg); opacity: 1; }

.band__menu {
  display: none;
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; font-family: var(--mono); font-size: var(--t6-nav);
  letter-spacing: 0; text-transform: uppercase;
  opacity: .8; transition: opacity .2s ease;
}
.band__menu:hover { opacity: 1; }

/* The bar holds the six pages down to 860px. Below that the drawer takes
   over – and the cross moves to the RIGHT of Menu, which is where it reads
   as a pair with it rather than as a stray mark in the middle of the bar. */
@media (max-width: 860px) {
  .band__nav { display: none; }
  .band__menu { display: block; margin-left: auto; order: 2; }
  .band__cross { order: 3; margin-left: var(--s3); margin-right: -10px; }
}

.band--over {
  position: absolute; top: 0; left: 0; right: 0;
  max-width: none; margin: 0;
}
.band--light { color: var(--on-photo); }
.band--light .band__mark img,
.band--light .band__cross img { filter: brightness(0) invert(1); }
.band--light .band__act { border-left-color: rgba(255,255,255,.3); }
/* Over a photograph nothing is held back. */
.band--light .band__menu,
.band--light .band__cross { opacity: 1; }
.band--light .band__nav a,
.band--light .band__nav button { opacity: .8; }
.band--light .band__nav a[aria-current="page"] { opacity: 1; }

/* ==========================================================================
   .spec – key and value, hairline between. Reads as data, not decoration.
   Reference: Eclectic Phase
   ========================================================================== */

/* ==========================================================================
   .row – a flush row of images. No gaps, no cards. It bleeds to both edges.
   Reference: DOTHINGS, THEO, BRANDHUB
   ========================================================================== */

/* ==========================================================================
   .statement – one large line, the way the references open a page
   ========================================================================== */
.statement { font-size: var(--t1); font-weight: var(--w-mid); line-height: 1.04; letter-spacing: var(--track-tight); }

/* ==========================================================================
   .bleed-hero – the homepage opener. One photograph, edge to edge, under the
   information band. The statement sits on it; the facts sit at its feet.
   ========================================================================== */
.bleed-hero {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  margin-top: 0;
  height: 100vh;
  min-height: 560px;
  display: flex; align-items: center;
  /* The hero is its own <section>, not a .section, so the content line has
     to be stated here. The photograph still fills the frame behind it. */
  padding: 0 var(--edge);
  overflow: hidden;
  color: var(--on-photo);   /* always on a photograph */
}
.bleed-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Now that the band sits over every hero, the scrim has to do two jobs:
   hold the nav at the top and the feet at the bottom, without flattening
   the middle of the photograph. */
.bleed-hero__scrim {
  position: absolute; inset: 0;
  /* Two layers. The vertical one is unchanged – it is what makes the
     homepage opener work and that is not being touched. The horizontal one
     is new: the headline is left-aligned, and on a bright photograph (the
     Gatherings lectern shot, the Generations kids shot) white type on the
     left third had nothing behind it. It is almost invisible on a dark
     picture and rescues a light one. */
  background:
    linear-gradient(90deg,
      rgba(10,10,8,.46) 0%,
      rgba(10,10,8,.22) 38%,
      rgba(10,10,8,0) 66%),
    linear-gradient(180deg,
      rgba(10,10,8,.58) 0%,
      rgba(10,10,8,.34) 22%,
      rgba(10,10,8,.22) 50%,
      rgba(10,10,8,.52) 100%);
}
.bleed-hero__title { position: relative; max-width: 16ch; }
.bleed-hero__feet {
  position: absolute; left: var(--edge); right: var(--edge); bottom: var(--s4);
  display: flex; justify-content: flex-end; align-items: flex-end; gap: var(--s4);
}
/* The subheading sits bottom right and the hero carries no button: the band
   already has Connect, and a second call to action on the photograph was
   competing with the headline. */
.bleed-hero__sub {
  margin: 0; text-align: right;
  font-family: var(--mono); font-size: var(--t6);
  letter-spacing: 0; text-transform: uppercase; line-height: 1.95;
}
@media (max-width: 860px) {
  .bleed-hero__feet { justify-content: flex-start; }
  .bleed-hero__sub { text-align: left; }
}
.bleed-hero__feet .label { opacity: .7; }

/* a plain list – no bullets, no arrows, just rhythm */

/* a row index without thumbnails – for a list of people, where a stock
   photograph beside a name would be a lie. Add .index-rows__thumbs back
   when there are real portraits. */
.index-rows--plain .index-rows__row { grid-template-columns: 1fr auto; cursor: default; }
.index-rows--plain .index-rows__row:hover { background: var(--ink); color: var(--paper); }

/* ==========================================================================
   FROST* SYSTEM
   The signature is the feature row: full-bleed media, then immediately
   beneath it the name on the left and a list of tags on the right. Dense,
   informative, and it is what makes the page read as an index.
   Reference: frostcollective.com
   ========================================================================== */

/* .divider – a labelled section rule */

/* .feature – media, then name + tags */
.feature { display: block; margin-bottom: var(--s6); }

.feature:hover .feature__media img { transform: scale(1.03); }

/* the title sits over the image, centred, the way Frost* lays a word over media */

.feature.is-in .feature__over { opacity: 1; transform: translateY(0); }

/* the meta row – this is the piece that carries the grid */

.feature:hover .feature__tags { opacity: .7; }

/* .lede – big statement left, supporting copy and a link right */

/* ==========================================================================
   THE KIT, NARROWED
   Three devices carry the whole site, because these are the three that were
   signed off: a full-bleed image, a hairline index you can hover, and a
   dense band of small information. Everything that was neither – the splits,
   the strip, the pillar index, the spec table, the Frost* feature rows – is
   gone. Reference: the approved homepage hero, Disciple Course list,
   leadership index, masthead band and footer.
   ========================================================================== */

/* --- 1. The opener -------------------------------------------------------
   Every page starts the way the homepage starts. Only the height changes:
   the homepage gets the full viewport, inner pages get two thirds. */
/* Between the homepage's full viewport and the 66vh they were: tall enough
   to carry the band over them, short enough to show there is more below. */
.bleed-hero--page { height: 82vh; min-height: 520px; }
.bleed-hero--page .bleed-hero__title { font-size: var(--t2); max-width: 20ch;
  letter-spacing: var(--track-tight);
}
.bleed-hero__feet .label { white-space: nowrap; }

/* --- 2. The index --------------------------------------------------------
   .index-rows already does the hover. Two additions: a number column, so a
   sequence reads as a sequence, and real portraits for people. */
.index-rows__no {
  font-family: var(--mono); font-size: var(--t6); letter-spacing: 0;
  opacity: .4; align-self: center;
}
.index-rows--no .index-rows__row { grid-template-columns: 56px 1fr auto auto; }
.index-rows__row:hover .index-rows__no { opacity: .55; }

/* a row that is read, not clicked – no hover ink, no pointer */
.index-rows--plain .index-rows__row { cursor: default; }
.index-rows--plain .index-rows__row:hover { background: none; color: inherit; }

/* people: the portrait is always there, it is not a hover reward */
.index-rows--people .index-rows__row {
  grid-template-columns: 64px 1fr auto;
  gap: var(--s3); align-items: center;
}

.index-rows--people .index-rows__row:hover .index-rows__face { filter: grayscale(0); }

/* a whole row of wrapping copy, under the name – for things that need a line
   of explanation rather than a tag */
.index-rows__note {
  grid-column: 2 / -1; font-size: var(--t5); line-height: var(--lh-body);
  opacity: .6; margin-top: var(--s2); max-width: 62ch;
}

/* --- 3. The band of information -----------------------------------------
   The nav and the footer already work this way: a label, then columns of
   small type on one baseline, under a hairline. This is the same device at
   body size, and it replaces every loose block of running copy. */
.band-read { padding: 0; }
.band-read__rule {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); padding-bottom: var(--s2);
  border-bottom: 1px solid rgba(var(--ink-rgb), .22);
  margin-bottom: var(--s5);
}

.band-read__cols {
  display: grid; grid-template-columns: repeat(12, minmax(0,1fr));
  gap: var(--gutter); align-items: start;
}
.band-read__lead {
  grid-column: 1 / 7;
  font-size: var(--t2); font-weight: var(--w-mid);
  line-height: var(--lh-tight); letter-spacing: var(--track-tight);
}
.band-read__body { grid-column: 8 / 13; }
.band-read__body p { font-size: var(--t4); line-height: var(--lh-body); }
.band-read__body p + p { margin-top: var(--s3); opacity: .68; }
.band-read__body .cta { margin-top: var(--s4); display: inline-block; }

/* the narrow variant: no lead, three columns of equal small copy */
.band-read--three .band-read__cols > * { grid-column: span 4; }
.band-read--three .band-read__cols > * h3 {
  font-size: var(--t4); font-weight: var(--w-mid); margin: 0 0 var(--s2);
}
.band-read--three .band-read__cols > * p {
  font-size: var(--t5); line-height: var(--lh-body); opacity: .68;
}

/* --- An image left to carry a section on its own ------------------------ */
.plate {
  position: relative; width: 100vw; margin: 0 0 0 calc(50% - 50vw);
  height: clamp(380px, 52vw, 720px); overflow: hidden;
  display: block;
}
.plate img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1024px) {
  .band-read__lead { grid-column: 1 / 13; margin-bottom: var(--s4); }
  .band-read__body { grid-column: 1 / 13; }
  .band-read--three .band-read__cols > * { grid-column: 1 / 13; }
  .index-rows--no .index-rows__row { grid-template-columns: 40px 1fr auto; }
}
@media (max-width: 880px) {
  .bleed-hero--page { height: 64vh; }
}

/* ==========================================================================
   MOTION – one scroll system, applied site-wide
   Four behaviours, no more: type rises line by line, blocks rise as a unit,
   section rules pin while you read under them, and images drift slower than
   the page. Everything is opt-out under prefers-reduced-motion, and every
   behaviour has a Wix equivalent (see README).
   ========================================================================== */

/* the fixed hairline that reports how far down the page you are */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 60; pointer-events: none;
  background: var(--ink); opacity: .9;
  transform: scaleX(0); transform-origin: 0 50%;
}

/* section rules pin – the label stays with the section it names */
.band-read__rule {
  position: sticky; top: 0; z-index: 6;
  background: var(--paper);
  padding-top: var(--s3);
}
.section--bone .band-read__rule { background: var(--bone); }

@media (prefers-reduced-motion: no-preference) {

  /* --- blocks rise as a unit --- */
  [data-rise] {
    opacity: 0; transform: translateY(22px);
    transition: opacity .9s cubic-bezier(.2,.7,.2,1),
                transform .9s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--d, 0ms);
  }
  [data-rise].is-in { opacity: 1; transform: none; }

  /* --- type rises line by line, out from behind its own baseline --- */
  /* The mask needs vertical room: brand line-height is 100%, so a plain
     overflow:hidden crops ascenders and descenders. The negative margin
     cancels the padding, leaving the type metrics untouched. */
  /* .2em below the baseline was not enough room at --t1: the descender of
     the y in "Rosebery, Sydney" was being cut off by the mask. */
  /* NOTHING CLIPS THE HEADLINE.
     This used to be overflow:hidden with the line sliding up 130% from
     behind its own baseline. It looks good when it completes – and when it
     does not complete, which happens whenever the transition is throttled
     or interrupted, the line is left sitting inside a clipping box with its
     descenders cut off. The y in "Sydney" was that, three times over.
     The lines still arrive one after another; they fade and lift a little
     instead of sliding out from behind a mask, so there is no state in
     which type can be cut. */
  .l-mask { display: block; overflow: visible; }
  .l-mask > span {
    display: block; opacity: 0; transform: translateY(26%);
    transition: opacity .8s cubic-bezier(.22,.68,.28,1),
                transform .9s cubic-bezier(.22,.68,.28,1);
    transition-delay: var(--d, 0ms);
  }
  .is-in .l-mask > span { opacity: 1; transform: none; }
  .no-anim .l-mask > span { transition: none !important; }

  /* --- index rows: the hairline draws, then the row arrives --- */
  .index-rows__row { position: relative; }
  .index-rows__row::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 1px; background: rgba(var(--ink-rgb), .18);
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform 1s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--d, 0ms);
  }
  .index-rows__row.is-in::before { transform: scaleX(1); }
  .index-rows.is-in > .index-rows__row { border-bottom-color: transparent; }

  /* --- images drift slower than the page --- */
  .plate img, .bleed-hero__img { will-change: transform; }
  .plate { --drift: 0px; }
  .plate img { transform: translate3d(0, var(--drift), 0) scale(1.14); }
  .bleed-hero__img { transform: translate3d(0, var(--drift, 0px), 0) scale(1.08); }

  /* --- the hover thumbs arrive from under the row --- */
  .index-rows__thumbs img {
    transform: translateY(8px);
    transition: transform .45s cubic-bezier(.2,.7,.2,1);
  }
  .index-rows__row:hover .index-rows__thumbs img { transform: none; }
  .index-rows__thumbs img:nth-child(2) { transition-delay: .06s; }
}

@media (prefers-reduced-motion: reduce) {
  .progress { display: none; }
}

/* ==========================================================================
   .brief – the primary editorial block
   Narrow left column: a tight display title, a grey line under it, then
   clear space, then labelled meta pinned to the bottom of the column.
   Wide right column: a running statement, then an image that bleeds off
   the right edge of the page. Four distinct type sizes, in order.
   Reference: Creative Studio
   ========================================================================== */

/* THREE SIZES IN THE WHOLE BLOCK, and two spacing steps.
   One display size for the title, one body size for every piece of running
   copy – the statement, the supporting copy, the sub and the meta lists all
   sit at --t5 – and the mono label at --t6. The statement separates itself
   by weight and full opacity, not by being a fourth size. */
.brief__title {
  font-size: var(--t2); font-weight: var(--w-mid);
  line-height: var(--lh-tight); letter-spacing: var(--track-tight);
  margin: 0;
}
.brief__sub {
  font-size: var(--t5); line-height: var(--lh-body);
  opacity: .45; margin: var(--s3) 0 0; max-width: 28ch;
}

/* the meta stack – label in grey, items under it in ink */
.brief__meta { display: flex; flex-direction: column; gap: var(--s4); }

.brief__lead {
  font-size: var(--t5); font-weight: var(--w-mid);
  line-height: var(--lh-body); letter-spacing: var(--track);
  margin: 0 0 var(--s3);
  padding-right: var(--edge);
  max-width: 48ch;
}

.brief__body { padding-right: var(--edge); margin-bottom: var(--s5); }
.brief__body p { font-size: var(--t5); line-height: var(--lh-body); opacity: .55; max-width: 54ch; }
.brief__body p + p { margin-top: var(--s3); }
.brief__body .cta { margin-top: var(--s3); display: inline-block; }
.brief__body:last-child { margin-bottom: 0; }

/* the image runs to the right edge of the page and no further */
.brief__media {
  overflow: hidden; height: clamp(420px, 44vw, 680px);
  margin-top: var(--s5);
}
.brief__media img { width: 100%; height: 100%; object-fit: cover; }

/* flipped: image left, type right */

.brief--flip .brief__lead,
.brief--flip .brief__body { padding-right: 0; padding-left: var(--edge); }

@media (max-width: 1024px) {
  
  
  
  
  .brief__meta { flex-direction: row; flex-wrap: wrap; gap: var(--s5); }
}

/* ==========================================================================
   .gallery – a pinned rail of thumbnails against one large plate
   The rail stays put while the section scrolls; the plate advances with the
   scroll, or on click. The caption sits under the rail, not over the image.
   Reference: AFF / IN–HOUSE
   ========================================================================== */
.gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  padding-left: var(--edge);
}

.gallery__thumb {
  appearance: none; border: 0; padding: 0; background: none; cursor: pointer;
  width: 100%; aspect-ratio: var(--ratio-wide); overflow: hidden;
  opacity: .3; filter: grayscale(1);
  transition: opacity .45s ease, filter .45s ease;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__thumb:hover { opacity: .6; }
.gallery__thumb.is-current { opacity: 1; filter: grayscale(0); }

.gallery__plate {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity .7s cubic-bezier(.3,.7,.3,1);
}
.gallery__plate img { width: 100%; height: 100%; object-fit: cover; }
.gallery__plate.is-current { opacity: 1; }

.gallery__no { font-family: var(--mono); font-size: var(--t6); letter-spacing: 0; opacity: .45; }
.gallery__name { font-size: var(--t5); }

@media (max-width: 1024px) {
  .gallery { padding-right: var(--edge); }
  
  .gallery__thumb { width: 72px; flex: 0 0 auto; }
  
}

/* ==========================================================================
   MOBILE – the band collapses to a hamburger
   Below 1024 the 12 columns all become full width, which turned the masthead
   band into a stacked list of every link. On small screens it is a wordmark,
   the Scripture control and a burger; everything else lives in the overlay.
   ========================================================================== */
@media (max-width: 1024px) {
  .band__mark img { height: 24px; }

  /* the opener's foot row stacks rather than crushing three facts side by side */
  .bleed-hero__feet {
    flex-direction: column; align-items: flex-start; gap: var(--s2);
    bottom: var(--s3);
  }
  /* It has moved to the left, so it reads from the left. This was the one
     place the subheading stayed right-aligned while sitting on the left. */
  .bleed-hero__sub { text-align: left; }
  .bleed-hero__title { max-width: none; }

  .index-rows--people .index-rows__row { grid-template-columns: 48px 1fr; }
  .index-rows--people .index-rows__tag { grid-column: 2; }
  
  .index-rows__note { grid-column: 1 / -1; }

  .brief__media { height: clamp(300px, 64vw, 480px); }
  
  
}

@media (max-width: 600px) {
  .band-read--three .band-read__cols { gap: var(--s4); }
  .index-rows__row { padding-top: var(--s2); padding-bottom: var(--s2); }
  .index-rows__name { font-size: var(--t4); }
}

/* ==========================================================================
   .sec-title – a main heading. No hairline, no eyebrow, no meta on the right.
   Used where a section needs naming and nothing more.
   ========================================================================== */
.sec-title {
  padding: 0;
  font-size: var(--t2); font-weight: var(--w-mid);
  line-height: var(--lh-tight); letter-spacing: var(--track-tight);
  margin: 0 0 var(--s4);   /* was s5; 64 under a heading read as a gap */
}

/* ==========================================================================
   .switch – read one at a time instead of scrolling through all of them
   The names stack in the left column; clicking one swaps the image and the
   copy beside it. Four long sections become one screen.
   ========================================================================== */
.switch {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  /* both margins: the stage used to run off the right edge of the page */
  padding: 0;
  align-items: start;
}
.switch__keys {
  grid-column: 1 / 5;
  position: sticky; top: var(--s5); align-self: start;
  display: flex; flex-direction: column;
  border-top: 1px solid rgba(var(--ink-rgb), .14);
}
.switch__key {
  appearance: none; background: none; border: 0; cursor: pointer;
  color: inherit; text-align: left;
  display: grid; grid-template-columns: 44px 1fr;
  align-items: baseline; gap: var(--s2);
  padding: var(--s3) 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), .14);
  font-family: inherit; font-size: var(--t3); font-weight: var(--w-mid);
  line-height: var(--lh-tight); letter-spacing: var(--track-tight);
  opacity: .26; transition: opacity .3s ease, padding-left .3s cubic-bezier(.2,.6,.2,1);
}
.switch__key:hover { opacity: .6; }
.switch__key.is-on { opacity: 1; padding-left: var(--s2); }
.switch__no {
  font-family: var(--mono); font-size: var(--t6);
  letter-spacing: 0; opacity: .5;
}

/* no bleed: the stage keeps the page margin, like every other component */
.switch__stage {
  grid-column: 5 / 13;
  position: relative;
}
.switch__panel {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility .5s;
}
.switch__panel.is-on { position: relative; opacity: 1; visibility: visible; }
.switch__media { height: clamp(320px, 34vw, 540px); overflow: hidden; }
.switch__media img { width: 100%; height: 100%; object-fit: cover; }
.switch__copy { padding: var(--s4) 0 0; max-width: 64ch; }
.switch__copy p { font-size: var(--t5); line-height: var(--lh-body); opacity: .72; }
.switch__copy p + p { margin-top: var(--s3); }
.switch__copy .cta { margin-top: var(--s4); display: inline-block; }

@media (max-width: 1024px) {
  .switch__keys { grid-column: 1 / 13; position: static; margin-bottom: var(--s4); }
  .switch__stage { grid-column: 1 / 13; }
  .switch__key { font-size: var(--t4); }
  .switch__copy { padding-right: var(--edge); }
}

/* the gallery stage takes the width it needs – the rail is a fixed 76px */
.gallery { grid-template-columns: 76px minmax(0, 1fr); gap: var(--s2); }

/* a plate that runs straight into whatever is under it */
/* Sections carry top padding only, so without this the block above would sit
   straight on top of the photograph. */
.plate--flush {
  margin-top: var(--section-y); margin-bottom: -6px;
  height: clamp(420px, 56vw, 780px);
}

/* ==========================================================================
   LOADER · data frames
   The flicker carries the facts you'd otherwise have to scroll for – the
   address, the service times, the coordinates – set as readouts rather than
   sentences, so the opener reads as an instrument warming up.
   ========================================================================== */

/* the readout under the square: a label that keeps changing, and a counter
   that only ever counts up */

/* ==========================================================================
   .index-rows--date – an event index. The date takes the first column, so
   the list scans as a calendar rather than a menu.
   ========================================================================== */
.index-rows--date .index-rows__row { grid-template-columns: 148px 1fr auto auto; }
.index-rows__date {
  font-family: var(--mono); font-size: var(--t6); letter-spacing: 0;
  text-transform: uppercase; opacity: .55; align-self: center;
}
.index-rows__row:hover .index-rows__date { opacity: .7; }
@media (max-width: 1024px) {
  .index-rows--date .index-rows__row { grid-template-columns: 1fr auto; }
  .index-rows--date .index-rows__date { grid-column: 1 / -1; margin-bottom: var(--s1); }
}

/* a page that opens on text rather than a photograph – used where the list
   itself is the point and a hero would only delay it */

/* a sticky rule inside a mist section has to match its ground */
.section--mist .band-read__rule { background: var(--field); }

/* Listen needs room under the last card before the page moves on. */


/* ==========================================================================
   .drawer – Contact as a panel, not a page
   Slides in from the right over a blurred page, with a filter across the top
   so a prayer or a praise goes through as its own note rather than being
   buried in a general enquiry.
   ========================================================================== */
/* An element carrying the hidden attribute must not be laid out. Setting
   display on the class overrode it, so the closed scrim stayed in the layout
   and was a few pixels wider than a phone viewport — enough to make the whole
   page scroll sideways. */
.drawer-scrim[hidden] { display: none; }
.drawer-scrim {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(10,10,8,.38);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease, visibility .45s;
}
.drawer-scrim.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 160;
  width: min(560px, 92vw);
  background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .55s cubic-bezier(.22,.7,.22,1);
  overflow-y: auto;
  padding: var(--s5) var(--s5) var(--s6);
}
.drawer.is-open { transform: none; }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s5);
}
.drawer__mark { height: 26px; width: auto; display: block; }
.drawer__title {
  font-size: var(--t3); font-weight: var(--w-mid);
  line-height: var(--lh-tight); letter-spacing: var(--track-tight);
  margin: 0;
}
.drawer__close {
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  font-family: var(--mono); font-size: var(--t6); letter-spacing: 0;
  text-transform: uppercase; opacity: .55; transition: opacity .2s ease;
}
.drawer__close:hover { opacity: 1; }

/* the filter */
.drawer__filter {
  display: flex; gap: 0;
  border-top: 1px solid rgba(var(--ink-rgb), .18);
  border-bottom: 1px solid rgba(var(--ink-rgb), .18);
  margin-bottom: var(--s5);
}
.drawer__tab {
  flex: 1 1 0; appearance: none; background: none; border: 0; cursor: pointer;
  color: inherit; font-family: var(--mono); font-size: var(--t6);
  letter-spacing: 0; text-transform: uppercase;
  padding: var(--s3) 0; text-align: left;
  opacity: .4; transition: opacity .25s ease;
}
.drawer__tab + .drawer__tab { border-left: 1px solid rgba(var(--ink-rgb), .18); padding-left: var(--s3); }
.drawer__tab:hover { opacity: .7; }
.drawer__tab.is-on { opacity: 1; }

.drawer__note {
  font-size: var(--t5); line-height: var(--lh-body);
  opacity: .55; margin: 0 0 var(--s4); max-width: 46ch;
}
.drawer__info { margin-top: var(--s6); border-top: 1px solid rgba(var(--ink-rgb), .18); }
.drawer__row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid rgba(var(--ink-rgb), .18);
  align-items: baseline;
}
.drawer__k { font-family: var(--mono); font-size: var(--t6); letter-spacing: 0; text-transform: uppercase; opacity: .45; }
.drawer__v { font-size: var(--t5); text-align: right; }

.drawer .form { max-width: none; }
body.is-drawered { overflow: hidden; }

@media (max-width: 600px) {
  .drawer { padding: var(--s4) var(--s3) var(--s5); }
  .drawer__v { text-align: left; }
  .drawer__row { grid-template-columns: 1fr; gap: var(--s1); }
}

/* Nav and footer entries that open a drawer are buttons, but read as links.
   `font: inherit` was resetting the family and pulling Give and Contact out
   of the mono nav, so the family is set here explicitly. */
.site-footer__link {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; text-align: left;
  font-family: var(--mono); font-size: var(--t6-nav);
  font-weight: 400; letter-spacing: 0; line-height: 1.7;
  transition: opacity .2s ease;
}

/* The CTA is sometimes a button (it opens a drawer rather than a page).
   The reset has to leave .cta--box its outline, so the border and padding
   are restored for that variant. */
button.cta {
  appearance: none; background: none; border: 0; padding: 0;
  cursor: pointer;
  color: var(--cta);
  /* NOT `font: inherit`: at (0,1,1) it outranked `.cta` and pulled every
     call to action that happens to be a button – Send, Ask about Abide Kids,
     Connect – back into the display face while the links beside them stayed
     mono. The type is restated instead of inherited. */
  font-family: var(--mono); font-size: var(--t6-nav);
  font-weight: 400; letter-spacing: 0; text-transform: uppercase;
}
button.cta--box,
a.cta--box {
  border: 1px solid currentColor;
  padding: var(--s2) var(--s3);
}

/* leadership photography – uncaptioned, three across the grid */
.lead-shot { margin: 0; overflow: hidden; }
.lead-shot img {
  width: 100%; aspect-ratio: var(--ratio-portrait); object-fit: cover;
  filter: grayscale(1); transition: filter .5s ease;
}
.lead-shot:hover img { filter: grayscale(0); }
@media (max-width: 880px) { .lead-shot img { aspect-ratio: 4 / 5; } }

/* ==========================================================================
   .verse – John 15:4, set the way the current site states it
   Mono, centred, small, with room to breathe. Certain words carry a gloss;
   the meaning appears at the cursor rather than in a fixed column, so the
   passage stays the only thing on screen until you ask it a question.
   ========================================================================== */
.verse { padding: 0; }
.verse__text {
  font-family: var(--mono);
  font-size: clamp(.75rem, .88vw, .875rem);
  line-height: 2.2; letter-spacing: 0;
  text-align: center;
  max-width: 64ch; margin: 0 auto;
}
.verse__num { opacity: .35; margin-right: .4em; }
.verse__ref {
  display: block; text-align: center;
  margin: var(--s5) 0 var(--s6);
  font-family: var(--mono); font-size: var(--t6);
  letter-spacing: 0; text-transform: uppercase; opacity: .4;
}

/* a glossed phrase */
/* A button is an atomic inline box whatever its display value, so a line can
   break between a glossed word and the comma after it. Keeping the two inside
   one nowrap span is the only reliable fix. */
.verse__nb { white-space: nowrap; }
.verse__w {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; color: inherit;
  /* A button is inline-block by default, which opens a line-break opportunity
     between the word and the punctuation that follows it — on a narrow screen
     the comma after "the vine" was dropping to its own line. Inline makes the
     word behave like the running text it sits in. */
  display: inline;
  cursor: url('../assets/cursor-cross.svg') 11 11, help;
  box-shadow: inset 0 -1px 0 rgba(var(--ink-rgb), .3);
  transition: box-shadow .25s ease, opacity .25s ease;
}
.verse__w:hover, .verse__w.is-on { box-shadow: inset 0 -1px 0 var(--ink); }
.verse.has-gloss .verse__w:not(.is-on) { opacity: .35; }

/* the meaning, at the cursor */
.verse__tip {
  position: fixed; z-index: 120; pointer-events: none;
  max-width: 34ch;
  background: var(--ink); color: var(--paper);
  padding: var(--s2) var(--s3) calc(var(--s2) + 2px);
  opacity: 0; transform: translateY(4px);
  transition: opacity .22s ease, transform .22s ease;
}
.verse__tip.is-on { opacity: 1; transform: none; }
.verse__tip b {
  display: block; font-family: var(--mono); font-size: var(--t6);
  font-weight: 400; letter-spacing: 0; text-transform: uppercase;
  opacity: .5; margin-bottom: var(--s1);
}
.verse__tip span { font-size: var(--t5); line-height: 1.45; }

@media (max-width: 880px) {
  .verse__text { font-size: .8125rem; line-height: 2; }
  .verse__tip { max-width: 24ch; }
}

/* ==========================================================================
   .ledger – OPTION B for the bulk pages
   The same information as .brief, but without the sticky column and the
   three-quarter image. Everything sits on one hairline-ruled band: label,
   statement, copy, facts. The photograph gets its own full-bleed moment
   after it instead of competing with the type.
   ========================================================================== */
.ledger { padding: 0; }
.ledger__head { margin-bottom: var(--s6); }
.ledger__title {
  font-size: var(--t2); font-weight: var(--w-mid);
  line-height: var(--lh-tight); letter-spacing: var(--track-tight);
  margin: 0; max-width: 28ch;   /* 22ch was breaking a 23-character line */
}
.ledger__sub {
  font-size: var(--t5); line-height: var(--lh-body);
  opacity: .45; margin: var(--s3) 0 0; max-width: 40ch;
}
.ledger__rule {
  border-top: 1px solid rgba(var(--ink-rgb), .22);
  padding-top: var(--s3);
}
.ledger__row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
  padding-bottom: var(--s5);
}
.ledger__k {
  grid-column: 1 / 3;
  font-family: var(--mono); font-size: var(--t6);
  letter-spacing: 0; text-transform: uppercase; opacity: .45;
}
.ledger__lead {
  grid-column: 3 / 8;
  font-size: var(--t4); font-weight: var(--w-mid);
  line-height: var(--lh-tight); letter-spacing: var(--track-tight);
  margin: 0;
}
.ledger__body { grid-column: 8 / 13; }
.ledger__body p { font-size: var(--t5); line-height: var(--lh-body); opacity: .55; }
.ledger__body p + p { margin-top: var(--s3); }
.ledger__body .cta { margin-top: var(--s3); display: inline-block; }
/* a block that ends on a button was touching the ground below it */
.ledger__row:last-child .ledger__body > :last-child,
.switch__body > :last-child { margin-bottom: var(--s2); }
.switch__copy { padding-bottom: var(--s4); }

/* the facts, as their own ruled row */
.ledger__facts {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter);
  border-top: 1px solid rgba(var(--ink-rgb), .22);
  padding-top: var(--s3);
}
.ledger__fact { grid-column: span 3; }
/* two facts spread evenly across the band rather than huddling left */
.ledger__facts--two .ledger__fact { grid-column: span 6; }
/* --- facts that line up with the row above -------------------------------
   Span-3 facts land on columns 1, 4 and 7, while the .ledger__row above them
   breaks at 3 and 8. Nothing agreed with anything. This variant puts a mono
   label where .ledger__k sits and the two facts where .ledger__lead and
   .ledger__body sit, so the block reads as the same grid continuing down. */
.ledger__facts--aligned > .ledger__k { grid-column: 1 / 3; }
.ledger__facts--aligned > .ledger__fact:nth-of-type(1) { grid-column: 3 / 8; }
.ledger__facts--aligned > .ledger__fact:nth-of-type(2) { grid-column: 8 / 13; }
.ledger__facts--aligned .ledger__fact ul {
  display: flex; flex-wrap: wrap; gap: 0 var(--s3);
}
.ledger__fact span {
  display: block; font-family: var(--mono); font-size: var(--t6);
  letter-spacing: 0; text-transform: uppercase; opacity: .45;
  margin-bottom: var(--s1);
}
.ledger__fact ul { list-style: none; margin: 0; padding: 0; }
.ledger__fact li { font-size: var(--t5); line-height: var(--lh-body); }

@media (max-width: 1024px) {
  .ledger__head { margin-bottom: var(--s5); }
  .ledger__k, .ledger__lead, .ledger__body { grid-column: 1 / 13; }
  .ledger__lead { margin: var(--s2) 0 var(--s3); }
  .ledger__fact { grid-column: span 6; }
  .ledger__facts--aligned > .ledger__k { grid-column: 1 / 13; margin-bottom: var(--s2); }
  .ledger__facts--aligned > .ledger__fact:nth-of-type(1),
  .ledger__facts--aligned > .ledger__fact:nth-of-type(2) { grid-column: span 6; }
}

/* a mist section running straight into the photograph above the footer */
.section--mist + section .plate--flush { margin-top: 0; }

/* ==========================================================================
   BACKGROUND RHYTHM
   Two rules: no two content components sit on white next to each other, and
   a full-bleed photograph is always followed by mist, so the strip under it
   reads as the next component starting rather than a white bar.
   ========================================================================== */

/* ==========================================================================
   .versus – the comparison, both sides visible
   A toggle hid half the point. Two columns, a hairline between, the second
   recessed: you read the contrast in one look.
   ========================================================================== */
.versus {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s6);
  padding: 0;
}
.versus__col { border-top: 1px solid rgba(var(--ink-rgb), .22); padding-top: var(--s3); }
.versus__col--muted { opacity: .42; }
.versus__k {
  display: block; font-family: var(--mono); font-size: var(--t6);
  letter-spacing: 0; text-transform: uppercase; opacity: .55;
  margin-bottom: var(--s4);
}
.versus__list { list-style: none; margin: 0; padding: 0; }
.versus__list li {
  font-size: var(--t4); line-height: var(--lh-body);
  padding: var(--s3) 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), .14);
}
.versus__ref {
  grid-column: 1 / -1;
  font-family: var(--mono); font-size: var(--t6);
  letter-spacing: 0; text-transform: uppercase; opacity: .4;
}
@media (max-width: 880px) {
  .versus { grid-template-columns: 1fr; gap: var(--s5); }
}


/* ==========================================================================
   Events – the row opens on hover and offers a way in
   ========================================================================== */
/* rows that open – shared by Events and Leadership */
.index-rows--open .index-rows__row {
  align-items: start;
  transition: background .3s ease, color .3s ease, padding .35s ease;
}
.index-rows--open .index-rows__tag { padding-top: .35em; }
.index-rows--open .index-rows__row.is-open { padding-top: var(--s4); padding-bottom: var(--s4); }

.index-rows--date .index-rows__row { grid-template-columns: 148px 1fr auto; }
.index-rows--date .index-rows__date { padding-top: .35em; }

/* Opened by height, not by a 0fr/1fr grid track. The grid trick needs the
   `fr` to resolve against the content, and inside this row – itself a grid,
   with the drop as one of its items – it kept resolving to zero, so a row
   could be marked open and still show nothing. A measured max-height is
   deterministic and animates the same way. */
.index-rows__drop {
  grid-column: 2 / 3;
  display: block; overflow: hidden;
  max-height: 0; align-self: start;
  transition: max-height .5s cubic-bezier(.22,.7,.22,1);
}
.index-rows__row.is-open .index-rows__drop { max-height: var(--drop-h, 1400px); }
.index-rows__drop > div { min-height: 0; overflow: hidden; }
.index-rows__drop p {
  font-size: var(--t5); line-height: var(--lh-body);
  opacity: .6; max-width: 64ch; margin: var(--s3) 0 0;
}
.index-rows__row.is-open .index-rows__drop p { opacity: .75; }
.index-rows__reg { margin-top: var(--s3); display: inline-block; }

/* Leadership: two columns, the portrait arriving with the bio */
.index-rows--people .index-rows__row { grid-template-columns: 1fr auto; }
.index-rows--people .index-rows__drop { grid-column: 1 / -1; }
.index-rows__open {
  display: grid; grid-template-columns: 200px 1fr;
  gap: var(--s4); align-items: start;
  padding-top: var(--s3);
}
.index-rows__portrait {
  width: 100%; aspect-ratio: var(--ratio-portrait); object-fit: cover;
  filter: grayscale(1);
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.22,.7,.22,1), filter .5s ease;
}
.index-rows__row:hover .index-rows__portrait {
  opacity: 1; transform: none; filter: grayscale(0);
}
.index-rows__open p {
  font-size: var(--t5); line-height: var(--lh-body);
  opacity: .6; margin: 0; max-width: 62ch;
}
.index-rows__row:hover .index-rows__open p { opacity: .75; }

@media (max-width: 1024px) {
  .index-rows--date .index-rows__row { grid-template-columns: 1fr auto; }
  .index-rows--date .index-rows__date { grid-column: 1 / -1; margin-bottom: var(--s1); padding-top: 0; }
  .index-rows__drop { grid-column: 1 / -1; }
  .index-rows__open { grid-template-columns: 120px 1fr; gap: var(--s3); }
  .index-rows__portrait { opacity: 1; transform: none; }
}


.lead-shot figcaption {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: var(--s2); font-size: var(--t5);
}
.lead-shot__role {
  font-family: var(--mono); font-size: var(--t6);
  letter-spacing: 0; text-transform: uppercase; opacity: .45;
}



/* ==========================================================================
   .ledger__head--mid – the display line centred over the band
   A long definition set hard left was breaking to an awkward widow. Centred,
   with the location under it, it reads as a statement before the grid starts.
   ========================================================================== */
.ledger__head--mid {
  text-align: center;
  margin: 0 0 var(--s7);
}
/* the measure lives on the line itself, not the block – a tight container
   broke the definition into five short lines, which was worse than the
   widow it was meant to fix */
.ledger__head--mid .ledger__title {
  max-width: 20ch; margin: 0 auto;
}
.ledger__head--mid .ledger__sub {
  max-width: 40ch; margin: var(--s3) auto 0;
}

/* ==========================================================================
   .switch__side – the heading travels with the keys
   The keys were sticky on their own, so the section title scrolled away and
   left the list floating. Both now sit in one sticky column.
   ========================================================================== */
.switch__side {
  grid-column: 1 / 5;
  position: sticky; top: var(--s5); align-self: start;
}
.switch__side .sec-title { padding: 0; margin-bottom: var(--s4); }
.switch__side .switch__keys { position: static; grid-column: auto; }

/* ==========================================================================
   .switch--bar – the same mechanism, as a filter across the page
   Used where the page carries two or more equal things and you should be
   able to see both are there before choosing one.
   ========================================================================== */
.switch--bar { grid-template-columns: 1fr; gap: 0; }
/* same control as the Contact drawer's Contact / Prayer & Praise filter.
   At .4 opacity against a .22 hairline the keys read as a caption, not a
   control, so the bar now says three things at once: every key is a chip you
   can press, the live one carries a neutral rule along the bottom edge, and
   the one under the cursor shows that rule at a third. */
/* the rule that marks the live key, drawn over the bar's own bottom hairline */
.switch--bar .switch__no { display: none; }
/* The section's own copy now sits inside the filter, between the keys and
   the panels, so it reads above the images on every page that has one.
   The gap under it was 96 + the row's own 64: enough that the photograph sat
   below the fold and the page looked finished before it was. */
.switch--bar > .ledger { margin-bottom: var(--s4); }
.switch--bar > .ledger .ledger__head { margin-bottom: 0; }
.switch--bar > .ledger .ledger__row { padding-bottom: var(--s3); }
/* no bleed: the stage keeps the page margin like every other component */
.switch--bar .switch__media { height: clamp(300px, 36vw, 560px); }
/* the copy sits on the twelve columns, the same split the ledger uses:
   statement left, running copy right */
.switch--bar .switch__copy {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  padding: var(--s4) 0 0;
  max-width: none;
}
.switch--bar .switch__lead { grid-column: 1 / 6; margin: 0; max-width: none; }
.switch--bar .switch__body { grid-column: 7 / 13; }
.switch--bar .switch__body > * + * { margin-top: var(--s3); }
.switch--bar .switch__body p { font-size: var(--t5); line-height: var(--lh-body); opacity: .55; }
.switch--bar .switch__body .cta { display: inline-block; }

@media (max-width: 1024px) {
  .switch--bar .switch__lead,
  .switch--bar .switch__body { grid-column: 1 / 13; }
  .switch--bar .switch__lead { margin-bottom: var(--s3); }
}
@media (max-width: 880px) {
  .switch--bar .switch__keys { flex-wrap: wrap; }
}



/* a lead line inside a switch panel, and the panel's own facts row */
.switch__lead {
  font-size: var(--t4); font-weight: var(--w-mid); opacity: 1;
  line-height: var(--lh-tight); letter-spacing: var(--track-tight);
  margin-bottom: var(--s3); max-width: 34ch;
}
.switch__facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
  border-top: 1px solid rgba(var(--ink-rgb), .18);
  margin: var(--s4) 0 var(--s4); padding-top: var(--s3);
}
.switch__facts span {
  display: block; font-family: var(--mono); font-size: var(--t6);
  letter-spacing: 0; text-transform: uppercase; opacity: .45;
  margin-bottom: var(--s1);
}
.switch__facts p { font-size: var(--t5); opacity: 1; margin: 0; }


/* ==========================================================================
   .unit-list – the Disciple Course units inside a panel
   Full-width hover rows were the wrong device here: these are the contents
   of one thing, not a list of separate things.
   ========================================================================== */
.unit-list {
  list-style: none; margin: var(--s3) 0 0; padding: 0;
  border-top: 1px solid rgba(var(--ink-rgb), .18);
}
.unit-list li {
  display: grid; grid-template-columns: 34px 1fr;
  gap: var(--s2); align-items: baseline;
  padding: var(--s2) 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), .12);
  font-size: var(--t5); line-height: var(--lh-body);
}
.unit-list span {
  font-family: var(--mono); font-size: var(--t6);
  letter-spacing: 0; opacity: .45;
}

/* ==========================================================================
   WIDOWS
   Balanced breaking on every display line, so no heading drops a single
   word onto a line of its own. `pretty` does the same job for running copy
   without re-balancing the whole paragraph. Both degrade to normal wrapping
   where unsupported, which is what we had before.
   ========================================================================== */
.bleed-hero__title,
.ledger__title,
.ledger__lead,
.ledger__sub,
.sec-title,
.switch__lead,
.drawer__title,
.index-rows__name {
  text-wrap: balance;
}
.ledger__body p,
.switch__body p,
.index-rows__note,
.drawer__note,
.brief__sub,
.page-sub,
.unit-list li,
.band-read__body p { text-wrap: pretty; }

/* a filter with no image in its panels: the copy carries it alone */
.switch--flat .switch__media { display: none; }
.switch--flat .switch__copy { padding-top: var(--s5); min-height: 14em; }
.switch--flat .switch__lead { font-size: var(--t3); line-height: var(--lh-tight); max-width: 24ch;
  letter-spacing: var(--track-title);
}

/* the four words: numbered rows that open, the image landscape not portrait */
.index-rows--words .index-rows__row { grid-template-columns: 56px 1fr auto; }
.index-rows--words .index-rows__no,
.index-rows--words .index-rows__tag { padding-top: .35em; }
.index-rows--words .index-rows__drop { grid-column: 2 / -1; }
.index-rows__open--wide { grid-template-columns: 300px 1fr; }
.index-rows__open--wide .index-rows__portrait { aspect-ratio: var(--ratio-wide); }

@media (max-width: 1024px) {
  .index-rows--words .index-rows__row { grid-template-columns: 40px 1fr; }
  .index-rows--words .index-rows__drop { grid-column: 1 / -1; }
  .index-rows__open--wide { grid-template-columns: 1fr; }
}

/* ==========================================================================
   DRAWERS · fit on one screen
   Both panels overflowed at 800px tall. They are a quick action, not a page,
   so everything inside is tightened and the Contact form pairs its short
   fields two up. Nothing is cut; it is set closer.
   ========================================================================== */
.drawer { padding: var(--s4) var(--s4) var(--s5); }
.drawer__head { margin-bottom: var(--s3); }
.drawer__title { font-size: var(--t4); }
.drawer__filter { margin-bottom: var(--s3); }
.drawer__tab { padding: var(--s2) 0; }
.drawer__note { margin-bottom: var(--s3); font-size: var(--t5); }

.drawer .form__field { margin-bottom: var(--s3); }
.drawer .form__field label { margin-bottom: 4px; }
.drawer .form__field input,
.drawer .form__field textarea { padding: 6px 0; font-size: 1rem; }
.drawer .form__field textarea { min-height: 64px; }

/* name and phone sit side by side: both are short */
.drawer .form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s3); }
.drawer .form > input[type="hidden"] { display: none; }
.drawer .form__field:nth-of-type(3) { grid-column: 1 / -1; }  /* email */
.drawer .form__field:nth-of-type(4) { grid-column: 1 / -1; }  /* message */
.drawer .form .cta { grid-column: 1 / -1; justify-self: start; }

.drawer__info { margin-top: var(--s4); }
.drawer__row { padding: var(--s2) 0; }
.drawer__v { font-size: var(--t5); line-height: 1.4; }

/* the Give panel's verse is the one long piece of copy in either drawer */
#drawerGive .drawer__note { font-size: var(--t5); line-height: var(--lh-body); }

/* a page that opens on grey carries the band on the same ground */
body:has(main > .section--open.section--mist) .band { background: var(--mist); }
.section--open.section--mist { padding-bottom: var(--s5); }


/* the menu list inside the drawer: no numbers, no second wordmark */
.drawer__nav { display: flex; flex-direction: column; }
.drawer__nav a,
.drawer__nav button {
  appearance: none; background: none; border: 0; cursor: pointer;
  color: inherit; text-align: left; padding: var(--s2) 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), .14);
  font-family: var(--display); font-size: var(--t4); font-weight: var(--w-mid);
  line-height: var(--lh-tight); letter-spacing: var(--track-tight);
  transition: padding-left .3s cubic-bezier(.2,.6,.2,1), opacity .2s ease;
}
.drawer__nav a:first-child,
.drawer__nav button:first-child { border-top: 1px solid rgba(var(--ink-rgb), .14); }
.drawer__nav a:hover,
.drawer__nav button:hover { padding-left: var(--s2); }
.drawer__nav a[aria-current="page"] { opacity: .4; }

/* the menu is a quick jump, so it fits the screen like the other two */
#drawerMenu .drawer__info { margin-top: var(--s4); }
#drawerMenu .drawer__row { padding: var(--s1) 0; }

/* ==========================================================================
   .explore – a staggered index on the twelve columns
   Not another ruled row list: blocks step left and right down the grid, so
   the homepage's "where next" reads differently from the Events, Leadership
   and Our hope lists that use the row device.
   ========================================================================== */
/* One row, however many there are – five on the homepage, four on Gatherings.
   Stacked left-and-right down the grid they read as five more sections; side
   by side at a smaller size they read as what they are, a row of next steps. */
.explore {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--gutter);
  padding: 0;
}
/* These are doors off the page, not headings, so each one carries the two
   things a door needs: a neutral rule that fills on approach, and an arrow
   that moves. The name alone read as another section title. */
.explore__item {
  position: relative;
  display: block;
  border-top: 1px solid rgba(var(--ink-rgb), .22);
  padding: var(--s3) 0 var(--s4);
  transition: padding-left .35s cubic-bezier(.2,.7,.2,1);
}
.explore__item::before {
  content: '';
  position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: var(--cta);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
/* the stagger modifiers are inert in the row layout; kept so the markup on
   both pages stays the same */
.explore__item:hover { padding-left: var(--s2); }
.explore__item:hover::before { transform: scaleX(1); }

.explore__name {
  display: block;
  font-size: var(--t3); font-weight: var(--w-mid);
  line-height: var(--lh-title); letter-spacing: var(--track);
  text-wrap: balance;
  padding-right: var(--s4);   /* keeps the longest name clear of the arrow */
  /* two lines' worth whether the name takes one or two, so every meta line in
     the row sits on the same baseline */
  min-height: calc(var(--t3) * var(--lh-title) * 2);
}
.explore__meta {
  display: block; margin-top: var(--s2);
  font-family: var(--mono); font-size: var(--t6);
  letter-spacing: 0; text-transform: uppercase; opacity: .45;
}
/* the arrow: mono, neutral, sits on the rule and steps right on hover */
@media (prefers-reduced-motion: reduce) {
  .explore__item, .explore__item::before, .explore__item::after { transition: none; }
}
@media (max-width: 1180px) {
  .explore { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .explore { grid-template-columns: 1fr; gap: 0; }
  /* stacked, each name sits above its own meta, so the two-line box that
     keeps the row aligned side by side is just a hole */
  .explore__name { min-height: 0; }
}


/* ==========================================================================
   .drawer__foot – the menu's address block, set like the site footer
   Label above, value beneath, left aligned. The key/value rows the other
   drawers use are right for two columns of short facts; this is a footer.
   ========================================================================== */
.drawer__foot {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s4) var(--s3);
  margin-top: var(--s5);
}
.drawer__foot > div:first-child { grid-column: 1 / -1; }
.drawer__foot h4 {
  font-family: var(--mono); font-size: var(--t6);
  letter-spacing: 0; text-transform: uppercase;
  font-weight: 400; opacity: .45;
  margin: 0 0 var(--s1);
}
.drawer__foot p {
  margin: 0; font-size: var(--t5);
  line-height: var(--lh-body);
}

/* ==========================================================================
   .section--ink – a block on Abide grey
   Redefining --ink-rgb inside it flips every hairline, every opacity-based
   label and every `color: var(--ink)` child in one go, because they are all
   written against those tokens rather than literal greys.
   ========================================================================== */
.section--ink {
  background: var(--verse-bg);
  color: var(--field-fg);
  --ink: #FFFFFF;
  --ink-rgb: 255,255,255;
  padding-bottom: var(--section-y);
}
.section--ink .ledger__body p { opacity: .62; }
.section--ink .ledger__k { opacity: .5; }

/* a page that opens on grey or ink carries the band on the same ground */
body:has(main > .section--open.section--ink) .band {
  background: var(--verse-bg);
  color: var(--field-fg);
}
body:has(main > .section--open.section--ink) .band__mark img,
body:has(main > .section--open.section--ink) .band__cross img { filter: invert(1); }

/* ==========================================================================
   .page--ink – the whole page on Abide grey
   Gatherings and Events are informative rather than persuasive: they are
   read, not browsed. Running them on grey separates them from the pages that
   are selling the church, and makes the index rows – which already invert on
   hover – invert into the paper rather than out of it.

   Same trick as .section--ink, moved up to <body>: redefine the two ground
   tokens and every hairline, label opacity and `color: var(--ink)` child
   follows, because none of them name a grey directly.
   ========================================================================== */
body.page--ink {
  --paper: #333333;
  --ink: #FFFFFF;
  --paper-rgb: 51,51,51;
  --ink-rgb: 255,255,255;
  --mist: #3C3C3A;        /* the quiet step off grey, same job as on paper */
  --bone: #4A4A47;
  --cta: #C9C3A8;         /* the neutral, lifted to hold at 11px on grey */
  background: var(--paper);
  color: var(--ink);
}
body.page--ink .band { background: var(--paper); color: var(--ink); }
body.page--ink .band__mark img,
body.page--ink .band__cross img { filter: invert(1); }
/* the section that was already ink is now the same ground as the page, so it
   only needs to stop painting its own background */
body.page--ink .section--ink { background: none; }
/* a photograph on a grey page keeps its own light furniture */
body.page--ink .cta--light,
button.cta--light { color: var(--on-photo); }
/* on a dark ground the brand neutral has nothing to sit on */
.section--ink .cta, .section--ink button.cta,
.bleed-hero .cta, .bleed-hero button.cta { color: var(--on-photo); }

/* The live row reverses DOWN into near-black rather than up into white. On a
   grey page a white row is a flare; a darker one reads as the row stepping
   forward, which is what the hover means. */
body.page--ink {
  --row-on-bg: #1B1B19;
  --row-on-fg: #FFFFFF;
}
body.page--ink .index-rows__row:hover,
body.page--ink .index-rows--plain .index-rows__row:hover {
  background: var(--row-on-bg);
  color: var(--row-on-fg);
}
body.page--ink .index-rows__row:hover .index-rows__drop p { opacity: .7; }

/* an event with nothing to book says so, in place of the Register link */
.index-rows__note--inline,
.index-rows__drop .index-rows__note {
  display: inline-block; margin-top: var(--s3);
  font-family: var(--mono); font-size: var(--t6);
  letter-spacing: 0; text-transform: uppercase; opacity: .45;
}

/* ==========================================================================
   .sermons – the YouTube feed on Gatherings
   Latest on the left at twice the size, the three before it stacked beside
   it. The markup is written at build time by sermons.py; the thumbnails come
   straight from YouTube's image CDN and the player is only created when
   someone presses play, so a plain visit loads no third-party script and
   sets no cookies.
   ========================================================================== */
.sermons {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--s4) var(--gutter);
  padding: 0;
  align-items: start;
}
/* the three that are not the lead stack down the right-hand column */
.sermons > .sermon--lead { grid-row: span 3; }

.sermon {
  display: grid; gap: var(--s3);
  margin: 0; padding: var(--s3) 0 0;
  background: none; border: 0; border-top: 1px solid rgba(var(--ink-rgb), .22);
  color: inherit; font: inherit; text-align: left;
  cursor: pointer; position: relative;
  grid-template-columns: 148px 1fr;
}
.sermon--lead { grid-template-columns: 1fr; }
.sermon::before {
  content: '';
  position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: var(--cta);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.sermon:hover::before,
.sermon:focus-visible::before { transform: scaleX(1); }
.sermon:focus-visible { outline: 2px solid var(--cta); outline-offset: 4px; }

.sermon__shot { position: relative; display: block; overflow: hidden; background: var(--bone); }
.sermon__shot img {
  width: 100%; height: 100%; aspect-ratio: var(--ratio-wide); object-fit: cover;
  /* YouTube's hqdefault is 4:3 with bars top and bottom; 3/2 crops them off */
  transform: scale(1.34);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.sermon:hover .sermon__shot img { transform: scale(1.4); }

/* the play mark: the same hairline language as the rest of the site */
.sermon__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid var(--on-photo);
  background: rgba(0, 0, 0, .28);
  backdrop-filter: blur(2px);
  transition: background .3s ease, scale .3s ease;
}
.sermon__play::after {
  content: ''; position: absolute; left: 54%; top: 50%; translate: -50% -50%;
  border-left: 12px solid var(--on-photo);
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.sermon:hover .sermon__play { background: rgba(0, 0, 0, .5); scale: 1.08; }
.sermon--lead .sermon__play { width: 76px; height: 76px; }
.sermon--lead .sermon__play::after { border-left-width: 17px; border-top-width: 11px; border-bottom-width: 11px; }

.sermon__text { display: block; }
.sermon__kicker {
  display: block; font-family: var(--mono); font-size: var(--t6);
  letter-spacing: 0; text-transform: uppercase; color: var(--cta);
  margin-bottom: var(--s1);
}
.sermon__name {
  display: block; font-size: var(--t4); font-weight: var(--w-mid);
  line-height: var(--lh-title); letter-spacing: var(--track);
  text-wrap: pretty;
}
.sermon--lead .sermon__name { font-size: var(--t3);
  letter-spacing: var(--track-title);
}
.sermon__meta {
  display: block; margin-top: var(--s1);
  font-family: var(--mono); font-size: var(--t6);
  letter-spacing: 0; text-transform: uppercase; opacity: .45;
}
/* once play is pressed the button becomes the player */
.sermon.is-playing { cursor: default; }
.sermon.is-playing .sermon__shot { aspect-ratio: 16 / 9; }
.sermon.is-playing iframe { width: 100%; height: 100%; border: 0; display: block; }

.sermons__foot { padding: var(--s4) var(--edge) 0; }

@media (max-width: 1024px) {
  .sermons { grid-template-columns: 1fr; }
  .sermons > .sermon--lead { grid-row: auto; }
}
@media (max-width: 600px) {
  .sermon { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sermon::before, .sermon__shot img, .sermon__play { transition: none; }
}


/* ==========================================================================
   ==  BROUGHT ACROSS FROM THE v2 BUILD (localhost:4466)  ===================
   Four components Maddi picked out of the second direction. Rewritten against
   THIS site's tokens – --edge, --section-y, --block-y, --t1…--t6 – so they
   inherit this site's type scale rather than v2's larger one.
   ========================================================================== */

/* --- .split – image one side, text the other -----------------------------
   The workhorse. One half a photograph running flush to the window edge, the
   other half type at a larger hierarchy. Big type to the TOP, small meta
   pinned to the BOTTOM, clear space between – not vertically centred.
   Reference: Ben Gilchrist, via the v2 build.
   -------------------------------------------------------------------------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  width: 100vw; margin-left: calc(50% - 50vw);
}
.split__media { position: relative; min-height: clamp(380px, 46vw, 660px); }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.split__body {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--s7);
  padding: var(--s5) var(--edge) var(--s5) var(--s6);
}
.split--reverse .split__media { order: 2; }
.split--reverse .split__body { padding: var(--s5) var(--s6) var(--s5) var(--edge); }

.split__title { font-size: var(--t2); font-weight: var(--w-mid); line-height: var(--lh-tight); letter-spacing: var(--track-tight); max-width: 22ch; }
.split__lead { font-size: var(--t4); max-width: 46ch; }
.split__body p + p { margin-top: var(--s3); }
.split__body .cta { align-self: flex-start; margin-top: var(--s4); }

/* the key/value strip along the bottom */
.split__foot {
  display: grid; gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  padding-top: var(--s3); border-top: 1px solid rgba(var(--ink-rgb), .18);
}
.split__foot dt {
  font-family: var(--mono); font-size: var(--t6); text-transform: uppercase;
  letter-spacing: 0; opacity: .45; margin-bottom: var(--s1);
}
.split__foot dd { margin: 0; font-size: var(--t5); }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__media { min-height: 0; aspect-ratio: 3 / 2; }
  .split__media img { position: static; }
  .split__body,
  .split--reverse .split__body { padding: var(--s5) var(--edge); gap: var(--s5); }
}

/* --- .cells – the tile grid, one flat colour cell -------------------------
   A strict grid of square photographs in which one cell is flat sage and one
   is flat ink, carrying the words. Every cell is a link: Maddi read them as
   buttons, so they behave like buttons – the whole tile lifts on hover and
   the four pillars go to their own rows on the About Abide page.
   Reference: "LADIES MEN STILL", and the Welcome to Church tile grid.
   -------------------------------------------------------------------------- */
.cells {
  display: grid; gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(var(--ink-rgb), .16);
  border-block: 1px solid rgba(var(--ink-rgb), .16);
  width: 100vw; margin-left: calc(50% - 50vw);
}
.cells__cell {
  background: var(--paper); position: relative; aspect-ratio: 4 / 5;
  overflow: hidden; display: block; color: inherit;
}
.cells__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.cells__cell:hover img, .cells__cell:focus-visible img { transform: scale(1.04); }

.cells__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s3);
  font-family: var(--mono); font-size: var(--t6); letter-spacing: 0;
  text-transform: uppercase; color: var(--on-photo);
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
  display: flex; justify-content: space-between; gap: var(--s2);
  transition: padding-bottom .3s cubic-bezier(.2,.7,.2,1);
}
.cells__cell:hover .cells__cap, .cells__cell:focus-visible .cells__cap { padding-bottom: var(--s4); }

.cells__cell--said {
  background: var(--sage); color: var(--paper);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--s4);
  transition: background .3s ease;
}
.cells__cell--ink { background: var(--ink); }
a.cells__cell--said:hover, a.cells__cell--said:focus-visible { background: var(--ink); }
a.cells__cell--ink:hover, a.cells__cell--ink:focus-visible { background: var(--sage); }
.cells__k { font-family: var(--mono); font-size: var(--t6); letter-spacing: 0; text-transform: uppercase; opacity: .7; }
.cells__say { font-size: var(--t3); font-weight: var(--w-mid); line-height: var(--lh-title);
  letter-spacing: var(--track-title);
}

@media (max-width: 720px) { .cells { grid-template-columns: repeat(2, 1fr); } }

/* --- .hope-rail – a line of type, the images, the rest of the line --------
   "Our hope" / five frames / "for you". The pictures are the middle of the
   sentence, not an illustration beside it.
   Reference: AVISION, via the v2 build.
   -------------------------------------------------------------------------- */
.hope-rail { display: grid; gap: var(--block-y); padding: 0; }
.hope-rail__line {
  font-size: var(--t2); font-weight: var(--w-mid);
  line-height: var(--lh-tight); letter-spacing: var(--track-tight);
}
.hope-rail__line--b { text-align: right; }
.hope-rail__frames { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--gutter); }
.hope-rail__frames img { width: 100%; aspect-ratio: var(--ratio-portrait); object-fit: cover; display: block; }

@media (max-width: 900px) {
  .hope-rail__line--b { text-align: left; }
  .hope-rail__frames { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .hope-rail__frames img:nth-child(n+5) { display: none; }
}

/* --- .masthead – the display field, with its facts on one baseline --------
   For the pages that are read rather than browsed, which open on the headline
   and the facts instead of on a photograph. The meta row distributes across
   the columns on a single shared baseline, then a hairline closes it – that
   shared baseline is what makes the page read as gridded from the first pixel.
   Reference: AVISION / NARRATIVE, via the v2 build.
   -------------------------------------------------------------------------- */
.masthead { padding: 0; }
.masthead__title {
  font-size: var(--t1); font-weight: var(--w-mid);
  line-height: 1.04; letter-spacing: var(--track-tight);
  max-width: 18ch; text-wrap: balance;
}
.masthead__meta {
  display: grid; gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: var(--block-y) 0 0;
  padding-top: var(--s3);
  border-top: 1px solid rgba(var(--ink-rgb), .18);
  font-family: var(--mono); font-size: var(--t6);
  letter-spacing: 0; text-transform: uppercase;
}
.masthead__meta dt { opacity: .45; margin-bottom: var(--s1); }
.masthead__meta dd { margin: 0; }

/* --- .switch--duo – the filtered panels as a left/right component ---------
   Photograph one side, words the other, instead of the image sitting in a
   band above the copy. Brought across from the v2 build, where each filtered
   panel is a two-column block.
   -------------------------------------------------------------------------- */
.switch--duo .switch__panel {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s6); align-items: start;
}
.switch--duo .switch__media { height: auto; aspect-ratio: 4 / 5; max-height: 62vh; }
.switch--duo .switch__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.switch--duo .switch__copy { padding: 0; max-width: none; }
/* .switch--bar lays the copy out on twelve columns, which inside a
   half-width panel split the lead and the body into two narrow columns and
   made the panel read as three. In duo it is one column. */
.switch--duo .switch__copy { display: block; }
/* The lead was capped at 24ch inside a 557px column, so it broke after
   "welcoming" with 130px of empty column beside it – and it had picked up
   the body's 1.6 line-height, which on a 30px heading reads as a gap
   between every line. Both measures now fill the column they are in. */
.switch--duo .switch__lead {
  font-size: var(--t3); line-height: var(--lh-title);
  max-width: none; margin-bottom: var(--s4);
  letter-spacing: var(--track-title);
}
.switch--duo .switch__body { max-width: none; }
.switch--duo .switch__body p { max-width: 54ch; }
.switch--duo .switch__body p + p { margin-top: var(--s3); }

@media (max-width: 900px) {
  .switch--duo .switch__panel { grid-template-columns: 1fr; gap: var(--s4); }
  .switch--duo .switch__media { height: auto; aspect-ratio: 4 / 5; }
}

/* The facts row directly under a hero carries no heading above it, so it
   needs no top margin – only the hairline that closes it off. */
.masthead__meta--lead { margin-top: 0; }

/* A section on the brand's quiet field. Used for the first left/right block
   on the homepage so it separates from the paper around it. */
.section--bone { background: var(--field); padding-bottom: var(--section-y); }
.section--bone + .section { padding-top: var(--section-y); }

/* A row you can open is a button: it says so on hover, and the cross turns
   a quarter when it is open. */
.index-rows--open .index-rows__row {
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.index-rows--open .index-rows__row:hover .index-rows__name { opacity: 1; }
.index-rows__toggle {
  width: 11px; height: 11px; flex: none; justify-self: end; align-self: center;
  opacity: .4; transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .25s ease;
}
.index-rows__toggle img { width: 100%; height: 100%; display: block; }
.index-rows__row.is-open .index-rows__toggle { transform: rotate(45deg); opacity: 1; }
.index-rows--open .index-rows__row:hover .index-rows__toggle { opacity: .8; }

/* The last row's keyline sat hard against the next section, so the block
   read as if it had lost its bottom padding. */
.index-rows--open { margin-bottom: var(--s5); }

/* --- .split--inset – the same block, but held off the window edge ---------
   The photograph stops short of the right-hand edge and the whole pair sits
   on the brand's quiet field with a margin all round, so it reads as one
   object on the page rather than something running off it.
   -------------------------------------------------------------------------- */
.split--inset {
  width: auto; margin: 0 var(--edge);
  background: var(--field);
  padding: var(--s5);
  gap: var(--s5);
  align-items: center;
}
.split--inset .split__media { min-height: clamp(320px, 38vw, 560px); }
.split--inset .split__body,
.split--inset.split--reverse .split__body { padding: 0; }
.split--inset .split__foot { border-top-color: rgba(var(--ink-rgb), .22); }

@media (max-width: 900px) {
  .split--inset { padding: var(--s4); gap: var(--s4); }
  .split--inset .split__media { min-height: 0; }
}

/* The Generations headline is a long sentence; without help it set over
   three lines and left the hero bottom-heavy. */
/* text-wrap: balance is set on every display heading, and it was spreading
   this sentence evenly over three lines no matter how wide the box was.
   Normal wrapping fills the first line and breaks once. */
/* `text-wrap: normal` is NOT a valid value for this property – the keyword
   is `wrap`. An invalid value is dropped silently, so `balance` from the
   grouped heading rule kept winning and the line stayed broken in three. */
/* `.bleed-hero--page .bleed-hero__title` sets 20ch at (0,2,0); a single
   class could never beat it, which is why every width tried here was
   ignored. Matched specificity, so the explicit break has room to land. */
.bleed-hero--page .bleed-hero__title--two { max-width: none; text-wrap: wrap; }
/* A break that only exists where there is room for it. Measuring a width
   could not land this sentence on exactly two lines without orphaning the
   last word, so the break is explicit above 860px and the text wraps
   naturally below it. */
.br-wide { display: none; }
@media (min-width: 861px) { .br-wide { display: inline; } }

/* ==========================================================================
   FILTERS – one treatment, site-wide
   --------------------------------------------------------------------------
   Every filter on the site is the same object now: mono, uppercase, and when
   a key is chosen the WHOLE key takes the brand neutral rather than just
   growing a line under it – a 3px rule was not enough of a change to read as
   a selection. The same rule applies to the Connect drawer's Contact /
   Prayer & Praise pair, which was a different-looking control doing the same
   job.
   ========================================================================== */
.switch--bar .switch__key,
.drawer__tab {
  font-family: var(--mono); font-size: var(--t6); letter-spacing: 0;
  text-transform: uppercase; font-weight: 400;
  transition: background .25s ease, color .25s ease, opacity .25s ease;
}

/* selected: the key is a filled field */
.switch--bar .switch__key.is-on,
.drawer__tab.is-on {
  background: var(--sage); color: var(--paper); opacity: 1;
}

/* unselected, hovered: a hint of the same field */
.switch--bar .switch__key:hover,
.drawer__tab:hover { background: rgba(var(--neutral-rgb, 127,123,98), .12); opacity: 1; }
.switch--bar .switch__key.is-on:hover,
.drawer__tab.is-on:hover { background: var(--sage); }

/* the keys need even padding now that they carry a ground */
.drawer__tab { padding: var(--s2) var(--s3); text-align: center; }
.drawer__tab + .drawer__tab { border-left: 0; padding-left: var(--s3); }

/* The stage a filter opens into is held one step apart from the page around
   it – paper against the quiet field – so you can see where the filter's
   territory begins and ends. Subtle on purpose; never a dark ground. */
/* The filter starts on paper and the colour arrives with the selection. */
.section--filter { background: none; padding-bottom: 0; }

/* The facts row under a hero needs no rule above it – the photograph has
   already made the break. */
.masthead__meta--bare { border-top: 0; padding-top: 0; }

/* A block that leads straight into the filter below it. */
.section--tight-b { padding-bottom: var(--s4); }
.section--tight-b + .section--bar { padding-top: 0; }

/* The "all sermons" link sits at the top right of the block, on the same
   baseline as Listen, instead of under the cards where it was running off
   the bottom of the section. */
.sermons__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s4);
}
.sermons__head .sec-title { padding: 0; margin: 0; }
.sermons__head .cta { flex: none; }
@media (max-width: 600px) {
  .sermons__head { flex-direction: column; align-items: flex-start; gap: var(--s2); }
}

/* Between the drawer breakpoint and a comfortable desktop the bar has to
   carry six pages, two actions and the mark in whatever is left. The type
   steps down and the gaps tighten rather than the cross being pushed off the
   right-hand edge, which is what used to happen from about 1000px down. */
@media (min-width: 861px) and (max-width: 1080px) {
  .band { gap: var(--s3); }
  .band__nav { font-size: 11px; gap: var(--s2); }
  .band__act { padding-left: var(--s2); gap: var(--s2); }
  .band__cross { margin-left: var(--s1); margin-right: -8px; }
  .band__mark img { height: 22px; }
}

/* ==========================================================================
   THE FILTER – built on the Connect drawer's Contact / Prayer & Praise pair
   --------------------------------------------------------------------------
   That control is the one she likes: mono, equal keys locked into the
   margin, hairline above and below, and the selected key filled. This is the
   same object at page scale, and it replaces the full-bleed grey bar.

   Three rules it follows:
     · it starts on paper – the colour arrives with the selection
     · it is inset to --edge like every other piece of content
     · what it opens into carries the tint, not the filter itself
   ========================================================================== */
.switch--bar .switch__keys {
  grid-column: 1; position: static;
  width: auto; margin: 0;
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 1px;
  background: rgba(var(--ink-rgb), .18);
  border-top: 1px solid rgba(var(--ink-rgb), .18);
  border-bottom: 1px solid rgba(var(--ink-rgb), .18);
}
.switch--bar .switch__key {
  flex: 1 1 0; display: block; text-align: center;
  padding: var(--s2) var(--s3);
  background: var(--paper); color: var(--ink);
  border-bottom: 0; opacity: 1;
  font-family: var(--mono); font-size: var(--t6); font-weight: 400;
  letter-spacing: 0; text-transform: uppercase;
  transition: background .25s ease, color .25s ease;
}

.switch--bar .switch__key:hover { background: rgba(var(--neutral-rgb), .12); }
.switch--bar .switch__key.is-on { background: var(--sage); color: var(--paper); }
.switch--bar .switch__key.is-on:hover { background: var(--sage); }
.switch--bar .switch__key:focus-visible { outline: 2px solid var(--sage); outline-offset: -2px; }

/* The stage is what carries the tint, inset to the same margin as the keys.
   Panels are laid into ONE grid cell rather than absolutely positioned: the
   stage is then as tall as the tallest panel and nothing re-measures when
   you change filter, which is what made the image jump big-then-small. */
.switch--bar .switch__stage {
  grid-column: 1;
  width: auto; margin: 0;
  background: var(--field);
  padding: var(--s5);
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.switch--bar .switch__panel {
  grid-area: 1 / 1; position: static;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s ease, visibility .4s;
}
.switch--bar .switch__panel.is-on { opacity: 1; visibility: visible; pointer-events: auto; }

@media (max-width: 700px) {
  .switch--bar .switch__key { flex: 1 1 40%; }
  .switch--bar .switch__stage { padding: var(--s3); }
}


/* ==========================================================================
   Lists that open
   A row you can open is not a row-index link, so it does not go solid ink on
   hover – that treatment belongs to lists that navigate. Here hover is a
   quiet tint and the state you can see is open/closed.
   ========================================================================== */
.index-rows--open .index-rows__row:hover,
.index-rows--open.index-rows--plain .index-rows__row:hover {
  background: rgba(var(--neutral-rgb), .08); color: inherit;
}
.index-rows--open .index-rows__row.is-open,
.index-rows--open.index-rows--plain .index-rows__row.is-open {
  background: var(--field); color: inherit;
}
.index-rows--open .index-rows__row:hover .index-rows__tag,
.index-rows--open .index-rows__row:hover .index-rows__no { opacity: .55; }
/* the open row's panel must win over any hover state */
.index-rows__row.is-open .index-rows__drop { max-height: var(--drop-h, 1400px) !important; }


/* An event's own photograph, inside the panel that opens. One image, one
   column of words, so a long description never squeezes the picture.
   WIX: the image field on the Events collection, bound in the repeater. */
.index-rows__event {
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: var(--s4); align-items: start;
}
.index-rows__shot {
  width: 100%; height: clamp(180px, 20vh, 240px);
  object-fit: cover; display: block; background: var(--field);
}
@media (max-width: 760px) {
  .index-rows__event { grid-template-columns: 1fr; gap: var(--s3); }
  .index-rows__shot { height: clamp(160px, 26vh, 220px); }
}

/* ==========================================================================
   .next – where to go next
   A light grid of destinations above the footer. No heading: the position
   on the page says what it is. Titles are centred in their cell, which is
   what stops them reading as left-aligned against the dividing line.
   ========================================================================== */
.next-wrap { padding-bottom: var(--section-y) !important; }
.next {
  display: flex; flex-wrap: wrap; align-items: stretch;
  margin: 0; gap: 1px;
  background: rgba(var(--ink-rgb), .09);
  border-block: 1px solid rgba(var(--ink-rgb), .09);
}
.next__label { display: none; }
.next__item {
  flex: 1 1 0; min-width: 148px;
  background: var(--paper); color: inherit;
  display: flex; align-items: center; justify-content: center;
  text-align: center; width: auto;
  padding: var(--s5) var(--s3);
  border: 0; cursor: pointer;
  font-family: var(--mono); font-size: var(--t6-nav);
  letter-spacing: 0; text-transform: uppercase;
  transition: background .28s ease, color .28s ease;
}
.next__item:hover, .next__item:focus-visible { background: var(--ink); color: var(--paper); }
.next__n, .next__meta { display: none; }
.next__name { display: block; }

@media (max-width: 700px) { .next__item { flex: 1 1 45%; padding: var(--s4) var(--s2); } }

/* ==========================================================================
   FOOTER – the endpoint
   Restored: this block was deleted by accident when the .next rules above
   were replaced, which is why the four facts fell back to a plain <dl> and
   stacked down the left-hand side.
   The quick-link columns are gone – "where to go next" does that job. What
   is left is the mark at page scale and four facts on one baseline.
   ========================================================================== */
.site-footer__word { display: block; line-height: 0; }
.site-footer__word img {
  width: 100%; max-width: 1560px; height: auto; display: block;
  filter: var(--footer-mark);
}
.site-footer__facts {
  display: grid; gap: var(--s5) var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: var(--section-y) 0 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--footer-rule);
}
.site-footer__facts dt {
  font-family: var(--mono); font-size: var(--t6); letter-spacing: 0;
  text-transform: uppercase; opacity: .45; margin-bottom: var(--s2);
}
.site-footer__facts dd { margin: 0; font-size: var(--t5); line-height: 1.55; }
.site-footer__facts a,
.site-footer__link {
  color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; text-align: left;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--footer-rule);
  transition: text-decoration-color .25s ease;
}
.site-footer__facts a:hover,
.site-footer__link:hover { text-decoration-color: currentColor; }
.site-footer__base {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s3);
  margin-top: var(--s6); padding-top: var(--s3);
  border-top: 1px solid var(--footer-rule);
  font-family: var(--mono); font-size: var(--t6); letter-spacing: 0;
  text-transform: uppercase; opacity: .45;
}
.site-footer__pillars i { font-style: normal; opacity: .5; padding: 0 2px; }
@media (max-width: 700px) {
  .site-footer__facts { gap: var(--s4) var(--s3); }
  .site-footer__base { flex-direction: column; gap: var(--s2); }
}

/* ==========================================================================
   BAND – fixed, and it comes back when you scroll up
   --------------------------------------------------------------------------
   It used to sit at the very top of the page, which read as too high once
   the frame put white above it. It is lowered onto the frame's own line now,
   and it leaves on the way down and returns on the way up, so the menu is
   always one gesture away without standing on the page the whole time.
   WIX: the header strip's "hide on scroll down / show on scroll up" setting.
   ========================================================================== */
.band {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  padding: var(--s4) var(--edge);
  transition: transform .45s cubic-bezier(.2,.7,.2,1),
              background .3s ease, color .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.band.is-hidden { transform: translateY(-115%); }

/* once the opening photograph is past, the bar takes paper under it */
.band.is-landed {
  background: var(--paper); color: var(--ink);
  border-bottom-color: rgba(var(--ink-rgb), .12);
  padding-top: var(--s3); padding-bottom: var(--s3);
}
.band--light.is-landed .band__mark img,
.band--light.is-landed .band__cross img { filter: none; }
.band--light.is-landed .band__act { border-left-color: rgba(var(--ink-rgb), .18); }
.band--light.is-landed .band__nav a,
.band--light.is-landed .band__nav button { opacity: .55; }
.band--light.is-landed .band__nav a[aria-current="page"] { opacity: 1; }
.band--light.is-landed .band__cross { opacity: .7; }

/* .band--over no longer needs to position itself: the bar is fixed now. */
.band--over { position: fixed; }

/* ==========================================================================
   OPENER – charcoal, and words from the brand's own world
   One line at a time in the centre of the screen: the verse the church is
   named out of, then the four pillars, then the mark. Each holds for a beat
   and crossfades into the next. No box and no counter.
   ========================================================================== */
.loader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--ink);
  display: grid; place-items: center;
  transition: opacity .7s ease, visibility .7s;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
body.is-loading { overflow: hidden; }

.loader__stack { position: relative; display: grid; place-items: center; width: min(86vw, 900px); }
.loader__line {
  grid-area: 1 / 1;
  color: var(--paper); text-align: center;
  font-size: clamp(2rem, 6vw, 4.75rem); font-weight: var(--w-mid);
  line-height: 1.04; letter-spacing: var(--track-tight);
  opacity: 0; transform: translateY(8px);
  /* Leaving is immediate; arriving waits for the one before it to have gone.
     Both lines sit in the same grid cell, so fading them simultaneously
     superimposed one word on another – that was the glitch, not the speed. */
  transition: opacity .3s var(--ease-soft), transform .3s var(--ease-soft);
}
.loader__line.is-on {
  opacity: 1; transform: none;
  transition: opacity .34s var(--ease-soft) .3s,
              transform .34s var(--ease-soft) .3s;
}
/* The four occupied corners, exactly as they sit on every other Abide
   surface. They arrive first, hold for the whole opener and leave with it. */
.loader__corners {
  position: absolute; inset: 0; pointer-events: none;
  font-family: var(--mono); font-size: var(--t6);
  letter-spacing: .08em; text-transform: uppercase; color: var(--paper);
  opacity: 0; transition: opacity .9s var(--ease-soft) .15s;
}
.loader.is-ready .loader__corners { opacity: .5; }
.loader__corners span { position: absolute; }
.loader__corners span:nth-child(1) { top: var(--s5); left: var(--s5); }
.loader__corners span:nth-child(2) { top: var(--s5); right: var(--s5); }
.loader__corners span:nth-child(3) { bottom: var(--s5); left: var(--s5); }
.loader__corners span:nth-child(4) { bottom: var(--s5); right: var(--s5); }
@media (max-width: 700px) {
  .loader__corners span { font-size: 10px; }
  .loader__corners span:nth-child(1), .loader__corners span:nth-child(2) { top: var(--s3); }
  .loader__corners span:nth-child(3), .loader__corners span:nth-child(4) { bottom: var(--s3); }
  .loader__corners span:nth-child(1), .loader__corners span:nth-child(3) { left: var(--s3); }
  .loader__corners span:nth-child(2), .loader__corners span:nth-child(4) { right: var(--s3); }
}
.loader__line--mark img { width: clamp(44px, 6vw, 80px); filter: brightness(0) invert(1); }
.loader__line--word img { width: clamp(180px, 26vw, 380px); filter: brightness(0) invert(1); }

@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
}

/* ==========================================================================
   MOTION – one behaviour, applied everywhere
   --------------------------------------------------------------------------
   Blocks settle rather than appear, and photographs ease back to their own
   size as they arrive. One curve and one distance across the whole site, so
   scrolling reads as a single continuous movement instead of a series of
   separate things switching on.
   WIX: the built-in Reveal and Zoom-in scroll effects.
   ========================================================================== */
:root { --ease-soft: cubic-bezier(.22, .68, .28, 1); }

/* photographs: a touch over size, easing back as they come in */
.plate img,
.split__media img,
.cells__cell img,
.switch__media img,
.hope-rail__frames img,
.index-rows__shot {
  transform: scale(1.06);
  transition: transform 1.3s var(--ease-soft);
  will-change: transform;
}
.is-in .plate img,
.plate.is-in img,
.is-in .split__media img,
.is-in .cells__cell img,
.is-in .switch__media img,
.is-in .hope-rail__frames img,
.is-in .index-rows__shot { transform: none; }

/* blocks: a short lift, same curve */
.section > .grid > *,
.ledger__row,
.split__body > *,
.masthead__meta,
.next,
.hope-rail__line,
.sermon {
  transition: opacity .85s var(--ease-soft), transform .85s var(--ease-soft);
}

/* the scroll itself, so wheel and anchor movement share the page's pace */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  .plate img, .split__media img, .cells__cell img,
  .switch__media img, .hope-rail__frames img, .index-rows__shot {
    transform: none !important; transition: none !important;
  }
  html { scroll-behavior: auto; }
}

/* --- Discipleship · the Disciple Course block ----------------------------
   The weeks belong to the nine-week program, so they sit inside the same
   tinted band rather than on paper underneath it, and the band's own fade
   carries them.
   -------------------------------------------------------------------------- */
.course-units { margin-top: var(--block-y); }
.course-note { max-width: 62ch; margin-top: var(--s5); }

/* The split's words were stopping short of the right-hand margin while the
   photograph grew to fill the height that left. Equal halves, a fixed ratio
   on the picture, and the words land on the content line: the outer side of
   the body is --edge, the inner side is the gutter between the two halves. */
/* Both halves share one height, so the meta along the bottom of the words
   lands exactly on the bottom edge of the photograph. The height is capped
   against the viewport: the picture used to run past 850px and you had to
   scroll the photograph itself to get past it. */
/* Stretch, so the photograph is always exactly as tall as the words beside
   it and the meta along the bottom lands on its edge by construction rather
   than by a height that has to be guessed right. --split-h is the floor. */
.split:not(.split--inset) { --split-h: clamp(400px, 52vh, 560px); align-items: stretch; }
.split:not(.split--inset) .split__media {
  aspect-ratio: auto; align-self: stretch;
  height: auto; min-height: var(--split-h);
}
.split:not(.split--inset) .split__media img { position: absolute; inset: 0; }
.split:not(.split--inset) .split__body {
  gap: var(--s4);
  min-height: var(--split-h);
  padding-top: 0; padding-bottom: 0;   /* the foot reaches the photo's edge */
  justify-content: space-between;
}
/* A four-line title at the section size was setting the height of the whole
   block, and the photograph had to follow it. One step down keeps the
   hierarchy and takes two lines off. */
.split__title {
  font-size: clamp(1.75rem, 2.5vw, 2.375rem);
  max-width: 24ch;
}

@media (max-width: 900px) {
  .split:not(.split--inset) .split__media { aspect-ratio: 3 / 2; align-self: start; }
}

/* --- The filter's tinted stage fades at its edges too --------------------
   The step from the white keys to the tinted stage was a hard line across
   the page. It is the same dissolve the sections use, so the filter reads
   as part of the page rather than a panel dropped onto it.
   -------------------------------------------------------------------------- */
.switch--bar .switch__stage {
  background: none;
  position: relative;
  isolation: isolate;
}
.switch--bar .switch__stage::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--field);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 var(--blend-y, 110px),
                    #000 calc(100% - var(--blend-y, 110px)), transparent 100%),
    linear-gradient(to right, transparent 0, #000 var(--blend-x, 80px),
                    #000 calc(100% - var(--blend-x, 80px)), transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0, #000 var(--blend-y, 110px),
                    #000 calc(100% - var(--blend-y, 110px)), transparent 100%),
    linear-gradient(to right, transparent 0, #000 var(--blend-x, 80px),
                    #000 calc(100% - var(--blend-x, 80px)), transparent 100%);
          mask-composite: intersect;
}

/* ==========================================================================
   LEADERSHIP – given plainly
   Two lead pastors with a photograph and a paragraph each, then the team as
   a ruled list. Replaces a fourth set of open-on-click rows; a name and a
   role do not need to be opened to be read.
   ========================================================================== */
.leads {
  display: grid; gap: var(--block-y) var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-bottom: var(--section-y);
}
.lead__shot {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: var(--field); margin-bottom: var(--s3);
  filter: grayscale(1); transition: filter .6s var(--ease-soft);
}
.lead:hover .lead__shot { filter: grayscale(0); }
.lead__name { font-size: var(--t3); font-weight: var(--w-mid); line-height: var(--lh-title);
  letter-spacing: var(--track-title);
}
.lead__role {
  font-family: var(--mono); font-size: var(--t6); letter-spacing: 0;
  text-transform: uppercase; opacity: .45; margin: var(--s1) 0 var(--s3);
}
.lead__bio { font-size: var(--t5); max-width: 46ch; }

.team { margin: 0; border-top: 1px solid rgba(var(--ink-rgb), .18); }
.team > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s3); align-items: baseline;
  padding: var(--s3) 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), .18);
}
.team dt { font-size: var(--t4); font-weight: var(--w-mid); letter-spacing: var(--track); }
.team dd {
  margin: 0; font-family: var(--mono); font-size: var(--t6);
  letter-spacing: 0; text-transform: uppercase; opacity: .45; text-align: right;
}
@media (max-width: 560px) {
  .team > div { grid-template-columns: 1fr; gap: var(--s1); }
  .team dd { text-align: left; }
}

/* ==========================================================================
   The four pillars · name left, reference right, panel underneath
   The reference was landing in the same grid cell as the panel that opens,
   so "Acts 2:42" was printing straight over "Devotion". Two columns on the
   first row, and the panel spans both on a row of its own.
   ========================================================================== */
.index-rows--words .index-rows__row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
}
.index-rows--words .index-rows__name { grid-column: 1; grid-row: 1; }
.index-rows--words .index-rows__tag {
  grid-column: 2; grid-row: 1;
  justify-self: end; text-align: right;
}
.index-rows--words .index-rows__drop { grid-column: 1 / -1; grid-row: 2; }
.index-rows--words .index-rows__open--wide { padding-top: var(--s3); }

/* Leadership portraits were running most of a browser height, so the 4:5
   originals are cropped to a square – but from the BOTTOM, not the centre.
   The subjects' heads start about 6% down the frame, and a centred square
   crop of a 4:5 image takes 10% off the top, which was cutting through
   Andy's hair and the top of James's head. */
.lead__shot {
  aspect-ratio: 1 / 1; max-height: 46vh;
  object-fit: cover; object-position: center top;
}
.leads { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s5) var(--gutter); }

/* A line of mono set over the top of a photograph. Left aligned, body size,
   white – a change of register rather than another paragraph. */
.media-note {
  position: absolute; left: 0; right: 0; top: 0; z-index: 1;
  margin: 0; padding: var(--s4);
  font-family: var(--mono); font-size: var(--t6-nav); line-height: 1.75;
  letter-spacing: 0; color: var(--on-photo); max-width: 52ch;
  background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.18) 70%, transparent);
}
/* On the full-width closing photograph it sits inside the content line
   rather than the frame, so it starts where every other line on the page
   starts. */
.plate .media-note { padding: var(--s5) var(--edge); max-width: 60ch; }

@media (max-width: 900px) {
  .media-note { padding: var(--s4) var(--edge); }
  .plate .media-note { padding: var(--s4) var(--edge); }
}

/* ==========================================================================
   MOBILE – the left/right block stacks properly again
   --------------------------------------------------------------------------
   The desktop rules that lock the two halves to one height are (0,3,0) and
   were still in force on a phone, where there are no halves: the body kept
   its zeroed vertical padding (so the words sat hard against the bottom of
   the photograph) and lost its horizontal inset (so they ran to the frame).
   Stated explicitly for narrow screens rather than inherited.
   ========================================================================== */
@media (max-width: 900px) {
  .split:not(.split--inset) { --split-h: 0px; align-items: start; }
  .split:not(.split--inset) .split__media {
    min-height: 0; height: auto; aspect-ratio: 3 / 2; align-self: start;
  }
  .split:not(.split--inset) .split__body,
  .split--reverse:not(.split--inset) .split__body {
    min-height: 0;
    padding: var(--s4) var(--edge) 0;
    gap: var(--s4);
  }
  /* the meta strip has nothing to align to once the halves are stacked */
  .split:not(.split--inset) .split__foot { margin-top: var(--s4); }
}

/* On a phone the two controls at the right of the bar read as a pair: the
   cross first, then Menu, set close together. */
@media (max-width: 860px) {
  /* the cross's hit area is 40px around a 13px mark, so the visual gap is
     wider than the box gap – the negative margin closes that back up */
  .band__cross { order: 2; margin-left: auto; margin-right: -12px; }
  .band__menu { order: 3; margin-left: 0; }
}