/* ==========================================================================
   Hope Vineyard Church, Great Yarmouth — brand stylesheet
   Colours and logo from the Hope Vineyard brand kit (the Canva Brand Kit,
   backed up in the hope-vineyard-brand-kit repository: colours/palette.json,
   logos/). See BRAND.md for every token, where it comes from, and the
   contrast ratio of every text/background pair.
   ========================================================================== */

:root {
  /* --- the brand kit palette: the six swatches, exactly --- */
  --hv-deep-green: #465741;
  --hv-sage:       #7e8d66;
  --hv-mist:       #97a9c1;
  --hv-taupe:      #c3b0a3;
  --hv-sand:       #e3cbac;
  --hv-driftwood:  #aca58b;

  /* --- derived from the swatches (tints = mixed with white, shades = mixed
     with black). Not new brand colours: each is one swatch, lightened or
     darkened, and BRAND.md lists the mix. --- */
  --hv-deep-green-700: #384634;  /* deep green, 20% shade: hover on deep-green buttons */
  --hv-ink:            #1c231a;  /* deep green, 60% shade: body text */
  --hv-ink-600:        #60655f;  /* ink, 30% tint: secondary text */
  --hv-ink-400:        #676c66;  /* ink, 33% tint: muted text (still 4.5:1 on every light ground) */
  --hv-sage-ink:       #586347;  /* sage, 30% shade: sage-coloured small text (eyebrows, labels) */
  --hv-sage-100:       #eceee8;  /* sage, 85% tint */
  --hv-sand-50:        #f9f5ee;  /* sand, 80% tint: page background */
  --hv-sand-100:       #f4eade;  /* sand, 60% tint: banded sections */
  --hv-sand-300:       #edddc9;  /* sand, 35% tint: rules, card borders */
  --hv-mist-100:       #eaeef3;  /* mist, 80% tint */
  --hv-mist-300:       #c6d0dd;  /* mist, 45% tint */

  /* --- brand roles. Rules read these, never a swatch directly for "the brand
     colour", so a re-colour is a change here. White text sits on deep green
     (7.8:1); sage is too light for white text (3.6:1), so it is the accent:
     rules, highlights, markers, decorative fills. --- */
  --brand-surface: var(--hv-deep-green);       /* page heads, callouts, footer, solid buttons */
  --brand-surface-hover: var(--hv-deep-green-700);
  --brand-surface-rgb: 70, 87, 65;             /* --brand-surface as r,g,b for translucent fills */
  --brand-ink: var(--hv-deep-green);           /* green headings/links on light grounds (7.2:1 on the page) */
  --brand-on-surface: #FFFFFF;                 /* text on deep green (7.8:1) */
  --brand-on-surface-accent: var(--hv-sand);   /* eyebrows / emphasis on deep green (5.0:1) */
  --brand-accent: var(--hv-sage);              /* rules, markers, highlights: never small text */
  --brand-accent-ink: var(--hv-sage-ink);      /* sage when it has to be read as text */
  --ink-rgb: 28, 35, 26;                       /* --hv-ink as r,g,b, for scrims and shadows */

  /* --- older names, kept so the CMS blocks and any stored markup that use
     them keep working. They now point at the kit; nothing new should use
     them. --- */
  --forest-900: var(--hv-deep-green-700);
  --forest-700: var(--hv-deep-green);
  --forest-500: var(--hv-sage);
  --forest-100: var(--hv-sage-100);
  --dune-700: var(--hv-sage-ink);
  --dune-500: var(--hv-mist);
  --dune-300: var(--hv-mist-300);
  --dune-100: var(--hv-mist-100);
  --sand-500: var(--hv-sand);
  --sand-300: var(--hv-sand-300);
  --sand-100: var(--hv-sand-100);
  --sailcloth: var(--hv-sand-50);
  --shell: #FFFFFF;
  --ink-900: var(--hv-ink);
  --ink-600: var(--hv-ink-600);
  --ink-400: var(--hv-ink-400);

  /* --- type (unchanged: see BRAND.md for the kit's faces and the proposal) --- */
  --font-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --font-accent: 'Architects Daughter', 'Segoe UI', cursive;

  /* --- shape --- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --shadow-soft: 0 10px 30px rgba(var(--ink-rgb), 0.07);
  --shadow-img: 0 26px 60px rgba(var(--brand-surface-rgb), 0.22);
  --maxw: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-900);
  background: var(--sailcloth);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0 0 0.5em;
  color: var(--brand-ink);
}
h1 { font-size: clamp(2.3rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.45rem); }
h3 { font-size: 1.3rem; font-weight: 700; }
p { margin: 0 0 1em; }
.lede { font-size: 1.16rem; color: var(--ink-600); max-width: 42rem; }
.eyebrow {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--brand-accent-ink);
  margin: 0 0 1rem;
}
/* The small line under its heading rather than over it: the heading already
   carries the gap below it, so the strapline sits up against the heading and
   keeps the space before whatever follows. */
.eyebrow--below { margin: -0.4rem 0 1.25rem; }
h1 + .eyebrow--below, h2 + .eyebrow--below { margin-top: -0.55rem; }
.script { font-family: var(--font-accent); font-size: 1.3rem; color: var(--brand-accent-ink); }
/* Sage-coloured text on a deep-green ground is barely legible, and it is the
   verse on the front page. The hand-built page said so inline
   (color:var(--sand-500)); the sanitiser strips inline styles, so the intent
   has to live here. Sand on deep green, 5.0:1. */
.section--forest .script { color: var(--brand-on-surface-accent); }

/* These three were in the sanitiser's ALLOWED_CLASSES from the start but were
   never given styles, so anything marked with them rendered as plain text —
   the "a class name invented at runtime renders unstyled" failure the renderer
   warns about, just arriving from the other direction. The editor now offers
   them, so they have to mean something. */
.small { font-size: 0.9rem; }
.muted { color: var(--ink-400); }
.section--forest .muted { color: rgba(255, 255, 255, 0.9); }
.text-center { text-align: center; }

/* --- layout --- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
.container--narrow { max-width: 820px; }
.section { padding: 5rem 0; }
.section--sand { background: var(--sand-100); }
.section--dune { background: var(--dune-100); }
.section--forest { background: var(--brand-surface); color: var(--brand-on-surface); }
.section--forest h2, .section--forest h3 { color: var(--shell); }
.section--forest .eyebrow { color: var(--brand-on-surface-accent); }
.section--forest a { color: var(--brand-on-surface); text-decoration: underline; }

/* --- wave rule: brand motif (repeating swell) --- */
.waverule {
  display: block; width: 100%; height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 24'%3E%3Cpath d='M0 13 Q 15 3 30 13 T 60 13' fill='none' stroke='%2397A9C1' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: center; background-size: 60px 24px;
  opacity: 0.75;
}

/* --- preview bar --- */
.previewbar {
  background: var(--brand-surface); color: var(--brand-on-surface);
  font-size: 0.85rem; padding: 0.5rem 2.75rem 0.5rem 1rem; text-align: center;
  position: relative;
}
.previewbar__x {
  position: absolute; top: 50%; right: 0.55rem; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; line-height: 1;
  color: var(--hv-sand); font-size: 1.45rem; padding: 0 0.4rem; border-radius: var(--radius-sm);
}
.previewbar__x:hover { color: var(--shell); background: rgba(255, 255, 255, 0.14); }
.previewbar strong { color: var(--shell); }
.previewbar .pill {
  display: inline-block; background: rgba(227, 203, 172, 0.2); color: var(--hv-sand);
  border-radius: 999px; padding: 0.05rem 0.6rem; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; margin-left: 0.4rem;
}

/* --- nav ---
   White, with a sage rule beneath it. The kit's full-colour logo is drawn for
   a white ground (its outlines are transparent, so any colour behind it shows
   through them, and its green wordmark all but vanishes on deep green), so the
   bar the logo sits in is white rather than the logo being boxed. */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 3px solid var(--brand-accent);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.6rem 1.5rem; max-width: var(--maxw); margin: 0 auto; flex-wrap: wrap;
}
/* The brand kit's full-colour lockup (assets/hv-logo-full-colour.png), as
   drawn: the square mark with the wordmark beneath it. Not a horizontal
   arrangement: the kit has none, and the one this replaced was made up. */
