/* ==========================================================================
   REVIEW ADJUSTMENTS — loaded last, so it wins without touching the
   stylesheets above it. Every rule here answers a specific note from Maddi's
   walkthrough of the live site. Delete the <link> to undo the lot.
   ========================================================================== */

/* --- 1. Lead copy, one line height ---------------------------------------
   .split__lead sat at 1.6 and .ledger__lead at 1.02, so the same size of
   type read loose in one block and cramped in the next. One value for both,
   between the two, and the tight display tracking comes off the ledger lead
   — it is a sentence, not a headline. */
:root { --lh-lead: 1.45; }
.split__lead,
.ledger__lead,
.switch__lead { line-height: var(--lh-lead); }
.ledger__lead { letter-spacing: var(--track); }

/* --- 2. One measure, so the right edge is the same -----------------------
   The lead was capped at 46ch and the paragraphs under it were not, so the
   two ragged edges never agreed. */
.split__body p,
.ledger__body p,
.switch__body p { max-width: 46ch; }

/* --- 3. The note over the closing photograph, in caps -------------------- */
.media-note { text-transform: uppercase; }

/* --- 4. The gaps that read as holes ---------------------------------------
   Each of these sits between a quiet block of words and the photograph that
   follows it, where a full --section-y looked like a missing section. */

/* Home: under John 15:4, before the block that follows. 96px -> 64px. */
.section:has(.verse) + .section { padding-top: calc(var(--section-y) * .5); }

/* Discipleship and Gatherings: under the opening statement, before the split. */
.section:has(.ledger) + .section { padding-top: calc(var(--section-y) * .5); }

/* About: between Kingdom, the last row that opens, and the photograph. */
.section--mist:has(.index-rows) + .section--plate { padding-top: 0; }
.section:has(.index-rows--words) + section > .plate { margin-top: 0; }

/* I'm New: the grey panel sat a full section below the hero. Matching it to
   the site's own side padding is what makes the frame read as even. */
/* The panel is full-bleed inside the page frame, so its left and right gap
   is --page-gap (22px at 1440). The top gap now matches it on desktop; on a
   phone it stays at the side padding, which is the version that reads right. */
.section:has(.split--inset) { padding-top: var(--page-gap); }
@media (max-width: 880px) {
  .section:has(.split--inset) { padding-top: var(--edge-min); }
}

/* Home: the verse reference carried a 96px bottom margin of its own, which
   was the real gap under John 15:4 — not the section padding. */
.verse__ref { margin-bottom: calc(var(--s6) * .5); }

/* --- 5. A row that is open is not a filled box ---------------------------
   Grey on hover is the invitation; keeping it grey once the panel is open
   fought with the text now sitting inside it. Hovering an open row still
   tints, so the behaviour stays legible. */
/* About: no fill at all. Clicking leaves the pointer on the row, so a
   :not(:hover) guard still showed grey the moment it opened — which is what
   was still on screen. The hairline between rows is the structure here. */
/* The base rule for an open row is .index-rows--open.index-rows--plain …,
   which carries two classes in its first compound. Matching that count is
   what makes these win — a single-class selector here silently lost. */
.index-rows--open.index-rows--plain.index-rows--words .index-rows__row,
.index-rows--open.index-rows--plain.index-rows--words .index-rows__row:hover,
.index-rows--open.index-rows--plain.index-rows--words .index-rows__row.is-open,
.index-rows--open.index-rows--plain.index-rows--words .index-rows__row.is-open:hover { background: none; }

/* Events: grey still invites the click, and leaves once the panel is open,
   including while the pointer is still sitting on the row. */
.index-rows--date .index-rows__row.is-open,
.index-rows--date .index-rows__row.is-open:hover { background: none; }

/* --- 6. The footer keeps its two columns on a phone ----------------------
   auto-fit with a 190px minimum collapsed to a single column, which stacked
   all four facts. Two columns is the arrangement that reads best. */
