/* Harborlight Community Church demo stylesheet (spec 12 redesign,
   round 2, v2-demo-churches): the "Harbor Signal" system.
   Standalone, scoped css for the churches demo alone: every selector
   is .hcc-* prefixed. The one documented exception is the token block
   on #demo-main (the demo's own serving scope: the one sanctioned
   machine-selector root, which also repaints the serving surface so
   the demo-base #05071e body paint and its #e8e7f7 text never show
   through this demo); no .demo-base descendant resets are needed,
   fonts and colors ride .hcc-* rules directly.

   Locked tokens, type ramp, and compositions: the UI/UX redesign
   plans (2026-10-10-spec12-redesign-plan-1-research-direction.md
   through -4-assets-tests.md). Machinery contract (demo-base.css,
   demo-notice.css, layouts.demo) is never redefined here:
   --demo-notice-space is consumed via var() exactly once, in the nav
   clearance. No stylesheet imports anywhere; the five font-face
   rules live ONLY in this file. */

@font-face {
  font-family: "Space Grotesk";
  src: url("/demos/churches/fonts/space-grotesk-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/demos/churches/fonts/ibm-plex-sans-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/demos/churches/fonts/ibm-plex-sans-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/demos/churches/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/demos/churches/fonts/ibm-plex-mono-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* "Harbor Signal" tokens (the plan's block verbatim): neutral ink
   base, cool snow type, one beacon coral signal. The base midnight
   surface itself is repainted by the #demo-main rule below. */
#demo-main {
  --hcc-ink: #0c0e12;            /* page + nav base; neutral ink, NOT blue */
  --hcc-panel: #14171c;          /* raised surface */
  --hcc-panel-deep: #101318;     /* footer surface */
  --hcc-steel: #17202b;          /* stats + bands furniture; slate-steel blue */
  --hcc-signal: #ff5a36;         /* beacon coral-vermillion; CTAs, accents */
  --hcc-signal-bright: #ff7a50;  /* hover state + body links */
  --hcc-btn-ink: #1b0a05;        /* dark ink on signal buttons */
  --hcc-wash: rgba(255, 90, 54, 0.12);  /* washes + focus fills; NEVER a scrim */
  --hcc-snow: #f5f6f8;           /* display + headings + body, cold white */
  --hcc-granite: #aeb6c2;        /* secondary text, cool granite */
  --hcc-hairline: rgba(245, 246, 248, 0.14);
  --hcc-hairline-strong: rgba(245, 246, 248, 0.32);
  --hcc-scrim-color: 12, 14, 18; /* the ink triplet for scrims */
  --hcc-font-display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --hcc-font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hcc-font-mono: "IBM Plex Mono", "Courier New", monospace;
  background: var(--hcc-ink);
  color: var(--hcc-snow);
}

/* Base rhythm: shell + section padding, mobile-first. The >= 768px
   step-ups live in the responsive block near the end of this file. */
.hcc-shell {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 20px;
  box-sizing: border-box;
  font-family: var(--hcc-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* Box discipline: the machinery stylesheets ship no global reset
   (content-box is the browser default), so the demo carries its own
   border-box group like the skip link does: min-heights stay honest
   (a 44px target never becomes 44 + padding). */
.hcc-shell,
.hcc-brand,
.hcc-btn,
.hcc-btn-quiet,
.hcc-nav-toggle,
.hcc-nav-burger,
.hcc-nav-links,
.hcc-nav-links a,
.hcc-btn-nav,
.hcc-pill,
.hcc-selector,
.hcc-service-panel,
.hcc-service-note,
.hcc-q summary,
.hcc-contact-line a,
.hcc-row-link,
.hcc-footer-nav a,
.hcc-tick,
.hcc-split-media img,
.hcc-quote-figure img,
.hcc-leader-portrait img,
.hcc-min-band-media > img,
.hcc-hero-img {
  box-sizing: border-box;
}

.hcc-section {
  padding-block: 64px;
}

/* Broadcast eyebrow voice: mono caps in signal, riding under a
   hairline rule when wrapped in the row div. */
.hcc-eyebrow {
  display: block;
  font-family: var(--hcc-font-mono);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hcc-signal);
}

.hcc-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.hcc-eyebrow-row::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hcc-hairline);
}