.lockup { display: flex; align-items: center; text-decoration: none; }
.lockup:hover { text-decoration: none; }
.lockup img { height: 72px; width: auto; }

.nav__links {
  display: flex; gap: 1.15rem; align-items: center; list-style: none;
  padding: 0; margin: 0; flex-wrap: wrap; justify-content: flex-end;
}
.nav__links a:not(.btn), .nav__links button.navitem {
  font-family: var(--font-body); font-size: 0.97rem; font-weight: 600;
  color: var(--brand-ink); background: none; border: 0; padding: 0; cursor: pointer;
}
.nav__links a:not(.btn):hover, .nav__links button.navitem:hover { color: var(--hv-deep-green-700); text-decoration: underline; text-decoration-color: var(--brand-accent); text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.nav__links a.is-active { color: var(--brand-ink); text-decoration: underline; text-decoration-color: var(--brand-accent); text-decoration-thickness: 3px; text-underline-offset: 0.35em; }
.navdrop { position: relative; }
.navdrop__menu {
  position: absolute; top: calc(100% + 0.7rem); left: 0; display: none; flex-direction: column;
  gap: 0.15rem; min-width: 190px; padding: 0.5rem; z-index: 70;
  background: var(--shell); border-radius: var(--radius-md);
  box-shadow: 0 14px 34px rgba(var(--ink-rgb), 0.18);
  border: 1px solid var(--hv-sand-300); border-top: 3px solid var(--brand-accent);
}
.navdrop__menu a:not(.btn) { color: var(--brand-ink); }
.navdrop.is-open .navdrop__menu { display: flex; }
.navdrop__menu a { padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.94rem; }
.navdrop__menu a:not(.btn):hover { background: var(--hv-sage-100); color: var(--hv-deep-green-700); text-decoration: none; }
.navitem--caret::after { content: "▾"; font-size: 0.7rem; margin-left: 0.25rem; color: var(--brand-accent); }
.nav__toggle {
  display: none; border: 0; background: none; cursor: pointer; font-size: 1.5rem;
  color: var(--brand-ink); line-height: 1; padding: 0.2rem 0.4rem;
}

/* --- buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-size: 0.98rem; font-weight: 700;
  padding: 0.8rem 1.7rem; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--brand-surface); color: var(--shell); }
.btn--primary:hover { background: var(--brand-surface-hover); color: var(--shell); }
.btn--forest { background: var(--brand-surface); color: var(--shell); }
.btn--forest:hover { background: var(--brand-surface-hover); color: var(--shell); }
.btn--ghost { background: transparent; color: var(--brand-ink); border-color: var(--brand-accent); }
.btn--ghost:hover { background: var(--forest-100); }
.btn--ghost-light { background: transparent; color: var(--brand-on-surface); border-color: rgba(227, 203, 172, 0.6); }
.btn--ghost-light:hover { background: rgba(227, 203, 172, 0.16); color: var(--shell); }
.btn--sand { background: var(--sand-500); color: var(--brand-ink); }
.btn--sand:hover { background: var(--sand-300); color: var(--brand-ink); }
.btn--sm { padding: 0.5rem 1.15rem; font-size: 0.9rem; }
.btn--lg { padding: 0.95rem 2.1rem; font-size: 1.05rem; }

/* --- hero --- */
.hero { position: relative; background: var(--brand-surface); color: var(--brand-on-surface); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; opacity: 1; }
.hero__overlay {
  position: absolute; inset: 0;
  /* Neutral ink, not brand green: a green wash over the photo reads as a filter.
     Scrim only where the text sits. The right-hand side stays close to clear so
     the beach huts are actually legible as beach huts. */
  background:
    linear-gradient(100deg, rgba(var(--ink-rgb),0.90) 0%, rgba(var(--ink-rgb),0.74) 30%,
                            rgba(var(--ink-rgb),0.34) 58%, rgba(var(--ink-rgb),0.06) 82%,
                            rgba(var(--ink-rgb),0.00) 100%),
    linear-gradient(to top, rgba(var(--ink-rgb),0.42) 0%, rgba(var(--ink-rgb),0.00) 38%);
}
@media (max-width: 900px) {
  /* Narrow screens put text over the middle of the photo, so even it out. */
  .hero__overlay {
    background: linear-gradient(to top, rgba(var(--ink-rgb),0.88) 18%, rgba(var(--ink-rgb),0.66) 58%, rgba(var(--ink-rgb),0.42) 100%);
  }
}
.hero__inner { position: relative; z-index: 2; padding: 2.375rem 1.5rem 4rem; max-width: 47rem; }  /* Top padding is set so the hero logo sits midway between the nav and the
     beach-hut roofline behind it, rather than hard against the roofs with a
     gap above. */  /* keep .container's 1.5rem sides: the shorthand would otherwise zero them,
     which only shows below 1140px where the viewport is the limit. */
.hero--tall { min-height: 74vh; display: flex; align-items: center; }
.hero__mark { height: 142px; width: auto; margin-bottom: 1.4rem; }
/* Home hero: the kit's lockup on its own white ground (hv-logo-on-white.png,
   the flattened artwork the kit says to use on anything that is not white),
   rounded so it reads as a deliberate panel over the photograph. */
.hero__logo { height: 218px; width: auto; margin-bottom: 1.5rem; border-radius: var(--radius-md); box-shadow: 0 18px 40px rgba(var(--ink-rgb), 0.35); }
.hero h1 { color: var(--shell); margin-bottom: 1rem; }
.hero h1 em { font-style: italic; color: var(--brand-on-surface-accent); }
.hero__sub { font-size: 1.2rem; color: rgba(255, 255, 255, 0.92); margin: 0 0 2rem; max-width: 38rem; }
.hero .eyebrow { color: var(--brand-on-surface-accent); }
.hero__ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
.pagehead { background: var(--brand-surface); color: var(--brand-on-surface); padding: 3.6rem 0 3.2rem; }
.pagehead h1 { color: var(--shell); }
.pagehead .eyebrow { color: var(--brand-on-surface-accent); }
.pagehead .lede { color: rgba(255, 255, 255, 0.95); }

/* --- content blocks --- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.2rem; align-items: center; }
.split__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 28%; border-radius: var(--radius-lg); box-shadow: var(--shadow-img); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; }
.card {
  background: var(--shell); border: 1px solid var(--hv-sand-300);
  border-radius: var(--radius-md); padding: 1.9rem 1.7rem; box-shadow: var(--shadow-soft);
}
.card h3 { color: var(--brand-ink); margin-bottom: 0.45rem; }
.card p { color: var(--ink-600); margin: 0; }
.card__icon {
  width: 52px; height: 52px; border-radius: 50%; background: var(--hv-sand-100);
  color: var(--brand-ink); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; margin-bottom: 1.1rem;
}
.card--pad { padding: 2.5rem; }
.factcard { background: var(--shell); border: 1px solid var(--hv-sand-300); border-radius: var(--radius-lg); padding: 1.8rem; box-shadow: var(--shadow-soft); }
.factrow { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.75rem 0; border-bottom: 1px solid var(--sand-300); }
.factrow:last-child { border-bottom: 0; }
.factrow__icon {
  width: 36px; height: 36px; border-radius: 50%; background: var(--sand-300);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem;
}
.factrow__label { font-family: var(--font-display); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--brand-accent-ink); margin: 0 0 0.1rem; }
.factrow__value { color: var(--brand-ink); font-weight: 600; margin: 0; }
.callout { background: var(--brand-surface); color: var(--brand-on-surface); border-radius: var(--radius-lg); padding: 2.8rem; text-align: center; }
.callout h2 { color: var(--shell); }
.callout p { color: rgba(255, 255, 255, 0.95); max-width: 42rem; margin: 0 auto 1.5rem; }
.step-tag {
  display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display);
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--brand-ink); background: var(--forest-100); padding: 0.35rem 0.9rem;
  border-radius: 999px; margin-bottom: 1rem;
}
.draftpill {
  display: inline-block; background: var(--hv-mist-100); color: var(--hv-ink-600);
  border-radius: 999px; padding: 0.2rem 0.75rem; font-family: var(--font-display);
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem;
}
.steps { display: grid; gap: 1.25rem; margin-top: 2rem; counter-reset: step; }
.step { display: flex; gap: 1.1rem; align-items: flex-start; }
.step__num {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--brand-surface); color: var(--shell); font-family: var(--font-display);
  font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.divider { border: 0; border-top: 1px solid var(--sand-300); margin: 2rem 0 1.5rem; }
.contact-details { display: grid; gap: 1rem; }

/* --- modal --- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(var(--ink-rgb), 0.6);
  backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center;
  padding: 1.25rem; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.modal { background: var(--sailcloth); border-radius: var(--radius-lg); max-width: 520px; width: 100%; max-height: 92vh; overflow-y: auto; box-shadow: 0 30px 80px rgba(var(--ink-rgb), 0.4); }
.modal__head { background: var(--brand-surface); color: var(--brand-on-surface); padding: 1.75rem 2rem 1.5rem; border-radius: var(--radius-lg) var(--radius-lg) 0 0; position: relative; }
.modal__head h2 { color: var(--shell); font-size: 1.5rem; margin: 0 0 0.35rem; }
.modal__head p { margin: 0; color: rgba(255, 255, 255, 0.95); font-size: 0.95rem; }
.modal__close { position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(227, 203, 172, 0.18); color: var(--hv-sand); font-size: 1.3rem; cursor: pointer; }
.modal__body { padding: 1.75rem 2rem 2rem; }
.bank-rows { border: 1px solid var(--sand-300); border-radius: var(--radius-md); overflow: hidden; background: var(--shell); margin: 0 0 1.25rem; }
.bank-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--sand-300); }
.bank-row:last-child { border-bottom: 0; }
.bank-row__label { font-family: var(--font-display); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--brand-accent-ink); }
.bank-row__value { font-size: 1.1rem; font-weight: 700; color: var(--brand-ink); }
.modal__note { font-size: 0.94rem; color: var(--ink-600); background: var(--sand-100); border-radius: var(--radius-md); padding: 0.9rem 1.1rem; margin: 0 0 1rem; }
.modal__note strong { color: var(--brand-ink); }

/* --- footer --- */
.footer { background: var(--brand-surface); color: rgba(255, 255, 255, 0.92); padding: 3.5rem 0 2rem; font-size: 0.93rem; }
.footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(227, 203, 172, 0.25); }
/* The kit's lockup on its own white ground, as in the hero: on deep green the
   transparent artwork's outlines fill with green and the wordmark disappears. */
