/* ChurchBright church websites: builder blocks (public styles).
   A port of church-website public/assets/css/site.css for the blocks and elements the visual builder places on a page
   (renderers: modules/website/builder/render*.php, same class names). Every block root carries class "wb" and every
   selector here is scoped under it, so nothing leaks into the church layout's ws-* classes.

   The church-website palette is mapped onto the church theme (website_css_vars() + site.css), so blocks look at home in
   every template and theme:  ink → --ws-ink · black → --ws-dark · slate → dark mixed with grey · red → brand colour
   (--ws-primary) · flame → accent (--ws-accent) · paper → page background · fonts, radii and weights from the theme.
   The Ember skin (body.ws-skin-ember, bottom of this file) restores the original look: Archivo set heavy, uppercase and
   semi-condensed, sharp buttons, near-black bands and the red/flame pair, and restyles the church header and footer.

   Contents: tokens · placeholders (.wb-ph) · base · buttons · heroes · page header · sections & tones · split & photos ·
   cards (services, ministries, next steps, channels, visit, location) · inner-page elements · forms & embeds · social ·
   builder additions · boxes · basic blocks · highlights & prose · feeds · interactive · events & calendar · giving ·
   size & style (.el) · newsletter · canvas placeholders · Ember skin · motion & print. */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
.ws {
  --wb-ink: var(--ws-ink);
  --wb-dark: var(--ws-dark);
  --wb-slate: color-mix(in srgb, var(--ws-dark) 70%, #8a93a3);
  --wb-slate-2: color-mix(in srgb, var(--wb-slate) 86%, #fff);
  --wb-red: var(--ws-primary);
  --wb-red-hover: var(--ws-primary-hover);
  --wb-on-red: var(--ws-on-primary);
  --wb-red-ink: var(--ws-primary-ink);
  --wb-flame: var(--ws-accent);
  --wb-on-flame: var(--ws-on-accent);
  /* Contrast-checked colours: the renderers set them on every block root, computed from the church's colours
     (website_wbr_tone_colors(): accent as text on dark and slate at 4.5:1, on slate for large text at 3:1, as a focus ring on
     light surfaces at 3:1, heading highlights on the brand and accent colours at 3:1). These are the fallbacks. */
  --wb-flame-on-dark: var(--ws-accent);
  --wb-flame-on-slate: var(--wb-flame-on-dark);
  --wb-flame-on-slate-lg: var(--wb-flame-on-slate);
  --wb-flame-ring: var(--ws-accent);
  --wb-hl-on-red: var(--ws-dark);
  --wb-hl-on-flame: var(--ws-dark);
  --wb-paper: var(--ws-bg);
  --wb-white: var(--ws-surface);
  --wb-light: var(--ws-surface-3);
  --wb-text: var(--ws-ink-2);
  --wb-text-soft: var(--ws-ink-2);
  --wb-muted: var(--ws-muted);
  --wb-faint: var(--ws-muted);

  --wb-font-h: var(--ws-font-h);
  --wb-font-b: var(--ws-font-b);
  --wb-h-weight: var(--ws-h-weight);
  --wb-h-lh: var(--ws-h-lh);
  --wb-h-track: var(--ws-h-track);
  --wb-h-case: none;
  --wb-h-stretch: normal;
  --wb-t-weight: 700;            /* small titles (cards, tiles) */
  --wb-label-weight: 700;        /* kickers and small uppercase labels */
  --wb-radius: var(--ws-radius); /* cards, tiles, grids */
  --wb-img-radius: var(--ws-img-radius);
  --wb-grid-gap: 2px;

  --wb-btn-radius: var(--ws-btn-radius);
  --wb-btn-size: 15.5px;
  --wb-btn-weight: 600;
  --wb-btn-case: none;
  --wb-btn-track: -.005em;
  --wb-btn-pad: .82rem 1.4rem;
  --wb-btn-border: 1px;

  --wb-gutter: var(--ws-gutter);
  --wb-container: calc(var(--ws-maxw) - 2 * var(--ws-gutter));
  --wb-section-pad: var(--ws-sec-pad);
  --wb-h2-size: clamp(2rem, 4vw, 3rem);
  --wb-h2-gap: 1.2rem;
  --wb-kicker-size: .78rem;
  --wb-kicker-gap: .9rem;
  --wb-intro-size: 1.1rem;
  --wb-intro-width: 60ch;
  --wb-banner-gap: 2.4rem;
  --wb-banner-height: clamp(220px, 32vw, 400px);
  --wb-hero-h1: clamp(2.4rem, 6.4vw, 5.4rem);
  --wb-page-h1: clamp(2.2rem, 5.4vw, 4rem);
}
.ws-theme-classic { --wb-h2-size: clamp(2.1rem, 4.4vw, 3.3rem); --wb-t-weight: 600; --wb-hero-h1: clamp(2.6rem, 6.6vw, 5.6rem); }
.ws-theme-minimal { --wb-h2-size: clamp(1.9rem, 3.6vw, 2.7rem); --wb-t-weight: 600; --wb-red-ink: var(--ws-ink); --wb-grid-gap: 1px; }
/* Inner pages use a slightly tighter scale (church-website .page-inner). */
.ws:not(.ws-home) { --wb-banner-height: clamp(200px, 28vw, 360px); --wb-intro-size: 1.08rem; --wb-intro-width: 58ch; }

/* ── Placeholders: a photo slot waiting for a picture ────────────────────
   Layered light from the theme colours over a deep ground, a soft sheen and a faint film grain. .wb-ph--1…6 are six
   moods; each fills the slot it replaces (an <img> of the same ratio, or the whole background of a hero or card). */
.wb-ph {
  --ph-a: var(--ws-primary, #cc0600);
  --ph-b: var(--ws-accent, #ff4400);
  --ph-c: var(--ws-dark, #0b0b0b);
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate;
  background-color: var(--ph-c);
  background-image:
    radial-gradient(110% 85% at 88% 8%, color-mix(in srgb, var(--ph-a) 72%, transparent), transparent 62%),
    radial-gradient(80% 75% at 6% 100%, color-mix(in srgb, var(--ph-b) 42%, transparent), transparent 66%),
    linear-gradient(160deg, color-mix(in srgb, var(--ph-a) 30%, var(--ph-c)) 0%, var(--ph-c) 72%);
}
.wb-ph::before, .wb-ph::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
/* sheen + vignette */
.wb-ph::before {
  background:
    linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .07) 48%, transparent 58%),
    radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(0, 0, 0, .34) 100%);
}
/* grain */
.wb-ph::after {
  opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
/* 2 · dawn: the brand colour warming into the accent, a bright edge top left */
.wb-ph--2 {
  background-image:
    radial-gradient(90% 80% at 12% 6%, rgba(255, 255, 255, .22), transparent 55%),
    radial-gradient(100% 90% at 100% 100%, color-mix(in srgb, var(--ph-b) 70%, transparent), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--ph-a) 88%, #000) 0%, color-mix(in srgb, var(--ph-a) 55%, var(--ph-c)) 55%, var(--ph-c) 100%);
}
/* 3 · slate: cool grey ground, light falling from above, a thin brand glow on the floor */
.wb-ph--3 {
  background-color: color-mix(in srgb, var(--ph-c) 72%, #8a93a3);
  background-image:
    conic-gradient(from 180deg at 50% -12%, transparent 0deg 160deg, rgba(255, 255, 255, .13) 172deg, transparent 184deg, rgba(255, 255, 255, .09) 192deg, transparent 204deg 360deg),
    radial-gradient(90% 55% at 50% 112%, color-mix(in srgb, var(--ph-a) 55%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--ph-c) 60%, #8a93a3) 0%, color-mix(in srgb, var(--ph-c) 86%, #8a93a3) 100%);
}
/* 4 · ember: deep brand colour with a hot accent core */
.wb-ph--4 {
  background-image:
    radial-gradient(55% 60% at 50% 78%, color-mix(in srgb, var(--ph-b) 78%, transparent), transparent 70%),
    radial-gradient(120% 90% at 50% 120%, color-mix(in srgb, var(--ph-a) 85%, transparent), transparent 72%),
    linear-gradient(180deg, var(--ph-c) 0%, color-mix(in srgb, var(--ph-a) 42%, var(--ph-c)) 100%);
}
/* 5 · paper: a light, airy wash for light pages */
.wb-ph--5 {
  background-color: var(--ws-surface-2, #f5f3f0);
  background-image:
    radial-gradient(70% 70% at 82% 18%, color-mix(in srgb, var(--ph-a) 26%, transparent), transparent 70%),
    radial-gradient(60% 60% at 14% 88%, color-mix(in srgb, var(--ph-b) 22%, transparent), transparent 70%),
    linear-gradient(160deg, var(--ws-surface, #fff), var(--ws-surface-3, #ebe7e1));
}
.wb-ph--5::before { background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .45) 48%, transparent 58%), radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, .08) 100%); }
.wb-ph--5::after { opacity: .22; mix-blend-mode: multiply; filter: invert(1); }
/* 6 · night: near-black with two soft spotlights (stage bokeh) */
.wb-ph--6 {
  background-image:
    radial-gradient(18% 26% at 28% 32%, color-mix(in srgb, var(--ph-b) 55%, transparent), transparent 70%),
    radial-gradient(24% 34% at 72% 58%, color-mix(in srgb, var(--ph-a) 60%, transparent), transparent 72%),
    radial-gradient(9% 13% at 58% 22%, rgba(255, 255, 255, .16), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--ph-c) 90%, #fff) 0%, var(--ph-c) 100%);
}
/* Slots: cover a positioned parent… */
.wb .hero__media > .wb-ph, .wb.page-hero > .wb-ph, .wb .page-hero > .wb-ph, .wb .location-card > .wb-ph, .wb .slider__slide > .wb-ph,
.wb .media-card__art > .wb-ph, .wb .box > .wb-ph {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; aspect-ratio: auto;
}
.wb.page-hero > .wb-ph, .wb .page-hero > .wb-ph { z-index: 0; }
/* A light wash would only turn grey under a hero's shade or on a dark band, so there (and everywhere in Ember) the
   paper mood becomes a warm stage. */
.wb :is(.hero__media, .location-card, .slider__slide, .media-card__art) > .wb-ph--5,
.wb.page-hero > .wb-ph--5,
.wb .page-hero > .wb-ph--5,
.wb:is(.section--dark, .section--slate, .section--red) .wb-ph--5,
.wb :is(.section--dark, .section--slate, .section--red, .box--on-dark) .wb-ph--5,
.ws-skin-ember .wb .wb-ph--5 {
  background-color: var(--ph-c);
  background-image:
    conic-gradient(from 180deg at 62% -10%, transparent 0deg 158deg, rgba(255, 255, 255, .12) 170deg, transparent 182deg, rgba(255, 255, 255, .08) 190deg, transparent 202deg 360deg),
    radial-gradient(70% 60% at 62% 108%, color-mix(in srgb, var(--ph-b) 60%, transparent), transparent 70%),
    radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, var(--ph-a) 45%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--ph-c) 88%, #fff) 0%, var(--ph-c) 100%);
}
.wb :is(.hero__media, .location-card, .slider__slide, .media-card__art) > .wb-ph--5::before,
.wb.page-hero > .wb-ph--5::before,
.wb .page-hero > .wb-ph--5::before,
.wb:is(.section--dark, .section--slate, .section--red) .wb-ph--5::before,
.wb :is(.section--dark, .section--slate, .section--red, .box--on-dark) .wb-ph--5::before,
.ws-skin-ember .wb .wb-ph--5::before {
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .07) 48%, transparent 58%), radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(0, 0, 0, .34) 100%);
}
.wb :is(.hero__media, .location-card, .slider__slide, .media-card__art) > .wb-ph--5::after,
.wb.page-hero > .wb-ph--5::after,
.wb .page-hero > .wb-ph--5::after,
.wb:is(.section--dark, .section--slate, .section--red) .wb-ph--5::after,
.wb :is(.section--dark, .section--slate, .section--red, .box--on-dark) .wb-ph--5::after,
.ws-skin-ember .wb .wb-ph--5::after { opacity: .16; mix-blend-mode: overlay; filter: none; }
/* Under a hero's shade the moods are lifted a little, so the light still reads until a photo is added. */
.wb .hero__media > .wb-ph, .wb.page-hero > .wb-ph, .wb .page-hero > .wb-ph { filter: brightness(1.35) saturate(1.1); }
/* …or take the ratio of the photo they stand in for. */
.wb .photo > .wb-ph { aspect-ratio: 4 / 3; }
.wb .photo--3x2 > .wb-ph { aspect-ratio: 3 / 2; }
.wb .photo--banner > .wb-ph { aspect-ratio: auto; height: var(--wb-banner-height); }
.wb .leader__photo > .wb-ph { aspect-ratio: 4 / 5; }
.wb .photo-pair > .wb-ph { aspect-ratio: 3 / 2; }
.wb .photo-grid > .wb-ph { aspect-ratio: 4 / 3; }
.wb .tabs__photo > .wb-ph { aspect-ratio: 4 / 3; }
.wb .event__art > .wb-ph { height: 100%; min-height: 260px; aspect-ratio: 4 / 5; }
.wb .img-block__frame > .wb-ph { aspect-ratio: 4 / 3; }
.wb .img-block--r1x1 .img-block__frame > .wb-ph { aspect-ratio: 1; }
.wb .img-block--r3x2 .img-block__frame > .wb-ph { aspect-ratio: 3 / 2; }
.wb .img-block--r16x9 .img-block__frame > .wb-ph { aspect-ratio: 16 / 9; }
.wb .img-block--r4x5 .img-block__frame > .wb-ph { aspect-ratio: 4 / 5; }
.wb .story__who > .wb-ph { flex: none; width: 52px; height: 52px; aspect-ratio: 1; border-radius: 50%; }

/* ── Base ───────────────────────────────────────────────────────────────── */
.wb { color: var(--wb-fg, var(--wb-ink)); font-family: var(--wb-font-b); }
/* The generic rules below skip another feature's markup placed as an element (.wb-ext, e.g. Upcoming events inside a
   section): it keeps the look the church site gives it as a section (site.css .ws-ext). :where() keeps their specificity. */
.wb :is(img, video):where(:not(.wb-ext *)) { display: block; max-width: 100%; }
.wb a:where(:not(.wb-ext *)) { color: inherit; text-decoration: none; }
.wb a:hover:where(:not(.wb-ext *)) { text-decoration: none; }
.wb p:where(:not(.wb-ext *)) { margin: 0 0 1em; }
.wb :is(button, input, select, textarea):where(:not(.wb-ext *)) { font-family: inherit; }
.wb :is(h1, h2, h3, h4):where(:not(.wb-ext *)) {
  margin: 0; color: inherit; font-family: var(--wb-font-h); font-weight: var(--wb-h-weight); line-height: var(--wb-h-lh);
  letter-spacing: var(--wb-h-track); text-transform: var(--wb-h-case); font-stretch: var(--wb-h-stretch); text-wrap: balance;
}
/* The focus ring follows the tone it sits on (--wb-ring below): at least 3:1 against every background (WCAG 1.4.11). */
.wb :focus-visible { outline: 3px solid var(--wb-ring, var(--wb-flame)); outline-offset: 2px; box-shadow: none; border-radius: 0; }

/* Tone: what text, labels, highlights and focus rings look like on each background. Light is the default; dark, slate,
   black boxes and photo heroes switch to light text; red and flame backgrounds use the ink that reads on that colour.
   --wb-kicker is small text (4.5:1); --wb-hl colours highlighted words in large headings (3:1).
   Every tone rule has the same specificity (0,2,0), so when an element carries two of them the later one wins, in this
   order: dark → slate → red → flame → an editor's own white text on red/flame → an editor's own dark text → mono. */
.wb {
  --wb-fg: var(--wb-ink); --wb-fg-inv: #fff; --wb-fg-2: var(--wb-text-soft); --wb-fg-3: var(--wb-faint);
  --wb-kicker: var(--wb-red-ink); --wb-hl: var(--wb-red-ink); --wb-ring: var(--wb-flame-ring);
  --wb-line: color-mix(in srgb, var(--wb-ink) 13%, transparent); --wb-grid-bg: color-mix(in srgb, var(--wb-ink) 12%, transparent);
}
.wb:is(.section--dark, .section--slate, .hero, .page-hero),
.wb :is(.section--dark, .section--slate, .box--on-dark, .el--on-dark, .hero, .page-hero, .location-card),
.wb .slider :where(.slider__slide) {
  --wb-fg: #fff; --wb-fg-inv: var(--wb-dark); --wb-fg-2: rgba(255, 255, 255, .86); --wb-fg-3: rgba(255, 255, 255, .66);
  --wb-kicker: var(--wb-flame-on-dark); --wb-hl: var(--wb-flame-on-dark); --wb-ring: var(--wb-flame-on-dark);
  --wb-line: rgba(255, 255, 255, .18); --wb-grid-bg: rgba(255, 255, 255, .16);
  color: var(--wb-fg);
}
.wb.section--slate, .wb :is(.section--slate, .box--bg-slate, .el--bg-slate) {
  --wb-kicker: var(--wb-flame-on-slate); --wb-hl: var(--wb-flame-on-slate-lg); --wb-ring: var(--wb-flame-on-slate-lg);
}
/* On the brand colour and the accent every text is the ink that reads on it (see --ws-on-primary / --ws-on-accent) at full
   strength: a lighter mix would drop below 4.5:1 on mid-tone colours. */
.wb.section--red, .wb :is(.section--red, .box--bg-red, .el--bg-red) {
  --wb-fg: var(--wb-on-red); --wb-fg-inv: var(--wb-red); --wb-fg-2: var(--wb-on-red); --wb-fg-3: var(--wb-on-red);
  --wb-kicker: var(--wb-on-red); --wb-hl: var(--wb-hl-on-red); --wb-ring: var(--wb-on-red);
  --wb-line: color-mix(in srgb, var(--wb-on-red) 22%, transparent); --wb-grid-bg: color-mix(in srgb, var(--wb-on-red) 18%, transparent);
  color: var(--wb-fg);
}
.wb :is(.box--bg-flame, .el--bg-flame) {
  --wb-fg: var(--wb-on-flame); --wb-fg-inv: var(--wb-flame); --wb-fg-2: var(--wb-on-flame); --wb-fg-3: var(--wb-on-flame);
  --wb-kicker: var(--wb-on-flame); --wb-hl: var(--wb-hl-on-flame); --wb-ring: var(--wb-on-flame);
  --wb-line: color-mix(in srgb, var(--wb-on-flame) 22%, transparent); --wb-grid-bg: color-mix(in srgb, var(--wb-on-flame) 18%, transparent);
  color: var(--wb-fg);
}
/* The editor chose white text on a brand-colour or accent box: labels and highlights stay white too. */
.wb :is(.box--bg-red, .box--bg-flame, .el--bg-red, .el--bg-flame):is(.box--on-dark, .el--on-dark) {
  --wb-fg: #fff; --wb-fg-inv: var(--wb-dark); --wb-fg-2: #fff; --wb-fg-3: #fff; --wb-kicker: #fff; --wb-hl: #fff; --wb-ring: #fff;
  --wb-line: rgba(255, 255, 255, .22); --wb-grid-bg: rgba(255, 255, 255, .18);
  color: var(--wb-fg);
}
/* Cards that paint their own white background read in the light tone wherever they sit (a form or sign-up in a dark
   section): labels, highlights and focus rings as on a light page. */
.wb :is(.signup, .campaign, .note, .audio-block, .form-panel__body, .embed__body, .faq--cards .faq__item, .tabs--boxed .tabs__panel) {
  --wb-kicker: var(--wb-red-ink); --wb-hl: var(--wb-red-ink); --wb-ring: var(--wb-flame-ring);
}
.wb :is(.box--on-light, .el--on-light) {
  --wb-fg: var(--wb-ink); --wb-fg-inv: #fff; --wb-fg-2: var(--wb-text-soft); --wb-fg-3: var(--wb-faint);
  --wb-kicker: var(--wb-red-ink); --wb-hl: var(--wb-red-ink); --wb-ring: var(--wb-flame-ring);
  --wb-line: color-mix(in srgb, var(--wb-ink) 13%, transparent); --wb-grid-bg: color-mix(in srgb, var(--wb-ink) 12%, transparent);
  color: var(--wb-fg);
}
/* An editor's own text colour on the brand colour or the accent (the box's or element's own background, or the section or
   box around it): the renderer adds box--mono / el--mono and keeps the choice only where it reads there (4.5:1,
   website_wbr_text_choice()). Paragraphs, labels, highlights and focus rings take that text colour at full strength: the
   brand-colour labels of a light page, or the accent labels of a dark one, would vanish on those colours. */