/* Type ramp (locked): h1 = display XL, h2 = section, h3 = row. */
.hcc-shell h1 {
  margin: 0;
  font-family: var(--hcc-font-display);
  font-weight: 600;
  font-size: clamp(2.875rem, 6.2vw + 1.2rem, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--hcc-snow);
}

.hcc-shell h2 {
  margin: 0 0 16px;
  font-family: var(--hcc-font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.4vw + 0.9rem, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--hcc-snow);
}

.hcc-shell h3 {
  margin: 0 0 10px;
  font-family: var(--hcc-font-display);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--hcc-snow);
}

/* Body-copy links: signal-bright, underline on hover. */
.hcc-shell a {
  color: var(--hcc-signal-bright);
  text-decoration: none;
}

.hcc-shell a:hover {
  color: var(--hcc-signal-bright);
  text-decoration: underline;
}

/* The button faces beat the shell descendant link rule (which would
   otherwise paint button labels signal-bright): the label rides the
   dark btn ink on the signal fill, the quiet face rides snow. */
.hcc-shell a.hcc-btn {
  color: var(--hcc-btn-ink);
}

.hcc-shell a.hcc-btn:hover {
  color: var(--hcc-btn-ink);
}

.hcc-shell a.hcc-btn-quiet {
  color: var(--hcc-snow);
}

.hcc-shell a.hcc-btn-quiet:hover {
  color: var(--hcc-btn-ink);
}

.hcc-shell a.hcc-row-link {
  color: var(--hcc-snow);
}

.hcc-shell a.hcc-row-link:hover {
  color: var(--hcc-signal-bright);
}

.hcc-shell a.hcc-brand {
  color: var(--hcc-snow);
}

.hcc-shell a.hcc-brand:hover {
  color: var(--hcc-signal-bright);
}

/* Signal button (anchors and real buttons share .hcc-btn). */
.hcc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 16px 28px;
  border: 0;
  border-radius: 0;
  background: var(--hcc-signal);
  color: var(--hcc-btn-ink);
  font-family: var(--hcc-font-display);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.hcc-btn:hover {
  color: var(--hcc-btn-ink);
  background: var(--hcc-signal-bright);
  text-decoration: none;
}

/* Quiet button: hairline outline face of the same metrics. */
.hcc-btn-quiet {
  background: transparent;
  border: 1px solid var(--hcc-hairline-strong);
  color: var(--hcc-snow);
}

.hcc-btn-quiet:hover {
  color: var(--hcc-btn-ink);
  background: var(--hcc-snow);
}

/* Sticky top navigation: the consumption of the machinery banner
   clearance rides ONCE on this bar's padding (the fixed gold banner
   always covers the topmost zone of the viewport, which lands inside
   the padding; the ink sliver under it is bar padding). Banner z
   9998 and the consent surface z 9997 sit above; the nav stays 40. */
.hcc-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--hcc-ink);
  border-bottom: 1px solid var(--hcc-hairline);
  padding-top: var(--demo-notice-space);
}

.hcc-nav-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
}

/* Brand: mark + stacked wordmark row; hover flips the whole link to
   signal (the mark follows currentColor). */
.hcc-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--hcc-snow);
  text-decoration: none;
}

.hcc-brand:hover {
  color: var(--hcc-signal-bright);
  text-decoration: none;
}

.hcc-brand-mark {
  color: currentColor;
}

.hcc-brand-text {
  display: flex;
  flex-direction: column;
}

.hcc-brand-word {
  font-family: var(--hcc-font-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
}

.hcc-brand-sub {
  font-family: var(--hcc-font-mono);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hcc-granite);
}