.footer__mark { height: 124px; width: auto; margin-bottom: 1.25rem; border-radius: var(--radius-sm); }
.footer h4 { color: var(--shell); font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 1rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer a { color: var(--brand-on-surface); }
.footer__vineyard { margin-top: 1.5rem; }
/* The social icons row. Glyphs are inlined SVG, so they take the surrounding
   colour with fill:currentColor rather than needing a second set for the dark
   footer. Touch targets are 44px, the smallest a finger reliably hits.

   Scoped under .footer, and it has to be: `.footer ul` above sets
   `display: grid`, which at (0,2,0) beats a bare `.social` at (0,1,0) whatever
   the order. Unscoped, the three icons stacked vertically down the footer --
   valid CSS, passing tests, and obviously wrong the moment it was looked at. */
/* The call to action at the foot of the last footer column. Margin only —
   the button itself is a .btn, so it keeps the shape every other button on
   the site has. */
.footer__cta { margin: 1.25rem 0 0; }

.footer .social { list-style: none; display: flex; gap: 0.35rem; margin: 0 0 1rem; padding: 0; }
.footer .social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
  color: rgba(255, 255, 255, 0.95);
  transition: color 0.15s ease, background-color 0.15s ease;
}
.footer .social a:hover,
.footer .social a:focus-visible { color: var(--hv-sand); background: rgba(255, 255, 255, 0.08); }
.footer .social svg { width: 22px; height: 22px; fill: currentColor; display: block; }