@media (max-width: 880px) {
  .site-footer__facts { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--gutter); }
}

/* --- 7. Generations: every tab starts where Kids starts ------------------
   All four panels share one grid cell, so the cell is as tall as the longest
   one (Kids) and the shorter panels were stretched to fill it — which pushed
   their copy down by up to 167px. Aligning each panel to the top leaves the
   spare height underneath, where nobody sees it. */
.switch--bar .switch__panel { align-self: start; align-content: start; }

/* and the closing photograph sat a full section below the filters */
.section--filter + section > .plate--flush,
.section--bar + section > .plate--flush { margin-top: 0; }
.section--filter + section,
.section--bar + section { padding-top: calc(var(--section-y) * .5); }

/* --- 8. The panels fit the phone ----------------------------------------
   Menu, Connect and Give all ran past the bottom of a 812px screen. The
   64px floor was the biggest single saving, and the Give scripture was
   held off the right edge while the close button sat flush to it. */
@media (max-width: 880px) {
  .drawer { padding: var(--s3) var(--s4) var(--s3); }
  /* eight links plus the facts underneath have to clear a phone's chrome, so
     the air between them comes down while each link keeps a 44px tap target */
  .drawer__nav { gap: var(--s1); }
  .drawer__nav a,
  .drawer__nav button { min-height: 44px; display: flex; align-items: center; }
  .drawer__foot { margin-top: var(--s3); gap: var(--s2) var(--s3); }
  .drawer__foot h4 { margin-bottom: 2px; }
  .drawer__head { margin-bottom: var(--s3); }
}
/* the scripture in Give runs to the same right edge as the close button */
.drawer__note { max-width: none; }

/* On a real phone the usable height is well short of the 812px a desktop
   emulator reports, because the browser's own chrome takes a slice. The menu
   is navigation first: below that height the address block steps aside rather
   than forcing a scroll, and it is still in the footer on every page. */
@media (max-height: 760px) {
  .drawer__foot { display: none; }
  #drawerGive .drawer__note { font-size: var(--t5); }
}

/* --- 9. The opener writes itself ----------------------------------------
   A caret while a line is being typed, the same one the Scripture panel
   uses, and no fade-in transition while typing — the characters arriving
   are the animation. */
.loader__line.is-typing { transition: none; }
.loader__line.is-typing::after {
  content: ''; display: inline-block;
  width: .5ch; height: .92em;
  background: currentColor; margin-left: .08em; vertical-align: -.06em;
  animation: caret .9s step-end infinite;
}

/* --- 10. The Generations headline keeps a measure -------------------------
   It was held on two lines by an explicit <br> in the markup. Now that the
   words come from the CMS, the break travels with them as a newline — and a
   measure underneath means the line can never run the full width even if
   somebody removes it. */
.bleed-hero--page .bleed-hero__title--two { max-width: 22ch; }
@media (max-width: 860px) {
  .bleed-hero--page .bleed-hero__title--two { max-width: 16ch; }
}


/* --- 11. Generations: the stage is as tall as the tab that is open -------
   All four panels share one grid cell, so the cell was always as tall as the
   longest of them and the photograph below sat at that distance whichever
   tab you were on. Collapsing the closed panels lets the page close up. */
.switch--bar .switch__panel:not(.is-on) { max-height: 0; overflow: hidden; }

/* --- 12. On a phone, fill the line -------------------------------------
   `text-wrap: pretty` holds words back to avoid a short last line. On a wide
   column that is a nicety; in a 311px column it leaves 28px hanging off the
   right of a line that could have taken another word, which is the "more
   room on the right" that keeps showing up. Greedy wrapping below 880px. */
@media (max-width: 880px) {
  p, dd, li,
  .lead__bio, .split__lead, .switch__lead, .ledger__lead { text-wrap: wrap; }
}