/* Mobile toggle: 48px target, two-rule burger, mono label. */
.hcc-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 48px;
  min-height: 48px;
  padding: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--hcc-snow);
  cursor: pointer;
}

.hcc-nav-toggle:hover {
  border-color: var(--hcc-hairline-strong);
}

.hcc-nav-burger {
  display: block;
  width: 20px;
  height: 12px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.hcc-nav-toggle-label {
  font-family: var(--hcc-font-mono);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hcc-granite);
}

/* Mobile panel state: the ul is VISIBLE in the honest no-JS state
   (default), the script's .hcc-nav-closed hides it, .hcc-nav-open
   shows it again. Rows are 44px+ with hairline separators. */
.hcc-nav-links {
  flex-basis: 100%;
  order: 3;
  display: block;
  margin: 0;
  padding: 6px 0 14px;
  list-style: none;
}

.hcc-nav-links.hcc-nav-closed {
  display: none;
}

.hcc-nav-links.hcc-nav-open {
  display: block;
}

.hcc-nav-links li + li {
  border-top: 1px solid var(--hcc-hairline);
}

.hcc-nav-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 2px;
  color: var(--hcc-snow);
  text-decoration: none;
}

.hcc-nav-links a:hover {
  color: var(--hcc-signal-bright);
  text-decoration: none;
}

.hcc-nav-links a[aria-current="page"] {
  color: var(--hcc-signal-bright);
}

.hcc-nav-links .hcc-btn-nav {
  align-self: flex-start;
  margin: 10px 0 4px;
  padding: 12px 20px;
}

/* Full-bleed hero band: img z 1, scrim z 2, content z 3. Scrims are
   the neutral-dark ink triplet only, never signal-tinted; overlay
   text stays at full opacity, bottom-anchored inside the >= 0.72
   alpha zone. The hero follows the nav in flow, so it carries no
   clearance of its own. */
.hcc-hero {
  position: relative;
  min-height: clamp(480px, 78vh, 780px);
}

.hcc-hero-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.hcc-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top,
    rgba(var(--hcc-scrim-color), 0.9) 0%,
    rgba(var(--hcc-scrim-color), 0.72) 45%,
    rgba(var(--hcc-scrim-color), 0.45) 100%);
}

.hcc-hero-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 56px;
}

.hcc-hero-content > * {
  margin-top: 0;
  max-width: 46rem;
}

.hcc-hero-content > * + * {
  margin-top: 14px;
}

/* Hero CTA row: the last paragraph flexes its two anchors. */
.hcc-hero > .hcc-hero-content p:last-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 22px;
}

.hcc-hero-line {
  font-family: var(--hcc-font-display);
  font-weight: 500;
  font-size: clamp(1.375rem, 2vw + 0.75rem, 1.875rem);
  line-height: 1.35;
  color: var(--hcc-snow);
}

.hcc-hero-times {
  font-family: var(--hcc-font-mono);
  font-weight: 400;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  color: var(--hcc-snow);
}

/* About continuation hero: thin band, left-deepen scrim, text
   confined to the left half (the >= 0.72 alpha zone there). Reuses
   the hero anatomy classes. */
.hcc-about-hero {
  position: relative;
  height: clamp(220px, 30vw, 320px);
}

.hcc-about-hero .hcc-scrim {
  background: linear-gradient(to right,
    rgba(var(--hcc-scrim-color), 0.88) 0%,
    rgba(var(--hcc-scrim-color), 0.5) 100%);
}

.hcc-about-hero .hcc-hero-content {
  justify-content: center;
  padding-bottom: 0;
}

.hcc-about-hero .hcc-hero-content > * {
  max-width: 34rem;
}

/* Alternating text + image split rows: one column stacking mobile,
   two equal columns at >= 900px. Row 1 ships copy first, media second
   in the DOM; .hcc-split-reverse flips the media column left. Contained
   images: 4:3, sharp corners, hairline edge, object-fit cover. */
.hcc-split {
  display: grid;
  gap: 32px;
  align-items: center;
}