.footer__vineyard img { display: block; width: 339px; max-width: 100%; height: auto; }
.footer__compliance { padding-top: 1.5rem; font-size: 0.76rem; line-height: 1.55; color: rgba(255, 255, 255, 0.85); }
.footer__compliance p { margin: 0 0 0.6rem; max-width: 82ch; }
.footer__compliance p:last-child { margin: 0; }
.footer__bottom { padding-top: 1.25rem; font-size: 0.8rem; }

/* --- responsive --- */
@media (max-width: 900px) {
  .nav__toggle { display: block; }
  .nav__links { display: none; width: 100%; order: 3; flex-direction: column; align-items: flex-start; gap: 0.9rem; padding: 0.75rem 0 1rem; border-top: 1px solid var(--hv-sand-300); margin-top: 0.4rem; }
  .nav__links.is-open { display: flex; }
  .navdrop__menu { position: static; box-shadow: none; padding: 0.25rem 0 0 0.75rem; background: none; border: 0; }
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: 2rem; }
  .lockup img { height: 56px; }
  .hero__logo { height: 152px; }
  .section { padding: 3.5rem 0; }
  .callout, .card--pad { padding: 2rem 1.5rem; }
}

/* --- news banner (home) --- */
.newsband { background: var(--sand-100); padding: 3.5rem 0; }
.newscard {
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch;
  background: var(--shell); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.newscard__media { position: relative; min-height: 340px; }
.newscard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A poster (square-ish, with text) must not be cropped the way a photograph can be. */
.newscard__media--poster { background: var(--sand-100); }
.newscard__media--poster img { object-fit: contain; padding: 0.75rem; }
.newscard__flag, .card__logoflag {
  position: absolute; top: 0.85rem; left: 0.85rem;
  background: rgba(var(--ink-rgb), 0.82); color: var(--hv-sand);
  font-family: var(--font-display); font-weight: 700; font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.3rem 0.65rem; border-radius: 999px;
}
.newscard__body { padding: 2.6rem 2.6rem 2.4rem; align-self: center; }
.newscard__body h2 { margin: 0.35rem 0 1rem; }
.newscard__meta {
  color: var(--ink-400); font-size: 0.85rem; letter-spacing: 0.04em;
  margin: 1.25rem 0 1.5rem;
}
.pill--draft { background: var(--hv-mist-100); color: var(--hv-ink-600); }

/* --- ministry logos on the community cards --- */
.card__logo { position: relative; display: inline-block; margin-bottom: 1rem; }
.card__logo img { height: 96px; width: auto; display: block; }
.card__logoflag { top: -0.35rem; left: calc(100% - 0.5rem); white-space: nowrap; }

/* --- sign-up block --- */
.h2--hero { font-size: clamp(2.1rem, 4.6vw, 3.1rem); margin-bottom: 0.85rem; }
.lede--lg { font-size: 1.24rem; max-width: 40rem; }

@media (max-width: 900px) {
  .newscard { grid-template-columns: 1fr; }
  .newscard__media { min-height: 220px; }
  .newscard__body { padding: 1.9rem 1.5rem 1.75rem; }
  .card__logoflag { position: static; display: inline-block; margin-top: 0.4rem; }
  .card__logo { display: block; }
}

/* Slot for a ChurchSuite form whose url we don't have yet. */
.formpending {
  border: 2px dashed var(--hv-mist-300); border-radius: var(--radius-md);
  background: var(--hv-mist-100); padding: 2.25rem 1.5rem; text-align: center;
  color: var(--hv-ink-600); margin-top: 1.25rem;
}
.formpending strong { display: block; font-family: var(--font-display);
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 0.5rem; }
.formnote { font-size: 0.85rem; color: var(--ink-400); margin-top: 0.9rem; }

/* --- policy pages: body lists and inline notes --- */
.ticks { margin: 1.1rem 0 1.4rem; padding-left: 1.15rem; display: grid; gap: 0.7rem; }
.ticks li { color: var(--ink-600); line-height: 1.65; }
.ticks li::marker { color: var(--brand-accent); }
.ticks strong { color: var(--ink-900); }
.notebox {
  background: var(--hv-sage-100); border-left: 4px solid var(--brand-accent);
  border-radius: var(--radius-sm); padding: 1.35rem 1.5rem; margin: 1.5rem 0 1.75rem;
}
.notebox p { color: var(--ink-600); }
.section h2 + p, .section h2 + ul { margin-top: 0.85rem; }


/* Brick Club has promotional artwork rather than a logo, so its card carries
   the poster as an image instead of a mark. */
.card__poster { margin: -0.4rem 0 1.15rem; border-radius: var(--radius-md); overflow: hidden; }
.card__poster img { display: block; width: 100%; height: auto; }

/* --- the picture on a What's On card ----------------------------------
   ChurchSuite carries an image on each event and the diary now renders it.
   Unlike .card__poster (one hand-placed piece of artwork, known shape) this
   is whatever a volunteer uploaded, so the ratio is FIXED and the image is
   cropped to it: a portrait photo would otherwise make one card twice the
   height of its neighbours and pull the whole grid row with it.

   Negative margins bleed it to the card's edges, and the radius matches only
   the two corners it actually meets. Most events have no image at all, so
   nothing here renders a placeholder -- a card without a picture is simply a
   card, which is what the section looked like before. */
/* The negative margins MUST match .card's padding (1.9rem 1.7rem) and
   .card--pad's (2.5rem) — that is what pulls the picture out to the card's
   edges. Change the padding above and change these with it, or the image
   inherits a stripe of card background down one side. */
.card__media {
  margin: -1.9rem -1.7rem 1.25rem;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  background: var(--sand-100);
}
/* SQUARE, and CONTAIN rather than cover. Andrew is re-cutting the ChurchSuite
   artwork to 1:1, so the box is square and a square poster fills it exactly.
   Contain is what protects the ones not yet redone: measured on 2026-09-29 the
   real artwork was 363x512 (PORTRAIT, GrowKids) and 512x429 — posters with the
   title and the date set into the image, where a crop removes the words. They
   letterbox on the tinted ground until they are replaced, which is the same
   answer .newscard__media--poster already gives for the same reason.

   If every event picture is ever square AND photographic, `cover` would sit
   flush to the edges; until then contain is the one that cannot lose a date. */
.card__media img {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  object-fit: contain; object-position: center;
}
.card--pad .card__media { margin: -2.5rem -2.5rem 1.4rem; }

/* --- the diary card: time, place, description ------------------------------

   .card__meta is the time-and-place line. Smaller than the body copy because
   it is reference, not reading, and the date above it is already the heading
   of the card. */
.card__meta { font-size: 0.85rem; color: var(--ink-400); margin-bottom: 0.55rem; }
.card__meta a { color: inherit; text-decoration: underline; text-underline-offset: 0.16em; }
.card__meta a:hover { color: var(--brand-ink); }

/* The clamp is applied by script, never by default -- see partials/events.html.
   A description that fits keeps no button, and a visitor with no JavaScript
   reads the whole thing rather than four lines with no way to open them. */
.card__desc.is-clamped {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__more {
  display: inline-block; margin-top: 0.5rem; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 0.85rem; font-weight: 600;
  color: var(--brand-ink); text-decoration: underline;
  text-underline-offset: 0.16em;
}
.card__more:hover { color: var(--brand-ink); }

/* --- giving details ---------------------------------------------------
   The CMS renders the bank details with <details>/<summary> rather than the
   JavaScript modal the hand-built page used: the published site is static,
   and a giving page that depends on a script is one that fails silently. The
   summary is styled as a button, so it reads as the same control it replaced.
   .bank-rows / .bank-row above are reused unchanged. */
.bankreveal { margin: 1.5rem 0 0; }
.bankreveal > summary {
  list-style: none; display: inline-flex; cursor: pointer;
}
.bankreveal > summary::-webkit-details-marker { display: none; }
.bankreveal > summary::after { content: " \25be"; margin-left: 0.15rem; }
.bankreveal[open] > summary::after { content: " \25b4"; }
.bankreveal__body {
  margin-top: 1.5rem; max-width: 520px;
  background: var(--sailcloth); border: 1px solid var(--sand-300);
  border-radius: var(--radius-lg); padding: 1.6rem 1.75rem;
}
.bankreveal__body .bank-rows { margin-bottom: 1rem; }
.bankreveal__body p:last-child { margin-bottom: 0; }

/* --- newsletter sign-up (the CMS "newsletter" block) --- */
.signup [hidden] { display: none !important; }
.signup__field { display: flex; flex-direction: column; gap: 0.35rem; margin: 0 0 1.1rem; }
.signup label { font-weight: 600; color: var(--ink-900); }
.signup input[type=text], .signup input[type=email] {
  font: inherit; color: var(--ink-900); background: var(--shell);
  border: 1px solid var(--brand-accent); border-radius: var(--radius-sm); padding: 0.7rem 0.85rem; width: 100%;
}
.signup input:focus-visible, .signup button:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 2px; }
.signup__lists { border: 0; padding: 0; margin: 0.4rem 0 1.1rem; }
.signup__lists legend { font-family: var(--font-display); font-weight: 700; color: var(--brand-ink); margin-bottom: 0.4rem; }
.signup__check { display: flex; gap: 0.75rem; align-items: flex-start; margin: 0.7rem 0; }
.signup__check input { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.2rem; accent-color: var(--brand-surface); }
.signup__check label { font-weight: 400; color: var(--ink-600); }
.signup__check strong { color: var(--ink-900); }
.signup__desc { display: block; font-size: 0.95rem; }
.signup__consent { border-top: 1px solid var(--hv-sand-300); padding-top: 1rem; margin-bottom: 1.2rem; }
.signup__error { color: #9b2c1f; font-weight: 600; margin: 0 0 1rem; }
.signup__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.signup__done { outline: none; }
.signup__done p { color: var(--ink-900); font-size: 1.08rem; margin: 0; }

/* --- home: Next Sunday --------------------------------------------------
   The news band's card, reused (.newsband/.newscard above), with the date,
   time and venue the gathering needs. Event artwork is a poster with the
   words set into it, so it keeps .newscard__media--poster's contain. */
.nextsunday__when {
  font-family: var(--font-display); font-weight: 700; font-size: 1.12rem;
  color: var(--brand-ink); margin: -0.35rem 0 0.2rem;
}
.nextsunday__venue { color: var(--ink-600); margin: 0 0 1rem; }
.nextsunday__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 0; }

/* --- home: the event banner ----------------------------------------------
   Hero-style cards on deep green (white text on deep green only: 7.8:1; the
   date in sand, 5.0:1). The track scrolls sideways with scroll-snap, so
   swipe, trackpad and arrow keys work with no script; the arrow buttons are
   added by partials/home_events_js.html. Two to a view on a wide screen, one
   on a phone. Nothing moves on its own. */
.evbanner__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 1.5rem) / 2);
  gap: 1.5rem; margin: 2rem 0 0; padding: 0.25rem 0.1rem 1.25rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: var(--brand-accent) transparent;
}
.evbanner__track:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 4px; border-radius: var(--radius-lg); }
.evbanner__slide { scroll-snap-align: start; display: flex; min-width: 0; }
.evcard {
  display: flex; flex-direction: column; width: 100%;
  background: var(--brand-surface); color: var(--brand-on-surface);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft);
}
.evcard__media { background: var(--sand-100); overflow: hidden; }
/* A FIXED box, the picture contained in it: event artwork is a poster with
   the date set into it (see .card__media), and a crop would cut the words. */