.wb :is(.box--mono, .el--mono) {
  --wb-fg-2: var(--wb-fg); --wb-fg-3: var(--wb-fg); --wb-kicker: var(--wb-fg); --wb-hl: var(--wb-fg); --wb-ring: var(--wb-fg);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.wb .btn:where(:not(.wb-ext *)) {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: auto; min-height: 0; padding: var(--wb-btn-pad);
  border: var(--wb-btn-border) solid transparent; border-radius: var(--wb-btn-radius); box-shadow: none; background: transparent; color: inherit;
  font-family: var(--wb-font-b); font-size: var(--wb-btn-size); font-weight: var(--wb-btn-weight); line-height: 1.15; letter-spacing: var(--wb-btn-track);
  text-transform: var(--wb-btn-case); text-decoration: none !important; white-space: normal; text-align: center; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.wb .btn:active:where(:not(.wb-ext *)) { transform: none; }
.wb .btn:where(:not(.wb-ext *)) .icon { color: inherit; }
.wb .btn--primary, .wb .btn--primary:hover { border-color: transparent; }
.wb .btn--primary { background: var(--wb-red); color: var(--wb-on-red); }
.wb .btn--primary:hover { background: var(--wb-red-hover); color: var(--wb-on-red); }
.wb .btn--light { background: #fff; color: var(--wb-dark); border-color: transparent; }
.wb .btn--light:hover { background: var(--wb-flame); color: var(--wb-on-flame); border-color: transparent; }
.wb .btn--dark { background: var(--wb-dark); color: #fff; border-color: transparent; }
.wb .btn--dark:hover { background: var(--wb-red); color: var(--wb-on-red); border-color: transparent; }
.wb .btn--outline { background: transparent; border-color: var(--wb-fg); color: var(--wb-fg); }
.wb .btn--outline:hover { background: var(--wb-fg); border-color: var(--wb-fg); color: var(--wb-fg-inv); }
.wb .btn--ghost { background: none; border-color: color-mix(in srgb, var(--wb-fg) 35%, transparent); color: var(--wb-fg); }
.wb .btn--ghost:hover { background: var(--wb-fg); border-color: var(--wb-fg); color: var(--wb-fg-inv); }
.wb .btn--sm { padding: .62rem 1.05rem; font-size: calc(var(--wb-btn-size) * .9); }
.wb .btn--lg { justify-content: center; width: 100%; padding: 1.05rem 2rem; font-size: calc(var(--wb-btn-size) * 1.08); }
@media (min-width: 560px) { .wb .btn--lg { width: auto; } }

.wb .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin: 1.8rem 0 0; }
.wb .btn-row--center { justify-content: center; }
.wb .text-link { color: inherit; font-weight: 600; }
.wb .text-link:hover { text-decoration: underline; text-decoration-color: var(--wb-kicker); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ── Hero (home) and hero with photos ─────────────────────────────────── */
.wb.hero {
  position: relative; display: flex; align-items: flex-end; overflow: hidden;
  min-height: calc(100vh - var(--ws-header-h, 72px)); min-height: calc(100svh - var(--ws-header-h, 72px));
  padding: clamp(5rem, 12vw, 7rem) var(--wb-gutter) clamp(2.5rem, 6vw, 4rem);
  background: var(--wb-dark);
}
.wb .hero__media { position: absolute; inset: 0; z-index: 0; }
.wb .hero__media img, .wb .hero__media video { width: 100%; height: 100%; object-fit: cover; }
.wb .hero__media video { position: absolute; inset: 0; opacity: 0; transition: opacity 1s; }
.wb .hero__media video.is-playing { opacity: 1; }
.wb .hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8, 8, 10, .72) 0%, rgba(8, 8, 10, .28) 38%, rgba(8, 8, 10, .9) 100%); }
.wb .hero__content { position: relative; z-index: 3; width: 100%; max-width: var(--wb-container); margin: 0 auto; color: #fff; margin-bottom: 30px; }
.wb.hero :is(h1, .wb-h1) { max-width: 17ch; margin: 0 0 1.5rem; font-size: var(--wb-hero-h1); }
.wb .hero__pillars { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; margin: 0 0 2rem; font-size: clamp(.8rem, 1.6vw, 1.15rem); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.wb .hero__pillars i { color: var(--wb-red); font-style: normal; }
.wb .hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; }

.wb.hero--slides { min-height: var(--hero-h, 550px); height: var(--hero-h, 550px); align-items: center; padding-top: clamp(3.5rem, 9vw, 5rem); padding-bottom: clamp(3.2rem, 7vw, 4.5rem); }
.wb.hero--slides .hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s ease; }
.wb.hero--slides .hero__slide.is-shown { opacity: 1; }
.wb.hero--slides .hero__media > .wb-ph { opacity: 1; }
.wb.hero--slides :is(h1, .wb-h1) { font-size: clamp(2.1rem, 5.4vw, 4.2rem); }
.wb.hero--slides .hero__pillars { margin-bottom: 1.5rem; }
.wb.hero--center { text-align: center; }
.wb.hero--center :is(h1, .wb-h1) { max-width: 22ch; margin-inline: auto; }
.wb.hero--center .hero__pillars, .wb.hero--center .hero__actions { justify-content: center; }
.wb.hero--o-none .hero__overlay { background: linear-gradient(180deg, rgba(8, 8, 10, .35) 0%, rgba(8, 8, 10, 0) 45%, rgba(8, 8, 10, .45) 100%); }
.wb.hero--o-strong .hero__overlay { background: linear-gradient(180deg, rgba(8, 8, 10, .82) 0%, rgba(8, 8, 10, .6) 45%, rgba(8, 8, 10, .92) 100%); }
/* Each bar sits in a 24px-tall button, so it is easy to hit on a phone (WCAG 2.5.8). */
.wb .hero__dots { position: absolute; z-index: 4; right: var(--wb-gutter); bottom: clamp(.6rem, 2.4vw, 1.4rem); display: flex; align-items: center; gap: .5rem; }
.wb .hero__dot { position: relative; width: 30px; height: 24px; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; }
.wb .hero__dot::before { content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 4px; background: rgba(255, 255, 255, .45); }
.wb .hero__dot[aria-current="true"]::before { background: var(--wb-flame); }
.wb .hero__dot:hover::before { background: rgba(255, 255, 255, .8); }
.wb .hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
/* Pause / play for photos that move on their own (shown by blocks.js once they do). */
.wb :is(.hero__toggle, .slider__toggle) { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #0b0b0b; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); cursor: pointer; }
.wb :is(.hero__toggle, .slider__toggle)[hidden] { display: none; }
.wb :is(.hero__toggle, .slider__toggle):hover { background: #fff; }
.wb :is(.hero__toggle, .slider__toggle):focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #0b0b0b; border-radius: 50%; }
.wb :is(.hero__toggle, .slider__toggle) svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wb :is(.hero__toggle, .slider__toggle) .i-play { display: none; fill: currentColor; stroke-width: 2; }
.wb :is(.hero__toggle, .slider__toggle).is-paused .i-pause { display: none; }
.wb :is(.hero__toggle, .slider__toggle).is-paused .i-play { display: block; }
.wb .hero__toggle { margin-left: .4rem; }
@media (max-width: 640px) {
  .wb.hero--slides { height: auto; min-height: min(var(--hero-h, 550px), 72svh); }
  .wb .hero__dots { left: var(--wb-gutter); right: auto; }
}

/* ── Page header (inner pages) ─────────────────────────────────────────── */
.wb.page-hero { position: relative; overflow: hidden; padding: clamp(3rem, 7vw, 5rem) var(--wb-gutter); background: var(--wb-dark); color: #fff; }
.wb.page-hero > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.wb .page-hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8, 8, 10, .72), rgba(8, 8, 10, .9)); }
.wb .page-hero__content { position: relative; z-index: 2; max-width: var(--wb-container); margin: 0 auto; }
.wb.page-hero :is(h1, .wb-h1) { max-width: 16ch; margin: 0 0 1rem; font-size: var(--wb-page-h1); }
.wb.page-hero p { max-width: 52ch; margin: 0; color: rgba(255, 255, 255, .85); font-size: 1.08rem; }
.wb.page-hero .page-hero__crumb { margin: 0 0 .9rem; color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.wb .page-hero__content > p:not(.page-hero__crumb) + p { margin-top: .9rem; }
.wb .page-hero__crumb a { color: inherit; }
.wb .page-hero__crumb a:hover { color: var(--wb-flame); }
.wb.page-hero .btn-row { margin-top: 1.8rem; }
/* A transparent header (body.ws-overlay; the Ember skin keeps its header solid) lies over the page's first hero: the
   hero's content starts below it. (The Bold hero's own top padding is already taller than the header.) */
.ws-overlay:not(.ws-skin-ember) #main > section.wb.page-hero:first-of-type { padding-top: calc(var(--ws-header-h, 72px) + clamp(3rem, 7vw, 5rem)); }
.ws-overlay:not(.ws-skin-ember) #main > section.wb.hero--slides:first-of-type { padding-top: calc(var(--ws-header-h, 72px) + clamp(3.5rem, 9vw, 5rem)); }
.wb.page-hero--message { min-height: 60vh; display: flex; align-items: center; }
.wb.page-hero--message .page-hero__content { width: 100%; }

/* ── Photo looks (filters) ─────────────────────────────────────────────────
   Classes from website_wbr_filter_class(): "wb-f wb-f-<look> wb-fa-<l|m|s>" on the wrapper of a photo (the hero's media box,
   a page header or box itself, a photo frame…), or on each hero slide's <img>. A look is two custom properties: --wb-f-img (a
   filter chain for the <img>/<video> child) and --wb-f-bg (+ --wb-f-mix blend, --wb-f-op) painted by ::before above the photo and
   below the content. --wb-fa is the strength (.5 / 1 / 1.5). CSS only: nothing for a slow phone to download or run. A slide's
   wash follows the shown slide through :has() (an older browser keeps the filter chain and skips the wash). */
.wb-f { --wb-fa: 1; isolation: isolate; }
.wb .img-block__frame.wb-f, .wb .tabs__photo.wb-f { position: relative; }
.wb-fa-l, .hero__media:has(> .hero__slide.is-shown.wb-fa-l) { --wb-fa: .5; }
.wb-fa-m, .hero__media:has(> .hero__slide.is-shown.wb-fa-m) { --wb-fa: 1; }
.wb-fa-s, .hero__media:has(> .hero__slide.is-shown.wb-fa-s) { --wb-fa: 1.5; }
.wb-f > img, .wb-f > video, img.wb-f { filter: var(--wb-f-img, none); }
:is(.wb-f, .hero__media:has(> .hero__slide.is-shown.wb-f))::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--wb-f-bg, none); mix-blend-mode: var(--wb-f-mix, normal); opacity: var(--wb-f-op, 1);
}
.wb .hero__media:has(> .hero__slide.is-shown.wb-f) { isolation: isolate; }
/* A box: the photo goes behind the wash, the wash behind the box's own shade and content. */
.wb .box.wb-f > .box__bg { z-index: -1; }
.wb .box.wb-f::before { z-index: 0; }
:is(.wb-f-darken, .hero__media:has(> .hero__slide.is-shown.wb-f-darken)) { --wb-f-bg: rgb(8 8 10 / calc(.35 * var(--wb-fa))); }
:is(.wb-f-warm, .hero__media:has(> .hero__slide.is-shown.wb-f-warm)) { --wb-f-img: sepia(calc(.3 * var(--wb-fa))) saturate(calc(1 + .15 * var(--wb-fa))) brightness(calc(1 + .03 * var(--wb-fa))); --wb-f-bg: rgb(255 140 40 / calc(.4 * var(--wb-fa))); --wb-f-mix: overlay; }
:is(.wb-f-cool, .hero__media:has(> .hero__slide.is-shown.wb-f-cool)) { --wb-f-img: saturate(calc(1 - .08 * var(--wb-fa))) brightness(calc(1 + .02 * var(--wb-fa))); --wb-f-bg: linear-gradient(135deg, rgb(30 110 220 / calc(.42 * var(--wb-fa))), rgb(20 190 190 / calc(.32 * var(--wb-fa)))); --wb-f-mix: overlay; }
:is(.wb-f-golden, .hero__media:has(> .hero__slide.is-shown.wb-f-golden)) { --wb-f-img: sepia(calc(.25 * var(--wb-fa))) saturate(calc(1 + .3 * var(--wb-fa))) brightness(calc(1 + .05 * var(--wb-fa))); --wb-f-bg: linear-gradient(160deg, rgb(255 205 95 / calc(.42 * var(--wb-fa))), rgb(255 110 40 / calc(.34 * var(--wb-fa)))); --wb-f-mix: overlay; }
:is(.wb-f-mono, .hero__media:has(> .hero__slide.is-shown.wb-f-mono)) { --wb-f-img: grayscale(calc(.4 + .6 * var(--wb-fa))); }
:is(.wb-f-noir, .hero__media:has(> .hero__slide.is-shown.wb-f-noir)) { --wb-f-img: grayscale(1) contrast(calc(1 + .25 * var(--wb-fa))) brightness(calc(1 - .18 * var(--wb-fa))); --wb-f-bg: rgb(0 0 0 / calc(.18 * var(--wb-fa))); }
:is(.wb-f-duotone, .hero__media:has(> .hero__slide.is-shown.wb-f-duotone)) { --wb-f-img: grayscale(1) contrast(calc(1 + .1 * var(--wb-fa))); --wb-f-bg: var(--wb-red, #c8102e); --wb-f-mix: color; --wb-f-op: min(1, calc(.7 * var(--wb-fa))); }
:is(.wb-f-sepia, .hero__media:has(> .hero__slide.is-shown.wb-f-sepia)) { --wb-f-img: sepia(calc(.8 * var(--wb-fa))); }
:is(.wb-f-fade, .hero__media:has(> .hero__slide.is-shown.wb-f-fade)) { --wb-f-img: contrast(calc(1 - .18 * var(--wb-fa))) brightness(calc(1 + .08 * var(--wb-fa))) saturate(calc(1 - .15 * var(--wb-fa))); --wb-f-bg: rgb(255 255 255 / calc(.14 * var(--wb-fa))); }
:is(.wb-f-vivid, .hero__media:has(> .hero__slide.is-shown.wb-f-vivid)) { --wb-f-img: saturate(calc(1 + .45 * var(--wb-fa))) contrast(calc(1 + .1 * var(--wb-fa))); }
:is(.wb-f-dream, .hero__media:has(> .hero__slide.is-shown.wb-f-dream)) { --wb-f-img: blur(calc(1.2px * var(--wb-fa))) brightness(calc(1 + .1 * var(--wb-fa))) saturate(calc(1 + .1 * var(--wb-fa))); --wb-f-bg: radial-gradient(circle at 50% 40%, rgb(255 255 255 / calc(.28 * var(--wb-fa))), transparent 72%); --wb-f-mix: screen; --wb-f-scale: scale(1.04); }
:is(.wb-f-vignette, .hero__media:has(> .hero__slide.is-shown.wb-f-vignette)) { --wb-f-bg: radial-gradient(ellipse at center, transparent calc(78% - 26% * var(--wb-fa)), rgb(0 0 0 / calc(.65 * var(--wb-fa))) 100%); }
.wb-f-dream > img, img.wb-f-dream { transform: var(--wb-f-scale); }

/* ── Hero heights ──────────────────────────────────────────────────────────
   Classes from website_wbr_hero_height_class(): "hero--sized hero--h-<compact|standard|tall|screen>" on a Bold hero, a hero with
   photos or a page header. Old hero-with-photos values (550 / 420 / 700 / custom) keep their inline --hero-h. From tablets up the
   hero is at least that tall (content can still push it taller); on phones never taller than the screen. */
.wb.hero--h-compact { --hero-h: 450px; }
.wb.hero--h-standard { --hero-h: 650px; }
.wb.hero--h-tall { --hero-h: 800px; }
.wb.hero--h-screen { --hero-h: clamp(560px, 100vh, 1100px); }
@supports (height: 100svh) { .wb.hero--h-screen { --hero-h: clamp(560px, 100svh, 1100px); } }
.wb.hero--sized { min-height: var(--hero-h); }
.wb.hero--slides.hero--sized { height: auto; }
.wb.page-hero.hero--sized { display: flex; align-items: center; }
.wb.page-hero.hero--sized .page-hero__content { width: 100%; }
@media (max-width: 640px) {
  .wb.hero--sized { min-height: min(var(--hero-h), 85svh); }
  .wb.hero--sized.hero--h-screen { min-height: 100svh; }
}

/* ── Sections & tones ───────────────────────────────────────────────────── */
.wb.section { padding: var(--wb-section-pad) var(--wb-gutter); }
.wb.section--compact { padding-top: clamp(2.6rem, 4.5vw, 4rem); padding-bottom: clamp(2.6rem, 4.5vw, 4rem); }
.wb.section--dark { background: var(--wb-dark); }
.wb.section--slate { background: var(--wb-slate); }
.wb.section--red { background: var(--wb-red); }
.wb.section--tight-bottom { padding-bottom: clamp(2rem, 4vw, 3rem); }
/* Two light sections in a row share their gap instead of doubling it. */
.wb.section:not(.section--dark):not(.section--slate):not(.section--red) + .wb.section:not(.section--dark):not(.section--slate):not(.section--red) { padding-top: calc(var(--wb-section-pad) * .35); }

.wb .container { width: 100%; max-width: var(--wb-container); margin: 0 auto; }
.wb .container--narrow { max-width: min(900px, var(--wb-container)); }
.wb .container--wide { max-width: calc(var(--wb-container) + 240px); }
.wb .container--full { max-width: none; }

.wb.section h2:where(:not(.wb-ext *)), .wb .section h2:where(:not(.wb-ext *)) { max-width: 20ch; margin: 0 0 var(--wb-h2-gap); font-size: var(--wb-h2-size); }
.wb .text-center { text-align: center; }
.wb .text-center h2:where(:not(.wb-ext *)), .wb .text-center .intro { margin-left: auto; margin-right: auto; }

.wb .kicker { margin: 0 0 var(--wb-kicker-gap); color: var(--wb-kicker); font-family: var(--wb-font-b); font-size: var(--wb-kicker-size); font-weight: var(--wb-label-weight); letter-spacing: .2em; line-height: 1.4; text-transform: uppercase; }
.ws-home .wb.section--slate { --wb-kicker: rgba(255, 255, 255, .7); }
.wb .intro { max-width: var(--wb-intro-width); color: var(--wb-fg-2); font-size: var(--wb-intro-size); }
.wb .prose { max-width: 62ch; }
.wb .prose p, .wb .prose li { color: var(--wb-fg-2); font-size: 1.08rem; }
.wb .prose p { margin-bottom: 1.1em; }
.wb .prose ul { margin: 0 0 1.1em 1.2em; padding: 0; }

/* ── Split layout & photos ──────────────────────────────────────────────── */
.wb .split { display: grid; align-items: center; gap: 2.5rem; }
@media (min-width: 920px) {
  .wb .split { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .ws:not(.ws-home) .wb .split { gap: 3.5rem; }
}
.wb .split--top { align-items: start; }
.wb .photo { position: relative; overflow: hidden; background: var(--wb-dark); border-radius: var(--wb-img-radius); }
.wb .photo img { width: 100%; height: 100%; object-fit: cover; }
.ws:not(.ws-home) .wb .photo img { object-position: center 25%; }
.wb .photo--4x3 img { aspect-ratio: 4 / 3; }
.wb .photo--3x2 img { aspect-ratio: 3 / 2; }
.wb .photo--natural img { height: auto; }
.wb .photo--banner { margin-top: var(--wb-banner-gap); }
.wb .photo--banner img { height: var(--wb-banner-height); object-position: center 28%; }

/* ── Cards: services, ministries, next steps, channels ─────────────────── */
/* Grids of cards have a thin rule (the 2px gap, colour --wb-rule) between the cards. Each card draws half of the gap around
   itself, instead of the grid painting its whole background, so a last row that is not full leaves an empty space rather
   than a grey block; the grid clips the outer half. */
.wb :is(.service-grid, .ministries, .channels, .facts, .values, .photo-pair, .photo-grid, .schedule, .events, .paths, .step-cards) { --wb-rule: var(--wb-grid-bg); border-radius: var(--wb-radius); overflow: hidden; }
.wb :is(.service-grid, .ministries, .channels, .facts, .values, .photo-pair, .photo-grid, .schedule, .events, .paths, .step-cards) > * { box-shadow: 0 0 0 calc(var(--wb-grid-gap) / 2) var(--wb-rule); }

/* Linked tiles fill those grids edge to edge, so the grid would clip a focus ring drawn outside them: theirs is drawn
   inside the tile, in the colour that reads on the tile (its own text colour; the accent on dark tiles). */
.wb :is(.ministry, .channel, .path, .step-tile):focus-visible { outline-offset: -7px; outline-color: currentColor; }
.wb :is(.ministry--dark, .path--dark, .channel, .step-tile--dark):focus-visible { outline-color: var(--wb-flame-on-dark); }

.wb .service-grid { display: grid; gap: var(--wb-grid-gap); margin-top: 2.6rem; }
@media (min-width: 900px) { .wb .service-grid { grid-template-columns: repeat(3, 1fr); } }
.wb .service-card { display: flex; flex-direction: column; padding: 2rem 1.8rem; background: var(--wb-dark); color: #fff; }
.wb .service-card h3 { margin: 0 0 .7rem; font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
.wb .service-card p { margin: 0 0 .8rem; color: rgba(255, 255, 255, .8); font-size: .99rem; }
.wb .service-card .service-card__time { margin: auto 0 0; padding-top: 1rem; color: #fff; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.wb .ministries { display: grid; gap: var(--wb-grid-gap); margin-top: 2.6rem; }
@media (min-width: 860px) { .wb .ministries { grid-template-columns: 1fr 1fr; } }
.wb .ministry { display: flex; flex-direction: column; align-items: flex-start; padding: 2.2rem 1.9rem; color: #fff; transition: filter .2s; }
.wb .ministry:hover { filter: brightness(1.08); }
.wb .ministry--red { background: var(--wb-red); color: var(--wb-on-red); }
.wb .ministry--dark { background: var(--wb-dark); }
.wb .ministry h3 { margin: 0 0 .6rem; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.wb .ministry p { margin: 0 0 1.4rem; color: color-mix(in srgb, currentColor 85%, transparent); font-size: .99rem; }
/* On the brand colour the ink that reads on it is used at full strength (a lighter mix drops below 4.5:1). */
.wb .ministry--red p { color: inherit; }
.wb .ministry .ministry__tagline { font-weight: 800; color: inherit; }
.wb .ministry__link { margin-top: auto; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.wb.next-steps, .wb .next-steps { display: grid; gap: var(--wb-grid-gap); background: var(--wb-dark); }
@media (min-width: 640px) { .wb.next-steps, .wb .next-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .wb.next-steps, .wb .next-steps { grid-template-columns: repeat(4, 1fr); } }
.wb .step-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: clamp(230px, 24vw, 300px); padding: 1.8rem; transition: filter .2s; }
.wb .step-tile:hover { filter: brightness(1.1); }
.wb .step-tile h3 { font-size: clamp(1.6rem, 2.9vw, 2.3rem); }
.wb .step-tile p { max-width: 26ch; margin: .7rem 0 0; font-size: .95rem; color: inherit; }
.wb .step-tile .step-tile__lead { margin: .6rem 0 .4rem; font-weight: 800; }
.wb .step-tile__link { margin-top: 1.2rem; font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.wb .step-tile--red { background: var(--wb-red); color: var(--wb-on-red); }
.wb .step-tile--flame { background: var(--wb-flame); color: var(--wb-on-flame); }
.wb .step-tile--white { background: var(--wb-white); color: var(--wb-ink); }
.wb .step-tile--white .step-tile__link { color: var(--wb-red-ink); }
.wb .step-tile--dark { background: var(--wb-dark); color: #fff; }
.wb .step-tile--dark .step-tile__link { color: var(--wb-flame-on-dark); }

.wb .channels { display: grid; gap: var(--wb-grid-gap); }
@media (min-width: 820px) { .wb .channels { grid-template-columns: repeat(3, 1fr); } }
.wb .channel { display: flex; flex-direction: column; gap: .3rem; padding: 1.7rem; background: var(--wb-dark); color: #fff; transition: background .2s; }
.wb .channel:hover { background: color-mix(in srgb, var(--wb-dark) 90%, #fff); }
.wb .channel h3 { color: #fff; font-size: 1.4rem; }
.wb .channel p { margin: 0; color: rgba(255, 255, 255, .62); font-size: .94rem; }
.wb .channel span { margin-top: .6rem; color: var(--wb-flame-on-dark); font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.wb .photo--banner:has(+ .channels) { margin-top: 2.4rem; margin-bottom: 2px; border-radius: var(--wb-radius) var(--wb-radius) 0 0; }
.wb .photo--banner + .channels { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.wb .channels + .btn-row { margin-top: 2.2rem; }

/* Visit block and location card */
.wb .visit-info { display: grid; gap: .4rem; margin: 0 0 1.6rem; padding: 1.2rem 0; border-top: 1px solid var(--wb-line); border-bottom: 1px solid var(--wb-line); }
.wb .visit-info__time { color: var(--wb-kicker); font-size: 1.05rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.wb .visit-info__address { color: var(--wb-fg-2); font-size: 1rem; line-height: 1.6; }
.wb .visit-info + .btn-row { margin-top: 0; }
.wb .location-card { position: relative; display: block; min-height: 300px; overflow: hidden; background: var(--wb-dark); border: 3px solid var(--wb-dark); border-radius: var(--wb-img-radius); }
@media (min-width: 920px) { .wb .location-card { height: 100%; min-height: 430px; } }
.wb .location-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.wb .location-card > .wb-ph { transition: transform .7s; }
.wb .location-card:hover img, .wb .location-card:hover > .wb-ph { transform: scale(1.05); }
.wb .location-card__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8, 8, 10, .1) 0%, rgba(8, 8, 10, .86) 76%); }
.wb .location-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: .3rem; padding: 1.6rem; color: #fff; }
.wb .location-card__body strong { font-family: var(--wb-font-h); font-size: 1.25rem; font-weight: var(--wb-t-weight); letter-spacing: -.015em; text-transform: var(--wb-h-case); font-stretch: var(--wb-h-stretch); }
.wb .location-card__body span { color: rgba(255, 255, 255, .8); font-size: .95rem; }
.wb .location-card__body .location-card__cta { margin-top: .5rem; color: var(--wb-flame-on-dark); font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

/* ── Inner-page elements: facts, notes, timeline, columns, values, leader ── */
.wb .facts { display: grid; gap: var(--wb-grid-gap); margin-top: 2.4rem; }
@media (min-width: 760px) { .wb .facts { grid-template-columns: repeat(3, 1fr); } }
.wb .fact { padding: 1.6rem; background: var(--wb-slate); color: #fff; }
.wb .fact h3 { margin: 0 0 .45rem; color: var(--wb-flame-on-slate); font-size: 1.05rem; }
.wb .fact p { margin: 0; color: rgba(255, 255, 255, .85); font-size: .97rem; }
.wb .facts--light { --wb-rule: color-mix(in srgb, var(--wb-ink) 12%, transparent); }
.wb .facts--light .fact { background: var(--wb-white); color: var(--wb-ink); }
.wb .facts--light .fact h3 { color: var(--wb-red-ink); }
.wb .facts--light .fact p { color: var(--wb-text); }
.wb .facts--dark .fact { background: var(--wb-dark); }
.wb .facts--dark .fact h3 { color: var(--wb-flame-on-dark); }

.wb .note { margin-top: 2.4rem; padding: 1.6rem 1.8rem; border-left: 4px solid var(--wb-red); background: var(--wb-white); color: var(--wb-ink); border-radius: 0 var(--wb-radius) var(--wb-radius) 0; }
.wb .note h3 { margin: 0 0 .6rem; font-size: 1.2rem; }
.wb .note p { margin: 0 0 .6rem; color: var(--wb-text); }
.wb .note p:last-child { margin-bottom: 0; }
.wb .note .note__lead { color: var(--wb-ink); font-size: 1.05rem; font-weight: 800; }

.wb .timeline { margin: 2.4rem 0 0; padding: 0; list-style: none; border-top: 2px solid var(--wb-line); }
.wb .timeline::before { content: none; }
.wb .timeline__row { display: grid; gap: .5rem; padding: 1.6rem 0; border-bottom: 1px solid var(--wb-line); }
.wb .timeline__label { margin: 0; padding-top: .35rem; color: var(--wb-kicker); font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.wb .timeline__body h3 { margin: 0 0 .45rem; color: var(--wb-fg); font-size: 1.25rem; }
.wb .timeline__body p { max-width: 58ch; margin: 0 0 .8em; color: var(--wb-fg-2); font-size: 1rem; }
.wb .timeline__body p + p { margin-top: 1rem; }
@media (min-width: 720px) {
  .wb .timeline__row { grid-template-columns: 9rem 1fr; align-items: start; gap: 1.8rem; }
  .wb .timeline__label { padding-right: 1.2rem; border-right: 3px solid var(--wb-kicker); }
}

.wb .two-col { display: grid; gap: 2rem; margin-top: 2.6rem; }
@media (min-width: 820px) { .wb .two-col { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.wb .two-col__title { margin: 0 0 .7rem; font-size: 1.2rem; letter-spacing: -.01em; }
.wb .two-col p { max-width: 46ch; margin: 0; color: var(--wb-fg-2); font-size: 1.02rem; }
.wb .two-col p + p { margin-top: .8em; }

.wb .values { display: grid; gap: var(--wb-grid-gap); margin-top: 2.6rem; }
@media (min-width: 700px) { .wb .values { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .wb .values { grid-template-columns: repeat(4, 1fr); } }
.wb .value { padding: 1.8rem 1.6rem; background: var(--wb-slate); color: #fff; }
.wb .value h3 { margin: 0 0 .6rem; color: var(--wb-flame-on-slate); font-size: 1.35rem; }
/* 21.6px is large text only when bold: themes with bold headings may use the large-text accent. */
.ws:is(.ws-theme-modern, .ws-skin-ember) .wb .value h3 { color: var(--wb-flame-on-slate-lg); }
.wb .value p { margin: 0; color: rgba(255, 255, 255, .85); font-size: .98rem; }

.wb .leader { display: grid; align-items: start; gap: 2.4rem; margin-top: 2.4rem; }
@media (min-width: 900px) { .wb .leader { grid-template-columns: .85fr 1.15fr; gap: 3.4rem; } }
.wb .container > .leader:first-child { margin-top: 0; }
.wb .leader__photo { position: relative; overflow: hidden; background: var(--wb-dark); border-radius: var(--wb-img-radius); }
.wb .leader__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; }
.wb .leader__role { margin: 0 0 .5rem; color: var(--wb-kicker); font-size: .76rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.wb .leader h2 { margin-bottom: 1.1rem; }

/* Photo sets */
.wb .photo-pair, .wb .photo-grid { display: grid; gap: var(--wb-grid-gap); }
.wb .photo-pair { margin-top: 2.6rem; }
.wb .photo-grid { margin: 2.4rem 0; }
.wb .photo-pair img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.wb .photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 820px) { .wb .photo-pair { grid-template-columns: 1fr 1fr; } }
@media (min-width: 700px) { .wb .photo-grid { grid-template-columns: repeat(3, 1fr); } }

/* Weekly schedule and live player */
.wb .schedule { display: grid; gap: var(--wb-grid-gap); margin-top: 2.4rem; }
@media (min-width: 760px) { .wb .schedule { grid-template-columns: repeat(3, 1fr); } }
.wb .schedule__item { padding: 1.7rem; background: var(--wb-slate); color: #fff; }
.wb .schedule__item h3 { margin: 0 0 .45rem; color: var(--wb-flame-on-slate); font-size: 1.05rem; }
.wb .schedule__item p { margin: 0; color: rgba(255, 255, 255, .85); font-size: .97rem; }
.wb .schedule--light { --wb-rule: color-mix(in srgb, var(--wb-ink) 12%, transparent); }
.wb .schedule--light .schedule__item { background: var(--wb-white); color: var(--wb-ink); }
.wb .schedule--light .schedule__item h3 { color: var(--wb-red-ink); }
.wb .schedule--light .schedule__item p { color: var(--wb-text); }

.wb .player { margin-top: 2.2rem; border: 3px solid rgba(255, 255, 255, .16); background: #000; border-radius: var(--wb-img-radius); overflow: hidden; }
.wb .player__frame { position: relative; width: 100%; padding-top: 56.25%; }
.wb .player__frame > iframe, .wb .player__frame > .player__placeholder, .wb .player__frame--embed > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wb .player__frame iframe { width: 100%; height: 100%; border: 0; }
.wb .player__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 1.5rem; background: radial-gradient(ellipse at center, #1c1c1c 0%, #000 70%); color: #fff; text-align: center; }
.wb .player__play { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: var(--wb-red); color: var(--wb-on-red); }
.wb .player__play svg { width: 28px; height: 28px; margin-left: 5px; fill: currentColor; }
.wb .player__placeholder strong { font-size: 1.1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.wb .player__placeholder span { color: rgba(255, 255, 255, .6); font-size: .93rem; }

/* Events */
.wb .events { --wb-rule: color-mix(in srgb, var(--wb-ink) 12%, transparent); display: grid; gap: var(--wb-grid-gap); margin-top: 2.6rem; }
@media (min-width: 900px) { .wb .events { grid-template-columns: 1fr 1fr; } }
.wb .events__empty { grid-column: 1 / -1; margin: 0; padding: 2rem; background: var(--wb-white); color: var(--wb-text); }
.wb .event { display: flex; flex-direction: column; align-items: flex-start; padding: 2rem 1.8rem; background: var(--wb-white); color: var(--wb-ink); }
.wb .event h3 { margin: 0 0 .8rem; font-size: clamp(1.6rem, 3.4vw, 2.5rem); }
.wb .event h3 a:hover { color: var(--wb-red-ink); }
.wb .event__date { margin: 0 0 .7rem; color: var(--wb-red-ink); font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.wb .event__theme { margin: 0 0 .8rem; color: var(--wb-flame); font-size: clamp(1.1rem, 2.6vw, 1.5rem); font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; }
.wb .event__text { max-width: 52ch; margin: 0 0 .9rem; color: var(--wb-text); }
.wb .event__times { display: grid; gap: .35rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.wb .event__times li { display: flex; gap: .7rem; color: rgba(255, 255, 255, .85); font-size: .95rem; }
.wb .event__times span { min-width: 6.6rem; color: #fff; font-weight: 800; }
.wb .event__place { margin: 0 0 1.5rem; color: var(--wb-faint); font-size: .92rem; }
.wb .event__note { max-width: 52ch; margin: 0 0 1.2rem; padding: .85rem 1rem; border-left: 3px solid var(--wb-red); background: var(--wb-paper); color: var(--wb-text); font-size: .9rem; }
.wb .event__note strong { color: var(--wb-red-ink); }
.wb .event__next { margin: -.35rem 0 .7rem; color: var(--wb-faint); font-size: .86rem; font-weight: 700; }
.wb .event__badge { display: inline-block; margin: 0 0 .9rem; padding: .3rem .65rem; background: var(--wb-paper); color: var(--wb-ink); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.wb .event__badge--open { background: #e8f5ec; color: #17602f; }
.wb .event__badge--full { background: #fdecea; color: #b42318; }
.wb .event--featured { display: grid; align-items: stretch; padding: 0; background: var(--wb-dark); color: #fff; }
@media (min-width: 900px) { .wb .event--featured { grid-column: 1 / -1; grid-template-columns: .85fr 1.15fr; } }
.wb .event--featured:not(:has(.event__art)) { grid-template-columns: 1fr; }
.wb .event__art { background: color-mix(in srgb, var(--wb-dark) 85%, #fff); }
.wb .event__art img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; }
@media (min-width: 900px) { .wb .event__art img { max-height: none; } }
.wb .event__content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 2rem 1.8rem; }
.wb .event--featured .event__date { color: var(--wb-flame-on-dark); }
.wb .event--featured .event__text { color: rgba(255, 255, 255, .85); }
.wb .event--featured .event__place, .wb.section--dark .event__place, .wb.section--slate .event__place { color: rgba(255, 255, 255, .6); }
.wb .event--featured .event__next { color: rgba(255, 255, 255, .7); }

/* Choice cards and numbered steps */
.wb .paths { --wb-rule: color-mix(in srgb, var(--wb-ink) 12%, transparent); display: grid; gap: var(--wb-grid-gap); margin-top: 2.4rem; }
@media (min-width: 860px) { .wb .paths { grid-template-columns: 1fr 1fr; } }
.wb .path { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(2rem, 4vw, 2.8rem); color: #fff; transition: filter .2s; }
.wb .path:hover { filter: brightness(1.08); }
.wb .path--red { background: var(--wb-red); color: var(--wb-on-red); }
.wb .path--dark { background: var(--wb-dark); }
.wb .path h2, .wb.section .path h2 { max-width: 16ch; margin: 0 0 1rem; font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.wb .path p { max-width: 44ch; margin: 0 0 1.6rem; color: color-mix(in srgb, currentColor 88%, transparent); }
.wb .path--red p { color: inherit; }
.wb .path .path__kicker { margin-bottom: 1rem; color: inherit; font-size: .74rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }

.wb .step-cards { display: grid; gap: var(--wb-grid-gap); margin-top: 2.4rem; }
@media (min-width: 820px) { .wb .step-cards { grid-template-columns: repeat(3, 1fr); } }
.wb .step-card { padding: 1.8rem 1.6rem; background: var(--wb-dark); color: #fff; }
.wb .step-card p { margin: 0; color: rgba(255, 255, 255, .78); font-size: .98rem; }
.wb .step-card .step-card__num { margin: 0 0 .7rem; color: var(--wb-flame-on-dark); font-size: .9rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

/* ── Embeds & forms ─────────────────────────────────────────────────────── */
.wb .embed, .wb .form-panel { max-width: 760px; margin: 2.4rem auto 0; background: var(--wb-white); border: 3px solid var(--wb-dark); color: var(--wb-ink); border-radius: var(--wb-radius); overflow: hidden; }
.wb .embed__head, .wb .form-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; background: var(--wb-dark); color: #fff; }
.wb .embed__head strong, .wb .form-panel__head strong { font-family: var(--wb-font-h); font-size: 1.05rem; font-weight: var(--wb-t-weight); text-transform: var(--wb-h-case); font-stretch: var(--wb-h-stretch); letter-spacing: .02em; }
.wb .embed__head span, .wb .form-panel__head span { color: rgba(255, 255, 255, .7); font-size: .85rem; }
.wb .embed__body { min-height: 260px; padding: clamp(1.2rem, 3vw, 1.8rem); background: var(--wb-white); color: var(--wb-ink); }
.wb .embed__body iframe { max-width: 100%; }
.wb .embed__body:has(> .embed__frame) { padding: 0; min-height: 0; }
.wb .embed__frame { display: block; width: 100%; height: min(900px, max(640px, 80vh)); min-height: 640px; border: 0; background: var(--wb-white); }
.wb .embed__fallback { padding: 2rem 1.5rem; text-align: center; }
.wb .embed__fallback p { max-width: 44ch; margin: 0 auto 1.2rem; color: var(--wb-text); }
.wb .alt-give { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; max-width: 760px; margin: 1.6rem auto 0; padding: 1.3rem; border: 2px solid var(--wb-line); border-radius: var(--wb-radius); }
.wb .alt-give__lead { margin: 0; color: var(--wb-fg-2); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.wb .btn-paypal { display: inline-flex; align-items: center; gap: .55rem; padding: .72rem 1.5rem; border: 1px solid #e5a800; border-radius: 24px; background: #ffc439; color: #253b80; font-size: 1rem; font-weight: 700; line-height: 1; transition: background .18s, transform .18s; }
.wb .btn-paypal:hover { background: #f0bb33; transform: translateY(-1px); }

.wb .form-panel__body { padding: clamp(1.5rem, 4vw, 2.4rem); background: var(--wb-white); color: var(--wb-ink); }
.wb .form-row { display: grid; gap: 0 1rem; }
@media (min-width: 560px) { .wb .form-row { grid-template-columns: 1fr 1fr; } }
.wb .form-panel .field { margin-bottom: 1.3rem; }
.wb .form-panel .field > label, .wb .form-panel .field__label { display: block; margin: 0 0 .45rem; color: var(--wb-ink); font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
/* A solid muted colour (4.5:1 on the form's white panel) rather than a faded label. */
.wb .field__optional { color: var(--wb-faint); font-weight: 600; letter-spacing: .06em; }
.wb .form-panel .field__hint { display: block; margin: -.25rem 0 .5rem; color: var(--wb-faint); font-size: .88rem; }
.wb .form-panel .field :is(input[type="text"], input[type="tel"], input[type="email"], input[type="date"], input[type="number"], select, textarea) {
  width: 100%; padding: .85rem .95rem; border: 2px solid var(--wb-ink); border-radius: calc(var(--wb-radius) * .5); background: #fff; color: var(--wb-ink); font-size: 1rem;
}
.wb .form-panel .field textarea { min-height: 130px; resize: vertical; }
/* The focus indicator is the field border turning the accent (checked for 3:1 on light surfaces). */
.wb .form-panel .field :is(input, select, textarea):focus { outline: none; border-color: var(--wb-flame-ring); }
.wb .form-panel .field .is-invalid { border-color: var(--wb-red); background: #fff5f4; }
.wb .form-panel .field__error { display: none; margin-top: .4rem; color: #b42318; font-size: .85rem; font-weight: 700; }
.wb .form-panel .field__error.is-shown { display: block; }
.wb .choices { display: grid; gap: .55rem; }
@media (min-width: 620px) { .wb .choices { grid-template-columns: 1fr 1fr; } }
.wb .choice { display: flex; align-items: center; gap: .85rem; padding: .85rem .95rem; border: 2px solid color-mix(in srgb, var(--wb-ink) 12%, transparent); font-size: 1rem; line-height: 1.35; cursor: pointer; transition: border-color .15s, background .15s; }
.wb .choice:hover { border-color: var(--wb-ink); }
.wb .choice input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--wb-red); }
.wb .choice:has(input:checked) { border-color: var(--wb-red); background: color-mix(in srgb, var(--wb-red) 6%, #fff); }
.wb .consent { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: 1.4rem; font-size: .93rem; }
.wb .consent input { flex: none; width: 18px; height: 18px; margin-top: .3rem; accent-color: var(--wb-red); }
.wb .form-alert { display: none; margin-top: 1.3rem; padding: 1.2rem 1.3rem; border: 2px solid var(--wb-red); background: #fff5f4; }
.wb .form-alert.is-shown { display: block; }
.wb .form-alert__title { margin-bottom: .4rem; color: #b42318; font-size: 1rem; font-weight: 800; text-transform: uppercase; }
.wb .form-note { max-width: 46ch; margin: 1.1rem 0 0; color: var(--wb-faint); font-size: .88rem; }
.wb .form-success { display: none; padding: clamp(1.8rem, 4vw, 2.6rem); background: var(--wb-dark); color: #fff; }
.wb .form-success.is-shown { display: block; }
.wb .form-success .form-success__title { margin-bottom: .6rem; color: var(--wb-flame-on-dark); font-size: 1.6rem; font-weight: 800; line-height: 1.2; }
.wb .form-success p { margin: 0 0 .8rem; color: rgba(255, 255, 255, .85); }
.wb .hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ── Social icons ───────────────────────────────────────────────────────── */
.wb .social-links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.1rem; }
.wb .social-links--inline { justify-content: center; margin-top: 1.6rem; }
.wb .social-links a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--wb-fg); color: var(--wb-fg-inv); transition: background .2s, transform .2s, color .2s; }
.wb .social-links a:hover { background: var(--wb-red); color: var(--wb-on-red); transform: translateY(-2px); }
.wb .social-links svg { width: 20px; height: 20px; }
.wb .social-links svg:not([fill="none"]) { fill: currentColor; }
.wb .social-links--inline + .btn-row { margin-top: 2.4rem; }
.wb .text-center .social-links, .wb .u-center .social-links { justify-content: center; }
.wb .text-center .btn-row, .wb .u-center .btn-row { justify-content: center; }
.wb .u-right .btn-row, .wb .u-right .social-links { justify-content: flex-end; }

/* ── Builder additions: spacing between blocks editors combine freely ──── */
.wb .container > .photo--banner:first-child { margin-top: 0; }
.wb .intro + ul.intro { margin-top: -.4em; }
.wb .shared-block > *:first-child { margin-top: 0; }
.wb .box > .box__inner > .shared-block > * { margin-top: 0; margin-bottom: 0; }

/* Scroll reveal: only once blocks.js is running (it sets html.wb-js), so content never stays hidden without script. */
.wb-js .wb .reveal:not(.is-visible) { opacity: 0; transform: translateY(16px); }
.wb-js .wb .reveal { transition: opacity .6s, transform .6s; }

/* ── Boxes: rows of containers that divide a section ──────────────────────
   A row is a wrapping flex line. Boxes share it equally unless they have a width (a fraction of 12); tablets and
   phones can keep, pair or stack them. */
.wb .boxes { --gap: 1.5rem; display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--gap); margin-top: 2.4rem; }
.wb .boxes--gap-none { --gap: 0px; }
.wb .boxes--gap-sm { --gap: .75rem; }
.wb .boxes--gap-lg { --gap: 2.5rem; }
.wb .boxes--gap-xl { --gap: 4rem; }
.wb .boxes--align-top { align-items: flex-start; }
.wb .boxes--align-center { align-items: center; }
.wb .boxes--align-bottom { align-items: flex-end; }
.wb .boxes--justify-center { justify-content: center; }
.wb .boxes--justify-end { justify-content: flex-end; }
.wb .boxes--justify-between { justify-content: space-between; }
.wb .boxes--space-none { margin-top: 0; }
.wb .boxes--space-sm { margin-top: 1.2rem; }
.wb .boxes--space-lg { margin-top: 4.5rem; }
.wb .container > .boxes:first-child { margin-top: 0; }

.wb .box { position: relative; display: flex; flex: 1 1 0; flex-direction: column; min-width: min(100%, 160px); container-type: inline-size; }
.wb .boxes > .box--w1 { --f: .083333; } .wb .boxes > .box--w2 { --f: .166667; } .wb .boxes > .box--w3 { --f: .25; }
.wb .boxes > .box--w4 { --f: .333333; } .wb .boxes > .box--w5 { --f: .416667; } .wb .boxes > .box--w6 { --f: .5; }
.wb .boxes > .box--w7 { --f: .583333; } .wb .boxes > .box--w8 { --f: .666667; } .wb .boxes > .box--w9 { --f: .75; }
.wb .boxes > .box--w10 { --f: .833333; } .wb .boxes > .box--w11 { --f: .916667; } .wb .boxes > .box--w12 { --f: 1; }
.wb .boxes > [class*="box--w"] { flex: 0 0 calc(var(--f) * 100% - (1 - var(--f)) * var(--gap)); }
@media (max-width: 959px) {
  .wb .boxes--t-2 > .box { --f: .5; flex: 0 0 calc(var(--f) * 100% - (1 - var(--f)) * var(--gap)); }
  .wb .boxes--t-1 > .box { flex: 0 0 100%; }
  .wb .boxes > .box--tw1 { --f: .083333; } .wb .boxes > .box--tw2 { --f: .166667; } .wb .boxes > .box--tw3 { --f: .25; }
  .wb .boxes > .box--tw4 { --f: .333333; } .wb .boxes > .box--tw5 { --f: .416667; } .wb .boxes > .box--tw6 { --f: .5; }
  .wb .boxes > .box--tw7 { --f: .583333; } .wb .boxes > .box--tw8 { --f: .666667; } .wb .boxes > .box--tw9 { --f: .75; }
  .wb .boxes > .box--tw10 { --f: .833333; } .wb .boxes > .box--tw11 { --f: .916667; } .wb .boxes > .box--tw12 { --f: 1; }
  .wb .boxes > [class*="box--tw"] { flex: 0 0 calc(var(--f) * 100% - (1 - var(--f)) * var(--gap)); }
}
@media (max-width: 639px) {
  .wb .boxes--p-2 > .box { --f: .5; flex: 0 0 calc(var(--f) * 100% - (1 - var(--f)) * var(--gap)); }
  .wb .boxes--p-1 > .box { flex: 0 0 100%; }
  .wb .boxes > .box--pw1 { --f: .083333; } .wb .boxes > .box--pw2 { --f: .166667; } .wb .boxes > .box--pw3 { --f: .25; }
  .wb .boxes > .box--pw4 { --f: .333333; } .wb .boxes > .box--pw5 { --f: .416667; } .wb .boxes > .box--pw6 { --f: .5; }
  .wb .boxes > .box--pw7 { --f: .583333; } .wb .boxes > .box--pw8 { --f: .666667; } .wb .boxes > .box--pw9 { --f: .75; }
  .wb .boxes > .box--pw10 { --f: .833333; } .wb .boxes > .box--pw11 { --f: .916667; } .wb .boxes > .box--pw12 { --f: 1; }
  .wb .boxes > [class*="box--pw"] { flex: 0 0 calc(var(--f) * 100% - (1 - var(--f)) * var(--gap)); }
  .wb .boxes--reverse-p { flex-wrap: wrap-reverse; }
}
@media (min-width: 960px) { .wb .box--hide-d { display: none !important; } }
@media (min-width: 640px) and (max-width: 959px) { .wb .box--hide-t { display: none !important; } }
@media (max-width: 639px) { .wb .box--hide-p { display: none !important; } }

.wb .box__inner { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; }
.wb .box > .box__inner > * { margin-top: 0; margin-bottom: 0; }
.wb .box > .box__inner > * + * { margin-top: 1.1rem; }
.wb .box > .box__inner > .spacer + *, .wb .box > .box__inner > * + .spacer { margin-top: 0; }
.wb .box--va-center { justify-content: center; }
.wb .box--va-bottom { justify-content: flex-end; }
.wb .box--va-spread > .box__inner { flex: 1; justify-content: space-between; }
.wb .box--h-sm { min-height: 200px; }
.wb .box--h-md { min-height: 320px; }
.wb .box--h-lg { min-height: 480px; }
.wb .box--h-screen { min-height: 100svh; }
.wb .box--pad-sm > .box__inner { padding: 1rem; }
.wb .box--pad-md > .box__inner { padding: clamp(1.25rem, 2.6vw, 2rem); }
.wb .box--pad-lg > .box__inner { padding: clamp(1.75rem, 4vw, 3rem); }
.wb .box--pad-xl > .box__inner { padding: clamp(2.5rem, 6vw, 4.5rem); }
.wb .box--bg-white { background: var(--wb-white); }
.wb .box--bg-light { background: var(--wb-light); }
.wb .box--bg-slate { background: var(--wb-slate); }
.wb .box--bg-dark { background: var(--wb-dark); }
.wb .box--bg-red { background: var(--wb-red); }
.wb .box--bg-flame { background: var(--wb-flame); }
.wb .box--bg-custom { background: var(--box-bg, #fff); }
.wb .box--border-light { border: 1px solid color-mix(in srgb, var(--wb-ink) 14%, transparent); }
.wb .box--on-dark.box--border-light { border-color: rgba(255, 255, 255, .22); }
.wb .box--border-dark { border: 2px solid var(--wb-dark); }
.wb .box--on-dark.box--border-dark { border-color: #fff; }
.wb .box--border-accent-top { border-top: 4px solid var(--wb-red); }
.wb .box--border-accent-left { border-left: 4px solid var(--wb-red); }
.wb .box--radius-sm { border-radius: 6px; }
.wb .box--radius-md { border-radius: 14px; }
.wb .box--radius-lg { border-radius: 28px; }
.wb .box--shadow-sm { box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.wb .box--shadow-md { box-shadow: 0 12px 32px rgba(0, 0, 0, .13); }
.wb .box--shadow-lg { box-shadow: 0 24px 60px rgba(0, 0, 0, .22); }
.wb .box--photo { overflow: hidden; background-color: var(--wb-dark); }
.wb .box__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.wb .box__overlay { position: absolute; inset: 0; z-index: 0; background: rgba(8, 8, 10, .45); }
.wb .box__overlay--light { background: rgba(8, 8, 10, .25); }
.wb .box__overlay--strong { background: rgba(8, 8, 10, .68); }
.wb .box__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
/* A linked box's ring is in the ring colour of the tone it sits on (--wb-ring). A box with a background (or photo) of its own
   has it just inside its edge, on that background: outside it would sit on a ground the box's tone knows nothing about
   (and a photo box clips it). */
.wb .box__link:focus-visible { outline: 3px solid var(--wb-ring, var(--wb-flame)); outline-offset: 2px; border-radius: inherit; }
.wb :is(.box--bg-white, .box--bg-light, .box--bg-slate, .box--bg-dark, .box--bg-red, .box--bg-flame, .box--bg-custom, .box--photo) > .box__link:focus-visible { outline-offset: -3px; }
/* The box's content does not form its own layer, so its links and buttons (z-index 3) sit above the box link (2) and stay clickable. */
.wb .box--linked > .box__inner { z-index: auto; }
.wb .box--linked .box__inner :is(a, button, iframe) { position: relative; z-index: 3; }
.wb .box--hover-lift, .wb .box--hover-glow { transition: transform .25s ease, box-shadow .25s ease; }
.wb .box--hover-lift:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, .16); }
.wb .box--hover-glow:hover { box-shadow: 0 16px 44px rgba(0, 0, 0, .2); }
.wb-js .wb .box--hover-lift.reveal.is-visible:hover { transform: translateY(-6px); }
.wb .box--hover-zoom > .box__bg, .wb .box--hover-zoom > .wb-ph { transition: transform .7s ease; }
.wb .box--hover-zoom:hover > .box__bg, .wb .box--hover-zoom:hover > .wb-ph { transform: scale(1.07); }
.wb .u-left { text-align: left; }
.wb .u-center { text-align: center; }
.wb .u-right { text-align: right; }
.wb .u-center :is(.prose, .intro), .wb .u-center .divider--short { margin-left: auto; margin-right: auto; }
.wb .u-right :is(.prose, .intro) { margin-left: auto; }
/* Content inside a narrow box uses fewer columns. */
@container (max-width: 699px) {
  .wb :is(.facts, .values, .schedule, .service-grid, .photo-grid, .photo-pair, .ministries, .channels, .paths, .step-cards, .two-col, .leader, .events, .event--featured) { grid-template-columns: 1fr; }
  .wb .timeline__row { grid-template-columns: 1fr; gap: .5rem; }
  .wb .timeline__label { border-right: 0; padding-right: 0; }
}
@container (min-width: 480px) and (max-width: 699px) {
  .wb :is(.values, .photo-grid, .channels, .step-cards, .schedule) { grid-template-columns: repeat(2, 1fr); }
}

/* ── Basic blocks: heading, image, buttons, video, icon, spacer, divider ── */
.wb :is(.hb, .img-block, .buttons-block, .video-block, .icon-block, .divider) { margin-top: 2rem; }
.wb .container > :is(.hb, .img-block, .icon-block):first-child { margin-top: 0; }
.wb .hb .kicker { margin-bottom: .6rem; }
.wb .hb .hb__title { max-width: none; margin: 0; }
.wb .hb--sm .hb__title { font-size: 1.15rem; line-height: 1.15; letter-spacing: -.005em; }
.wb .hb--md .hb__title { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.wb .hb--lg .hb__title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.wb .hb--xl .hb__title { font-size: var(--wb-h2-size); }
.wb .buttons-block { display: flex; flex-wrap: wrap; gap: .7rem; }
.wb .buttons-block.u-center { justify-content: center; }
.wb .buttons-block.u-right { justify-content: flex-end; }
.wb .u-center > .buttons-block, .wb .u-center .buttons-block:not(.u-left):not(.u-right) { justify-content: center; }
.wb .img-block__frame { display: block; overflow: hidden; background: color-mix(in srgb, var(--wb-ink) 6%, transparent); border-radius: inherit; }
.wb .img-block img { width: 100%; height: auto; }
.wb .img-block--r1x1 img { aspect-ratio: 1; object-fit: cover; }
.wb .img-block--r4x3 img { aspect-ratio: 4 / 3; object-fit: cover; }
.wb .img-block--r3x2 img { aspect-ratio: 3 / 2; object-fit: cover; }
.wb .img-block--r16x9 img { aspect-ratio: 16 / 9; object-fit: cover; }
.wb .img-block--r4x5 img { aspect-ratio: 4 / 5; object-fit: cover; }
.wb .img-block--lg { width: 75%; }
.wb .img-block--md { width: 50%; }
.wb .img-block--sm { width: 33.333%; }
.wb .img-block.u-center, .wb .u-center > .img-block:not(.u-left):not(.u-right) { margin-left: auto; margin-right: auto; }
.wb .img-block.u-right { margin-left: auto; }
.wb .img-block--radius-sm .img-block__frame { border-radius: 6px; }
.wb .img-block--radius-md .img-block__frame { border-radius: 14px; }
.wb .img-block--radius-lg .img-block__frame { border-radius: 28px; }
.wb .img-block--radius-circle .img-block__frame { border-radius: 50%; }
.wb .img-block figcaption { margin-top: .6rem; color: var(--wb-fg-3); font-size: .9rem; }
.wb a.img-block__frame img { transition: transform .5s ease; }
.wb a.img-block__frame:hover img { transform: scale(1.03); }
.wb .video-block { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #000; border-radius: var(--wb-img-radius); }
.wb .video-block--r4x3 { aspect-ratio: 4 / 3; }
.wb .video-block--r1x1 { aspect-ratio: 1; }
.wb .video-block--r9x16 { max-width: 420px; aspect-ratio: 9 / 16; }
.wb .video-block iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wb .icon-block { --icon: 44px; display: flex; }
.wb .icon-block--sm { --icon: 30px; }
.wb .icon-block--lg { --icon: 64px; }
.wb .icon-block--xl { --icon: 88px; }
.wb .icon-block.u-center, .wb .u-center > .icon-block:not(.u-left):not(.u-right) { justify-content: center; }
.wb .icon-block.u-right { justify-content: flex-end; }
.wb .icon-block__glyph { display: inline-grid; place-items: center; color: var(--wb-kicker); }
.wb .icon-block__glyph svg { width: var(--icon); height: var(--icon); }
.wb .icon-block--c-flame .icon-block__glyph { color: var(--wb-flame); }
.wb .icon-block--c-current .icon-block__glyph { color: currentColor; }
.wb .icon-block--c-slate .icon-block__glyph { color: var(--wb-slate); }
.wb :is(.icon-block--circle, .icon-block--square) .icon-block__glyph { padding: calc(var(--icon) * .32); background: color-mix(in srgb, var(--wb-red) 11%, transparent); }
.wb .icon-block--circle .icon-block__glyph { border-radius: 50%; }
.wb .icon-block--square .icon-block__glyph { border-radius: calc(var(--icon) * .3); }
.wb .icon-block--c-flame:is(.icon-block--circle, .icon-block--square) .icon-block__glyph { background: color-mix(in srgb, var(--wb-flame) 13%, transparent); }
.wb :is(.icon-block--c-current, .icon-block--c-slate):is(.icon-block--circle, .icon-block--square) .icon-block__glyph { background: rgba(128, 128, 128, .14); }
.wb .spacer { height: 2.5rem; }
.wb .spacer--sm { height: 1rem; }
.wb .spacer--lg { height: 5rem; }
.wb .spacer--xl { height: 8rem; }
.wb .divider { height: 0; margin-bottom: 0; border: 0; border-top: 1px solid currentColor; background: none; opacity: .2; }
.wb .divider--short { width: 72px; border-top-width: 4px; opacity: 1; color: var(--wb-red); }
.wb .divider--dots { border-top: 3px dotted currentColor; opacity: .35; }
.wb .divider--red { color: var(--wb-red); opacity: 1; }
.wb .divider--flame { color: var(--wb-flame); opacity: 1; }
.wb .u-center > .divider--short, .wb .divider--short.u-center { margin-left: auto; margin-right: auto; }

/* ── Highlighted words and longer writing ──────────────────────────────── */
/* *Words in asterisks* in a heading: the brand colour on light backgrounds, the accent on dark, ink on red. */
.wb .hl { color: var(--wb-hl); }
/* Headings that can be smaller than large text (24px, or 18.66px bold) highlight in the label colour, which reads at
   4.5:1 on every tone. Themes with bold headings keep the heading highlight on the medium size (21.6px+ bold). */
.wb :is(.hb--sm, .hb--md, .countdown__heading, .signup__title) .hl { color: var(--wb-kicker); }
.ws:is(.ws-theme-modern, .ws-skin-ember) .wb :is(.hb--md, .countdown__heading, .signup__title) .hl { color: var(--wb-hl); }
.wb.hero :is(h1, .wb-h1) .hl { color: var(--wb-flame-on-dark); }
.wb :is(.prose, .intro, .note, .faq__a, .two-col, .timeline__body, .tabs__text, .story__quote, .campaign__text, .embed__fallback, .page-hero__content, .leader) a:not(.btn):not(.text-link) {
  color: inherit; text-decoration: underline; text-decoration-color: var(--wb-kicker); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.wb :is(.prose, .intro, .note, .faq__a, .two-col, .timeline__body, .tabs__text, .story__quote, .campaign__text, .embed__fallback, .page-hero__content, .leader) a:not(.btn):not(.text-link):hover { color: var(--wb-kicker); }
.wb :is(.prose-h, .prose h2, .prose h3, .prose h4) { margin: 1.7em 0 .55em; line-height: 1.1; letter-spacing: -.01em; }
.wb :is(h2.prose-h, .prose h2) { max-width: none; font-size: clamp(1.45rem, 2.6vw, 1.9rem); }
.wb :is(h3.prose-h, .prose h3) { font-size: 1.25rem; }
.wb :is(h4.prose-h, .prose h4) { font-size: 1.05rem; }
.wb .prose > :first-child { margin-top: 0; }
.wb .prose blockquote { margin: 1.6em 0; padding: .3em 0 .3em 1.2em; border-left: 4px solid var(--wb-red); }
.wb .prose blockquote p { font-size: 1.22rem; font-weight: 600; line-height: 1.45; color: var(--wb-fg); }
.wb .prose ol { margin: 0 0 1.1em 1.4em; padding: 0; font-size: 1.08rem; }
.wb .prose li + li { margin-top: .35em; }
.wb .prose img, .wb .prose-img img { width: 100%; height: auto; border-radius: var(--wb-img-radius); }
.wb .prose-img { margin: 1.8em 0; }
.wb .prose hr, .wb .prose-rule { margin: 2.2em 0; border: 0; border-top: 1px solid currentColor; opacity: .2; }
.wb .bible-ref { border-bottom: 1px dotted currentColor; text-decoration: none; }
.wb .bible-ref:hover, .wb .bible-ref:focus-visible { border-bottom-style: solid; color: var(--wb-kicker); }

/* ── Feeds: sermons, groups (cards, filters, chips, pages) ──────────────── */
.wb .card-grid { display: grid; gap: 1.5rem; margin-top: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.wb :is(.container, .library, .feed) > .card-grid:first-child { margin-top: 0; }
.wb .card-grid--list { grid-template-columns: 1fr; gap: 1rem; }
.wb .media-card { display: flex; flex-direction: column; overflow: hidden; background: var(--wb-white); color: var(--wb-ink); border-radius: var(--wb-radius); transition: transform .2s ease, box-shadow .2s ease; }
.wb .media-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0, 0, 0, .14); }
.wb .media-card__art { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--wb-dark); }
.wb .media-card__art img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.wb .media-card:hover .media-card__art img { transform: scale(1.04); }
.wb .media-card__blank { display: grid; place-items: center; height: 100%; padding: 1.2rem; color: #fff; font-family: var(--wb-font-h); font-size: 1.2rem; font-weight: var(--wb-t-weight); line-height: 1.05; text-align: center; text-transform: var(--wb-h-case); background: linear-gradient(135deg, var(--wb-slate), var(--wb-dark)); }
.wb .media-card__play { position: absolute; right: .8rem; bottom: .8rem; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--wb-red); color: var(--wb-on-red); box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.wb .media-card__play svg { width: 20px; height: 20px; fill: currentColor; }
.wb .media-card__body { display: flex; flex: 1; flex-direction: column; gap: .35rem; padding: 1.2rem 1.25rem 1.35rem; }
.wb .media-card__kicker { color: var(--wb-red-ink); font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.wb .media-card__title { font-family: var(--wb-font-h); font-size: 1.12rem; font-weight: var(--wb-t-weight); line-height: 1.12; letter-spacing: -.01em; text-transform: var(--wb-h-case); font-stretch: var(--wb-h-stretch); }
.wb .media-card__meta { color: var(--wb-faint); font-size: .88rem; }
.wb .media-card__text { color: var(--wb-text); font-size: .95rem; line-height: 1.5; }
.wb .media-card__more { margin-top: auto; padding-top: .5rem; color: var(--wb-red-ink); font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.wb .card-grid--list .media-card { flex-direction: row; }
.wb .card-grid--list .media-card__art { flex: 0 0 38%; aspect-ratio: auto; min-height: 150px; }
@container (max-width: 520px) {
  .wb .card-grid--list .media-card { flex-direction: column; }
  .wb .card-grid--list .media-card__art { flex-basis: auto; aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 560px) {
  .wb .card-grid--list .media-card { flex-direction: column; }
  .wb .card-grid--list .media-card__art { flex-basis: auto; aspect-ratio: 16 / 9; min-height: 0; }
}
.wb .sermon-feature { display: grid; gap: 1.6rem 3rem; align-items: center; }
@media (min-width: 920px) { .wb .sermon-feature { grid-template-columns: 1.35fr 1fr; } }
@container (max-width: 760px) { .wb .sermon-feature { grid-template-columns: 1fr; } }
.wb .sermon-feature__media :is(.video-block, .media-card) { margin: 0; }
.wb .sermon-feature__title { margin: 0 0 .5rem; font-size: clamp(1.6rem, 3.4vw, 2.5rem); }
.wb .sermon-feature__title a:hover { color: var(--wb-kicker); }
.wb .sermon-feature__text .media-card__meta { display: block; margin-bottom: 1rem; color: var(--wb-fg-3); }
.wb .sermon-feature__text p:not(.kicker):not(.media-card__meta) { color: var(--wb-fg-2); }
.wb .sermon-feature + .card-grid { margin-top: 2.2rem; }
.wb .feed .btn-row { margin-top: 1.8rem; }
.wb .library { scroll-margin-top: 110px; }
.wb .library__count { margin: 0 0 1rem; color: var(--wb-fg-3); font-size: .92rem; font-weight: 700; }
.wb .library__empty { margin: 1rem 0; padding: 2rem; background: color-mix(in srgb, var(--wb-fg) 5%, transparent); color: var(--wb-fg-2); text-align: center; border-radius: var(--wb-radius); }
.wb .filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .9rem 1rem; margin: 0 0 1.8rem; padding: 1.1rem 1.2rem; background: var(--wb-white); color: var(--wb-ink); border: 0; border-radius: var(--wb-radius); }
.wb .filters__field { display: flex; flex: 1 1 160px; flex-direction: column; gap: .35rem; min-width: 0; }
.wb .filters__field--search { flex: 2 1 240px; }
.wb .filters__field span { font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.wb .filters :is(input[type="search"], select) { width: 100%; height: 44px; padding: 0 .8rem; border: 2px solid var(--wb-ink); border-radius: calc(var(--wb-radius) * .5); background: #fff; color: var(--wb-ink); font-size: .98rem; }
.wb .filters :is(input, select):focus { outline: none; border-color: var(--wb-flame); }
.wb .filters__check { display: inline-flex; align-items: center; gap: .5rem; height: 44px; font-size: .95rem; font-weight: 700; cursor: pointer; }
.wb .filters__check input { width: 18px; height: 18px; accent-color: var(--wb-red); }
.wb .filters__actions { display: flex; align-items: center; gap: 1rem; height: 44px; }
.wb .filters__actions .btn { height: 44px; padding-top: 0; padding-bottom: 0; }
.wb .filters__actions .text-link { font-size: .9rem; font-weight: 700; text-decoration: underline; }
.wb .chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.6rem; }
.wb .chip { padding: .5rem 1rem; border: 2px solid color-mix(in srgb, var(--wb-fg) 22%, transparent); border-radius: 999px; background: transparent; color: var(--wb-fg); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: all .15s; }
.wb .chip:hover { border-color: var(--wb-fg); }
.wb .chip.is-active { border-color: var(--wb-fg); background: var(--wb-fg); color: var(--wb-fg-inv); }
.wb .pager { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: 2.4rem; padding: 0; border: 0; }
.wb :is(.pager__link, .pager__gap) { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .9rem; font-size: .88rem; font-weight: 800; }
.wb .pager__link { border: 2px solid color-mix(in srgb, var(--wb-fg) 20%, transparent); border-radius: calc(var(--wb-radius) * .5); }
.wb .pager__link:hover { border-color: var(--wb-fg); }
.wb .pager__link.is-current { border-color: var(--wb-fg); background: var(--wb-fg); color: var(--wb-fg-inv); }
.wb .group-card { display: flex; flex-direction: column; gap: .55rem; padding: 1.5rem 1.4rem; border-top: 4px solid var(--wb-red); background: var(--wb-white); color: var(--wb-ink); border-radius: 0 0 var(--wb-radius) var(--wb-radius); transition: transform .2s ease, box-shadow .2s ease; }
.wb .group-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0, 0, 0, .12); }
.wb .group-card__type { color: var(--wb-red-ink); font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.wb .group-card__title { font-family: var(--wb-font-h); font-size: 1.2rem; font-weight: var(--wb-t-weight); line-height: 1.1; text-transform: var(--wb-h-case); font-stretch: var(--wb-h-stretch); }
.wb .group-card__facts { display: flex; flex-wrap: wrap; gap: .3rem .9rem; color: var(--wb-text); font-size: .9rem; font-weight: 600; }
.wb .group-card__facts span + span::before { content: '·'; margin-right: .9rem; color: var(--wb-muted); }
.wb .group-card__text { color: var(--wb-text); font-size: .95rem; line-height: 1.5; }
.wb :is(.group-card__more, .group-card__status) { margin-top: auto; padding-top: .4rem; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.wb .group-card__more { color: var(--wb-red-ink); }
.wb .group-card__status { color: var(--wb-muted); }
.wb .share { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.wb .share__label { margin-right: .3rem; color: var(--wb-fg-3); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.wb .share a, .wb .share__copy { display: inline-flex; align-items: center; height: 36px; padding: 0 .85rem; border: 2px solid color-mix(in srgb, var(--wb-fg) 16%, transparent); background: none; color: var(--wb-fg); font-size: .8rem; font-weight: 700; cursor: pointer; }
.wb .share a:hover, .wb .share__copy:hover { border-color: var(--wb-fg); }
.wb .share__copy.is-done { border-color: var(--wb-red); color: var(--wb-kicker); }

/* ── Interactive: questions, tabs, slideshow, stories, countdown, numbers, quote, audio, map ── */
.wb :is(.feed, .library, .faq, .tabs, .slider, .stories, .countdown, .stats, .quote-block, .audio-block, .map-block, .calendar, .signup, .campaign) { margin-top: 2rem; }
.wb .container > :is(.feed, .library, .faq, .tabs, .slider, .stories, .countdown, .stats, .quote-block, .audio-block, .map-block, .calendar, .signup, .campaign):first-child { margin-top: 0; }
.wb .feed > .card-grid:first-child { margin-top: 0; }

.wb .faq { max-width: 900px; }
.wb :is(.u-center, .text-center) .faq { margin-left: auto; margin-right: auto; text-align: left; }
.wb .faq__item { border-bottom: 1px solid var(--wb-line); }
.wb .faq--lines .faq__item:first-child { border-top: 2px solid currentColor; }
.wb .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.15rem 0; font-size: 1.12rem; font-weight: 700; line-height: 1.3; cursor: pointer; list-style: none; }
.wb .faq__q::-webkit-details-marker { display: none; }
.wb .faq__q::marker { content: ""; }
.wb .faq__q:hover { color: var(--wb-kicker); }
.wb .faq__icon { position: relative; flex: none; width: 22px; height: 22px; }
.wb .faq__icon::before, .wb .faq__icon::after { content: ''; position: absolute; top: 10px; left: 3px; width: 16px; height: 2.5px; background: currentColor; transition: transform .2s ease; }
.wb .faq__icon::after { transform: rotate(90deg); }
.wb details[open] > .faq__q .faq__icon::after { transform: rotate(0deg); }
.wb .faq__a { max-width: none; padding: 0 2.6rem 1.3rem 0; }
.wb .faq__a p { font-size: 1.02rem; }
.wb .faq__a > :last-child { margin-bottom: 0; }
.wb .faq--cards .faq__item { margin-bottom: .7rem; padding: 0 1.3rem; border: 0; background: var(--wb-white); color: var(--wb-ink); border-radius: var(--wb-radius); --wb-fg: var(--wb-ink); --wb-fg-2: var(--wb-text-soft); --wb-kicker: var(--wb-red-ink); }

.wb .tabs { display: block; gap: 0; margin-bottom: 0; overflow: visible; border: 0; }
.wb .tabs__list { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin-bottom: 1.8rem; border-bottom: 2px solid var(--wb-line); }
.wb .tabs--center .tabs__list { justify-content: center; }
.wb .tabs__tab { position: relative; padding: .8rem 0; border: 0; background: none; color: inherit; font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .6; cursor: pointer; }
.wb .tabs__tab:hover, .wb .tabs__tab[aria-selected="true"] { opacity: 1; }
.wb .tabs--underline .tabs__tab[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--wb-kicker); }
.wb .tabs--pills .tabs__list { gap: .5rem; border: 0; }
.wb .tabs--pills .tabs__tab { padding: .65rem 1.2rem; border: 2px solid color-mix(in srgb, var(--wb-fg) 22%, transparent); border-radius: 999px; opacity: 1; }
.wb .tabs--pills .tabs__tab[aria-selected="true"] { border-color: var(--wb-fg); background: var(--wb-fg); color: var(--wb-fg-inv); }
.wb .tabs--boxed .tabs__list { gap: 2px; margin-bottom: 0; border: 0; }
.wb .tabs--boxed .tabs__tab { padding: .9rem 1.3rem; background: color-mix(in srgb, var(--wb-fg) 7%, transparent); opacity: 1; }
.wb .tabs--boxed .tabs__tab[aria-selected="true"] { background: var(--wb-white); color: var(--wb-ink); }
.wb .tabs--boxed .tabs__panel { padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--wb-white); color: var(--wb-ink); --wb-fg: var(--wb-ink); --wb-fg-2: var(--wb-text-soft); --wb-kicker: var(--wb-red-ink); --wb-hl: var(--wb-red-ink); }
.wb .tabs__panel:focus-visible { outline-offset: 6px; }
.wb .tabs__panel--photo { display: grid; gap: 1.6rem 2.6rem; align-items: center; }
@container (min-width: 760px) { .wb .tabs__panel--photo { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .wb .container > .tabs .tabs__panel--photo { grid-template-columns: 1fr 1fr; } }
.wb .tabs__heading { margin: 0 0 .9rem; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.wb .tabs__text .prose { max-width: 60ch; }
.wb .tabs__text .btn-row { margin-top: 1.2rem; }
.wb .tabs__photo { overflow: hidden; border-radius: var(--wb-img-radius); }
.wb .tabs__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.wb .tabs__edit-label { margin: 1.4rem 0 .6rem; padding-top: .8rem; border-top: 1px dashed var(--wb-line); color: var(--wb-fg-3); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.wb .slider { position: relative; overflow: hidden; border-radius: var(--wb-img-radius); }
.wb .slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.wb .slider__track::-webkit-scrollbar { display: none; }
.wb .slider__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.wb .slider .slider__slide { display: flex; align-items: flex-end; min-height: var(--slide-h, 460px); background: var(--wb-dark); color: #fff; }
.wb .slider--h-sm { --slide-h: 320px; }
.wb .slider--h-lg { --slide-h: 620px; }
.wb .slider--h-screen { --slide-h: 88svh; }
.wb .slider__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wb .slider .slider__slide::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8, 8, 10, .05) 30%, rgba(8, 8, 10, .75)); pointer-events: none; }
.wb .slider--o-none .slider__slide::after { display: none; }
.wb .slider--o-strong .slider__slide::after { background: rgba(8, 8, 10, .62); }
.wb .slider__content { position: relative; z-index: 2; width: 100%; max-width: 760px; padding: clamp(1.6rem, 4vw, 3.2rem) clamp(1.4rem, 5vw, 4rem) clamp(3.4rem, 6vw, 4.4rem); }
.wb .slider--center .slider__slide { align-items: center; justify-content: center; text-align: center; }
.wb .slider--center .slider__content { margin: 0 auto; }
.wb .slider .slider__heading { max-width: 18ch; margin: 0 0 .8rem; color: #fff; font-size: clamp(1.9rem, 4.6vw, 3.4rem); }
.wb .slider--center .slider__heading, .wb .slider--center .slider__text { margin-left: auto; margin-right: auto; }
.wb .slider__text { max-width: 52ch; margin: 0 0 1.2rem; color: rgba(255, 255, 255, .88); font-size: 1.05rem; }
.wb .slider__actions { margin: 1.3rem 0 0; }
.wb .slider__arrow { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 46px; height: 46px; margin-top: -23px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--wb-dark); box-shadow: 0 4px 16px rgba(0, 0, 0, .25); cursor: pointer; transition: background .15s, color .15s; }
.wb .slider__arrow:hover { background: var(--wb-red); color: var(--wb-on-red); }
.wb .slider__arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wb .slider__arrow--prev { left: 1rem; }
.wb .slider__arrow--next { right: 1rem; }
/* The dot is drawn inside a 24px button, so it is easy to hit on a phone, where the arrows are hidden (WCAG 2.5.8). */
.wb .slider__dots { position: absolute; left: 0; right: 0; bottom: .7rem; z-index: 3; display: flex; justify-content: center; gap: 0; }
.wb .slider__dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.wb .slider__dot::before { content: ''; position: absolute; inset: 7px; border: 2px solid #fff; border-radius: 50%; }
.wb .slider__dot[aria-current="true"]::before { background: #fff; }
.wb .slider__toggle { position: absolute; z-index: 4; right: 1rem; bottom: .6rem; }
@media (max-width: 640px) { .wb .slider__arrow { display: none; } }

.wb .stories { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.wb .story { display: flex; flex-direction: column; gap: 1.2rem; margin: 0; padding: clamp(1.4rem, 3vw, 2rem); background: var(--wb-white); color: var(--wb-ink); border-radius: var(--wb-radius); }
.wb .story__quote { margin: 0; }
.wb .story__quote p { margin: 0; font-size: 1.12rem; font-weight: 500; line-height: 1.55; color: inherit; }
.wb .story__quote p::before { content: '“'; display: block; height: .55em; margin-bottom: .2rem; color: var(--wb-red); font-family: var(--wb-font-h); font-size: 3.4rem; font-weight: 800; line-height: 1; }
.wb .story__who { display: flex; align-items: center; gap: .85rem; margin-top: auto; }
.wb .story__who strong { display: block; font-size: .95rem; font-weight: 800; }
.wb .story__role { display: block; color: var(--wb-faint); font-size: .88rem; }
.wb .story__photo { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.wb .stories--dark .story, .wb.section--dark .stories--auto .story, .wb .section--dark .stories--auto .story { background: color-mix(in srgb, var(--wb-dark) 88%, #fff); color: #fff; }
.wb .stories--slate .story, .wb.section--slate .stories--auto .story, .wb .section--slate .stories--auto .story { background: var(--wb-slate-2); color: #fff; }
.wb .stories--dark .story { background: var(--wb-dark); }
.wb :is(.stories--dark, .stories--slate) .story__role, .wb:is(.section--dark, .section--slate) .stories--auto .story__role { color: rgba(255, 255, 255, .65); }
.wb .stories--dark .story__quote p::before, .wb.section--dark .stories--auto .story__quote p::before, .wb.section--slate .stories--auto .story__quote p::before { color: var(--wb-flame-on-dark); }
.wb .stories--slider { display: block; position: relative; overflow: hidden; border-radius: var(--wb-radius); }
.wb .stories--slider .story { min-height: 100%; padding-bottom: 3.6rem; border-radius: 0; }
.wb .stories--slider .story__quote p { max-width: 58ch; font-size: clamp(1.15rem, 2.2vw, 1.45rem); }
.wb .stories--slider .slider__dot::before { border-color: var(--wb-red); }
.wb .stories--slider .slider__dot[aria-current="true"]::before { background: var(--wb-red); }
.wb .stories--slider .slider__arrow { top: auto; bottom: .7rem; margin: 0; width: 40px; height: 40px; box-shadow: none; background: rgba(0, 0, 0, .06); }
.wb .stories--slider .slider__arrow--prev { left: auto; right: 3.6rem; }
.wb .stories--slider .slider__arrow--next { right: 1rem; }
.wb .stories--slider .slider__dots { justify-content: flex-start; left: clamp(1rem, 3vw, 1.6rem); bottom: .9rem; }

.wb .countdown__heading { margin: 0 0 1.1rem; font-size: clamp(1.4rem, 3vw, 2rem); }
.wb .countdown__clock { display: flex; flex-wrap: wrap; gap: .7rem; }
.wb :is(.u-center .countdown__clock, .countdown.u-center .countdown__clock) { justify-content: center; }
.wb :is(.u-right .countdown__clock, .countdown.u-right .countdown__clock) { justify-content: flex-end; }
.wb .countdown__unit { display: flex; flex-direction: column; align-items: center; min-width: 5.2rem; }
.wb .countdown__unit strong { font-family: var(--wb-font-h); font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; font-stretch: var(--wb-h-stretch); }
.wb .countdown__unit span { margin-top: .45rem; font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.wb .countdown--boxes .countdown__unit { padding: 1rem .9rem .8rem; background: var(--wb-dark); color: #fff; border-radius: calc(var(--wb-radius) * .6); }
.wb.section--dark .countdown--boxes .countdown__unit, .wb :is(.section--dark, .box--on-dark) .countdown--boxes .countdown__unit { background: rgba(255, 255, 255, .1); }
.wb.section--red .countdown--boxes .countdown__unit, .wb :is(.section--red, .box--bg-red) .countdown--boxes .countdown__unit { background: rgba(0, 0, 0, .25); }
.wb .countdown--plain .countdown__unit { min-width: 4.6rem; }
.wb .countdown__done { margin: 0; font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 800; text-transform: uppercase; }
.wb .countdown__actions { margin: 1.4rem 0 0; }

.wb .stats { display: grid; gap: 1.8rem 1.5rem; margin-bottom: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.wb .stat { display: block; padding: 0; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; }
.wb .stat__value { display: block; font-family: var(--wb-font-h); font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; font-stretch: var(--wb-h-stretch); }
.wb .stats--c-red .stat__value { color: var(--wb-kicker); }
.wb .stats--c-flame .stat__value { color: var(--wb-flame); }
.wb.section--red .stats--c-red .stat__value, .wb :is(.section--red, .box--bg-red) .stats--c-red .stat__value { color: var(--wb-on-red); }
.wb .stat__label { display: block; margin-top: .55rem; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.wb .stat__text { margin: .45rem 0 0; color: var(--wb-fg-2); font-size: .95rem; }

.wb .quote-block { margin-left: 0; margin-right: 0; }
.wb .quote-block blockquote { margin: 0; padding: 0; border: 0; }
.wb .quote-block blockquote p { margin: 0; color: inherit; font-weight: 700; line-height: 1.3; }
.wb .quote-block figcaption { margin-top: 1rem; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.wb .quote-block figcaption::before { content: '— '; }
.wb .quote-block--large blockquote p { font-family: var(--wb-font-h); font-size: clamp(1.5rem, 3.4vw, 2.4rem); letter-spacing: -.01em; }
.wb .quote-block--large blockquote p::before { content: '“'; display: block; height: .5em; color: var(--wb-kicker); font-size: 2.2em; font-weight: 800; line-height: 1; }
.wb .quote-block--line { padding-left: 1.4rem; border-left: 4px solid var(--wb-red); }
.wb .quote-block--line blockquote p { font-size: clamp(1.2rem, 2.4vw, 1.55rem); }
.wb .quote-block--card { padding: clamp(1.5rem, 4vw, 2.4rem); background: var(--wb-dark); color: #fff; border-radius: var(--wb-radius); }
.wb .quote-block--card blockquote p { font-size: clamp(1.25rem, 2.6vw, 1.7rem); }
.wb .quote-block--card figcaption { color: var(--wb-flame-on-dark); opacity: 1; }
.wb .quote-block.u-center blockquote p::before { margin-left: auto; margin-right: auto; }

.wb .audio-block { display: flex; flex-direction: column; gap: .8rem; padding: 1.2rem 1.3rem; background: var(--wb-white); color: var(--wb-ink); border-radius: var(--wb-radius); }
.wb .audio-block__title { display: block; font-size: 1.05rem; font-weight: 800; }
.wb .audio-block__text { margin: .3rem 0 0; color: var(--wb-text); font-size: .95rem; }
.wb .audio-block audio { width: 100%; }
.wb .audio-block__download { align-self: flex-start; font-size: .85rem; font-weight: 700; text-decoration: underline !important; }

.wb .map-block { position: relative; overflow: hidden; background: var(--wb-light); border-radius: var(--wb-img-radius); }
.wb .map-block iframe { display: block; width: 100%; height: 380px; border: 0; }
.wb .map-block--sm iframe { height: 260px; }
.wb .map-block--lg iframe { height: 520px; }
.wb .map-block--gray iframe { filter: grayscale(1) contrast(1.05); }
.wb .map-block__btn { position: absolute; left: 1rem; bottom: 1rem; box-shadow: 0 4px 16px rgba(0, 0, 0, .25) !important; }

/* ── Events: calendar, countdowns ───────────────────────────────────────────
   The event calendar (.calendar), the next event countdown (.evc), live "starts in …" chips (.evc-chip) and the upcoming
   events list layout. Markup contract and class names: docs/CALENDAR.md. Everything reads the --cal-* tokens below,
   which follow the theme (--wb-*) and switch to a light-on-dark set inside dark and slate tones; skins refine them. */
.wb :is(.calendar, .evc, .evc-chip, .events) {
  --cal-surface: var(--wb-white);
  --cal-surface-2: color-mix(in srgb, var(--wb-ink) 3.5%, var(--wb-white));
  --cal-ink: var(--wb-ink);
  --cal-ink-2: var(--wb-text);
  --cal-muted: var(--wb-faint);
  --cal-line: color-mix(in srgb, var(--wb-ink) 11%, transparent);
  --cal-accent: var(--wb-red);
  --cal-on-accent: var(--wb-on-red);
  --cal-accent-ink: var(--wb-red-ink);
  --cal-radius: min(var(--wb-radius), 18px);
  --cal-chip-radius: min(var(--wb-radius), 6px);
  --cal-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 22px 44px -28px rgba(15, 23, 42, .32);
  --cal-font-h: var(--wb-font-h);
  --cal-blue: #2563eb; --cal-purple: #7c3aed; --cal-pink: #db2777; --cal-amber: #d97706; --cal-green: #15803d; --cal-teal: #0f766e; --cal-gray: #64748b;
  --cal-live: #b91c1c; --cal-soon: #92400e;
  --cal-tone: var(--cal-gray);
}
.wb:is(.section--dark, .section--slate, .hero, .page-hero) :is(.calendar, .evc-chip, .events),
.wb :is(.section--dark, .section--slate, .box--on-dark, .el--on-dark) :is(.calendar, .evc-chip, .events),
.wb :is(.event--featured, .evc--dark, .evc--accent) .evc-chip, .wb :is(.section--dark, .section--slate, .box--on-dark, .el--on-dark) .evc--glass .evc-chip {
  --cal-surface: rgba(255, 255, 255, .045);
  --cal-surface-2: rgba(255, 255, 255, .075);
  --cal-ink: #fff; --cal-ink-2: rgba(255, 255, 255, .84); --cal-muted: rgba(255, 255, 255, .66);
  --cal-line: rgba(255, 255, 255, .15);
  --cal-accent-ink: var(--wb-flame-on-dark);
  --cal-shadow: none;
  --cal-blue: #8ab4ff; --cal-purple: #c4a8ff; --cal-pink: #f9a8d4; --cal-amber: #fcd34d; --cal-green: #86efac; --cal-teal: #5eead4; --cal-gray: #cbd5e1;
  --cal-live: #fca5a5; --cal-soon: #fcd34d;
}
.wb [data-tone="blue"] { --cal-tone: var(--cal-blue); }
.wb [data-tone="purple"] { --cal-tone: var(--cal-purple); }
.wb [data-tone="pink"] { --cal-tone: var(--cal-pink); }
.wb [data-tone="amber"] { --cal-tone: var(--cal-amber); }
.wb [data-tone="green"] { --cal-tone: var(--cal-green); }
.wb [data-tone="teal"] { --cal-tone: var(--cal-teal); }
.wb [data-tone="gray"] { --cal-tone: var(--cal-gray); }
.wb :is(.calendar, .evc, .events) .sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wb :is(.calendar, .evc) [hidden] { display: none !important; }
.wb :is(.calendar, .evc, .evc-chip) :is(svg) { flex: none; }

/* Calendar: bar, filters */
.wb .calendar { position: relative; scroll-margin-top: calc(var(--ws-header-h, 72px) + 1.5rem); }
.wb .calendar__featured { margin: 0 0 clamp(1.6rem, 3vw, 2.2rem); }
.wb .calendar__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; margin: 0 0 1.1rem; }
.wb .calendar__kicker { margin: 0 0 .45rem; color: var(--wb-kicker); font-size: .72rem; font-weight: var(--wb-label-weight); letter-spacing: .16em; line-height: 1.2; text-transform: uppercase; }
.wb .calendar__title { margin: 0; font-family: var(--cal-font-h); font-size: clamp(1.75rem, 3.6vw, 2.6rem); line-height: 1; letter-spacing: -.015em; }
.wb .calendar__year { color: var(--wb-fg-3); }
.wb .calendar__controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
/* The pager does not clip (focus rings stay whole); its end controls take its rounded corners instead. */
.wb .calendar__pager { display: inline-flex; align-items: stretch; border: 1px solid var(--cal-line); border-radius: var(--wb-btn-radius); background: var(--cal-surface); color: var(--cal-ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.wb .calendar__pager > :first-child { border-start-start-radius: inherit; border-end-start-radius: inherit; }
.wb .calendar__pager > :last-child { border-start-end-radius: inherit; border-end-end-radius: inherit; }
.wb .calendar__pager > :focus-visible { position: relative; z-index: 1; }
.wb .calendar__nav { display: grid; place-items: center; width: 44px; height: 44px; color: inherit; transition: background-color .15s; }
.wb a.calendar__nav:hover, .wb .calendar__today:hover { background: var(--cal-surface-2); }
.wb .calendar__nav--off { opacity: .3; }
.wb .calendar__today { display: inline-flex; align-items: center; padding: 0 1.05rem; border-inline: 1px solid var(--cal-line); color: inherit; font-size: .86rem; font-weight: 700; letter-spacing: .01em; transition: background-color .15s; }
.wb .calendar__today.is-current { color: var(--cal-accent-ink); }
.wb .calendar__views { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--cal-line); border-radius: var(--wb-btn-radius); background: var(--cal-surface-2); }
.wb .calendar__view { display: inline-flex; align-items: center; gap: .45rem; height: 36px; padding: 0 .95rem; border-radius: var(--wb-btn-radius); color: var(--cal-ink-2); font-size: .86rem; font-weight: 600; transition: background-color .15s, color .15s, box-shadow .15s; }
.wb .calendar__view svg { width: 16px; height: 16px; opacity: .8; }
.wb .calendar__view:hover { color: var(--cal-ink); }
.wb .calendar__view.is-active { background: var(--wb-white); color: var(--wb-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .14), 0 0 0 1px rgba(15, 23, 42, .04); }
.wb .calendar__filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.wb .calendar__filter { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: .3rem .95rem; border: 1px solid var(--cal-line); border-radius: 999px; background: var(--cal-surface); color: var(--cal-ink-2); font-size: .85rem; font-weight: 600; line-height: 1.2; transition: border-color .15s, background-color .15s, color .15s; }
.wb .calendar__filter:hover { border-color: color-mix(in srgb, var(--cal-tone) 60%, var(--cal-line)); color: var(--cal-ink); }
.wb .calendar__filter.is-active { border-color: var(--cal-tone); background: color-mix(in srgb, var(--cal-tone) 14%, var(--cal-surface)); color: var(--cal-ink); }
.wb .calendar__filter.is-active:not([data-tone]) { border-color: var(--cal-ink); background: var(--cal-ink); color: var(--wb-white); }
.wb :is(.section--dark, .section--slate, .box--on-dark, .el--on-dark) .calendar__filter.is-active:not([data-tone]), .wb:is(.section--dark, .section--slate) .calendar__filter.is-active:not([data-tone]) { color: var(--wb-dark); }
.wb .calendar__dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--cal-tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-tone) 18%, transparent); }
@media (pointer: coarse) {
  .wb .calendar__filter { min-height: 44px; }
  .wb .calendar__view { height: 44px; }
  .wb .event--row .btn { min-height: 44px; }
  .wb .calendar__pop-facts a { display: inline-flex; align-items: center; min-height: 44px; }
  .wb .calendar__pop-facts li:has(> a) { align-items: center; }
  .wb .calendar__pop-facts li:has(> a) svg { margin-top: 0; }
}
/* Phones: the category chips scroll sideways in one row instead of stacking. */
@media (max-width: 640px) {
  .wb .calendar__filters { flex-wrap: nowrap; margin-inline: calc(var(--wb-gutter, 1rem) * -1); margin-top: -6px; padding: 6px var(--wb-gutter, 1rem) .5rem; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: var(--wb-gutter, 1rem); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--wb-gutter, 1rem), #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 var(--wb-gutter, 1rem), #000 calc(100% - 2.5rem), transparent); }
  .wb .calendar__filters::-webkit-scrollbar { display: none; }
  .wb .calendar__filter { flex: none; white-space: nowrap; }
}

/* Calendar: the month grid */
.wb .calendar__body { position: relative; }
.wb .calendar__grid { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; border: 1px solid var(--cal-line); border-radius: var(--cal-radius); background: var(--cal-surface); color: var(--cal-ink); box-shadow: var(--cal-shadow); overflow: hidden; }
.wb .calendar__dow { padding: .85rem .8rem .7rem; border-bottom: 1px solid var(--cal-line); background: var(--cal-surface-2); color: var(--cal-muted); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-align: left; text-transform: uppercase; }
.wb .calendar__dow abbr { text-decoration: none; border: 0; cursor: default; }
.wb .calendar__day { position: relative; height: 132px; padding: .45rem .5rem .55rem; border-right: 1px solid var(--cal-line); border-bottom: 1px solid var(--cal-line); vertical-align: top; transition: background-color .15s; }
.wb .calendar__day:last-child { border-right: 0; }
.wb .calendar__week:last-child .calendar__day { border-bottom: 0; }
.wb .calendar__day.is-other { background: var(--cal-surface-2); }
.wb .calendar__day.is-other .calendar__num { color: var(--cal-muted); font-weight: 500; }
.wb .calendar__day.is-today { background: color-mix(in srgb, var(--cal-accent) 5%, transparent); }
.wb .calendar__day.has-events:not(.is-today):hover { background: color-mix(in srgb, var(--cal-ink) 2.5%, transparent); }
.wb .calendar__day:focus-visible { outline: 3px solid var(--wb-ring, var(--wb-flame)); outline-offset: -3px; }
.wb .calendar__day-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 .35rem; }
.wb .calendar__num { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 .35rem; border-radius: 999px; font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.wb .calendar__day.is-today .calendar__num { background: var(--cal-accent); color: var(--cal-on-accent); font-weight: 700; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--cal-accent) 70%, transparent); }
.wb .calendar__events { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.wb .calendar__events > li { min-width: 0; margin: 0; padding: 0; }
.wb .calendar__event {
  display: flex; align-items: baseline; gap: .35rem; min-width: 0; padding: .3rem .5rem .3rem .6rem; overflow: hidden;
  border-radius: var(--cal-chip-radius); background: color-mix(in srgb, var(--cal-tone) 13%, transparent); box-shadow: inset 3px 0 0 var(--cal-tone);
  color: var(--cal-ink); font-size: .78rem; font-weight: 600; line-height: 1.3; white-space: nowrap; transition: background-color .15s, box-shadow .15s;
}
.wb .calendar__event:hover { background: color-mix(in srgb, var(--cal-tone) 24%, transparent); }
.wb .calendar__time { flex: none; color: color-mix(in srgb, var(--cal-tone) 55%, var(--cal-ink)); font-weight: 700; font-variant-numeric: tabular-nums; }
.wb .calendar__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wb .calendar__event:is(.is-allday, .is-multi) { background: color-mix(in srgb, var(--cal-tone) 22%, transparent); box-shadow: none; }
.wb .calendar__event:is(.is-allday, .is-multi):hover { background: color-mix(in srgb, var(--cal-tone) 32%, transparent); }
.wb .calendar__event.is-span-start { margin-right: -.5rem; border-start-end-radius: 0; border-end-end-radius: 0; box-shadow: inset 3px 0 0 var(--cal-tone); }
.wb .calendar__event.is-span-mid { margin-inline: -.5rem; border-radius: 0; }
.wb .calendar__event.is-span-end { margin-left: -.5rem; border-start-start-radius: 0; border-end-start-radius: 0; }
.wb .calendar__event:is(.is-span-mid, .is-span-end) .calendar__name { opacity: .72; }
.wb .calendar__day:first-child .calendar__event:is(.is-span-mid, .is-span-end) .calendar__name { opacity: 1; }
.wb .calendar__day:last-child .calendar__event:is(.is-span-start, .is-span-mid) { margin-right: 0; }
.wb .calendar__day:first-child .calendar__event:is(.is-span-mid, .is-span-end) { margin-left: 0; }
/* Finished events step back by colour, not opacity, so their text keeps 4.5:1: a paler tint and bar, quieter text. */
.wb .calendar__event.is-past { background: color-mix(in srgb, var(--cal-tone) 6%, transparent); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--cal-tone) 38%, transparent); color: var(--cal-ink-2); }
.wb .calendar__event.is-past .calendar__time { color: var(--cal-ink-2); font-weight: 600; }
.wb .calendar__event.is-past:is(.is-allday, .is-multi) { background: color-mix(in srgb, var(--cal-tone) 11%, transparent); }
.wb .calendar__event.is-past:is(.is-span-mid, .is-span-end, .is-allday) { box-shadow: none; }
.wb .calendar__event.is-past:hover { background: color-mix(in srgb, var(--cal-tone) 16%, transparent); color: var(--cal-ink); }
/* A free lane: an invisible chip that keeps a multi-day bar in the same row all week. */
.wb .calendar__gap { visibility: hidden; pointer-events: none; }
.wb .calendar__event.is-live .calendar__time::before, .wb .calendar__item.is-live .calendar__item-time::before {
  content: ''; display: inline-block; width: .45rem; height: .45rem; margin-right: .3rem; border-radius: 50%; background: var(--cal-live); vertical-align: .08em; animation: cal-pulse 1.6s ease-out infinite;
}
.wb .calendar__more { display: inline-flex; align-items: center; margin: 4px 0 0; padding: .2rem .5rem; border-radius: var(--cal-chip-radius); color: var(--cal-ink-2); font-size: .76rem; font-weight: 700; transition: background-color .15s, color .15s; }
.wb .calendar__more:hover { background: var(--cal-surface-2); color: var(--cal-ink); }

/* Calendar: agenda (phones, the list view and the month view's fallback) */
.wb .calendar__agenda { display: none; margin: 0; padding: 0; list-style: none; border: 1px solid var(--cal-line); border-radius: var(--cal-radius); background: var(--cal-surface); color: var(--cal-ink); box-shadow: var(--cal-shadow); overflow: hidden; }
.wb .calendar--list .calendar__agenda { display: block; }
.wb .calendar__agenda-day { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 1rem; margin: 0; padding: 1.15rem 1.2rem; border-bottom: 1px solid var(--cal-line); }
.wb .calendar__agenda-day:last-child { border-bottom: 0; }
.wb .calendar__agenda-date { display: flex; flex-direction: column; align-items: center; padding-top: .1rem; line-height: 1; text-align: center; }
.wb .calendar__agenda-dow { color: var(--cal-muted); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.wb .calendar__agenda-num { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; margin: .25rem 0 .2rem; border-radius: 50%; font-family: var(--cal-font-h); font-size: 1.55rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wb .calendar__agenda-mon { color: var(--cal-accent-ink); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.wb .calendar__agenda-day.is-today .calendar__agenda-num { background: var(--cal-accent); color: var(--cal-on-accent); font-size: 1.3rem; }
.wb .calendar__agenda-day.is-past .calendar__agenda-num { color: var(--cal-muted); }
.wb .calendar__agenda-main { min-width: 0; }
.wb .calendar__agenda-items { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.wb .calendar__item { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 0; padding: .8rem .95rem .8rem 1.1rem; border-radius: calc(var(--cal-radius) * .6); background: color-mix(in srgb, var(--cal-tone) 8%, transparent); box-shadow: inset 3px 0 0 var(--cal-tone); transition: background-color .15s; }
.wb .calendar__item:hover { background: color-mix(in srgb, var(--cal-tone) 14%, transparent); }
.wb .calendar__item-link { display: grid; flex: 1 1 13rem; gap: .2rem; min-width: 0; color: inherit; }
.wb .calendar__item-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.wb .calendar__item-link:focus-visible { outline: 0; }
.wb .calendar__item:has(.calendar__item-link:focus-visible) { outline: 3px solid var(--wb-ring, var(--wb-flame)); outline-offset: 2px; }
.wb .calendar__item-time { color: color-mix(in srgb, var(--cal-tone) 55%, var(--cal-ink)); font-size: .8rem; font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.wb .calendar__item-title { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.wb .calendar__item-meta { color: var(--cal-ink-2); font-size: .9rem; }
.wb .calendar__item.is-past .calendar__item-title { color: var(--cal-ink-2); }
.wb .calendar__item .evc-chip { position: relative; }
/* Empty month: the message comes first, above a shorter empty grid. */
.wb .calendar__empty { margin: 0 0 1rem; padding: 1.5rem 1.25rem; border: 1px dashed var(--cal-line); border-radius: var(--cal-radius); color: var(--wb-fg-2); font-size: .98rem; text-align: center; }
.wb .calendar__empty p { margin: 0; }
.wb .calendar__jump { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; margin-top: .35rem; color: var(--wb-fg); font-weight: 700; text-decoration: underline; text-decoration-color: var(--wb-kicker); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.wb .calendar.is-empty .calendar__day { height: 72px; }
/* This month: the days already gone fold under "Earlier this month" (a <details>), so the agenda opens on today. */
.wb .calendar__agenda-earlier { margin: 0; border-bottom: 1px solid var(--cal-line); }
.wb .calendar__earlier > summary { display: flex; align-items: center; gap: .7rem; min-height: 50px; padding: .7rem 1.2rem; color: var(--cal-ink-2); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; list-style: none; cursor: pointer; transition: background-color .15s, color .15s; }
.wb .calendar__earlier > summary::-webkit-details-marker { display: none; }
.wb .calendar__earlier > summary::before { content: ''; flex: none; width: .45rem; height: .45rem; margin: 0 .2rem 0 .1rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.wb .calendar__earlier[open] > summary::before { transform: translateY(-2px) rotate(45deg); }
.wb .calendar__earlier > summary:hover { background: var(--cal-surface-2); color: var(--cal-ink); }
.wb .calendar__earlier > summary:focus-visible { outline: 3px solid var(--wb-ring, var(--wb-flame)); outline-offset: -3px; }
.wb .calendar__earlier-count { margin-left: auto; color: var(--cal-muted); font-weight: 600; letter-spacing: .02em; text-transform: none; }
.wb .calendar__agenda-past { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--cal-line); background: color-mix(in srgb, var(--cal-surface-2) 55%, transparent); }
.wb .calendar__agenda-rest { margin: 0; padding: 1.3rem 1.2rem 1.1rem; color: var(--cal-ink-2); font-size: .95rem; }
.wb .calendar__agenda-rest p { margin: 0; }
.wb .calendar__agenda-rest .calendar__jump { color: var(--cal-ink); }

/* Tablets (and a box 700-999px wide): the chip puts its time above the name, and the name takes two lines. */
@media (min-width: 760px) and (max-width: 1099px) {
  .wb .calendar__event:not(.is-multi, .is-allday) { flex-direction: column; align-items: stretch; gap: .1rem; white-space: normal; }
  .wb .calendar__event:not(.is-multi, .is-allday) .calendar__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; line-height: 1.25; }
  .wb .calendar__event .calendar__time { font-size: .7rem; }
}
@container (min-width: 700px) and (max-width: 999px) {
  .wb .calendar__event:not(.is-multi, .is-allday) { flex-direction: column; align-items: stretch; gap: .1rem; white-space: normal; }
  .wb .calendar__event:not(.is-multi, .is-allday) .calendar__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; line-height: 1.25; }
  .wb .calendar__event .calendar__time { font-size: .7rem; }
}

/* Phones (and a box under 700px): a small month (a dot per event; a tap opens the day) above the agenda. The Agenda
   view is the list alone. Selectors are one step stronger than the skins' own grid rules, which are for the big grid. */
@media (max-width: 759px) {
  .wb .calendar__agenda { display: block; }
  .wb .calendar .calendar__grid + .calendar__agenda { margin-top: 1rem; }
  .wb .calendar .calendar__grid .calendar__dow { padding: .65rem 0 .55rem; font-size: .62rem; letter-spacing: .08em; text-align: center; }
  .wb .calendar .calendar__grid .calendar__day { height: auto; padding: .35rem 0 .5rem; text-align: center; }
  .wb .calendar .calendar__grid .calendar__day-head { justify-content: center; margin: 0; }
  .wb .calendar .calendar__grid .calendar__num { min-width: 32px; height: 32px; padding: 0 .25rem; font-size: .9rem; }
  .wb .calendar .calendar__grid .calendar__events { display: flex; justify-content: center; gap: 3px; min-height: 6px; margin: 4px 0 0; }
  .wb .calendar .calendar__grid .calendar__events > li { flex: none; }
  .wb .calendar .calendar__grid .calendar__events .calendar__event { display: block; width: 6px; height: 6px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--cal-tone); box-shadow: none; opacity: 1; font-size: 0; line-height: 0; }
  .wb .calendar .calendar__grid .calendar__events .calendar__event.is-past { background: color-mix(in srgb, var(--cal-tone) 45%, transparent); }
  .wb .calendar .calendar__grid .calendar__events .calendar__event > *, .wb .calendar .calendar__grid .calendar__events .calendar__event::before, .wb .calendar .calendar__grid .calendar__events .calendar__event::after { display: none; }
  .wb .calendar .calendar__grid :is(.calendar__gap, .calendar__more) { display: none; }
  .wb .calendar.is-empty .calendar__grid .calendar__day { height: auto; }
  .wb-js .wb .calendar .calendar__grid .calendar__events { pointer-events: none; }
  .wb-js .wb .calendar .calendar__grid .calendar__day.has-events { cursor: pointer; }
}
@container (max-width: 699px) {
  .wb .calendar__agenda { display: block; }
  .wb .calendar .calendar__grid + .calendar__agenda { margin-top: 1rem; }
  .wb .calendar .calendar__grid .calendar__dow { padding: .65rem 0 .55rem; font-size: .62rem; letter-spacing: .08em; text-align: center; }
  .wb .calendar .calendar__grid .calendar__day { height: auto; padding: .35rem 0 .5rem; text-align: center; }
  .wb .calendar .calendar__grid .calendar__day-head { justify-content: center; margin: 0; }
  .wb .calendar .calendar__grid .calendar__num { min-width: 32px; height: 32px; padding: 0 .25rem; font-size: .9rem; }
  .wb .calendar .calendar__grid .calendar__events { display: flex; justify-content: center; gap: 3px; min-height: 6px; margin: 4px 0 0; }
  .wb .calendar .calendar__grid .calendar__events > li { flex: none; }
  .wb .calendar .calendar__grid .calendar__events .calendar__event { display: block; width: 6px; height: 6px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--cal-tone); box-shadow: none; opacity: 1; font-size: 0; line-height: 0; }
  .wb .calendar .calendar__grid .calendar__events .calendar__event.is-past { background: color-mix(in srgb, var(--cal-tone) 45%, transparent); }
  .wb .calendar .calendar__grid .calendar__events .calendar__event > *, .wb .calendar .calendar__grid .calendar__events .calendar__event::before, .wb .calendar .calendar__grid .calendar__events .calendar__event::after { display: none; }
  .wb .calendar .calendar__grid :is(.calendar__gap, .calendar__more) { display: none; }
  .wb .calendar.is-empty .calendar__grid .calendar__day { height: auto; }
  .wb-js .wb .calendar .calendar__grid .calendar__events { pointer-events: none; }
  .wb-js .wb .calendar .calendar__grid .calendar__day.has-events { cursor: pointer; }
}
@media (max-width: 520px) {
  .wb .calendar__bar { align-items: stretch; }
  .wb .calendar__controls { width: 100%; justify-content: space-between; }
  .wb .calendar__agenda-day { grid-template-columns: 2.9rem minmax(0, 1fr); gap: .75rem; padding: 1rem .85rem; }
  .wb .calendar__view span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wb .calendar__view { width: 44px; justify-content: center; padding: 0; }
}

/* Calendar: subscribe, loading */
.wb .calendar__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.2rem; margin: 1.1rem 0 0; color: var(--wb-fg-2); font-size: .9rem; }
.wb .calendar__subscribe { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--wb-fg); font-weight: 700; }
.wb .calendar__subscribe svg { color: var(--wb-kicker); }
.wb .calendar__subscribe:hover span, .wb .calendar__subscribe-alt:hover { text-decoration: underline; text-underline-offset: 3px; }
.wb .calendar__subscribe-alt { display: inline-flex; align-items: center; min-height: 44px; color: var(--wb-fg-2); font-weight: 600; }
.wb .calendar__tz { margin-left: auto; color: var(--wb-fg-3); font-size: .84rem; }
.wb .calendar.is-loading .calendar__body { opacity: .5; pointer-events: none; transition: opacity .2s .1s; }
.wb .calendar.is-loading .calendar__bar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.6rem; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--cal-accent), transparent) 0 0 / 40% 100% no-repeat; animation: cal-load 1s linear infinite; }
.wb .calendar__bar { position: relative; }
@keyframes cal-load { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@keyframes cal-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cal-live) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 .45rem transparent; } }

/* Calendar: the event / day popover (a <dialog> built by blocks.js; it keeps the page's light surface in any tone) */
.wb .calendar__pop {
  --cal-surface: var(--wb-white); --cal-surface-2: color-mix(in srgb, var(--wb-ink) 3.5%, var(--wb-white)); --cal-ink: var(--wb-ink); --cal-ink-2: var(--wb-text);
  --cal-muted: var(--wb-faint); --cal-line: color-mix(in srgb, var(--wb-ink) 11%, transparent); --cal-accent-ink: var(--wb-red-ink);
  --cal-blue: #2563eb; --cal-purple: #7c3aed; --cal-pink: #db2777; --cal-amber: #d97706; --cal-green: #15803d; --cal-teal: #0f766e; --cal-gray: #64748b; --cal-live: #b91c1c; --cal-soon: #92400e;
  --wb-fg: var(--wb-ink); --wb-fg-inv: #fff; --wb-fg-2: var(--wb-text-soft); --wb-fg-3: var(--wb-faint); --wb-kicker: var(--wb-red-ink); --wb-ring: var(--wb-flame-ring);
  --wb-line: color-mix(in srgb, var(--wb-ink) 13%, transparent);
  width: min(420px, calc(100vw - 2rem)); max-height: min(88vh, 760px); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--cal-line); border-radius: max(var(--cal-radius), 4px); background: var(--cal-surface); color: var(--cal-ink); font-family: var(--wb-font-b); text-align: left;
  box-shadow: 0 32px 80px -24px rgba(2, 6, 23, .5), 0 12px 24px -12px rgba(2, 6, 23, .25);
}
.wb .calendar__pop[open] { animation: cal-pop .18s cubic-bezier(.2, .8, .2, 1); }
.wb .calendar__pop::backdrop { background: rgba(10, 12, 20, .42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.wb .calendar__pop.is-anchored::backdrop { background: rgba(10, 12, 20, .18); -webkit-backdrop-filter: none; backdrop-filter: none; }
.wb .calendar__pop.is-sheet { width: 100%; max-width: 100%; max-height: 88vh; margin: auto 0 0; border-width: 1px 0 0; border-radius: max(var(--cal-radius), 14px) max(var(--cal-radius), 14px) 0 0; }
.wb .calendar__pop.is-sheet[open] { animation: cal-sheet .24s cubic-bezier(.2, .8, .2, 1); }
@keyframes cal-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cal-sheet { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } }
.wb .calendar__pop-media { position: relative; aspect-ratio: 16 / 7; overflow: hidden; background:
  radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--cal-tone) 55%, #fff) 0%, transparent 55%),
  linear-gradient(135deg, color-mix(in srgb, var(--cal-tone) 78%, #0b1020), color-mix(in srgb, var(--cal-tone) 92%, #fff)); }
.wb .calendar__pop-media::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 14px); pointer-events: none; }
.wb .calendar__pop-media img { width: 100%; height: 100%; object-fit: cover; }
.wb .calendar__pop-media:has(img)::after { background: linear-gradient(180deg, rgba(0, 0, 0, .28), transparent 45%); }
.wb .calendar__pop-ph { position: absolute; left: 1.35rem; bottom: 1rem; z-index: 1; display: flex; flex-direction: column; color: #fff; line-height: 1; text-shadow: 0 1px 12px rgba(0, 0, 0, .25); }
.wb .calendar__pop-ph-day { font-family: var(--cal-font-h); font-size: 2.8rem; font-weight: 800; letter-spacing: -.02em; }
.wb .calendar__pop-ph-mon { margin-top: .3rem; font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.wb .calendar__pop-close { position: absolute; top: .6rem; right: .6rem; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(10, 12, 20, .45); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .15s; }
.wb .calendar__pop-close:hover { background: rgba(10, 12, 20, .7); }
.wb .calendar__pop-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.wb .calendar__pop--day .calendar__pop-close { background: var(--cal-surface-2); color: var(--cal-ink); }
.wb .calendar__pop-body { padding: 1.25rem 1.4rem 1.35rem; }
.wb .calendar__pop--day .calendar__pop-body { padding-top: 1.35rem; }
.wb .calendar__pop-cat { display: flex; align-items: center; gap: .5rem; margin: 0 0 .55rem; color: var(--cal-ink-2); font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.wb .calendar__pop-title { margin: 0 0 .9rem; padding-right: 2.5rem; font-family: var(--cal-font-h); font-size: clamp(1.3rem, 3vw, 1.6rem); line-height: 1.15; }
.wb .calendar__pop--event .calendar__pop-title { padding-right: 0; }
.wb .calendar__pop-title:focus { outline: 0; }
.wb .calendar__pop-facts { display: grid; gap: .55rem; margin: 0 0 1rem; padding: 0; list-style: none; color: var(--cal-ink-2); font-size: .93rem; line-height: 1.45; }
.wb .calendar__pop-facts li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: .65rem; align-items: start; margin: 0; }
.wb .calendar__pop-facts svg { width: 18px; height: 18px; margin-top: 1px; color: var(--cal-accent-ink); }
.wb .calendar__pop-facts a { color: var(--cal-ink); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--cal-ink) 30%, transparent); text-underline-offset: 3px; }
.wb .calendar__pop-facts a:hover { text-decoration-color: currentColor; }
.wb .calendar__pop-summary { margin: 0 0 1rem; color: var(--cal-ink-2); font-size: .95rem; line-height: 1.55; }
.wb .calendar__pop-countdown { margin: 0 0 1.15rem; }
.wb .calendar__pop-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.1rem; }
.wb .calendar__pop-actions .btn { min-height: 44px; }
.wb .calendar__pop-add { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.1rem; padding-top: .8rem; border-top: 1px solid var(--cal-line); font-size: .86rem; }
.wb .calendar__pop-add-label { flex-basis: 100%; color: var(--cal-muted); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.wb .calendar__pop-add a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--cal-ink); font-weight: 600; }
.wb .calendar__pop-add a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wb .calendar__pop-add svg { width: 16px; height: 16px; color: var(--cal-accent-ink); }
.wb .calendar__pop-list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.wb .calendar__pop-list li { margin: 0; }
.wb .calendar__pop-list .calendar__event { padding: .7rem .8rem .7rem .95rem; font-size: .92rem; white-space: normal; }
.wb .calendar__pop-list .calendar__event.is-span-start, .wb .calendar__pop-list .calendar__event.is-span-mid, .wb .calendar__pop-list .calendar__event.is-span-end { margin: 0; border-radius: var(--cal-chip-radius); }

/* Countdown chip: "Starts in 2d 04h 12m" · "Happening now" · "Ended" */
.wb .evc-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .75rem .32rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--cal-accent-ink) 9%, transparent); color: color-mix(in srgb, var(--cal-accent-ink) 82%, var(--cal-ink)); font-size: .78rem; font-weight: 700; line-height: 1.2; letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wb .evc-chip__dot { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.wb .evc-chip.is-soon { background: color-mix(in srgb, var(--cal-soon) 14%, transparent); color: var(--cal-soon); }
.wb .evc-chip.is-live { background: color-mix(in srgb, var(--cal-live) 12%, transparent); color: var(--cal-live); }
.wb .evc-chip.is-live .evc-chip__dot { animation: cal-pulse 1.6s ease-out infinite; }
.wb .evc-chip.is-ended { background: color-mix(in srgb, var(--cal-ink) 7%, transparent); color: var(--cal-muted); }

/* Next event countdown (.evc) */
.wb .evc {
  --evc-bg: var(--wb-dark); --evc-fg: #fff; --evc-fg-2: rgba(255, 255, 255, .74); --evc-line: rgba(255, 255, 255, .13); --evc-tile: rgba(255, 255, 255, .06);
  --evc-label: var(--wb-flame-on-dark); --evc-glow: color-mix(in srgb, var(--wb-red) 55%, transparent); --evc-digit: clamp(2.1rem, 4.6vw, 3.25rem); --evc-unit-w: 4.7rem;
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "body clock" "actions clock"; align-items: center; gap: 1.2rem 2.6rem;
  margin: 2rem 0 0; padding: clamp(1.5rem, 3.6vw, 2.5rem) clamp(1.3rem, 3.6vw, 2.75rem); overflow: hidden;
  border: 1px solid var(--evc-line); border-radius: var(--cal-radius); background: var(--evc-bg); color: var(--evc-fg); text-align: left;
}
.wb :is(.container, .box) > .evc:first-child, .wb .calendar__featured > .evc { margin-top: 0; }
.wb .evc + .evc { margin-top: 1.25rem; }
/* Buttons, focus rings and labels inside a solid countdown read on its own colour (glass keeps the tone around it). */
.wb .evc:not(.evc--glass) { --wb-fg: var(--evc-fg); --wb-fg-inv: var(--evc-bg); --wb-fg-2: var(--evc-fg-2); --wb-kicker: var(--evc-label); --wb-ring: var(--wb-flame-on-dark); }
.wb .evc::before { content: ''; position: absolute; z-index: -1; right: -12%; bottom: -70%; width: min(62%, 560px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--evc-glow), transparent); pointer-events: none; }
.wb .evc::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .05), transparent 42%); pointer-events: none; }
.wb .evc--light {
  --evc-bg: var(--wb-white); --evc-fg: var(--wb-ink); --evc-fg-2: var(--wb-text); --evc-line: color-mix(in srgb, var(--wb-ink) 11%, transparent); --evc-tile: color-mix(in srgb, var(--wb-ink) 4%, var(--wb-white));
  --evc-label: var(--wb-red-ink); --evc-glow: color-mix(in srgb, var(--wb-red) 12%, transparent);
  box-shadow: var(--cal-shadow);
}
.wb .evc.evc--light { --wb-fg-inv: #fff; --wb-ring: var(--wb-flame-ring); }
.wb .evc--light::after { display: none; }
.wb .evc--accent {
  /* Everything is drawn in the accent's own colour: tiles and the glow are deeper shades of it (a tint towards the text
     colour would eat into the text's contrast, and the flame colour turns muddy over a cool accent). */
  --evc-bg: var(--wb-red); --evc-fg: var(--wb-on-red); --evc-fg-2: var(--wb-on-red); --evc-line: color-mix(in srgb, var(--wb-on-red) 24%, transparent); --evc-tile: color-mix(in srgb, #000 14%, transparent);
  --evc-label: var(--wb-on-red); --evc-glow: color-mix(in srgb, var(--wb-red) 55%, #000); --cal-live: var(--wb-on-red); --cal-soon: var(--wb-on-red); --cal-accent-ink: var(--wb-on-red);
}
.wb .evc.evc--accent { --wb-ring: var(--wb-on-red); }
.wb .evc--accent::before { opacity: .55; }
.wb .evc--accent .evc__live { border-color: color-mix(in srgb, var(--wb-on-red) 45%, transparent); background: color-mix(in srgb, #000 16%, transparent); }
.wb .evc--glass {
  --evc-bg: color-mix(in srgb, var(--wb-fg-inv, #fff) 58%, transparent); --evc-fg: var(--wb-fg, var(--wb-ink)); --evc-fg-2: var(--wb-fg-2, var(--wb-text)); --evc-line: color-mix(in srgb, var(--wb-fg, var(--wb-ink)) 20%, transparent);
  --evc-tile: color-mix(in srgb, var(--wb-fg, var(--wb-ink)) 7%, transparent); --evc-label: var(--wb-kicker); --evc-glow: color-mix(in srgb, var(--wb-red) 22%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 24px 60px -30px rgba(2, 6, 23, .45);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .wb .evc--glass { --evc-bg: color-mix(in srgb, var(--wb-fg-inv, #fff) 88%, transparent); } }
.wb .evc--large { --evc-digit: clamp(2.6rem, 7.4vw, 5.2rem); --evc-unit-w: clamp(4.9rem, 11vw, 7.6rem); padding: clamp(2rem, 5vw, 3.6rem) clamp(1.4rem, 5vw, 3.8rem); }
.wb .evc--large .evc__title { font-size: clamp(1.8rem, 4.2vw, 3rem); }
.wb .evc.u-center { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body" "clock" "actions"; justify-items: center; text-align: center; }
.wb .evc.u-right { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "clock body" "clock actions"; text-align: right; }
.wb .evc.u-right .evc__actions { justify-content: flex-end; }
.wb .evc.u-center .evc__meta, .wb .evc.u-center .evc__actions { justify-content: center; }
.wb .evc.is-empty { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body" "actions"; }
.wb .evc__body { grid-area: body; min-width: 0; }
.wb .evc__label { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .75rem; color: var(--evc-label); font-size: .74rem; font-weight: var(--wb-label-weight); letter-spacing: .17em; line-height: 1.2; text-transform: uppercase; }
.wb .evc__pulse { display: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--cal-live); animation: cal-pulse 1.6s ease-out infinite; }
.wb .evc.is-live .evc__label .evc__pulse, .wb .evc__live .evc__pulse { display: inline-block; }
.wb .evc--accent .evc__pulse { background: var(--evc-fg); }
.wb .evc__title { margin: 0 0 .55rem; color: inherit; font-family: var(--cal-font-h); font-size: clamp(1.45rem, 3.1vw, 2.15rem); line-height: 1.08; }
.wb .evc__title a { color: inherit; }
.wb .evc__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.wb .evc__meta { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: 0; color: var(--evc-fg-2); font-size: .98rem; line-height: 1.45; }
.wb .evc__meta > span { display: inline-flex; align-items: center; gap: .45rem; }
.wb .evc__meta > span::before { content: ''; flex: none; width: 1em; height: 1em; background: currentColor; opacity: .8; -webkit-mask: var(--evc-icon) center / contain no-repeat; mask: var(--evc-icon) center / contain no-repeat; }
.wb .evc__when { --evc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.wb .evc__where { --evc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.wb .evc__empty { margin: 0; color: var(--evc-fg-2); font-size: 1.05rem; }
.wb .evc__clock { grid-area: clock; display: flex; align-items: stretch; gap: clamp(.35rem, 1vw, .6rem); }
.wb .evc.u-center .evc__clock { justify-content: center; }
.wb .evc__unit { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; min-width: var(--evc-unit-w); padding: .85rem .5rem .75rem; border: 1px solid var(--evc-line); border-radius: max(calc(var(--cal-radius) * .75), 0px); background: var(--evc-tile); overflow: hidden; }
.wb .evc__num { display: block; font-family: var(--cal-font-h); font-size: var(--evc-digit); font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
.wb .evc__num.is-tick { animation: evc-tick .42s cubic-bezier(.2, .8, .2, 1); }
.wb .evc__unit-label { color: var(--evc-fg-2); font-size: .64rem; font-weight: 700; letter-spacing: .16em; line-height: 1; text-transform: uppercase; }
.wb .evc__sep { display: none; }
@keyframes evc-tick { from { opacity: .25; transform: translateY(-22%); } to { opacity: 1; transform: none; } }
.wb .evc__live { grid-area: clock; display: inline-flex; align-items: center; gap: .75rem; margin: 0; padding: .95rem 1.4rem; border: 1px solid color-mix(in srgb, var(--cal-live) 50%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--cal-live) 14%, transparent); font-size: clamp(1.05rem, 2.3vw, 1.4rem); font-weight: 800; letter-spacing: .04em; line-height: 1.1; text-transform: uppercase; }
.wb .evc__actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: .6rem; margin: .2rem 0 0; }
.wb .evc__actions .btn { min-height: 44px; }
.wb .evc--banner { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "body clock actions"; gap: 1rem 2rem; padding: clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.2rem, 2.6vw, 1.8rem); --evc-digit: clamp(1.55rem, 2.6vw, 2.05rem); --evc-unit-w: 3.9rem; }
.wb .evc--banner .evc__title { margin-bottom: .3rem; font-size: clamp(1.15rem, 2.1vw, 1.45rem); }
.wb .evc--banner .evc__label { margin-bottom: .5rem; }
.wb .evc--banner .evc__meta { font-size: .9rem; }
.wb .evc--banner .evc__unit { padding: .6rem .35rem .55rem; gap: .4rem; }
.wb .evc--banner .evc__actions { margin: 0; }
@media (max-width: 1080px) { .wb .evc--banner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "body clock" "actions clock"; } .wb .evc--banner .evc__actions { margin-top: .2rem; } }
@media (max-width: 860px) {
  .wb .evc:not(.u-center) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body" "clock" "actions"; }
  .wb .evc.u-right { text-align: left; }
  .wb .evc.u-right .evc__actions { justify-content: flex-start; }
}
@container (max-width: 640px) { .wb .evc:not(.u-center) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body" "clock" "actions"; } }
@media (max-width: 520px) {
  .wb .evc { --evc-unit-w: 0px; --evc-digit: clamp(1.7rem, 9vw, 2.3rem); }
  .wb .evc--large { --evc-digit: clamp(2rem, 11vw, 2.9rem); }
  .wb .evc__clock { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
  .wb .evc__unit { padding: .75rem .25rem .65rem; }
  .wb .evc__unit-label { font-size: .58rem; letter-spacing: .12em; }
  .wb .evc__live { justify-self: start; }
  .wb .evc.u-center .evc__live { justify-self: center; }
}

/* Upcoming events: countdown chips, category colours and the list layout */
.wb .event__countdown { margin: -.3rem 0 .85rem; }
.wb .events--list { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.wb .event--row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.5rem; padding: 1.15rem 1.35rem; border: 1px solid var(--cal-line); border-radius: var(--cal-radius); box-shadow: var(--cal-shadow); transition: border-color .2s, transform .2s; }
.wb .event--row:hover { border-color: color-mix(in srgb, var(--cal-tone) 45%, var(--cal-line)); }
.wb .event__datebox { display: grid; justify-items: center; align-content: center; width: 4.5rem; padding: .6rem 0 .65rem; border-radius: max(calc(var(--cal-radius) * .7), 0px); background: color-mix(in srgb, var(--cal-tone) 11%, var(--wb-white)); box-shadow: inset 0 3px 0 var(--cal-tone); line-height: 1; }
.wb .event__dow { color: var(--wb-faint); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.wb .event__day { margin: .3rem 0 .22rem; color: var(--wb-ink); font-family: var(--wb-font-h); font-size: 1.85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wb .event__mon { color: var(--wb-red-ink); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.wb .event__main { min-width: 0; }
.wb .event__cat { display: flex; align-items: center; gap: .5rem; margin: 0 0 .4rem; color: var(--wb-text); font-size: .7rem; font-weight: var(--wb-label-weight); letter-spacing: .14em; text-transform: uppercase; }
.wb .event__cat .calendar__dot { width: .5rem; height: .5rem; }
.wb .event--row .event__date { margin: 0 0 .3rem; font-size: .7rem; }
.wb .event--row h3 { margin: 0 0 .3rem; font-size: clamp(1.15rem, 2.2vw, 1.45rem); }
.wb .event--row .event__place { margin: 0; font-size: .92rem; }
.wb .event--row .event__next { margin: .35rem 0 0; font-size: .82rem; }
.wb .event__side { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.wb .event__side .event__badge { margin: 0; }
@media (max-width: 640px) {
  .wb .event--row { grid-template-columns: auto minmax(0, 1fr); padding: 1rem; gap: .85rem 1rem; }
  .wb .event__datebox { width: 3.8rem; }
  .wb .event__side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .5rem; }
  .wb .event__side .btn { flex: 1 0 100%; }
}

/* Ember: sharp corners, ink tiles, red today and heavy uppercase numerals */
.ws-skin-ember .wb .calendar__title, .ws-skin-ember .wb .evc__title, .ws-skin-ember .wb .calendar__pop-title { font-weight: 900; font-stretch: 92%; letter-spacing: -.01em; }
.ws-skin-ember .wb :is(.calendar__num, .calendar__agenda-num) { border-radius: 0; }
.ws-skin-ember .wb .calendar__dow { background: var(--wb-dark); color: rgba(255, 255, 255, .78); border-bottom: 0; }
.ws-skin-ember .wb :is(.calendar__filter, .evc-chip) { border-radius: 0; }
.ws-skin-ember .wb .calendar__filter { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .74rem; }
.ws-skin-ember .wb .calendar__view, .ws-skin-ember .wb .calendar__today { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .74rem; }
.ws-skin-ember .wb .evc__num { font-weight: 900; font-stretch: 92%; }
.ws-skin-ember .wb .evc__unit { border-radius: 0; }
.ws-skin-ember .wb .evc--dark { --evc-bg: #0b0b0b; --evc-glow: color-mix(in srgb, var(--wb-red) 60%, transparent); }
.ws-skin-ember .wb .evc--dark .evc__unit { border-top: 2px solid var(--wb-red); }
.ws-skin-ember .wb .calendar__pop-cat, .ws-skin-ember .wb .evc__label { font-weight: 800; }
.ws-skin-ember .wb .event__datebox { border-radius: 0; background: var(--wb-dark); box-shadow: inset 0 3px 0 var(--wb-red); }
.ws-skin-ember .wb .event__datebox .event__day { color: #fff; font-weight: 900; }
.ws-skin-ember .wb .event__datebox .event__dow { color: rgba(255, 255, 255, .7); }
.ws-skin-ember .wb .event__datebox .event__mon { color: var(--wb-flame-on-dark); }

@media (prefers-reduced-motion: reduce) {
  .wb .evc__num.is-tick, .wb .calendar__pop[open], .wb .calendar__pop.is-sheet[open] { animation: none; }
  .wb :is(.evc__pulse, .evc-chip.is-live .evc-chip__dot, .calendar__event.is-live .calendar__time::before, .calendar__item.is-live .calendar__item-time::before) { animation: none; }
  .wb .calendar.is-loading .calendar__bar::after { animation-duration: 2.4s; }
}

/* "Add to calendar" links (event pages) */
.wb .add-cal { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 1.6rem 0 0; }
.wb .add-cal__label { margin-right: .35rem; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.wb .add-cal a { display: inline-flex; align-items: center; height: 36px; padding: 0 .85rem; border: 2px solid color-mix(in srgb, var(--wb-fg) 30%, transparent); font-size: .82rem; font-weight: 700; }
.wb .add-cal a:hover { border-color: var(--wb-fg); }

/* ── Giving: form, target ──────────────────────────────────────────────── */
.wb .give__when { display: flex; gap: .5rem; margin-bottom: 1.4rem; }
.wb .give__toggle { flex: 1; }
.wb :is(.give__toggle, .give__amount) input { position: absolute; opacity: 0; width: 0; height: 0; }
.wb .give__toggle span { display: block; padding: .8rem 1rem; border: 2px solid color-mix(in srgb, var(--wb-ink) 12%, transparent); font-size: .95rem; font-weight: 700; text-align: center; cursor: pointer; transition: all .15s; }
.wb .give__toggle input:checked + span { border-color: var(--wb-red); background: color-mix(in srgb, var(--wb-red) 6%, #fff); }
.wb :is(.give__toggle, .give__amount) input:focus-visible + span { outline: 3px solid var(--wb-ring, var(--wb-flame)); outline-offset: 2px; }
.wb .give__amounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: .5rem; }
.wb .give__amount span { display: block; padding: .85rem .5rem; border: 2px solid color-mix(in srgb, var(--wb-ink) 12%, transparent); font-size: 1.05rem; font-weight: 800; text-align: center; cursor: pointer; transition: all .15s; }
.wb .give__amount input:checked + span { border-color: var(--wb-red); background: var(--wb-red); color: var(--wb-on-red); }
.wb .give__other, .wb .form-panel .field > .give__other { display: none; align-items: center; gap: .6rem; margin: .7rem 0 0; color: var(--wb-ink); font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.wb .is-other .give__other, .wb .form-panel .is-other .field > .give__other { display: flex; }
.wb .give__symbol { font-size: 1.2rem; font-weight: 800; }
.wb .give__other input, .wb .give .field input[type="number"] { width: 100%; padding: .85rem .95rem; border: 2px solid var(--wb-ink); background: #fff; font-size: 1.05rem; }
.wb .campaign { max-width: 760px; padding: 1.8rem; background: var(--wb-white); border: 3px solid var(--wb-dark); color: var(--wb-ink); border-radius: var(--wb-radius); --wb-fg: var(--wb-ink); --wb-fg-2: var(--wb-text); }
.wb .campaign--plain { padding: 0; background: none; border: 0; color: inherit; }
.wb .campaign__title { margin: 0 0 .4rem; font-size: 1.4rem; }
.wb .campaign__text { color: var(--wb-text); }
.wb .campaign__figures { margin: 1rem 0 .55rem; font-size: .95rem; color: var(--wb-faint); }
.wb .campaign__figures strong { display: block; font-size: 2.1rem; line-height: 1.1; color: var(--wb-ink); }
.wb .campaign--plain .campaign__figures strong { color: inherit; }
.wb .campaign__bar { height: .75rem; overflow: hidden; background: color-mix(in srgb, currentColor 12%, transparent); border-radius: 999px; }
.wb .campaign__fill { display: block; height: 100%; background: var(--wb-red); transition: width .6s ease; }
.wb .campaign__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; margin: .55rem 0 0; font-size: .85rem; color: var(--wb-faint); }
.wb .campaign__action { margin: 1.2rem 0 0; }

/* ── Size & style: what a block gets when an editor changes its width, height, spacing, background, border,
      corners or shadow (and hide on computers / tablets / phones). ── */
.wb .el { margin-top: 2rem; }
.wb .el > * { margin-top: 0 !important; }
.wb .container > .el:first-child, .wb .box > .box__inner > .el:first-child, .wb .el:first-child { margin-top: 0; }
.wb .box > .box__inner > .el { margin-bottom: 0; }
.wb .el--w { width: var(--el-w); max-width: 100%; }
.wb .el--center { margin-left: auto; margin-right: auto; }
.wb .el--right { margin-left: auto; margin-right: 0; }
.wb .el--left { margin-right: auto; margin-left: 0; }
.wb .el--h { display: flex; flex-direction: column; justify-content: center; min-height: var(--el-h); }
.wb .el--h > * { width: 100%; }
.wb .el--p { padding: var(--el-p); }
.wb .el--p-sm { padding: .8rem; }
.wb .el--p-md { padding: 1.6rem; }
.wb .el--p-lg { padding: clamp(1.6rem, 4vw, 2.6rem); }
.wb .el--p-xl { padding: clamp(2rem, 6vw, 4rem); }
.wb .el--sa-none { margin-top: 0; } .wb .el--sa-sm { margin-top: 1rem; } .wb .el--sa-md { margin-top: 2rem; } .wb .el--sa-lg { margin-top: 3.5rem; } .wb .el--sa-xl { margin-top: 5.5rem; }
.wb .el--sb-none { margin-bottom: 0; } .wb .el--sb-sm { margin-bottom: 1rem; } .wb .el--sb-md { margin-bottom: 2rem; } .wb .el--sb-lg { margin-bottom: 3.5rem; } .wb .el--sb-xl { margin-bottom: 5.5rem; }
.wb .el--bg { background: var(--el-bg); }
.wb .el--bg-white { background: var(--wb-white); }
.wb .el--bg-light { background: var(--wb-light); }
.wb .el--bg-paper { background: var(--wb-paper); }
.wb .el--bg-slate { background: var(--wb-slate); }
.wb .el--bg-dark { background: var(--wb-dark); }
.wb .el--bg-red { background: var(--wb-red); }
.wb .el--bg-flame { background: var(--wb-flame); }
.wb .el--on-light :is(.prose p, .intro, p) { color: var(--wb-fg-2); }
.wb .el--on-dark :is(.prose p, .intro, p) { color: var(--wb-fg-2); }
.wb .el--b-light { border: 1px solid color-mix(in srgb, var(--wb-ink) 14%, transparent); }
.wb .el--on-dark.el--b-light { border-color: rgba(255, 255, 255, .22); }
.wb .el--b-dark { border: 2px solid var(--wb-dark); }
.wb .el--b-accent { border: 2px solid var(--wb-red); }
.wb .el--b-accent-top { border-top: 4px solid var(--wb-red); }
.wb .el--b-accent-left { border-left: 4px solid var(--wb-red); }
.wb .el--r { border-radius: var(--el-r); overflow: hidden; }
.wb .el--r-sm { border-radius: 6px; overflow: hidden; }
.wb .el--r-md { border-radius: 14px; overflow: hidden; }
.wb .el--r-lg { border-radius: 28px; overflow: hidden; }
.wb .el--r-pill { border-radius: 999px; overflow: hidden; }
.wb .el--s-sm { box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.wb .el--s-md { box-shadow: 0 12px 32px rgba(0, 0, 0, .13); }
.wb .el--s-lg { box-shadow: 0 24px 60px rgba(0, 0, 0, .22); }
@media (min-width: 1024px) { .wb .el--hide-d { display: none !important; } }
@media (min-width: 700px) and (max-width: 1023px) { .wb .el--hide-t { display: none !important; } }
@media (max-width: 699px) { .wb .el--hide-p { display: none !important; } }
@container (min-width: 1024px) { .wb .el--hide-d { display: none !important; } }
@container (min-width: 700px) and (max-width: 1023px) { .wb .el--hide-t { display: none !important; } }
@container (max-width: 699px) { .wb .el--hide-p { display: none !important; } }

/* ── Newsletter sign-up ─────────────────────────────────────────────────── */
.wb .signup { padding: clamp(1.4rem, 4vw, 2.2rem); background: var(--wb-white); color: var(--wb-ink); border-radius: var(--wb-radius); --wb-fg: var(--wb-ink); --wb-fg-2: var(--wb-text-soft); }
.wb .signup__title { margin: 0 0 .5rem; font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.wb .signup__text p { margin: 0 0 1.2rem; color: var(--wb-text-soft); }
.wb .signup__form { display: flex; flex-wrap: wrap; gap: .6rem; }
.wb .signup__form :is(input[type="text"], input[type="email"]) { flex: 1 1 240px; min-width: 0; padding: .85rem .95rem; border: 2px solid var(--wb-ink); border-radius: calc(var(--wb-radius) * .5); background: #fff; color: var(--wb-ink); font-size: 1rem; }
.wb .signup__form input[type="text"] { flex-basis: 160px; }
.wb .signup__form :is(input[type="text"], input[type="email"]):focus { outline: none; border-color: var(--wb-flame-ring); }
.wb .signup__form .is-invalid { border-color: var(--wb-red); background: #fff5f4; }
.wb .signup__note { margin: .9rem 0 0; color: var(--wb-faint); font-size: .85rem; }
.wb .signup .form-success { margin-top: 1rem; padding: 1.2rem 1.4rem; }
.wb .signup .form-alert { flex: 1 1 100%; }

/* ── Canvas placeholders (builder edit mode only) ──────────────────────── */
.wb .cms-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 96px; margin-top: 1.4rem; padding: 1.2rem; border: 1.5px dashed color-mix(in srgb, currentColor 30%, transparent); border-radius: 10px; color: inherit; text-align: center; font: 500 14px/1.4 'Instrument Sans', system-ui, sans-serif; opacity: .85; }
.wb .cms-empty strong { font-weight: 600; }
.wb .cms-empty span { opacity: .75; }
.wb .container > .cms-empty:first-child { margin-top: 0; }
.wb .cms-empty--section { min-height: 140px; }

/* ══ Ember skin (Ember template: body.ws-skin-ember) ══════════════════════
   The church-website design: warm paper, ink-black bands, red and flame, Archivo set heavy, uppercase and
   semi-condensed, sharp buttons with tracked capitals. Restyles the blocks' tokens and the church layout around them:
   header, menu, footer, buttons, page headers, forms and the classic sections a module or form adds to a page. */
.ws-skin-ember {
  --ws-bg: #f5f3f0; --ws-surface: #ffffff; --ws-surface-2: #eeebe6; --ws-surface-3: #e9e6e1;
  --ws-ink: #0b0b0b; --ws-ink-2: #43413f; --ws-muted: #6b6864; --ws-faint: #8c8a88; --ws-dark: #0b0b0b;
  --ws-line: rgba(11, 11, 11, .1); --ws-line-strong: rgba(11, 11, 11, .2); --ws-input-border: #0b0b0b;
  --ws-radius: 0; --ws-radius-lg: 0; --ws-btn-radius: 0; --ws-input-radius: 0; --ws-img-radius: 0;
  --ws-h-weight: 900; --ws-h-track: -.022em; --ws-h-lh: .94;
  --ws-shadow: none; --ws-shadow-hover: 0 14px 32px rgba(0, 0, 0, .14); --ws-shadow-lg: 0 18px 44px -12px rgba(0, 0, 0, .35);
  --ws-header-h: 76px;
  --ws-ring: 0 0 0 3px rgba(255, 68, 0, .45);

  --wb-slate: #3e4551; --wb-slate-2: #4b5361; --wb-light: #e9e6e1;
  --wb-text: #4a4744; --wb-text-soft: #43413f; --wb-faint: #6b6864; --wb-muted: #8c8a88;
  --wb-red-ink: var(--ws-primary); --wb-flame-on-dark: var(--ws-accent);
  --wb-h-weight: 900; --wb-h-lh: .94; --wb-h-track: -.022em; --wb-h-case: uppercase; --wb-h-stretch: 92%;
  --wb-t-weight: 900; --wb-label-weight: 800;
  --wb-radius: 0; --wb-img-radius: 0; --wb-grid-gap: 2px;
  --wb-btn-radius: 0; --wb-btn-size: .8rem; --wb-btn-weight: 800; --wb-btn-case: uppercase; --wb-btn-track: .11em; --wb-btn-pad: .85rem 1.5rem; --wb-btn-border: 2px;
  --wb-gutter: clamp(1rem, 3.5vw, 2.5rem);
  /* inner pages (the home page scale follows) */
  --wb-container: 1160px; --wb-section-pad: clamp(3rem, 6vw, 5rem); --wb-h2-size: clamp(1.8rem, 4vw, 3rem); --wb-h2-gap: 1.2rem;
  --wb-kicker-size: .76rem; --wb-kicker-gap: .9rem; --wb-intro-size: 1.08rem; --wb-intro-width: 58ch;
  --wb-hero-h1: clamp(2.4rem, 7.4vw, 6.4rem); --wb-page-h1: clamp(2.2rem, 6vw, 4.4rem);
  background: var(--ws-bg); color: var(--ws-ink); font-size: 17px; line-height: 1.6;
}
.ws-skin-ember.ws-home {
  --wb-container: 1320px; --wb-section-pad: clamp(3.5rem, 7vw, 6rem); --wb-h2-size: clamp(2rem, 5vw, 3.7rem); --wb-h2-gap: 1.4rem;
  --wb-kicker-size: .78rem; --wb-kicker-gap: 1rem; --wb-intro-size: 1.1rem; --wb-intro-width: 60ch; --wb-banner-gap: 2.6rem;
}
.ws-skin-ember :is(h1, h2, h3) { text-transform: uppercase; font-stretch: 92%; }
/* Flame ring; inside builder blocks the ring of the tone it sits on (--wb-ring), and on the brand colour its ink. */
.ws-skin-ember :focus-visible { outline: 3px solid var(--wb-ring, var(--ws-accent)); outline-offset: 2px; box-shadow: none; border-radius: 0; }
.ws-skin-ember .ws-tone-brand { --wb-ring: var(--ws-on-primary); }
.ws-skin-ember ::selection { background: rgba(255, 68, 0, .25); }
/* Text on the accent is the ink that reads on it (--ws-on-accent: white when it reaches 4.5:1, else near-black). */
.ws-skin-ember .skip-link { background: var(--ws-accent); color: var(--ws-on-accent); font-weight: 800; text-transform: uppercase; border-radius: 0; }
.ws-skin-ember .skip-link:focus-visible { outline-color: var(--ws-on-accent); outline-offset: -6px; }

/* Header: a black bar with a red rule, uppercase tracked menu, the visit button in red. */
.ws-skin-ember .ws-header, .ws-skin-ember.ws-overlay .ws-header {
  position: sticky; top: 0; background: #0b0b0b !important; border-bottom: 0; box-shadow: 0 2px 0 var(--ws-primary);
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.ws-skin-ember.ws-tpl-preview .ws-header { top: 48px; }
.ws-skin-ember .ws-header-inner { max-width: none; min-height: var(--ws-header-h); padding-inline: var(--wb-gutter); gap: 1.6rem; }
.ws-skin-ember .ws-brand { gap: 10px; color: #fff !important; font: 900 17px/.95 var(--ws-font-h); letter-spacing: .01em; text-transform: uppercase; font-stretch: 92%; }
.ws-skin-ember .ws-brand-name { max-width: 16ch; white-space: normal; text-wrap: balance; }
.ws-skin-ember .ws-brand-mark { flex-shrink: 0; width: 38px; height: 38px; color: var(--ws-primary); }
.ws-skin-ember .ws-logo { border-radius: 0; }
.ws-skin-ember .ws-nav { gap: 1.4rem; }
.ws-skin-ember .ws-menu { gap: .35rem; }
.ws.ws-skin-ember .ws-menu a { padding: 10px 10px; border-radius: 0; background: none; color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.ws.ws-skin-ember .ws-menu > li > a:hover, .ws.ws-skin-ember .ws-menu > li > a:focus-visible { background: none; color: var(--ws-accent); opacity: 1; }
.ws.ws-skin-ember .ws-menu a[aria-current="page"], .ws.ws-skin-ember .ws-menu .ws-active > a { color: #fff; opacity: 1; }
.ws.ws-skin-ember .ws-menu > li > a[aria-current="page"]::after, .ws.ws-skin-ember .ws-menu > .ws-active > a::after { left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 0; background: var(--ws-primary); }
.ws-skin-ember .ws-sub { top: 100%; border-radius: 0; padding: 6px 0; background: #141414; box-shadow: 0 2px 0 var(--ws-primary), 0 18px 40px -10px rgba(0, 0, 0, .6); }
.ws.ws-skin-ember .ws-sub a { padding: 10px 16px; color: rgba(255, 255, 255, .86); opacity: 1; }
.ws.ws-skin-ember .ws-sub a:hover, .ws.ws-skin-ember .ws-sub a[aria-current="page"] { background: rgba(255, 255, 255, .06); color: var(--ws-accent); }
.ws-skin-ember .ws-header-cta { gap: .6rem; }
.ws.ws-skin-ember .ws-header-cta .ws-btn { min-height: 0; padding: .72rem 1.15rem; font-size: .72rem; }
.ws.ws-skin-ember .ws-header-cta .ws-btn-secondary { background: var(--ws-primary); border-color: var(--ws-primary); color: var(--ws-on-primary); }
.ws.ws-skin-ember .ws-header-cta .ws-btn-secondary:hover { background: var(--ws-accent); border-color: var(--ws-accent); color: var(--ws-on-accent); }
.ws.ws-skin-ember .ws-header-cta .ws-btn-primary { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.ws.ws-skin-ember .ws-header-cta .ws-btn-primary:hover { background: #fff; border-color: #fff; color: #0b0b0b; }
.ws.ws-skin-ember .ws-header-cta .ws-btn .icon { display: none; }

/* Buttons of the church layout, classic sections and other features' pages: sharp, uppercase, tracked. */
.ws-skin-ember .ws-btn, .ws-skin-ember .btn:not(.wb .btn:where(:not(.wb-ext *))) {
  border-radius: 0; border-width: 2px; box-shadow: none; font-family: var(--ws-font-b); font-size: .8rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
}
.ws-skin-ember .ws-btn { min-height: 0; padding: .95rem 1.5rem; }
.ws.ws-skin-ember .ws-btn-primary, .ws.ws-skin-ember .btn-primary:not(.wb .btn:where(:not(.wb-ext *))) { background: var(--ws-primary); border-color: var(--ws-primary); color: var(--ws-on-primary); box-shadow: none; }
.ws.ws-skin-ember .ws-btn-primary:hover, .ws.ws-skin-ember .btn-primary:not(.wb .btn:where(:not(.wb-ext *))):hover { background: var(--ws-accent); border-color: var(--ws-accent); color: var(--ws-on-accent); }
.ws.ws-skin-ember .ws-btn-secondary { background: transparent; border-color: rgba(11, 11, 11, .35); color: #0b0b0b; box-shadow: none; }
.ws.ws-skin-ember .ws-btn-secondary:hover { background: #0b0b0b; border-color: #0b0b0b; color: #fff; }
.ws.ws-skin-ember :is(.ws-tone-dark, .ws-tone-brand) .ws-btn-secondary { border-color: #fff; color: #fff; background: transparent; }
.ws.ws-skin-ember :is(.ws-tone-dark, .ws-tone-brand) .ws-btn-secondary:hover { background: #fff; color: #0b0b0b; }
.ws.ws-skin-ember :is(.ws-tone-dark, .ws-tone-brand) .ws-btn-primary { background: #fff !important; border-color: #fff; color: #0b0b0b !important; }
.ws.ws-skin-ember :is(.ws-tone-dark, .ws-tone-brand) .ws-btn-primary:hover { background: var(--ws-accent) !important; border-color: var(--ws-accent); color: var(--ws-on-accent) !important; }
.ws.ws-skin-ember :is(.ws-tone-dark, .ws-tone-brand) .ws-form-card .ws-btn-primary { background: var(--ws-primary) !important; border-color: var(--ws-primary); color: var(--ws-on-primary) !important; }
.ws.ws-skin-ember :is(.ws-tone-dark, .ws-tone-brand) .ws-form-card .ws-btn-primary:hover { background: var(--ws-accent) !important; border-color: var(--ws-accent); color: var(--ws-on-accent) !important; }

/* Classic sections on an Ember page: labels, headings, tones, cards and forms in the same language. */
.ws-skin-ember .ws-eyebrow { color: var(--ws-primary); font: 800 .78rem/1.4 var(--ws-font-b); letter-spacing: .2em; text-transform: uppercase; }
.ws-skin-ember .ws-tone-dark .ws-eyebrow { color: var(--ws-accent); }
.ws-skin-ember .ws-h2 { max-width: 20ch; font-size: clamp(1.8rem, 4vw, 3rem); }
.ws-skin-ember .ws-lead { color: #43413f; font-size: 1.08rem; }
.ws-skin-ember .ws-tone-dark .ws-lead { color: rgba(255, 255, 255, .85); }
.ws-skin-ember .ws-tone-soft { background: var(--ws-surface-3); }
.ws.ws-skin-ember .ws-tone-soft a:not(.ws-btn):not(.btn) { color: var(--ws-primary); }
.ws-skin-ember .ws-tone-dark { background: #0b0b0b; }
.ws-skin-ember .ws-sec { padding-block: clamp(3rem, 6vw, 5rem); }
.ws-skin-ember .ws-card, .ws-skin-ember .ws-service, .ws-skin-ember .ws-quote { border-radius: 0; box-shadow: none; }
.ws-skin-ember .ws-form-card { border: 3px solid #0b0b0b; border-radius: 0; box-shadow: none; background: #fff; }
.ws-skin-ember .ws-tone-dark .ws-form-card { border-color: #fff; }
.ws-skin-ember .ws-field label { color: #0b0b0b; font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.ws-skin-ember .ws-input, .ws-skin-ember .input { min-height: 50px; border: 2px solid #0b0b0b; border-radius: 0; box-shadow: none; }
.ws-skin-ember .ws-input:focus, .ws-skin-ember .input:focus { border-color: var(--ws-accent); box-shadow: none; }
.ws-skin-ember .ws-details-icon { border-radius: 0; background: #0b0b0b; color: #fff; }
.ws-skin-ember .ws-tone-dark .ws-details-icon { background: var(--ws-primary); }
.ws-skin-ember .ws-map { border: 0; border-radius: 0; box-shadow: none; }
.ws-skin-ember .ws-map iframe { filter: grayscale(1) contrast(1.05); }
.ws-skin-ember .ws-service-day { color: var(--ws-primary); font-weight: 800; letter-spacing: .16em; }
.ws-skin-ember .ws-service-time { font-weight: 900; text-transform: uppercase; }
.ws-skin-ember .ws-faq-item summary { font-weight: 800; }
.ws-skin-ember .alert { border-radius: 0; }
.ws-skin-ember .card { border-radius: 0; box-shadow: none; }

/* The automatic page header of feature pages (events, giving, sermons…): the Ember page header. */
.ws-skin-ember .ws-pagehead {
  position: relative; padding: clamp(3rem, 7vw, 5rem) 0; border: 0; color: #fff; background-color: #0b0b0b;
  background-image: radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--ws-primary) 45%, transparent), transparent 55%), radial-gradient(60% 90% at 0% 100%, color-mix(in srgb, var(--ws-accent) 18%, transparent), transparent 60%);
}
.ws-skin-ember .ws-pagehead .ws-wrap { max-width: calc(1160px + 2 * var(--wb-gutter)); padding-inline: var(--wb-gutter); }
.ws-skin-ember .ws-pagehead h1 { max-width: 16ch; margin: .9rem 0 0; font-size: clamp(2.2rem, 6vw, 4.4rem); }
.ws.ws-skin-ember .ws-pagehead .ws-crumbs, .ws.ws-skin-ember .ws-pagehead .ws-crumbs a { color: rgba(255, 255, 255, .85); font-size: .76rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.ws.ws-skin-ember .ws-pagehead .ws-crumbs a:hover { color: var(--ws-accent); }
.ws-skin-ember .ws-pagehead-lead { color: rgba(255, 255, 255, .85); }
.ws-skin-ember .ws-module-page h1 { font-size: clamp(2rem, 5vw, 3.4rem); }

/* Footer: black, flame column titles, big uppercase name, white social discs. */
.ws-skin-ember .ws-footer { --ws-footer-bg: #0b0b0b; padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; background: #0b0b0b; color: rgba(255, 255, 255, .76); font-size: .96rem; }
.ws-skin-ember .ws-footer > .ws-wrap { max-width: calc(1320px + 2 * var(--wb-gutter)); padding-inline: var(--wb-gutter); }
.ws-skin-ember:not(.ws-home) .ws-footer > .ws-wrap { max-width: calc(1160px + 2 * var(--wb-gutter)); }
.ws-skin-ember .ws-brand-foot { font-size: clamp(22px, 2.6vw, 30px); line-height: .92; }
.ws-skin-ember .ws-brand-foot .ws-brand-name { max-width: 12ch; }
.ws-skin-ember .ws-foot-brand p { max-width: 30ch; color: rgba(255, 255, 255, .75); }
.ws-skin-ember .ws-foot-title { color: var(--ws-accent); font: 800 .78rem/1.3 var(--ws-font-b); letter-spacing: .18em; }
.ws.ws-skin-ember .ws-footer a:hover, .ws.ws-skin-ember .ws-foot-links a:hover { color: var(--ws-accent); text-decoration: none; }
.ws-skin-ember .ws-foot-times strong { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ws-skin-ember .ws-social { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #0b0b0b !important; transition: background .2s, color .2s, transform .2s; }
.ws-skin-ember .ws-social:hover { background: var(--ws-primary); color: #fff !important; transform: translateY(-2px); }
.ws-skin-ember .ws-foot-bottom { border-top-color: rgba(255, 255, 255, .16); color: var(--wb-muted); font-size: .8rem; }
.ws-skin-ember .ws-announce { background: var(--ws-primary); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }

/* Phones and tablets: the menu opens as a black sheet with big uppercase links (church-website mobile menu). */
@media (max-width: 1100px) {
  .ws-skin-ember { --ws-header-h: 68px; }
  .ws-skin-ember .ws-burger { border: 0; background: none; box-shadow: none; color: #fff; padding: 0 4px; }
  .ws-skin-ember .ws-burger-lines, .ws-skin-ember .ws-burger-lines::before, .ws-skin-ember .ws-burger-lines::after { width: 26px; height: 3px; border-radius: 0; }
  .ws-skin-ember .ws-burger-lines::before { top: -8px; } .ws-skin-ember .ws-burger-lines::after { top: 8px; }
  .ws-skin-ember .ws-nav-toggle:checked ~ .ws-burger .ws-burger-lines::before { transform: translateY(8px) rotate(45deg); }
  .ws-skin-ember .ws-nav-toggle:checked ~ .ws-burger .ws-burger-lines::after { transform: translateY(-8px) rotate(-45deg); }
  .ws-skin-ember .ws-burger-text { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
  .ws-skin-ember .ws-nav { background: #0b0b0b; border-top: 1px solid rgba(255, 255, 255, .16); padding: .35rem var(--wb-gutter) 2rem; }
  .ws.ws-skin-ember .ws-menu a { padding: .72rem 0; border-bottom: 1px solid rgba(255, 255, 255, .1); color: #fff; font-size: clamp(1.02rem, 4.3vw, 1.24rem); font-weight: 900; letter-spacing: -.005em; opacity: 1; }
  .ws.ws-skin-ember.ws-overlay .ws-menu > li > a { color: #fff !important; }
  .ws.ws-skin-ember .ws-menu a:hover, .ws.ws-skin-ember .ws-menu a[aria-current="page"] { color: var(--ws-accent); }
  .ws.ws-skin-ember .ws-sub { background: transparent; box-shadow: none; padding: 0 0 0 1rem; }
  .ws.ws-skin-ember .ws-sub a { font-size: .98rem; font-weight: 700; color: rgba(255, 255, 255, .8); }
  .ws.ws-skin-ember .ws-header-cta { padding-top: 1.2rem; }
  .ws.ws-skin-ember .ws-header-cta .ws-btn { min-height: 52px; padding: 1.05rem 2rem; font-size: .9rem; }
  .ws.ws-skin-ember .ws-header-cta .ws-btn-secondary { background: var(--ws-primary); border-color: var(--ws-primary); color: var(--ws-on-primary); }
  .ws.ws-skin-ember .ws-header-cta .ws-btn-primary { border-color: rgba(255, 255, 255, .55); color: #fff; background: transparent; }
}
/* The same menu sheet on a wide screen whose menu does not fit (html.ws-nav-compact, set by blocks.js; see site.css). */
@media (min-width: 1101px) {
  html.ws-nav-compact .ws-skin-ember .ws-burger { border: 0; background: none; box-shadow: none; color: #fff; padding: 0 4px; }
  html.ws-nav-compact .ws-skin-ember .ws-burger-lines, html.ws-nav-compact .ws-skin-ember .ws-burger-lines::before, html.ws-nav-compact .ws-skin-ember .ws-burger-lines::after { width: 26px; height: 3px; border-radius: 0; }
  html.ws-nav-compact .ws-skin-ember .ws-burger-lines::before { top: -8px; } html.ws-nav-compact .ws-skin-ember .ws-burger-lines::after { top: 8px; }
  html.ws-nav-compact .ws-skin-ember .ws-nav-toggle:checked ~ .ws-burger .ws-burger-lines::before { transform: translateY(8px) rotate(45deg); }
  html.ws-nav-compact .ws-skin-ember .ws-nav-toggle:checked ~ .ws-burger .ws-burger-lines::after { transform: translateY(-8px) rotate(-45deg); }
  html.ws-nav-compact .ws-skin-ember .ws-burger-text { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
  html.ws-nav-compact .ws-skin-ember .ws-nav { background: #0b0b0b; border-top: 1px solid rgba(255, 255, 255, .16); padding: .35rem var(--wb-gutter) 2rem; }
  html.ws-nav-compact .ws.ws-skin-ember .ws-menu a { padding: .72rem 0; border-bottom: 1px solid rgba(255, 255, 255, .1); color: #fff; font-size: clamp(1.02rem, 4.3vw, 1.24rem); font-weight: 900; letter-spacing: -.005em; opacity: 1; }
  html.ws-nav-compact .ws.ws-skin-ember.ws-overlay .ws-menu > li > a { color: #fff !important; }
  html.ws-nav-compact .ws.ws-skin-ember .ws-menu a:hover, html.ws-nav-compact .ws.ws-skin-ember .ws-menu a[aria-current="page"] { color: var(--ws-accent); }
  html.ws-nav-compact .ws.ws-skin-ember .ws-sub { background: transparent; box-shadow: none; padding: 0 0 0 1rem; }
  html.ws-nav-compact .ws.ws-skin-ember .ws-sub a { font-size: .98rem; font-weight: 700; color: rgba(255, 255, 255, .8); }
  html.ws-nav-compact .ws.ws-skin-ember .ws-header-cta { padding-top: 1.2rem; }
  html.ws-nav-compact .ws.ws-skin-ember .ws-header-cta .ws-btn { min-height: 52px; padding: 1.05rem 2rem; font-size: .9rem; }
  html.ws-nav-compact .ws.ws-skin-ember .ws-header-cta .ws-btn-secondary { background: var(--ws-primary); border-color: var(--ws-primary); color: var(--ws-on-primary); }
  html.ws-nav-compact .ws.ws-skin-ember .ws-header-cta .ws-btn-primary { border-color: rgba(255, 255, 255, .55); color: #fff; background: transparent; }
}
@media (max-width: 640px) {
  .ws-skin-ember .ws-brand { font-size: 15px; }
  .ws-skin-ember .ws-brand-mark { width: 34px; height: 34px; }
}

/* ── Motion & print ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wb *, .wb *::before, .wb *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .wb-js .wb .reveal:not(.is-visible) { opacity: 1; transform: none; }
  .wb .box--hover-lift:hover, .wb .media-card:hover, .wb .group-card:hover { transform: none; }
  .wb .box--hover-zoom:hover > .box__bg, .wb .box--hover-zoom:hover > .wb-ph, .wb .location-card:hover img, .wb .location-card:hover > .wb-ph { transform: none; }
  .wb .slider__track { scroll-behavior: auto; }
}
@media print {
  /* Content that fades in on scroll is printed as it is (no scrolling happens on paper). */
  .wb-js .wb .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .wb.hero, .wb.page-hero { min-height: 0 !important; color: #000 !important; background: none !important; }
  .wb .hero__media, .wb .hero__overlay, .wb .page-hero__overlay, .wb-ph, .wb .slider__arrow, .wb .slider__dots, .wb .slider__toggle, .wb .hero__dots { display: none !important; }
  .wb.page-hero p, .wb.hero h1 { color: #000 !important; }
}
/* The staff dialog over a template preview keeps the app's own look. */
.ws-skin-ember .tpl-dialog :is(h1, h2, h3) { font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 600; font-stretch: normal; letter-spacing: -.01em; line-height: 1.3; text-transform: none; }
.ws-skin-ember .tpl-dialog .btn { border-width: 1px; border-radius: 10px; font: 500 14px/1 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: 0; text-transform: none; }
.ws-skin-ember .ws-brand-foot .ws-brand-mark { width: clamp(44px, 4.4vw, 58px); height: clamp(44px, 4.4vw, 58px); }

/* ==== FX: entrance + loop animations (per-element, data-fx-*) ============
   Hidden start state only applies once blocks.js has set html.wb-fx, so no-JS
   visitors always see content. Edit canvas ([data-fx-edit]) always shows final. */
@media (prefers-reduced-motion: no-preference) {
  .wb-fx [data-fx-in]:not(.fx-in):not([data-fx-edit]) { opacity: 0; }
  .wb-fx [data-fx-in="up"]:not(.fx-in):not([data-fx-edit]) { transform: translateY(var(--fx-dist, 40px)); }
  .wb-fx [data-fx-in="down"]:not(.fx-in):not([data-fx-edit]) { transform: translateY(calc(-1 * var(--fx-dist, 40px))); }
  .wb-fx [data-fx-in="left"]:not(.fx-in):not([data-fx-edit]) { transform: translateX(calc(-1 * var(--fx-dist, 40px))); }
  .wb-fx [data-fx-in="right"]:not(.fx-in):not([data-fx-edit]) { transform: translateX(var(--fx-dist, 40px)); }
  .wb-fx [data-fx-in="zoomIn"]:not(.fx-in):not([data-fx-edit]) { transform: scale(.85); }
  .wb-fx [data-fx-in="zoomOut"]:not(.fx-in):not([data-fx-edit]) { transform: scale(1.15); }
  .wb-fx [data-fx-in="flip"]:not(.fx-in):not([data-fx-edit]) { transform: perspective(600px) rotateX(70deg); }
  .wb-fx [data-fx-in="rotate"]:not(.fx-in):not([data-fx-edit]) { transform: rotate(-12deg) scale(.95); }
  .wb-fx [data-fx-in="blur"]:not(.fx-in):not([data-fx-edit]) { filter: blur(10px); }
  .wb-fx [data-fx-in="bounce"]:not(.fx-in):not([data-fx-edit]) { transform: translateY(var(--fx-dist, 40px)); }
  .wb-fx [data-fx-in].fx-in { opacity: 1; transform: none; filter: none;
    transition: opacity var(--fx-dur, 600ms) var(--fx-ease, ease-out) var(--fx-delay, 0ms),
      transform var(--fx-dur, 600ms) var(--fx-ease, ease-out) var(--fx-delay, 0ms),
      filter var(--fx-dur, 600ms) var(--fx-ease, ease-out) var(--fx-delay, 0ms); }
  .wb-fx [data-fx-in="bounce"].fx-in { transition-timing-function: var(--fx-ease, cubic-bezier(.34, 1.56, .64, 1)); }
  [data-fx-loop]:not([data-fx-edit]) { animation: var(--fx-loop-dur, 3000ms) ease-in-out infinite; }
  [data-fx-loop="pulse"]:not([data-fx-edit]) { animation-name: fx-pulse; }
  [data-fx-loop="float"]:not([data-fx-edit]) { animation-name: fx-float; }
  [data-fx-loop="spin"]:not([data-fx-edit]) { animation-name: fx-spin; animation-timing-function: linear; }
  [data-fx-loop="wiggle"]:not([data-fx-edit]) { animation-name: fx-wiggle; }
  [data-fx-loop="shimmer"]:not([data-fx-edit]) { animation-name: fx-shimmer; }
  .wb-fx [data-fx-loop].fx-off { animation-play-state: paused; }
}
@keyframes fx-pulse { 50% { transform: scale(1.05); } }
@keyframes fx-float { 50% { transform: translateY(-8px); } }
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-wiggle { 25% { transform: rotate(3deg); } 75% { transform: rotate(-3deg); } }
@keyframes fx-shimmer { 50% { filter: brightness(1.25) saturate(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .el[class*=wx-] { transition-duration: 0s !important; }
  [data-fx-loop] { animation: none !important; }
}
/* ==== /FX ============================================================= */