.hcc-split + .hcc-split {
  margin-top: 48px;
}

.hcc-split-media {
  margin: 0;
}

.hcc-split-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 0;
  border: 1px solid var(--hcc-hairline);
}

/* Mono index labels ride above the split h3s. */
.hcc-index {
  display: block;
  font-family: var(--hcc-font-mono);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  color: var(--hcc-signal);
}

.hcc-row-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--hcc-font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--hcc-snow);
  text-decoration: underline;
  text-decoration-color: var(--hcc-signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.hcc-row-link:hover {
  color: var(--hcc-signal-bright);
  text-decoration-color: var(--hcc-signal-bright);
}

/* The one stats band: steel surface, four number + label items with
   signal ticks; hairline column separators step in below. */
.hcc-stats-band {
  padding-block: 64px;
  background: var(--hcc-steel);
}

.hcc-stats-band .hcc-shell {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 24px;
}

.hcc-stats-band .hcc-stat:nth-child(n+3) {
  border-top: 1px solid var(--hcc-hairline);
  padding-top: 20px;
}

.hcc-stat {
  display: grid;
  gap: 6px;
  align-content: start;
}

.hcc-tick {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--hcc-signal);
}

.hcc-stat-number {
  font-family: var(--hcc-font-display);
  font-weight: 600;
  font-size: clamp(3.25rem, 7vw + 1rem, 5.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--hcc-snow);
}

.hcc-stat-label {
  font-family: var(--hcc-font-mono);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  max-width: 13rem;
  color: var(--hcc-granite);
}

/* Pull quote with portrait: portrait beside the quote. Markup
   contract: figure.hcc-quote-figure > img + blockquote + figcaption
   (figcaption last child); the figure itself goes inside .hcc-shell. */
.hcc-quote {
  padding-block: 64px;
}

.hcc-quote-figure {
  margin: 0;
}

.hcc-quote-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 22.5rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0;
  border: 1px solid var(--hcc-hairline);
}

.hcc-quote-figure blockquote {
  margin: 0;
  padding-left: 20px;
  border-left: 2px solid var(--hcc-signal);
  font-family: var(--hcc-font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw + 0.9rem, 2.25rem);
  line-height: 1.35;
  color: var(--hcc-snow);
}

.hcc-quote-figure figcaption {
  margin: 0;
  padding-top: 14px;
  font-family: var(--hcc-font-mono);
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--hcc-granite);
}

/* Numbered lists (events on Home, first-visit journey on Visit):
   CSS counters, decimal-leading-zero, re-voiced to the mono stamp for
   events and the ghost display numeral for the journey. */
.hcc-events,
.hcc-journey {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: hcc-step;
}

.hcc-events li,
.hcc-journey li {
  counter-increment: hcc-step;
  position: relative;
  padding-left: 72px;
  border-top: 1px solid var(--hcc-hairline);
  padding-top: 24px;
}

.hcc-events li + li,
.hcc-journey li + li {
  margin-top: 24px;
}

.hcc-events li::before {
  content: counter(hcc-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 26px;
  font-family: var(--hcc-font-mono);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--hcc-signal);
}

.hcc-journey li::before {
  content: counter(hcc-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 24px;
  font-family: var(--hcc-font-display);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
  color: var(--hcc-hairline-strong);
}

.hcc-event-meta {
  display: block;
  margin-bottom: 8px;
  font-family: var(--hcc-font-mono);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--hcc-granite);
}

.hcc-events li p {
  max-width: 44rem;
}

/* Typographic pageheaders (Ministries, Visit statement page). They
   follow the nav in flow, so they carry no banner clearance. */
.hcc-pagehead {
  padding-block: 56px 24px;
}

.hcc-pagehead p {
  margin: 12px 0 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--hcc-granite);
}

/* Contact block: raised panel surface; tel/mailto keep 44px targets. */
.hcc-contact {
  background: var(--hcc-panel);
}

.hcc-contact-line {
  margin: 0;
  font-size: 1.0625rem;
}