/* --- 13. Lead copy, tighter --------------------------------------------
   1.45 still read loose against the body underneath it. */
:root { --lh-lead: 1.35; }

/* --- 14. The lead steps down on a phone ---------------------------------
   20px lead copy in a 311px column cannot hold words like "purposefully" or
   "intentionally" — a line ends 60-90px short because the next word simply
   will not fit, which reads as text that stops before the edge. 18px takes
   roughly two more characters a line and the rag closes up. */
@media (max-width: 880px) {
  .split__lead, .ledger__lead, .switch__lead { font-size: 1.125rem; }
}


/* --- 15. About: Kingdom to the photograph -------------------------------
   153px at desktop between the last row and the picture. The rows already
   carry their own breathing space underneath. */
.section--mist:has(.index-rows--words) { padding-bottom: calc(var(--section-y) * .5); }

/* --- 16. Generations: the hero to the statement under it ----------------
   The sentence appears twice on this page, and a full section between the
   two readings of it made the second look stranded. */
.section--tight-b { padding-top: calc(var(--section-y) * .5); }

/* ==========================================================================
   THE PANEL — the Plan your visit treatment, reused
   A block of content on the brand's quiet field, sitting on the page frame
   rather than the text line, with one padding all round. Same device every
   time it appears, so the page reads as a set of objects.
   ========================================================================== */
.section > .panel {
  background: var(--field);
  padding: var(--s5);
  /* out to the frame, the way a photograph goes */
  margin-inline: calc(var(--edge) * -1);
}
@media (max-width: 900px) {
  .section > .panel { padding: var(--s4); }
}
/* a split inside a panel brings its own padding, so it must not double up */
.section > .split.panel { gap: var(--s5); align-items: center; }
@media (max-width: 900px) {
  .section > .split.panel { gap: var(--s4); }
  .section > .split.panel .split__media { min-height: 0; }
}
.section > .split.panel .split__body { padding: 0; }
.section > .split.panel .split__foot { border-top-color: rgba(var(--ink-rgb), .22); }

/* A split body is laid out space-between, so the type sits at the top and
   the meta rail at the bottom. Take the rail away and there is one child
   left, which space-between pins to the top of a full-height photograph
   with the rest of the column empty under it. Centre it instead. */
/* Matching the selector that sets space-between, class for class, or it
   does not win. */
.split:not(.split--inset) .split__body:not(:has(.split__foot)) {
  justify-content: center;
}

/* the statement panels centre their words in the space they hold */
.section > .ledger.panel .ledger__head,
/* Only the top margin needed removing when this became a panel's first
   child. Zeroing both put "All sermons on YouTube" straight onto the
   first card. */
.section > .panel > .sermons__head { margin-top: 0; margin-bottom: var(--s4); }

/* Events: the selected filter takes the brand's own grey, not the green */
.switch--bar .switch__key.is-on,
.switch--bar .switch__key.is-on:hover { background: var(--ink); color: var(--paper); }

/* --- 17. The opener: the verse, written out -----------------------------
   The mark and the wordmark have come out of the sequence. What is left is
   the verse the church is named from, set in the mono face at reading size
   so the whole of it is on screen while it types. */
.loader__line--verse {
  font-family: var(--mono);
  font-size: clamp(0.95rem, 2.9vw, 1.35rem);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
  max-width: 44ch;
  text-align: center;
}
.loader__line--ref {
  font-family: var(--mono);
  font-size: var(--t6);
  letter-spacing: 0; text-transform: uppercase;
  opacity: .5;
  text-align: center;
}
/* The two lines used to share one grid cell, because the opener used to
   replace each line with the next. The verse now stays and the reference
   arrives under it, so they need a row each – sharing the cell is what laid
   the reference across the first line of the verse on a phone. */
.loader__stack {
  grid-auto-flow: row;
  place-items: center;
  gap: var(--s3);
  width: min(86vw, 44ch);
}
.loader__stack .loader__line { grid-area: auto; }