.evcard__media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain; }
.evcard__body { padding: 1.7rem 1.9rem 1.9rem; display: flex; flex-direction: column; flex: 1; }
.evcard__date {
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--brand-on-surface-accent); margin: 0 0 0.6rem;
}
.evcard h3 { color: var(--brand-on-surface); font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 800; margin: 0 0 0.4rem; }
.evcard__meta { color: var(--brand-on-surface); font-weight: 600; margin: 0 0 0.6rem; }
.evcard__desc { color: var(--brand-on-surface); margin: 0 0 1.1rem; }
.evcard__cta { margin: auto 0 0; padding-top: 0.4rem; }
.evcard .btn:focus-visible { outline: 3px solid var(--hv-sand); outline-offset: 3px; }
.evbanner__arrow:focus-visible, .nextsunday__ctas .btn:focus-visible {
  outline: 3px solid var(--brand-accent); outline-offset: 3px;
}
.evbanner__controls { display: flex; align-items: center; justify-content: flex-end; gap: 0.9rem; margin-top: 1rem; }
.evbanner__controls[hidden] { display: none; }
.evbanner__arrow {
  width: 3rem; height: 3rem; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--brand-surface); color: var(--brand-on-surface);
  font-size: 1.3rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.evbanner__arrow:hover { background: var(--brand-surface-hover); }
.evbanner__arrow:disabled { background: var(--hv-sand-300); color: var(--ink-400); cursor: default; }
.evbanner__status { order: -1; margin: 0 auto 0 0; font-size: 0.9rem; color: var(--ink-600); }
@media (max-width: 700px) {
  .evbanner__track { grid-auto-columns: 100%; gap: 1rem; }
  .evcard__body { padding: 1.4rem 1.4rem 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .evbanner__track { scroll-behavior: auto; }
  .evbanner__arrow, .btn { transition: none; }
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}