.hcc-contact-line a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.hcc-contact-hours {
  margin: 18px 0 0;
  font-size: 0.9375rem;
  color: var(--hcc-granite);
}

/* Pointer band (the giving band on Home, the About to Visit handoff)
   on the steel furniture surface. */
.hcc-pointer {
  padding-block: 64px;
  background: var(--hcc-steel);
}

/* Ministries: five numbered full-width bands, hairline separated,
   alternating alignment (.hcc-min-reverse moves the numeral column
   right at >= 900px). Each band: span.hcc-min-count inside
   .hcc-shell, plus .hcc-min-copy (h2, one line, dl.hcc-min-facts). */
.hcc-min-band {
  padding-block: 64px;
  border-top: 1px solid var(--hcc-hairline);
}

.hcc-min-band .hcc-shell {
  display: grid;
  gap: 20px;
  align-items: start;
}

.hcc-min-count {
  font-family: var(--hcc-font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 5vw + 1rem, 4rem);
  line-height: 1;
  color: var(--hcc-hairline-strong);
}

.hcc-min-copy h2 {
  font-size: clamp(1.6875rem, 2vw + 1rem, 2.25rem);
  line-height: 1.2;
}

.hcc-min-copy > p {
  max-width: 42rem;
}

.hcc-min-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 28px;
  margin: 22px 0 0;
}

.hcc-min-facts dd {
  margin: 0;
  min-width: 0;
  max-width: 44rem;
}

/* Band 04 image variant (full-bleed band): same anatomy, img z 1,
   .hcc-scrim z 2, shell content z 3. Crop guidance: the band keeps a
   tall-enough frame and object-position 50% 62% per the asset facts. */
.hcc-min-band-media {
  position: relative;
  min-height: clamp(300px, 36vw, 460px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hcc-min-band-media > img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  border-radius: 0;
  border: 0;
}

.hcc-min-band-media .hcc-shell {
  position: relative;
  z-index: 3;
  align-items: end;
}

.hcc-min-copy {
  max-width: 46rem;
}

/* Calendar strip: compact event rows on the steel surface, hairline
   separated. */
.hcc-min-strip {
  padding-block: 64px;
  background: var(--hcc-steel);
}

.hcc-min-strip ol {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.hcc-min-strip li + li {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--hcc-hairline);
}

.hcc-min-strip li h3 {
  margin: 0;
  font-size: 1.25rem;
}

.hcc-min-strip p {
  margin: 24px 0 0;
  max-width: 42rem;
}

/* Leadership rows: hairline separated; the lead row pairs the
   portrait (3:4 crop) with text; the other rows are text-only. */
.hcc-leader {
  display: grid;
  gap: 10px;
  padding-block: 32px;
  border-top: 1px solid var(--hcc-hairline);
}

.hcc-leader-lead {
  gap: 24px;
  padding-top: 40px;
}

.hcc-leader-portrait {
  margin: 0;
}

.hcc-leader-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 0;
  border: 1px solid var(--hcc-hairline);
}

.hcc-leader-copy {
  display: grid;
  gap: 10px;
  align-content: start;
}

.hcc-leader-role {
  margin: 0;
  font-family: var(--hcc-font-mono);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hcc-granite);
}

.hcc-leader-copy p {
  margin: 0;
  max-width: 44rem;
}

/* The service-time selector (the signature interaction): two native
   buttons, sharp corners, mono labels, 48px touch floor. No-JS
   state: both pills unpressed and both panels visible; churches.js
   applies .hcc-pill-active + aria-pressed + panel.hidden. */
.hcc-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 24px 0 28px;
}

.hcc-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid var(--hcc-hairline);
  border-radius: 0;
  background: transparent;
  color: var(--hcc-snow);
  font-family: var(--hcc-font-mono);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease;
}

.hcc-pill:hover {
  color: var(--hcc-signal-bright);
  border-color: var(--hcc-hairline-strong);
}