/* ==========================================================================
   EVENTS — one filter, cards underneath
   The dated list and the seasonal strands are one component now. The tabs
   reuse the site's filter chips; the cards are the same square-cornered,
   squared-off treatment as everything else.
   ========================================================================== */
/* the filter is the site's own bar; it just needs its air underneath */
.events__filter { margin-bottom: var(--s5); }
.events__grid {
  display: grid; gap: var(--s5) var(--gutter);
  /* auto-fill, not auto-fit: auto-fit collapses the empty tracks, so
     filtering down to one event stretched that card across the panel.
     auto-fill keeps the tracks, and a lone card sits at its own width
     on the left. */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
/* An element carrying the hidden attribute must not be laid out — setting
   display on the class overrides it, which is why filtered-out cards were
   still on screen. Same trap as the drawer scrim earlier. */
.event[hidden] { display: none; }
.event { display: flex; flex-direction: column; align-items: flex-start; }
.event__shot {
  width: 100%; aspect-ratio: var(--ratio-portrait); object-fit: cover;
  margin-bottom: var(--s3);
}
.event__when { opacity: .5; margin: 0 0 var(--s1); }
.event__title {
  font-size: var(--t3); font-weight: var(--w-mid);
  line-height: var(--lh-title); letter-spacing: var(--track-title);
  margin: 0 0 var(--s2);
}
.event__body { font-size: var(--t5); line-height: var(--lh-body); margin: 0; max-width: 46ch; }
.event .cta { margin-top: var(--s3); }
.event__note { opacity: .45; margin-top: var(--s3); }
.events__empty { opacity: .5; margin: 0; }
@media (max-width: 700px) {
  .events__grid { grid-template-columns: 1fr; gap: var(--s5); }
  .events__filter { margin-bottom: var(--s4); }
}

/* ==========================================================================
   PANEL RHYTHM — the air around a panel is the frame's own padding
   A panel is an object sitting on the page, so the distance to the next one,
   or to the photograph under it, is the same as the distance to the left and
   right edges. That is what locks the page up, and it is what the I'm New
   page was already doing.
   ========================================================================== */
.section:has(> .panel) {
  padding-top: var(--page-gap);
  padding-bottom: var(--page-gap);
}
.section:has(> .panel) + section { padding-top: 0; }
.section:has(> .panel) + section > .plate { margin-top: 0; }

/* a panel that follows something inside its own section needs the same gap –
   on About, "for you" was sitting flush against the four values */
.section > .panel:not(:first-child) { margin-top: var(--page-gap); }
/* the rows component brings a 64px floor of its own, which was sitting
   under the panel on top of the section's padding */
.section > .panel { margin-bottom: 0; }

/* About's quiet ground carried its own floor as well */
.section--mist:has(> .panel) { padding-bottom: var(--page-gap); }

/* Generations: the filters run the width of the panel above them */
/* the body already carries the frame's padding, so the section adds none */
.section--bar.section--filter { padding-inline: 0; }

/* Gatherings: the rules under Listen and under All sermons on YouTube sat
   almost on the baseline */
.sermons__head .cta { text-underline-offset: 8px; }

/* ==========================================================================
   DISCIPLESHIP — the course reads as one block
   ========================================================================== */
/* Six pairs rather than two, so the strip runs in two columns and the left
   side of the component fills to roughly the height of the photograph. */
.split__foot--course { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .split__foot--course { grid-template-columns: 1fr; }
}

/* Both photographs on this page stand the same height, and the second one
   holds its place while the longer column beside it scrolls past. */
.section:has(.split__foot--course) .split__media,
.section:has(.split) .split__media { align-self: start; }
.split__foot--course ~ * { min-width: 0; }
@media (min-width: 901px) {
  .section .split--reverse:has(.split__foot--course) .split__media {
    position: sticky;
    top: calc(var(--page-gap) + var(--s6));
  }
}

/* ==========================================================================
   A STATEMENT ON THE FIELD
   The closing word of a page, centred on the panel, at the size the page
   opened at.
   ========================================================================== */
.panel--statement { display: grid; place-items: center; }
/* Set exactly as the scripture is on the homepage: the mono face, small,
   generously led and centred. A quiet closing thought rather than a heading. */
.statement-note {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(.75rem, .88vw, .875rem);
  font-weight: 400;
  line-height: 2.2;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  max-width: 64ch;
}
@media (max-width: 700px) {
  .statement-note { max-width: none; line-height: 2; }
}

/* --- 18. One photograph spec inside a panel ------------------------------
   Plan your visit sat at 1.10, the home blocks at 1.29 and Generations at
   1.05 — three near-squares that were not the same. They are all the site's
   own default ratio now, 1:1, filling the column they are given. */
/* .split:not(.split--inset) .split__media sets aspect-ratio:auto at (0,3,0),
   so a plain .split selector loses. Matching its shape is what makes the
   square stick on the home and discipleship blocks. */
.split:not(.split--inset) .split__media,
.split--inset .split__media,
.switch--bar .switch__media {
  width: 100%;
  height: auto;
  min-height: 0;
  /* .switch--duo caps its picture at 62vh, which clipped the square back to
     1.05 even with the ratio applied */
  max-height: none;
  align-self: start;
  aspect-ratio: var(--ratio);
}
.split .split__media img,
.switch--bar .switch__media img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   ABOUT — small corrections
   ========================================================================== */
/* The four values read as a list held by the rules between them; the rule
   along the top of the panel and the one under Kingdom were closing the set
   off against the panel's own edge. */
.index-rows--words { border-top: 0; border-bottom: 0; }
.index-rows--words .index-rows__row:first-child { border-top: 0; }
.index-rows--words .index-rows__row:last-child { border-bottom: 0; }

/* ==========================================================================
   THE NEWSLETTER LINE
   One rule you type on, in the footer. Connect already carries the
   conversation, so the old email link was saying the same thing twice.
   ========================================================================== */
.signup { display: block; }
.signup__label {
  display: block;
  font-family: var(--mono); font-size: var(--t6); letter-spacing: 0;
  text-transform: uppercase; opacity: .45; margin-bottom: var(--s2);
}
.signup__row {
  display: flex; align-items: baseline; gap: var(--s2);
  border-bottom: 1px solid var(--footer-rule);
  transition: border-color .25s ease;
}
.signup__row:focus-within { border-bottom-color: currentColor; }
.signup__input {
  flex: 1 1 auto; min-width: 0;
  appearance: none; background: none; border: 0; padding: 0 0 var(--s1);
  font: inherit; color: inherit;
  font-size: var(--t5); line-height: 1.55;
}
.signup__input::placeholder { color: inherit; opacity: .35; }
.signup__input:focus { outline: none; }
.signup__go {
  flex: none; appearance: none; background: none; border: 0; padding: 0 0 var(--s1);
  cursor: pointer; color: var(--cta);
  font-family: var(--mono); font-size: var(--t6-nav); letter-spacing: 0;
  text-transform: uppercase;
}
.signup__said { display: block; margin-top: var(--s1); font-size: var(--t6); opacity: .55; }
.signup.is-done .signup__row { display: none; }

/* In the footer's two mobile columns the signup got 229px, which is not
   enough to type an address into. It takes the full width instead. */
@media (max-width: 880px) {
  .site-footer__facts > div:has(.signup) { grid-column: 1 / -1; }
}

/* ==========================================================================
   SMALL CORRECTIONS
   ========================================================================== */

/* The four values sit on the centre of their row rather than its top edge —
   only while closed, so an open panel still hangs off the name. */
.index-rows--words .index-rows__row:not(.is-open) { align-items: center; }

/* Leadership: the wide ratio, because that is what the photographs are.
   All three were shot at 3:2 landscape, so the 4:5 portrait slot was cutting
   into them – worst on Andy and Irina, where a centre crop takes a bite out
   of a picture with two people in it. At 3:2 nothing is cropped at all, and
   the card is shorter than it was even at the full column width, so the cap
   that was holding the portraits down is no longer needed. */
.lead__shot {
  aspect-ratio: var(--ratio-wide);
  max-height: none;
  max-width: none;
  width: 100%;
}

/* Gatherings: the statement and the photograph under it were a full section
   apart, with the section's own floor on top of that. */
.section:has(.ledger) + .section--plate,
.section:has(.ledger) + section > .plate { margin-top: 0; }
.section:has(.ledger) { padding-bottom: var(--page-gap); }


/* ==========================================================================
   ONE INK FOR BODY COPY
   Prose was running at six different opacities depending on which component
   it landed in – 1 in the split blocks, .72 and .55 on Generations, .55 in
   the ledgers, .62 on the event cards, .6 in the About values. The Generations
   page read as a different grey because it was the only page where the lead
   was dimmed as well as the body.

   They are all full ink now. Beyond the inconsistency, #333 at .55 resolves
   to about #8E8E8E, which is 2.9:1 on white – under the 4.5:1 that body text
   needs to be legible. Mono labels and keys keep their own quiet register:
   they are captions, not reading matter.
   ========================================================================== */
.switch__copy p,
.switch__copy p.switch__lead,
.switch--bar .switch__body p,
.ledger__body p,
.brief__body p,
.band-read--three .band-read__cols > * p,
.band-read__body p + p,
.index-rows__open p,
.index-rows__row:hover .index-rows__open p,
.index-rows__row.is-open .index-rows__drop p,
body.page--ink .index-rows__row:hover .index-rows__drop p { opacity: 1; }



/* With only one lead card on the page, the auto-fit grid has no second or
   third item to share the row with, so the single card stretched the whole
   measure and the photograph came out over 1200px wide.

   Capping it at the three-card width was still too much: one portrait at that
   size carries the whole section, where before it was one of three. Held to
   300 instead – the photograph reads as a portrait rather than a banner, and
   the biography keeps a sensible measure under it. The cap stops biting once
   the other cards come back, because a track is narrower than this by then. */
.leads > .lead { max-width: 300px; }

/* ==========================================================================
   THE ENQUIRY FORM

   The drawer lays its fields out on two columns and placed them by
   :nth-of-type - so adding the topic dropdown at the top shifted every field
   down one: the rule meant for the email landed on the phone, and the message
   box was left in a half column. Fields are placed by what they contain now,
   which does not care how many of them there are.
   ========================================================================== */
.drawer .form__field:has(#d-name),
.drawer .form__field:has(#d-phone) { grid-column: auto; }
#contactTopicField,
.drawer .form__field:has(#d-email),
.drawer .form__field:has(#d-msg) { grid-column: 1 / -1; }
.drawer .form .form__said { grid-column: 1 / -1; }

/* A select will not sit on the same hairline as the text fields until it has
   been talked out of its native chrome. The chevron is drawn rather than
   shipped: one small SVG at the same stroke weight as the icon set. */
.form__field select {
  width: 100%;
  appearance: none; -webkit-appearance: none;
  border: 0; border-radius: 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), .3);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none' stroke='%23333333' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.2 5.5 5.7 10 1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding: 10px 22px 10px 0;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: var(--track);
  color: var(--ink);
  cursor: pointer;
}
/* the drawer runs its inputs smaller; the select follows them, not the page */
.drawer .form__field select { padding: 6px 22px 6px 0; font-size: 1rem; }
.form__field select:focus { outline: 0; border-bottom-color: var(--ink); }

/* Until something is chosen the placeholder should read as a prompt, not as
   an answer already given. Still 4.9:1 on paper, so it stays legible. */
.form__field select:has(option[value=""]:checked) { color: #7A7A7A; }

.form__field[hidden] { display: none; }

/* what the form says back once it has sent */
.form__said {
  margin: var(--s2) 0 0;
  font-family: var(--mono); font-size: var(--t6); letter-spacing: 0;
  line-height: var(--lh-mono); text-transform: uppercase;
  min-height: 1.7em;
}
.form__said[data-state="bad"] { color: #8C2F2F; }

/* ==========================================================================
   EVENTS ON PAPER
   The events list sat on the grey panel like the other pages' components.
   Here the cards already carry their own photographs and rules, so the tint
   behind them was a second thing to look at. The panel keeps its padding and
   its rhythm with the sections around it; only the fill goes.
   ========================================================================== */
.section:has(.events) > .panel { background: var(--paper); }

/* ==========================================================================
   THE FOUR VALUES
   Was four ruled rows that opened on click. Everything worth reading sat
   behind an interaction and three of the four were always shut, so the
   section read as a list of four words on a lot of grey. Four cards instead:
   the photograph at the site's square ratio, the word, the reference in mono
   and the paragraph, all of it visible at once and nothing to operate.
   ========================================================================== */
.values {
  display: grid;
  /* Four across, not two. Two columns meant scrolling to reach the last two,
     which is the fault the rows had – all four belong in one view, because
     they are one idea in four parts. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5) var(--gutter);
}
.value__shot {
  display: block; width: 100%;
  aspect-ratio: var(--ratio);
  object-fit: cover;
  margin-bottom: var(--s3);
  /* In colour, at the church's preference. The set used to be held in
     greyscale with colour lifting on hover, which meant the photographs
     were only ever themselves while a cursor was on them - and did nothing
     at all on a phone. */
}
.value__name {
  margin: 0;
  font-size: var(--t3); font-weight: var(--w-mid);
  line-height: var(--lh-title); letter-spacing: var(--track-title);
}
.value__tag { margin: var(--s1) 0 var(--s2); color: #6E6A54; }
.value__body { margin: 0; font-size: var(--t5); line-height: var(--lh-body); max-width: 46ch; }

@media (max-width: 1100px) {
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .values { grid-template-columns: 1fr; gap: var(--s5); }
}

/* ==========================================================================
   THE LEGAL PAGE
   A long document rather than a designed page. One column at a reading
   measure, section markers in mono so they can be scanned, and nothing else
   competing. The words are the church's lawyers', not ours.
   ========================================================================== */
.legal { max-width: 68ch; }
.legal__head {
  margin: var(--s6) 0 var(--s2);
  padding-top: var(--s3);
  border-top: 1px solid rgba(var(--ink-rgb), .18);
  font-family: var(--mono); font-size: 13px; letter-spacing: 0;
  font-weight: 500; line-height: var(--lh-mono); text-transform: uppercase;
}
.legal__head:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.legal__p { margin: 0 0 var(--s2); font-size: var(--t5); line-height: var(--lh-body); }
.legal__list { margin: 0 0 var(--s2); padding-left: var(--s3); }
.legal__list li { font-size: var(--t5); line-height: var(--lh-body); margin-bottom: 4px; }
.site-footer__fine {
  font-family: var(--mono); font-size: var(--t6); letter-spacing: 0;
  text-transform: uppercase; line-height: var(--lh-mono);
  text-decoration: none; border-bottom: 1px solid currentColor;
}

/* ==========================================================================
   LATE REVIEW ADJUSTMENTS
   ========================================================================== */

/* Home: the definition and the invitation are one thought, so they are set
   as one block at reading size rather than a headline above a sentence. */
.split__title--copy {
  font-size: var(--t4);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--track);
  max-width: 46ch;
}
.split__title--copy + .split__lead { margin-top: 0; }

/* About: one lead card leaves two columns of air beside it, so the rest of
   the team sits in that space instead of underneath it. */
.lead-team {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--s5) var(--s7);
  align-items: start;
}
.lead-team .leads { display: block; margin-bottom: 0; }
.lead-team .team { margin-top: 0; }
@media (max-width: 880px) {
  .lead-team { grid-template-columns: 1fr; gap: var(--s5); }
}

/* Footer: the newsletter needs room for a field and a button, and was
   running into Get involved. Giving it the wider track pushes the last
   column out to the edge, which is where it reads best anyway. */
@media (min-width: 881px) {
  .site-footer__facts {
    grid-template-columns: 1fr 1fr 1.7fr 0.8fr;
    column-gap: var(--s6);
  }
}

/* ==========================================================================
   MOBILE REVIEW, 6 NOVEMBER 2026
   Maddi's walkthrough on a phone once the site was live. Each block below is
   one of her notes, in the order she gave them.
   ========================================================================== */

/* --- Home: the opening two sentences read as one paragraph ----------------
   "To remain, continue, stay, dwell, or reside" is followed by a lead at 18px
   and a paragraph at 16px with a different line height, so one thought in two
   sentences arrived in two typefaces. Where a lead is followed by a paragraph
   it is now set like that paragraph: on a phone the step up was not reading
   as hierarchy, it was reading as a mistake. Desktop keeps the step. */
@media (max-width: 880px) {
  .split__body .split__lead:has(+ p) {
    font-size: var(--t5);
    line-height: var(--lh-body);
    letter-spacing: var(--track);
  }
}

/* --- Discipleship: the hole under "We believe that we can't follow Jesus
   alone" -------------------------------------------------------------------
   The lead carried a 24px bottom margin on a phone and the row's own gap
   added another 24, so two paragraphs of one thought sat 48px apart while
   paragraphs inside the block sat 16 apart. The row gap alone is the gap. */
@media (max-width: 880px) {
  .ledger__row { row-gap: var(--s3); }
  .ledger__row .ledger__lead { margin-top: 0; margin-bottom: 0; }
}

/* --- Discipleship: the closing statement in capitals ---------------------
   Her call. Caps at this length need the tracking opened or the words run
   together; this is the same treatment .media-note already carries. */
.statement-note { text-transform: uppercase; letter-spacing: 0.015em; }

/* --- Events: the photographs at half height on a phone -------------------
   The cards are one column at phone width, so a 4:5 portrait pushed the
   title and date below the fold on every card. 8:5 is exactly half that
   height, which puts the words back on screen with the picture. */
@media (max-width: 680px) {
  .event__shot { aspect-ratio: 8 / 5; }
}

/* --- Gatherings: the sermons swipe rather than stack ---------------------
   Four stacked cards ran most of a screen each. On a phone they are one rail
   that scrolls sideways and snaps, at 78% width so the next card shows and
   the gesture is discoverable. The negative margin matches the panel's own
   padding so the rail starts at the page frame and runs off it. */
@media (max-width: 680px) {
  .sermons {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--s4) * -1);
    padding-inline: var(--s4);
  }
  .sermons::-webkit-scrollbar { display: none; }
  /* every card takes the lead card's shape: picture over words */
  .sermons > .sermon,
  .sermons > .sermon--lead {
    grid-template-columns: 1fr;
    grid-row: auto;
    scroll-snap-align: start;
  }
}

/* --- The mobile footer: the privacy link had nowhere to be ---------------
   Stacked, it sat alone between the copyright and the four words, reading as
   an orphan. The pillars take their own line and the two pieces of fine
   print share the line under it, which is where a privacy link belongs. */
@media (max-width: 880px) {
  .site-footer__base {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s2) var(--s3);
  }
  .site-footer__pillars { order: 1; flex: 1 0 100%; }
  .site-footer__base > span:not(.site-footer__pillars) { order: 2; }
  .site-footer__fine { order: 3; }
}