/* ---- kansel (Kansel — Congregation & community church 146) ----------------
   THE STRUCTURAL MOVE: one contained ladder, broken exactly once. Every band is
   capped at 1000px on the same bone ground — the zebra wash is switched off — and
   only .ws-video is let out of the column, losing its container padding to run
   wall to wall on a sandstone band. The banner is a contained photograph rather
   than a viewport stage, and the header floats on it absolutely, so it scrolls
   away with the picture and never comes back. Indigo is rationed to three jobs:
   the donate slab, the two buttons, and the hairline over every tile caption. */
body.t-kansel.ws-body {
  --bg: #f5f2ec; --fg: #45423b; --heading: #171614; --text: #45423b; --muted: #857f74;
  --kn-indigo: #2b3570; --kn-sand: #e7dcc8; --kn-line: #e1dacd;
  --hero-a: rgba(15, 14, 12, .24); --hero-b: rgba(15, 14, 12, .60);
}
body.t-kansel { background: var(--bg); position: relative; }

/* the header rides on the banner photograph and is gone for good after it */
body.t-kansel .ws-nav { position: absolute; top: 0; left: 0; right: 0; background: transparent; backdrop-filter: none; border-bottom: 0; }
body.t-kansel .ws-brand, body.t-kansel .ws-nav-links a, body.t-kansel .ws-nav-links a:hover, body.t-kansel .ws-nav-links a.on { color: #f7f4ee; opacity: 1; border-bottom: 0; }
body.t-kansel .ws-brand { text-transform: uppercase; letter-spacing: .22em; font-size: 14px; font-weight: 700; }
body.t-kansel .ws-nav-links a:last-of-type { background: var(--kn-indigo); padding: 10px 18px; }

/* a CONTAINED banner: bone showing on both sides, and it stops short of the fold */
body.t-kansel .ws-hero { min-height: 64vh; max-width: 1120px; width: calc(100% - 40px); margin: 0 auto; }
body.t-kansel .ws-hero-inner { padding: clamp(112px, 15vw, 172px) 22px clamp(56px, 8vw, 88px); }
body.t-kansel.ws-body .ws-hero h1 { font-size: clamp(31px, 4.6vw, 54px); font-weight: 600; letter-spacing: -.025em; text-shadow: none; }
body.t-kansel.ws-body .btn.brand, body.t-kansel.ws-body .ws-hero-cta.btn.brand { background: var(--kn-indigo); color: #f7f4ee; border: 0; border-radius: 0; box-shadow: none; padding: 14px 30px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

/* one bone ground the whole way down, one narrow column, no painted band */
body.t-kansel .ws-section { padding: 76px 0; }
body.t-kansel.ws-body .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: transparent; }
body.t-kansel .ws-section .ws-container { max-width: 1000px; }
body.t-kansel .ws-h2, body.t-kansel .ws-story-copy h2 { font-size: clamp(21px, 2.7vw, 30px); font-weight: 600; letter-spacing: -.02em; color: var(--heading); margin: 0 0 34px; }
body.t-kansel .ws-story-copy p, body.t-kansel .ws-feature p, body.t-kansel .ws-member p, body.t-kansel .ws-sub, body.t-kansel .ws-gallery-cap span, body.t-kansel .ws-video-caption { color: var(--text); font-size: 15px; line-height: 1.7; }

/* two four-up meta grids bracket the story — a picture, then two short lines */
body.t-kansel .ws-gallery-grid, body.t-kansel .ws-team-grid, body.t-kansel .ws-features-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; }
body.t-kansel .ws-gallery-item img, body.t-kansel .ws-story-media img { aspect-ratio: 4 / 3; border-radius: 0; }
body.t-kansel .ws-gallery-cap { border-top: 1px solid var(--kn-indigo); margin-top: 13px; padding: 10px 0 0; }
body.t-kansel .ws-gallery-cap strong, body.t-kansel .ws-feature h3, body.t-kansel .ws-member strong { color: var(--heading); font-size: 14.5px; font-weight: 650; }

/* THE ONE BREAK: the video leaves the column and runs wall to wall on sandstone */
body.t-kansel.ws-body .ws-video { background: var(--kn-sand); padding: 0; }
body.t-kansel.ws-body .ws-video .ws-container { max-width: none; padding: 0; }
body.t-kansel .ws-video .ws-h2 { padding: 54px 22px 26px; margin: 0; }
body.t-kansel .ws-video-frame { aspect-ratio: 21 / 9; border-radius: 0; box-shadow: none; }
body.t-kansel .ws-video-caption { max-width: 680px; margin: 0 auto; padding: 22px 22px 54px; }
body.t-kansel .ws-footer .ws-container { flex-direction: column; justify-content: center; gap: 8px; text-align: center; }
@media (max-width: 900px) {
  body.t-kansel .ws-gallery-grid, body.t-kansel .ws-team-grid, body.t-kansel .ws-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body.t-kansel .ws-nav-links a, body.t-kansel .ws-nav-links a:hover { color: var(--heading); }
  body.t-kansel .ws-nav-links a:last-of-type { color: #f7f4ee; }
}

html[data-theme="dark"] body.t-kansel.ws-body { --bg: #16150f; --fg: #a8a297; --heading: #f4f1e9; --text: #a8a297; --muted: #7d786d; --kn-indigo: #8f99d8; --kn-sand: #241f16; --kn-line: #2e2b22; }
html[data-theme="dark"] body.t-kansel { background: #16150f; }
html[data-theme="dark"] body.t-kansel.ws-body .btn.brand, html[data-theme="dark"] body.t-kansel.ws-body .ws-hero-cta.btn.brand { background: #8f99d8; color: #16150f; }
html[data-theme="dark"] body.t-kansel .ws-nav-links a:last-of-type { color: #16150f; }
html[data-theme="dark"] body.t-kansel .ws-footer { border-top-color: #2e2b22; }
html[data-theme="dark"] body.t-kansel .ws-field input, html[data-theme="dark"] body.t-kansel .ws-field textarea { background: transparent; border-color: #343026; color: #f4f1e9; }