/* Source order matters: hover before active, active hover last. */
.hcc-pill-active {
  border-color: var(--hcc-signal);
  background: var(--hcc-signal);
  color: var(--hcc-btn-ink);
}

.hcc-pill-active:hover {
  border-color: var(--hcc-signal-bright);
  background: var(--hcc-signal-bright);
  color: var(--hcc-btn-ink);
}

.hcc-service-panels {
  margin-top: 8px;
}

.hcc-service-panel {
  padding: 28px;
  border: 1px solid var(--hcc-hairline);
  border-radius: 0;
  background: var(--hcc-panel);
}

.hcc-service-panel[hidden] {
  display: none;
}

/* The livestream note: a callout line, not a panel: hairline-free
   wash fill with the signal rule at its left edge. */
.hcc-service-note {
  margin: 18px 0 0;
  padding: 12px 16px;
  border-left: 2px solid var(--hcc-signal);
  background: var(--hcc-wash);
  color: var(--hcc-snow);
}

/* Facts grids (selector panels, ministry bands): dt/dd pairs, the dt
   in the mono fact voice. Markup contract: sequential dt then dd
   per row so the two-column grid fills pairs; mobile stacks one column. */
.hcc-service-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 28px;
  margin: 20px 0 0;
}

.hcc-fact-label {
  font-family: var(--hcc-font-mono);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hcc-granite);
}

.hcc-service-facts dd {
  margin: 0;
  min-width: 0;
  max-width: 44rem;
}

/* Common questions: native details/summary disclosures, no popups.
   Custom marker span aria-hidden flips with rotate(0.5turn); summary
   rows hold the 48px floor and ride hairline rules. */
.hcc-q {
  border-top: 1px solid var(--hcc-hairline);
}

.hcc-q:last-of-type {
  border-bottom: 1px solid var(--hcc-hairline);
}

.hcc-q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding-block: 12px;
  color: var(--hcc-snow);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.hcc-q summary::-webkit-details-marker {
  display: none;
}

.hcc-q summary:hover {
  color: var(--hcc-signal-bright);
}

.hcc-q-mark {
  display: inline-block;
  flex: none;
  color: var(--hcc-signal);
  font-size: 1.25rem;
  line-height: 1;
  transform: rotate(0);
  transition: transform 0.2s ease;
}

.hcc-q[open] .hcc-q-mark {
  transform: rotate(0.5turn);
}

.hcc-q .hcc-q-answer,
.hcc-q > p {
  margin: 0;
  padding-bottom: 20px;
  max-width: 44rem;
  color: var(--hcc-granite);
}

/* Shared footer: deep panel surface, hairline top, brand row, padded
   nav links, three literal lines. Four page links only; no socials. */
.hcc-footer {
  padding-block: 48px 64px;
  background: var(--hcc-panel-deep);
  border-top: 1px solid var(--hcc-hairline);
}

.hcc-footer .hcc-shell {
  display: grid;
  gap: 4px;
}

.hcc-footer .hcc-brand {
  margin-bottom: 12px;
  color: var(--hcc-snow);
}

.hcc-footer .hcc-brand-word {
  font-size: 1rem;
}

.hcc-footer .hcc-brand-sub {
  font-size: 0.625rem;
}

.hcc-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 14px;
}

.hcc-footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 14px;
  color: var(--hcc-snow);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

.hcc-footer-nav a:hover {
  color: var(--hcc-signal-bright);
  text-decoration: underline;
}

.hcc-footer-line,
.hcc-footer-services,
.hcc-footer-copy {
  margin: 0;
  font-family: var(--hcc-font-mono);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--hcc-granite);
}

/* Measuring widths for body copy on plain sections. */
.hcc-section > .hcc-shell > p {
  max-width: 42rem;
}

/* Responsive step-ups (768px): section rhythm 64 to 96, shell
   padding to 32, facts grids go two-column. */
@media (min-width: 768px) {
  .hcc-shell {
    padding-inline: 32px;
  }

  .hcc-section,
  .hcc-stats-band,
  .hcc-quote,
  .hcc-pointer,
  .hcc-min-band,
  .hcc-min-strip {
    padding-block: 96px;
  }

  .hcc-service-facts,
  .hcc-min-facts {
    grid-template-columns: max-content minmax(0, 1fr);
  }
}

/* The bar goes desktop at 900: the toggle drops out of the layout
   (this rule outranks the hidden-state class by source order: the
   panel class rules never apply here), the links go inline. */
@media (min-width: 900px) {
  .hcc-nav-bar {
    min-height: 48px;
  }

  .hcc-nav-toggle {
    display: none;
  }

  .hcc-nav .hcc-nav-links {
    display: flex;
    flex-basis: auto;
    order: 2;
    align-items: center;
    gap: 8px;
    padding: 0;
  }

  .hcc-nav .hcc-nav-links li + li {
    border-top: 0;
  }

  .hcc-nav .hcc-nav-links a {
    align-items: center;
    padding: 12px 16px;
    font-size: 1rem;
  }

  .hcc-nav-links .hcc-btn-nav {
    margin: 0;
    padding: 12px 20px;
  }

  .hcc-split {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }

  .hcc-split-reverse .hcc-split-media {
    order: -1;
  }

  .hcc-quote-figure {
    display: grid;
    grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
    gap: 24px 56px;
    align-items: center;
  }

  .hcc-quote-figure img,
  .hcc-quote-figure blockquote {
    align-self: center;
  }

  .hcc-quote-figure img {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .hcc-quote-figure blockquote {
    grid-column: 2;
  }

  .hcc-quote-figure figcaption {
    grid-column: 2;
  }

  /* Numbered ministry bands: numeral column beside the copy column.
     The reverse bands move the numeral to the right column by explicit
     placement; auto placement cannot be trusted across source order
     here. The leadership lead row sets the portrait beside the copy,
     mirroring the quote figure above. */
  .hcc-min-band .hcc-shell {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px 56px;
  }

  .hcc-min-band.hcc-min-reverse .hcc-min-copy {
    grid-column: 1;
    grid-row: 1;
  }

  .hcc-min-band.hcc-min-reverse .hcc-min-count {
    grid-column: 2;
    grid-row: 1;
  }

  .hcc-leader-lead {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  }

  .hcc-stats-band .hcc-shell {
    grid-template-columns: repeat(4, 1fr);
  }

  .hcc-stats-band .hcc-stat {
    border-top: 0;
    padding-top: 0;
  }

  .hcc-stats-band .hcc-stat + .hcc-stat {
    border-left: 1px solid var(--hcc-hairline);
    padding-left: 24px;
  }
}

/* The brand sub row hides on very narrow viewports; the word stays. */
@media (max-width: 420px) {
  .hcc-brand-sub {
    display: none;
  }
}

/* Focus rings: visible on every interactive element; snow instead of
   signal on signal buttons (which already sit on the accent). */
.hcc-btn:focus-visible,
.hcc-pill:focus-visible,
.hcc-q summary:focus-visible,
.hcc-nav-toggle:focus-visible,
.hcc-brand:focus-visible,
.hcc-shell a:focus-visible,
.hcc-footer-nav a:focus-visible {
  outline: 3px solid var(--hcc-signal-bright);
  outline-offset: 2px;
}

.hcc-btn:focus-visible {
  outline-color: var(--hcc-snow);
}

/* Reduced motion: every transition dropped; the open marker keeps its
   end-state rotation without animating it. The half turn is always
   written 0.5turn, never in degrees. */
@media (prefers-reduced-motion: reduce) {
  .hcc-btn,
  .hcc-pill,
  .hcc-q summary,
  .hcc-q-mark,
  .hcc-shell a,
  .hcc-footer-nav a,
  .hcc-nav-links a,
  .hcc-brand {
    transition: none;
  }

  .hcc-q[open] .hcc-q-mark {
    transform: rotate(0.5turn);
  }
}