/* =========================================================
   Missio Church — Option B: "Framed & Warm"
   Inspired by covenant315.org — warm neutrals, rounded framed
   photography, bold centered headings, rust color bands.
   Type: Montserrat + Nunito Sans + Lora italic.
   ========================================================= */

:root {
  --bg: #FFFDF0;          /* brand cream */
  --white: #FFFFFF;
  --ink: #2F2F2F;         /* brand charcoal */
  --muted: #85868C;       /* from brand silver #A8A9AD */
  --rust: #FF6153;        /* brand coral */
  --rust-dark: #E85345;
  --navy: #00354F;        /* brand navy */
  --silver: #A8A9AD;
  --charcoal: #2F2F2F;
  --line: #EAE7DA;
  --radius: 20px;
  --shadow: 0 20px 45px -22px rgba(38, 36, 31, .28);
  --font-display: "Montserrat", "Helvetica Neue", sans-serif;
  --font-body: "Nunito Sans", "Helvetica Neue", sans-serif;
  --font-serif: "Lora", Georgia, serif;
  /* the wordmark is set in Avenir, which ships with macOS and iOS; Urbanist is
     the closest free match and covers Windows and Android */
  --font-lockup: Avenir, "Avenir Next", Urbanist, "Nunito Sans", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--rust); color: #fff; }

.container { width: min(1140px, 92%); margin: 0 auto; }
.container-narrow { width: min(780px, 92%); margin: 0 auto; }

/* ---------- Type ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.15rem; line-height: 1.3; }
.lede { font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--muted); max-width: 62ch; }
.serif { font-family: var(--font-serif); font-style: italic; }

.eyebrow {
  font-family: var(--font-display);
  font-size: .76rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--rust); margin-bottom: 1.1rem;
}
.eyebrow-light { color: #F0B9A4; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem 1.8rem; border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 700; font-size: .82rem; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase;
  border: 2px solid transparent;
  transition: all .2s ease; cursor: pointer;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: #00293D; transform: translateY(-2px); }
.btn-clay { background: var(--rust); color: #fff; }
.btn-clay:hover { background: var(--rust-dark); transform: translateY(-2px); }
.btn-ghost { border-color: rgba(255,255,255,.7); color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--charcoal); }
.btn-outline { border-color: var(--charcoal); color: var(--charcoal); }
.btn-outline:hover { background: var(--charcoal); color: #fff; }
.btn-sm { padding: .65rem 1.2rem; font-size: .76rem; }
.text-link {
  font-family: var(--font-display);
  font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink);
  /* Two stacked underlines: a soft one always visible so the link still reads
     as a link, and a solid coral one that sweeps across it on hover. The
     transparent border keeps the box the same height as the old border-bottom. */
  border-bottom: 2px solid transparent;
  background-image: linear-gradient(var(--rust), var(--rust)),
                    linear-gradient(rgba(255, 97, 83, .32), rgba(255, 97, 83, .32));
  background-repeat: no-repeat;
  background-position: left bottom, left bottom;
  background-size: 0 2px, 100% 2px;
  padding-bottom: .2rem;
  transition: color .2s, background-size .4s cubic-bezier(.2, .7, .3, 1);
}
.text-link:hover { color: var(--rust); background-size: 100% 2px, 100% 2px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,253,240,.92);   /* #FFFDF0 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.header-inner { display: flex; align-items: center; gap: 2rem; height: 80px; }
.brand { display: flex; align-items: center; margin-right: auto; flex-shrink: 0; }
.brand-lockup { height: 50px; width: auto; max-width: none; }
.main-nav { display: flex; align-items: center; gap: 1.5rem; }
.main-nav a {
  font-family: var(--font-lockup);
  font-size: 1rem; font-weight: 500; letter-spacing: .005em; text-transform: lowercase;
  color: var(--ink); opacity: .75; transition: opacity .15s, color .15s;
  white-space: nowrap;
}
.main-nav a:hover { opacity: 1; }
.main-nav a.active { opacity: 1; color: var(--rust); }
.nav-cta { flex-shrink: 0; }
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px;
}
.nav-toggle span { width: 22px; height: 2.5px; background: var(--ink); border-radius: 2px; }
.nav-close { display: none; }
.nav-backdrop { display: none; }

/* ---------- Hero: inset framed card ---------- */
.hero {
  position: relative; min-height: 84vh;
  display: flex; align-items: flex-end;
  color: #fff;
  margin: 1.1rem; border-radius: calc(var(--radius) + 6px); overflow: hidden;
}
.hero-media, .hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.hero-media img { filter: none; }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(38,36,31,.15) 0%, rgba(38,36,31,.4) 50%, rgba(38,36,31,.85) 100%);
}
.hero-inner { position: relative; padding: 8rem 0 4rem; width: min(1140px, 88%); margin: 0 auto; }
.hero h1 { max-width: 17ch; margin-bottom: 1.4rem; }
.hero-sub {
  font-size: 1.12rem; max-width: none; color: rgba(255,255,255,.9);
  margin-bottom: 2.2rem;
}
.hero-actions { display: flex; gap: .9rem; flex-wrap: wrap; margin-bottom: 3.2rem; }
.hero-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
  padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.3);
}
.hero-meta div { font-size: .88rem; }
.hero-meta strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: .92rem; }
.hero-meta span { color: rgba(255,255,255,.65); }

/* ---------- Page hero ---------- */
.page-hero { padding: 5.5rem 0 3.5rem; text-align: center; }
.page-hero.on-sand { background: var(--bg); }
.page-hero h1 { max-width: 20ch; margin: 0 auto 1.2rem; }
.page-hero .lede { margin-inline: auto; }
/* Hero headline and lede each sit on one line when the container allows it.
   The width caps above and on .lede are what forced short text to wrap and
   strand a word or two. From tablet up the headline never wraps; main.js
   trims its size a little when a long one would overflow, and only lets it
   wrap if even that is not enough. Ledes too long for one line wrap into
   even lines. The mission statement on About is meant to run several lines. */
.page-hero h1:not(.mission-statement), .imnew-hero-text h1 { max-width: none; }
.page-hero .lede { max-width: none; text-wrap: balance; }
@media (min-width: 900px) {
  .page-hero h1:not(.mission-statement), .imnew-hero-text h1 { text-wrap: nowrap; }
  .page-hero h1.hero-fit-wrap, .imnew-hero-text h1.hero-fit-wrap { text-wrap: balance; }
}
/* Anywhere else, headings and ledes that must wrap split into even lines so
   no single word is left on its own. Text that fits one line is unaffected;
   older browsers wrap normally. Intro ledes also lose the reading-width cap
   so a sentence that fits the column stays on one line. */
h1, h2, h3, .lede, .card p, .card-body p { text-wrap: balance; }
.imnew-intro .lede, .section-head .lede { max-width: none; }
/* Less air between a hero and the content under it. */
.page-hero { padding-bottom: 2rem; }
.page-hero + .section, .imnew-intro + .section { padding-top: 2.5rem; }
.page-hero .ministry-logo { margin-inline: auto; }

/* ---------- Sections ---------- */
.section { padding: 5.5rem 0; }
.section-sand { background: var(--white); }
.section-green { background: var(--charcoal); color: #fff; }
.section-head { max-width: 700px; margin: 0 auto 3rem; text-align: center; }
.section-head h2 { margin-bottom: 1rem; }
.section-head .lede { margin-inline: auto; }
/* the description runs to two paragraphs; they need air between them */
.section-head .lede + .lede { margin-top: 1.15rem; }
.section-cta-row { margin-top: 2.6rem; display: flex; gap: .9rem; flex-wrap: wrap; justify-content: center; }

/* ---------- Cards / grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

.card {
  background: var(--white); border-radius: var(--radius); padding: 2.2rem 2rem;
  box-shadow: 0 6px 24px -14px rgba(38,36,31,.14);
  transition: transform .25s ease, box-shadow .25s ease;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card h3 { margin-bottom: .7rem; }
.card p { color: var(--muted); font-size: .95rem; }
.card .text-link { display: inline-block; margin-top: auto; padding-top: 1.3rem; }
/* Resources page: the three cards share row tracks (subgrid), so every pill is
   as tall as the tallest one and the descriptions start on the same line */
.res-cards > .card { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; justify-items: center; align-items: start; }
.res-cards > .card .card-icon { align-self: stretch; display: flex; align-items: center; justify-content: center; }
.res-cards > .card .text-link { align-self: end; }
.section-sand .card { background: var(--bg); box-shadow: none; border: 1px solid var(--line); }

.card-icon {
  display: inline-block;
  font-family: var(--font-display); font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--rust); background: rgba(193,80,46,.1);
  border-radius: 999px; padding: .4rem 1rem; margin-bottom: 1.2rem;
}

/* Campus cards */
.campus-card .campus-time {
  display: inline-block;
  font-family: var(--font-display); font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--rust);
  border-radius: 999px; padding: .4rem 1rem; margin-bottom: 1.2rem;
}
.campus-card address { font-style: normal; color: var(--muted); font-size: .95rem; line-height: 1.7; }

/* Steps */
.step-num {
  font-family: var(--font-display); font-size: 2.2rem; font-weight: 700;
  color: var(--rust); line-height: 1; margin-bottom: 1rem;
}

/* ---------- Mission band: rust ---------- */
.mission-band { background: var(--rust); color: #fff; text-align: center; }
.mission-band blockquote {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.45; font-weight: 500; max-width: 30ch; margin: 0 auto;
}
.mission-band blockquote em { color: #FBDDCB; }
.mission-band cite {
  display: block; margin-top: 1.8rem;
  font-family: var(--font-display); font-style: normal;
  font-size: .74rem; font-weight: 700; letter-spacing: .26em;
  text-transform: uppercase; color: rgba(255,255,255,.75);
}

/* ---------- Sermons ---------- */
.tabs {
  position: relative;
  display: inline-flex; gap: .35rem; background: var(--line);
  padding: .35rem; border-radius: 999px; margin: 0 auto 2rem;
}
.section .tabs { display: flex; width: max-content; }
.tab {
  border: none; background: transparent; cursor: pointer;
  padding: .6rem 1.4rem; border-radius: 999px;
  font-family: var(--font-display); font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  transition: all .2s;
}
.tab.active { background: var(--white); color: var(--ink); box-shadow: 0 2px 8px rgba(38,36,31,.12); }

/* Sliding pill behind the active tab. main.js measures the active tab and
   sets --pill-*; the active tab's own background is dropped so the pill is
   the only white shape and it can travel between tabs. Falls back to the
   plain .tab.active background when JS hasn't run. */
.tabs.has-pill::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: var(--pill-w); height: var(--pill-h);
  transform: translate(var(--pill-x), var(--pill-y));
  background: var(--white); border-radius: 999px;
  box-shadow: 0 2px 8px rgba(38,36,31,.12);
  pointer-events: none;
  transition: transform .34s cubic-bezier(.4, 0, .2, 1),
              width .34s cubic-bezier(.4, 0, .2, 1),
              height .34s cubic-bezier(.4, 0, .2, 1);
}
/* first paint, and any resize, should land without sliding */
.tabs.has-pill.pill-still::before { transition: none; }
.tabs.has-pill .tab { position: relative; z-index: 1; }
.tabs.has-pill .tab.active { background: transparent; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .tabs.has-pill::before { transition: none; }
}

.sermon-list { display: flex; flex-direction: column; gap: .9rem; }
.sermon-item {
  display: flex; align-items: center; gap: 1.4rem; color: var(--ink);
  background: var(--white); border-radius: 14px; padding: 1.1rem 1.5rem;
  box-shadow: 0 4px 18px -12px rgba(38,36,31,.15);
  transition: transform .2s, box-shadow .2s;
}
.section-sand .sermon-item { background: var(--bg); box-shadow: none; border: 1px solid var(--line); }
.sermon-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.sermon-play {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  background: var(--rust); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.sermon-info { min-width: 0; text-align: left; }
.sermon-info h3 { font-size: 1rem; margin-bottom: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sermon-info p { font-size: .84rem; color: var(--muted); }
.sermon-date { margin-left: auto; flex-shrink: 0; font-size: .82rem; color: var(--muted); }

.podcast-badges { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2.2rem; justify-content: center; }

/* ---------- Events ---------- */
.event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.event-card {
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 6px 24px -14px rgba(38,36,31,.14);
  display: flex; flex-direction: column;
  transition: transform .25s, box-shadow .25s;
}
.event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.event-img { aspect-ratio: 16/9; object-fit: cover; width: 100%; background: var(--line); }
.event-img.fit-contain { object-fit: contain; background: #fff; padding: .6rem 1rem; }
.event-img.fit-zoom { transform: scale(1.45); }
.event-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; gap: 1.1rem; text-align: left; }
.event-date-chip {
  text-align: center; flex-shrink: 0; width: 54px; height: 54px;
  background: var(--bg); border-radius: 12px;
  display: flex; flex-direction: column; justify-content: center;
}
.event-date-chip .m { font-family: var(--font-display); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rust); }
.event-date-chip .d { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; line-height: 1.1; }
.event-body h3 { font-size: 1.02rem; margin-bottom: .3rem; }
.event-body .when { font-size: .78rem; color: var(--muted); margin-bottom: .45rem; }
.event-body p.desc {
  font-size: .88rem; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- People ---------- */
.people-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.2rem 1.6rem; }
#people-elders .person { flex: 0 0 calc(33.33% - 1.6rem); max-width: 270px; }
#people-staff .person { flex: 0 0 calc(33.33% - 1.6rem); max-width: 270px; }
.person { text-align: center; }
.person img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--line);
  margin-bottom: .9rem;
  transition: border-color .25s ease;
}
.person:hover img { border-color: var(--navy); }
.person h3 { font-size: .98rem; }
.person p { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: .25rem; }
.people-label {
  font-family: var(--font-display);
  font-size: .82rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  text-align: center; margin: 3rem 0 1.6rem;
}

/* ---------- Accordion ---------- */
.accordion { display: flex; flex-direction: column; gap: .8rem; }
.accordion details {
  background: var(--white); border-radius: 14px;
  box-shadow: 0 4px 18px -12px rgba(38,36,31,.12);
  padding: 0 1.6rem;
}
.accordion summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.3rem 0;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--rust);
  transition: transform .25s;
}
.accordion details[open] summary::after { transform: rotate(45deg); }
/* Expand/collapse is animated by main.js. It used to ride on
   ::details-content + interpolate-size, which only Chromium implements, so on
   iOS Safari the panels snapped open with no animation at all. */
.accordion summary { -webkit-tap-highlight-color: transparent; }
/* while closing, "open" is still set until the animation ends, so flip the
   marker back to a plus straight away rather than at the end */
.accordion details.is-closing summary::after { transform: none; }
.section-sand .accordion details { background: var(--bg); box-shadow: none; border: 1px solid var(--line); }
/* ----- Scripture references: hover/tap to read the passage inline ----- */
.vref {
  /* pointer, not help: this carries role="button", takes focus, and is tapped
     to open on touch, so it behaves like a button rather than a footnote */
  cursor: pointer; border-bottom: 1px dashed #C9BFA6; border-radius: 3px; padding: 0 2px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.vref:hover, .vref.on { background: rgba(255, 97, 83, .13); color: var(--ink); border-bottom-color: var(--rust); }
.vref:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
/* opens below the reference list and pushes the rest down, so it covers nothing */
.vinline {
  display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: .5rem;
  transition: grid-template-rows .22s cubic-bezier(.2, .7, .3, 1), opacity .16s ease;
}
.vinline.show { grid-template-rows: 1fr; opacity: 1; }
.vinline > div { overflow: hidden; }
/* Chapter-length references are real: "John 14-16" is over 10,000 characters.
   Cap the box and let it scroll inside rather than pushing the page down. */
.vinline .vbox {
  background: var(--bg); border-left: 3px solid var(--rust); border-radius: 0 8px 8px 0;
  padding: .75rem .95rem; max-height: 42vh; overflow-y: auto; overscroll-behavior: contain;
}
@media (max-width: 720px) { .vinline .vbox { max-height: 50vh; } }
.vinline .vref-label { font-family: var(--font-display); font-weight: 700; font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; color: var(--rust); margin: 0 0 .35rem; }
.vinline .vtext { font-family: var(--font-body); font-size: .88rem; line-height: 1.72; color: var(--ink); margin: 0; }
.vinline .vattr { font-family: var(--font-display); font-weight: 700; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: .5rem 0 0; }
.vinline .vattr a { color: var(--muted); border-bottom: 1px solid var(--line); }
.vinline .vattr a:hover { color: var(--rust); border-bottom-color: var(--rust); }
@media (prefers-reduced-motion: reduce) { .vinline, .vref { transition: none; } }

.accordion .acc-body { padding: 0 0 1.5rem; color: var(--muted); max-width: 66ch; }
.accordion .acc-body p { margin-bottom: 1rem; }
.acc-refs { font-size: .82rem; opacity: .75; }

/* ---------- Values ---------- */
.value-card { border-top: 4px solid var(--rust); }

/* ---------- MC list ---------- */
.mc-region h3 { margin: 2.2rem 0 1rem; color: var(--rust); font-size: .9rem; letter-spacing: .16em; text-transform: uppercase; text-align: center; }
.mc-pills { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.mc-pill {
  background: var(--white); border-radius: 999px;
  box-shadow: 0 3px 12px -8px rgba(38,36,31,.18);
  border: 2px solid transparent;
  padding: .9rem 1.6rem; font-size: 1.02rem;
  transition: opacity .4s ease, filter .4s ease, border-color .3s ease, box-shadow .3s ease;
}
.mc-pill strong { font-weight: 700; }
.mc-pill span { color: var(--muted); }

/* ---------- Ministry logos ---------- */
.ministry-logo { max-height: 78px; width: auto; margin: 0 auto 1.3rem; }
/* A lockup that sets its wordmark beside an emblem spends most of the
   height cap on the emblem, so its type comes out much smaller than the
   wordmark-only logos next to it. A little more height evens them up. */
.ministry-logo.is-lockup { max-height: 96px; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 24ch; margin: 0 auto 1.2rem; }
.cta-band .lede { margin: 0 auto 2.2rem; }
.section-green { border-radius: calc(var(--radius) + 6px); margin: 0 1.1rem; }
.section-green .lede { color: rgba(255,255,255,.7); }
.section-green .eyebrow { color: #F0B9A4; }
.section-green .card { background: rgba(255,255,255,.06); box-shadow: none; color: #fff; }
.section-green .card p { color: rgba(255,255,255,.7); }
.section-green .card h3 { color: #fff; }
.section-green .card .text-link { color: #fff; border-color: #F0B9A4; }

/* ---------- Footer ---------- */
.site-footer { background: var(--charcoal); color: rgba(255,255,255,.78); padding: 4.5rem 0 2.5rem; margin-top: 1.1rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; }
.footer-brand { margin-bottom: 1.3rem; }
.footer-brand img { height: 44px; width: auto; }
.site-footer h4 {
  font-family: var(--font-display);
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: 1rem; font-weight: 700;
}
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: .55rem; font-size: .92rem; }
.site-footer a:hover { color: #F0B9A4; }
.footer-tagline { font-family: var(--font-body); font-style: normal; font-size: 1rem; max-width: none; line-height: 1.6; color: rgba(255,255,255,.65); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15); padding-top: 1.8rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  font-size: .8rem; color: rgba(255,255,255,.5);
}

/* ---------- Option badge ---------- */
.opt-badge {
  position: fixed; bottom: 1.1rem; right: 1.1rem; z-index: 500;
  background: var(--charcoal); color: #fff;
  font-family: var(--font-display); font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .6rem 1rem; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); opacity: .92;
}
.opt-badge:hover { opacity: 1; }

/* ---------- Reveal ---------- */
/* --reveal-i is set per grid by main.js; siblings follow 90ms behind each
   other so a row cascades instead of landing all at once. */
.reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; transition-delay: 0s; }
}

/* Soft fade while pjax swaps <main>, so a soft navigation reads as a
   transition instead of a flicker. js/pjax.js adds .pjax-out.
   Safe to transform: the mini-player and option badge are the only fixed
   elements and both live on <body>, not inside <main>. */
main { transition: opacity .22s ease, transform .22s ease; }
main.pjax-out { opacity: 0; transform: translateY(7px); }
/* The arriving half of the same movement, for real navigations — a soft
   navigation animates the swapped main back in, but a full load (to or from
   the homepage, or a direct visit) painted the page fully formed, which is
   why leaving the homepage read as a jolt while the interior pages felt
   smooth. `backwards`, not `both`: a lingering forwards fill would overrule
   .pjax-out and freeze the fade-out. The homepage's own arrival rule below
   overrides this one there. */
main { animation: pageArrive .24s ease-out backwards; }
@keyframes pageArrive { from { opacity: 0; transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) {
  main { transition: none; animation: none; }
  main.pjax-out { opacity: 1; transform: none; }
}

/* The homepage cannot use the pjax swap — it is a standalone layout with none
   of the site chrome — so it plays the same fade around real navigations
   instead: in on arrival, out just before leaving. The .out rule leans on the
   main transition above. */
body.home-alt main { animation: homeArrive .26s ease-out backwards; }
@keyframes homeArrive { from { opacity: 0; transform: translateY(7px); } }
body.home-alt.is-leaving main { opacity: 0; transform: translateY(7px); }
/* The homepage body is navy (#182B36) for the one-screen hero, so fading main
   out uncovered a navy backdrop — a blue flash before the cream page arrived.
   While leaving, the backdrop is the interior pages' cream instead, so the
   fade lands on the color the next page opens with. */
body.home-alt.is-leaving { background: var(--bg); }
@media (prefers-reduced-motion: reduce) {
  body.home-alt main { animation: none; }
  body.home-alt.is-leaving main { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1220px) {
  .main-nav { gap: 1.1rem; }
  .header-inner { gap: 1.2rem; }
  .brand-lockup { height: 42px; }
}
@media (max-width: 1080px) {
  .main-nav { gap: .85rem; }
  .main-nav a { font-size: .88rem; }
  .header-inner { gap: .9rem; }
  .nav-cta { padding: .55rem .9rem; font-size: .7rem; }
  .brand-lockup { height: 38px; }
}
@media (max-width: 960px) {
  .grid-3, .grid-4, .event-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-meta { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
  .main-nav {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 85vw);
    background: var(--white); flex-direction: column; align-items: flex-start;
    padding: 5.5rem 2rem 2rem; gap: 1.4rem;
    transform: translateX(100%); transition: transform .3s ease;
    z-index: 200; box-shadow: -20px 0 60px rgba(0,0,0,.15);
  }
  .main-nav.open { transform: none; }
  .main-nav a { font-size: 1.35rem; }
  .nav-close {
    display: block; position: absolute; top: 1.1rem; right: 1.3rem;
    background: none; border: none; font-size: 2rem; cursor: pointer; color: var(--ink);
  }
  /* below .site-header's z-index:100 — the sticky header is its own stacking
     context, so the drawer inside it can never rise above a higher backdrop */
  .nav-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 90; }
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }
  .grid-2, .grid-3, .grid-4, .event-grid { grid-template-columns: 1fr; }
  #people-elders .person, #people-staff .person { flex-basis: calc(50% - 1.6rem); max-width: 200px; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero { min-height: 78vh; margin: .6rem; }
  .hero-meta { grid-template-columns: 1fr 1fr; gap: 1.1rem; }
  .sermon-date { display: none; }
  .section { padding: 4rem 0; }
  .section-green { margin: 0 .6rem; }
  .tabs { flex-wrap: wrap; border-radius: 16px; }
}

/* ===== B homepage restructure components ===== */
.topbar { background: var(--navy); color: rgba(255,255,255,.8); font-size: .78rem; }
.topbar-inner { display: flex; align-items: center; gap: 1.2rem; height: 38px; }
.topbar-item strong { color: #fff; }
.topbar-item:not(:first-child)::before { content: "·"; margin-right: 1.2rem; opacity: .5; }
.topbar-give { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rust); }
.topbar-give:hover { color: #fff; }

.hero { align-items: center; text-align: left; }
.hero-inner { padding: 7rem 0; }
.hero h1 { max-width: none; }
.hero-sub { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }

.loc-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; text-align: center; }
.loc {
  position: relative; overflow: hidden;
  padding: 1.6rem 1rem; border-top: 4px solid var(--rust);
  background: var(--bg); border-radius: 0 0 14px 14px;
}
.loc h3, .loc p, .loc .text-link { position: relative; z-index: 2; }
.loc h3 { margin-bottom: .3rem; }
/* Line sketch of each building above its name (idea parked; drafts live in
   assets/img/sketches-wip). Height fixed so the three names line up. */
.loc-art { position: relative; z-index: 2; display: block; height: 150px; width: auto; max-width: 90%;
           margin: 0 auto 1rem; object-fit: contain; }
@media (max-width: 720px) { .loc-art { height: 120px; } }
.loc p { color: var(--muted); font-size: .92rem; margin-bottom: .8rem; }
/* Circular variant: each card is a ring with the details centred inside. */
.loc-circles { gap: 2rem; justify-items: center; align-items: center; }
/* The card is the Missio mark: its outer ring is the border (9px on a 340px circle
   matches the mark's proportions), drawn faint until hover or tap fills it navy.
   The mark itself sits behind the details at 6%, pulled out to the border edge so
   its own ring lines up with the CSS one. */
.loc-circles .loc {
  width: min(100%, 340px); aspect-ratio: 1; border-radius: 50%;
  border: 9px solid rgba(47,47,47,.14); padding: 2rem 1.8rem; background: transparent;
  overflow: visible;   /* the ring and photo extend over the border; both are round already */
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  transition: opacity .4s ease, filter .4s ease, border-color .3s ease, box-shadow .3s ease;
}
.loc-circles .loc::before {
  content: ""; position: absolute; inset: -9px; z-index: 1; border-radius: 50%;
  background: url("/assets/img/mark-black.png") center / 100% 100% no-repeat;
  opacity: .06; pointer-events: none;
}
.loc-circles .loc > * { position: relative; z-index: 2; }
.loc-circles .loc:hover, .loc-circles .loc.is-active {
  box-shadow: 0 18px 40px -22px rgba(47,47,47,.35);
}
/* the circles sit on the section colour so the connecting line passes behind them */
.loc-circles .loc { background: var(--bg); }
.loc-circles { position: relative; }
.loc-circles::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px;
  background: rgba(47,47,47,.14); z-index: 0;
}
@media (max-width: 720px) { .loc-circles::before { display: none; } }
/* campus name leads; address in the serif italic */
.loc-circles .loc h3 { font-size: 1.45rem; margin-bottom: .45rem; }
#locations .loc-circles .loc address {
  font-family: var(--font-serif); font-style: italic; font-size: 1.02rem; line-height: 1.5;
}
/* the campus photo fades in inside the circle on hover or tap, darkened so the text stays readable */
.loc-circles .loc-photo {
  position: absolute; inset: -9px; z-index: 1; width: calc(100% + 18px); height: calc(100% + 18px);
  max-width: none;     /* the global img cap would shrink it and pull it off centre */
  border-radius: 50%; object-fit: cover; opacity: 0;
  filter: brightness(.5) saturate(.85); transition: opacity .45s ease; pointer-events: none;   /* fades in with the sweep, no zoom */
}
.loc-circles .loc:hover .loc-photo, .loc-circles .loc.is-active .loc-photo { opacity: 1; }
.loc-circles .loc:hover h3, .loc-circles .loc.is-active h3,
#locations .loc-circles .loc:hover address, #locations .loc-circles .loc.is-active address { color: #fff; }
.loc-circles .loc:hover .text-link, .loc-circles .loc.is-active .text-link { color: #fff; }
/* the navy ring draws itself around the circle on hover */
.loc-circles .loc-ring {
  position: absolute; inset: -9px; z-index: 3; width: calc(100% + 18px); height: calc(100% + 18px);
  transform: rotate(-90deg); pointer-events: none;
}
.loc-circles .loc-ring circle {
  fill: none; stroke: var(--navy); stroke-width: 2.65; stroke-linecap: round;
  stroke-dasharray: 306; stroke-dashoffset: 306; transition: stroke-dashoffset .55s ease;
}
.loc-circles .loc:hover .loc-ring circle, .loc-circles .loc.is-active .loc-ring circle { stroke-dashoffset: 0; }

/* hover: the whole section background becomes that campus's map,
   and the other two cards gray out */
#locations { position: relative; overflow: hidden; }
#locations .container { position: relative; z-index: 2; }
.loc-bgs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.loc-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.07);
  transition: opacity .5s ease, transform 5s ease;
}
.loc-bgs::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,253,240,.85) 0%, rgba(255,253,240,.25) 45%, rgba(255,253,240,.6) 100%);
}
#locations:has(.loc-caz:hover) .loc-bg[data-for="caz"],
#locations:has(.loc-downtown:hover) .loc-bg[data-for="downtown"],
#locations:has(.loc-valley:hover) .loc-bg[data-for="valley"],
#locations:has(.loc-caz.is-active) .loc-bg[data-for="caz"],
#locations:has(.loc-downtown.is-active) .loc-bg[data-for="downtown"],
#locations:has(.loc-valley.is-active) .loc-bg[data-for="valley"] { opacity: 1; transform: scale(1.005); }
.loc { transition: opacity .4s ease, filter .4s ease, border-top-color .3s ease, box-shadow .3s ease; }
#locations:has(.loc:hover) .loc:not(:hover),
#locations:has(.loc.is-active) .loc:not(.is-active) { opacity: .42; filter: grayscale(.8); }
.loc:hover, .loc.is-active { border-top-color: var(--navy); box-shadow: 0 14px 34px -18px rgba(47,47,47,.3); }

.mission-photo { position: relative; margin: 0 1.1rem; border-radius: calc(var(--radius) + 6px); overflow: hidden; min-height: 480px; display: flex; align-items: center; justify-content: center; }
.mission-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5); }
.mission-photo blockquote { position: relative; color: #fff; max-width: 46ch; text-align: center; padding: 4rem 1.5rem; font-size: clamp(1.25rem, 2.4vw, 1.8rem); line-height: 1.5; }
.mission-photo blockquote { font-family: var(--font-display); font-style: normal; font-weight: 600; }

.rust-band { background: var(--navy); color: #fff; }
.rust-band .section-head h2 { color: #fff; }
.rust-band .tabs { background: rgba(0,0,0,.15); }
.rust-band .tab { color: rgba(255,255,255,.75); }
.rust-band .tab.active { background: #fff; color: var(--ink); }
.rust-band .sermon-item { background: #fff; }
.rust-band .sermon-play { background: var(--rust); }

.step-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 3.5rem; }
.step-row:last-child { margin-bottom: 0; }
.step-row-img { border-radius: var(--radius); overflow: hidden; background: var(--white); box-shadow: var(--shadow); aspect-ratio: 16/11; display: flex; align-items: center; justify-content: center; }
.step-row-img img { width: 100%; height: 100%; object-fit: cover; }
.step-row-img img.contain { object-fit: contain; padding: 2.5rem; }
.step-row.flip .step-row-img { order: 2; }
.step-row-body { text-align: left; }
.step-row-body h3 { font-size: 1.6rem; margin-bottom: .8rem; }
.step-row-body p { color: var(--muted); margin-bottom: 1.2rem; }

.event-grid.carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1.4rem; padding-bottom: 1rem; }
.event-grid.carousel .event-card { flex: 0 0 320px; scroll-snap-align: start; }

.footer-centered { text-align: center; }
.footer-logo { height: 48px; width: auto; margin: 0 auto 1.2rem; }
.footer-centered .footer-tagline { margin: 0 auto 2rem; }
.footer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.6rem; margin-bottom: 1.4rem; }
.footer-nav a { font-family: var(--font-display); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.footer-centered .footer-social { justify-content: center; margin-bottom: 2.2rem; display: flex; gap: 1.4rem; font-size: .9rem; }

@media (max-width: 720px) {
  .topbar-inner { justify-content: center; }
  .topbar-item:not(:first-child) { display: none; }
  .loc-row { grid-template-columns: 1fr; }
  .step-row { grid-template-columns: 1fr; gap: 1.4rem; margin-bottom: 2.6rem; }
  .step-row.flip .step-row-img { order: 0; }
  .event-grid.carousel .event-card { flex-basis: 82vw; }
}


/* ===== "Next steps" — Option A look (hairline grid, numbered) ===== */
.steps-a {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.card-a { background: #fff; padding: 2.3rem 2.1rem; text-align: left; display: flex; flex-direction: column; }
.card-a .step-num-a {
  display: block; font-family: var(--font-display);
  font-size: .8rem; font-weight: 700; letter-spacing: .22em;
  color: var(--rust); margin-bottom: 1.4rem;
}
.card-a h3 {
  font-size: 1.15rem;
  margin-bottom: .8rem;
}
.card-a p { color: var(--muted); font-size: .95rem; }
.card-a .text-link {
  display: inline-block; margin-top: auto; padding-top: 1.4rem;
  align-self: flex-start;
  color: var(--ink); border-bottom: 1.5px solid var(--ink);
}
.card-a .text-link:hover { color: var(--rust); border-color: var(--rust); }
@media (max-width: 720px) { .steps-a { grid-template-columns: 1fr; } }


/* ===== Hero crossfade slideshow ===== */
.hero-media img { opacity: 0; animation: heroFade 18s ease-in-out infinite; }
.hero-media img:nth-of-type(1) { animation-name: heroFadeFirst; }
.hero-media img:nth-of-type(2) { animation-delay: 6s; }
.hero-media img:nth-of-type(3) { animation-delay: 12s; }
@keyframes heroFade {
  0% { opacity: 0; } 6% { opacity: 1; } 33.3% { opacity: 1; } 41% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes heroFadeFirst {
  0% { opacity: 1; } 33.3% { opacity: 1; } 41% { opacity: 0; } 94% { opacity: 0; } 100% { opacity: 1; }
}

/* ===== Footer social icons ===== */
.footer-social { display: flex; justify-content: center; gap: 1.4rem; margin-bottom: 2.2rem; }
.footer-social .icon {
  width: 21px; height: 21px; display: inline-block;
  background: rgba(255,255,255,.72);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  transition: background .18s, transform .18s;
}
.footer-social .icon:hover { background: var(--rust); transform: translateY(-2px); }
.icon-facebook { -webkit-mask-image: url("../assets/icons/facebook.svg"); mask-image: url("../assets/icons/facebook.svg"); }
.icon-instagram { -webkit-mask-image: url("../assets/icons/instagram.svg"); mask-image: url("../assets/icons/instagram.svg"); }
.icon-x { -webkit-mask-image: url("../assets/icons/x.svg"); mask-image: url("../assets/icons/x.svg"); }
.icon-spotify { -webkit-mask-image: url("../assets/icons/spotify.svg"); mask-image: url("../assets/icons/spotify.svg"); }
.icon-applepodcasts { -webkit-mask-image: url("../assets/icons/applepodcasts.svg"); mask-image: url("../assets/icons/applepodcasts.svg"); }
.icon-applemusic { -webkit-mask-image: url("../assets/icons/applemusic.svg"); mask-image: url("../assets/icons/applemusic.svg"); }

/* ===== Sticky mini-player (site-wide, persistent via pjax) ===== */
.miniplayer {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 1rem; z-index: 400;
  width: min(680px, 94vw);
  background: var(--ink); color: #fff; border-radius: 999px;
  display: none; align-items: center; gap: 1rem;
  padding: .65rem 1.1rem .65rem .65rem;
  box-shadow: 0 18px 44px -12px rgba(0,0,0,.45);
}
.miniplayer.on { display: flex; }
.mini-play {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--rust); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.mini-title {
  font-family: var(--font-display); font-size: .8rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px;
}
.miniplayer .seek {
  -webkit-appearance: none; appearance: none; flex: 1; height: 5px;
  border-radius: 3px; background: rgba(255,255,255,.25); outline: none; cursor: pointer;
}
.miniplayer .seek::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--rust);
}
.mini-time { font-size: .7rem; color: rgba(255,255,255,.65); flex-shrink: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini-close {
  background: none; border: none; color: rgba(255,255,255,.6);
  font-size: 1.3rem; cursor: pointer; flex-shrink: 0; padding: 0 .2rem; line-height: 1;
}
.mini-close:hover { color: #fff; }
.sermon-item { cursor: pointer; }
@media (max-width: 600px) { .mini-title { max-width: 110px; } .mini-time { display: none; } }


/* ===== Missional Communities: hover floods section with neighborhood map ===== */
/* overflow was hidden to contain the hover-flood background images. Those are
   gone — nothing triggered them once the pill lists were replaced by the map —
   and the clipping silently disabled position:sticky for everything inside,
   which is what stopped the map pinning. */
#missional-communities { position: relative; }
#missional-communities .container { position: relative; z-index: 2; }
.mc-bgs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mc-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.07);
  transition: opacity .5s ease, transform 5s ease;
}
.mc-bgs::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,253,240,.85) 0%, rgba(255,253,240,.3) 45%, rgba(255,253,240,.65) 100%);
}
#missional-communities:has(.mc-pill[data-mc="camillus"]:hover) .mc-bg[data-for="camillus"],
#missional-communities:has(.mc-pill[data-mc="camillus"].is-active) .mc-bg[data-for="camillus"],
#missional-communities:has(.mc-pill[data-mc="eastwood"]:hover) .mc-bg[data-for="eastwood"],
#missional-communities:has(.mc-pill[data-mc="eastwood"].is-active) .mc-bg[data-for="eastwood"],
#missional-communities:has(.mc-pill[data-mc="jamesvilledewitt"]:hover) .mc-bg[data-for="jamesvilledewitt"],
#missional-communities:has(.mc-pill[data-mc="jamesvilledewitt"].is-active) .mc-bg[data-for="jamesvilledewitt"],
#missional-communities:has(.mc-pill[data-mc="liverpool"]:hover) .mc-bg[data-for="liverpool"],
#missional-communities:has(.mc-pill[data-mc="liverpool"].is-active) .mc-bg[data-for="liverpool"],
#missional-communities:has(.mc-pill[data-mc="nearwestside"]:hover) .mc-bg[data-for="nearwestside"],
#missional-communities:has(.mc-pill[data-mc="nearwestside"].is-active) .mc-bg[data-for="nearwestside"],
#missional-communities:has(.mc-pill[data-mc="downtown"]:hover) .mc-bg[data-for="downtown"],
#missional-communities:has(.mc-pill[data-mc="downtown"].is-active) .mc-bg[data-for="downtown"],
#missional-communities:has(.mc-pill[data-mc="northvalley"]:hover) .mc-bg[data-for="northvalley"],
#missional-communities:has(.mc-pill[data-mc="northvalley"].is-active) .mc-bg[data-for="northvalley"],
#missional-communities:has(.mc-pill[data-mc="saltsprings"]:hover) .mc-bg[data-for="saltsprings"],
#missional-communities:has(.mc-pill[data-mc="saltsprings"].is-active) .mc-bg[data-for="saltsprings"],
#missional-communities:has(.mc-pill[data-mc="southvalley"]:hover) .mc-bg[data-for="southvalley"],
#missional-communities:has(.mc-pill[data-mc="southvalley"].is-active) .mc-bg[data-for="southvalley"],
#missional-communities:has(.mc-pill[data-mc="caz"]:hover) .mc-bg[data-for="caz"],
#missional-communities:has(.mc-pill[data-mc="caz"].is-active) .mc-bg[data-for="caz"],
#missional-communities:has(.mc-pill[data-mc="chittenango"]:hover) .mc-bg[data-for="chittenango"],
#missional-communities:has(.mc-pill[data-mc="chittenango"].is-active) .mc-bg[data-for="chittenango"] { opacity: 1; transform: scale(1.005); }
#missional-communities:has(.mc-pill:hover) .mc-pill:not(:hover),
#missional-communities:has(.mc-pill.is-active) .mc-pill:not(.is-active) { opacity: .45; filter: grayscale(.8); }
.mc-pill:hover, .mc-pill.is-active { border-color: var(--navy); box-shadow: 0 10px 26px -14px rgba(47,47,47,.35); }

/* ===== Sermon series browser ===== */
.series-feature {
  background: var(--white); border-radius: var(--radius);
  box-shadow: 0 6px 24px -14px rgba(38,36,31,.14);
  padding: 2.4rem; margin: 2.2rem 0 3.5rem; text-align: left;
}
.sf-head { display: grid; grid-template-columns: 360px 1fr; gap: 2.2rem; align-items: start; margin-bottom: 1.8rem; }
.sf-art-img { width: 100%; border-radius: 14px; }
.art-fallback {
  aspect-ratio: 16/9; border-radius: 14px;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; text-align: center;
}
.art-fallback span { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; line-height: 1.2; }
.sf-badge {
  display: inline-block; font-family: var(--font-display);
  font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: #fff; background: var(--rust); border-radius: 999px;
  padding: .35rem .9rem; margin-bottom: .9rem;
}
.sf-info h2 { margin-bottom: .4rem; }
.sf-meta { font-family: var(--font-display); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.sf-blurb { color: var(--muted); font-size: .97rem; line-height: 1.75; }
.sf-blurb.clamped {
  max-height: 13.5rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.sf-blurb p { margin-bottom: .9rem; }
.sf-blurb h4 {
  font-family: var(--font-display); font-size: .74rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  margin: 1.3rem 0 .5rem;
}
.sf-blurb h4:first-child { margin-top: 0; }
.sf-blurb ul, .sf-blurb ol { padding-left: 1.4rem; margin-bottom: .9rem; }
.sf-blurb li { margin-bottom: .3rem; }
.sf-style-bg .sf-blurb h4 { color: #F0B9A4; }
.sf-toggle {
  background: none; border: none; cursor: pointer; padding: 0; margin-top: .7rem;
  font-family: var(--font-display); font-size: .76rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); border-bottom: 2px solid var(--rust);
}
.sf-toggle:hover { color: var(--rust); }
.series-feature .sermon-item { background: var(--bg); box-shadow: none; border: 1px solid var(--line); }

.series-lib-head { text-align: center; margin-bottom: 2rem; }
.series-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.series-card {
  /* flex column, so the whitespace text nodes between the thumb and the body
     don't render as stray line boxes above and below the art (buttons lay
     their children out inline by default). */
  display: flex; flex-direction: column;
  background: var(--white); border: 2px solid transparent; border-radius: 16px; overflow: hidden;
  box-shadow: 0 6px 24px -14px rgba(38,36,31,.14);
  cursor: pointer; text-align: left; padding: 0; font: inherit;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.series-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.series-card.active { border-color: var(--rust); }
/* Every thumb is exactly 16/9, never grown or shrunk, so the art is the same
   size on every card. The body below takes the slack when the grid stretches
   a card to match a taller neighbour. */
.series-thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--line); flex: 0 0 auto; }
.series-thumb-img {
  width: 100%; height: 100%; object-fit: cover;
  /* the art drifts in slightly on hover; .series-thumb already clips it */
  transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}
.series-card:hover .series-thumb-img { transform: scale(1.07); }
.series-thumb .art-fallback { border-radius: 0; height: 100%; }
.series-thumb .art-fallback span { font-size: 1.05rem; }
.series-card-body { padding: .9rem 1.1rem 1rem; flex: 1 1 auto; }
.series-card-body h3 { font-size: .95rem; margin-bottom: .15rem; }
.series-card-body p { font-size: .76rem; color: var(--muted); font-family: var(--font-display); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 960px) {
  .sf-head { grid-template-columns: 1fr; gap: 1.4rem; }
  .series-grid { grid-template-columns: repeat(2, 1fr); }
  .series-feature { padding: 1.6rem; }
}
@media (max-width: 560px) {
  .series-grid { grid-template-columns: 1fr 1fr; gap: .9rem; }
  .series-card-body h3 { font-size: .84rem; }
}

.sermon-play.no-audio { background: var(--line); color: var(--muted); }
.sermon-play .ico, .mini-play .ico { width: 15px; height: 15px; display: block; }


/* ===== Feature style option A: art as full background ===== */
/* Full-width artwork banner (edge to edge, natural aspect, never cropped);
   title + blurb rise over its bottom edge and flow into the charcoal base. */
.sf-style-bg { padding: 0; overflow: hidden; }
.sf-style-bg .sf-head {
  display: block; grid-template-columns: none;
  margin-bottom: 0; padding: 0; background: #2F2F2F;
}
.sf-style-bg .sf-art { position: relative; }
.sf-style-bg .sf-art-img { display: block; width: 100%; height: auto; border-radius: 0; }
.sf-style-bg .sf-art .art-fallback { width: 100%; min-height: 300px; border-radius: 0; }
.sf-style-bg .sf-info {
  position: relative; z-index: 1; max-width: none;
  margin-top: -170px; padding: 5rem 2.6rem .4rem;
  background: linear-gradient(180deg, rgba(47,47,47,0) 0%, rgba(47,47,47,.82) 45%, #2F2F2F 75%);
}
@media (max-width: 720px) { .sf-style-bg .sf-info { margin-top: -90px; padding: 2.6rem 1.6rem .4rem; } }
.sf-style-bg .sf-info h2 { color: #fff; }
.sf-style-bg .sf-meta { color: rgba(255,255,255,.8); }
.sf-style-bg .sf-blurb { color: rgba(255,255,255,.88); }
.sf-style-bg .sf-toggle { color: #fff; }
.sf-style-bg .sermon-list { padding: 1.6rem 2rem 2.2rem; }
.series-feature .sermon-list { max-height: 440px; overflow-y: auto; overscroll-behavior: contain; }
.sermon-speaker { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; }
.speaker-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.speaker-initials {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff;
  font: 700 .68rem/1 var(--font-display); letter-spacing: .03em;
}

/* ===== Feature style option B: edge-bleed split ===== */
.sf-style-bleed { padding: 0; overflow: hidden; }
.sf-style-bleed .sf-head { grid-template-columns: 44% 1fr; gap: 0; margin-bottom: 0; align-items: stretch; }
.sf-style-bleed .sf-art { position: relative; min-height: 360px; }
.sf-style-bleed .sf-art-img, .sf-style-bleed .sf-art .art-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0;
}
.sf-style-bleed .sf-info { padding: 2.6rem; }
.sf-style-bleed .sermon-list { padding: 1.6rem 2rem 2.2rem; }
@media (max-width: 960px) {
  .sf-style-bleed .sf-head { grid-template-columns: 1fr; }
  .sf-style-bleed .sf-art { min-height: 220px; }
}


/* ===== MissioKids page: kids palette (coral / teal / yellow) ===== */
.page-kids { position: relative; overflow: clip; }
.page-kids .kids-hero { position: relative; padding-bottom: 2rem; }
.has-bubbles { position: relative; }

/* Decorative circles: behind all content (never cover cards/bands), anchored
   to their section so they can straddle boundaries without getting cut. */
.kbub {
  position: absolute; pointer-events: none; z-index: -1;
  opacity: 0; transform: scale(.4);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
}
.kbub.in { opacity: 1; transform: none; }
/* the circle itself lives on ::after so its float loop never fights the
   reveal transition on the wrapper; --kd/--kds set speed and phase per circle */
.kbub::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  animation: kbub-float var(--kd, 16s) ease-in-out var(--kds, 0s) infinite;
}
.kbub:nth-of-type(even)::after { animation-direction: reverse; }
.kbub-teal::after { background: rgba(0,165,177,.10); }
.kbub-yellow::after { background: rgba(255,228,122,.22); }
.kbub-coral::after { background: rgba(255,97,83,.10); }
.kbub-navy::after { background: rgba(0,53,79,.07); }
@keyframes kbub-float {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(22px, -28px) scale(1.04); }
  50%  { transform: translate(-14px, -44px); }
  75%  { transform: translate(-26px, 16px) scale(.97); }
  100% { transform: translate(0, 0); }
}
@media (max-width: 720px) { .kbub { max-width: 170px; max-height: 170px; } }
@media (prefers-reduced-motion: reduce) {
  .kbub { transition: none; opacity: 1; transform: none; }
  .kbub::after { animation: none; }
}
/* the logo is a circular badge, so it reads as one of the circles below —
   sized to match the standard photos (their max-width), not the 250px it
   launched at, so it holds its own on the page */
.kids-logo-hero { height: 360px; width: auto; margin: 0 auto 1.8rem; position: relative; }
.page-kids .kids-hero h1 { max-width: 24ch; }

.kids-photos { padding: 1rem 0 2.5rem; }
/* big circles, scattered and overlapping — a rotation would be invisible on a
   circle, so the play comes from varied sizes and vertical offsets */
.kids-photos { padding: 2.4rem 0 4rem; }
.kids-photo-row { display: flex; justify-content: center; align-items: center; gap: 0; }
.kp {
  width: 34%; max-width: 360px; aspect-ratio: 1; object-fit: cover;
  border-radius: 50%; border: 7px solid;
  box-shadow: 0 22px 48px -20px rgba(47,47,47,.45);
}
.kp-1 { border-color: #00A5B1; z-index: 1; transform: translateY(9%); }
.kp-2 {
  border-color: #FFE47A; z-index: 3;
  width: 38%; max-width: 400px; margin: 0 -4%; transform: translateY(-8%);
}
.kp-3 { border-color: #FF6153; z-index: 2; transform: translateY(12%); }

.kids-card { border-top: 6px solid var(--line); }
.kc-teal { border-top-color: #00A5B1; }
.kc-coral { border-top-color: #FF6153; }
.kc-teal .card-icon { color: #00A5B1; background: rgba(0,165,177,.12); }
.kc-coral .card-icon { color: #FF6153; background: rgba(255,97,83,.12); }
.tbs-logo { max-width: 330px; width: 90%; margin: .3rem auto 1.3rem; }
.tbs-logo-color { max-width: 320px; margin-top: 1rem; }
.page-kids .kids-cta.section-green { background: #00354F; }
.athome-extra { margin-top: auto; display: flex; flex-direction: column; }
.athome-links { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.athome-links .text-link { margin-top: 0; padding-top: .9rem; }
.athome-sub {
  font: 700 .72rem/1 var(--font-head); letter-spacing: .12em; text-transform: uppercase;
  color: #FF6153; margin-top: 1.5rem;
}

.event-more {
  display: inline-block; margin-top: .7rem;
  font: 700 .68rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--rust);
}

/* I'm New: photo hero with the headline over the bottom */
.imnew-hero {
  position: relative; margin: 1.1rem 1.1rem 0;
  border-radius: calc(var(--radius) + 6px); overflow: hidden;
  min-height: clamp(340px, 52vw, 620px); display: flex; align-items: flex-end;
}
.imnew-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.imnew-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(38,36,31,.1) 35%, rgba(38,36,31,.78) 100%);
}
.imnew-hero-text {
  position: relative; z-index: 2; width: min(1140px, 88%); margin: 0 auto;
  padding: 0 0 3rem; color: #fff; text-align: center;
}
.imnew-hero-text h1 { color: #fff; margin: 0 auto; }
.imnew-intro { padding: 3rem 0 1rem; text-align: center; }
.imnew-intro .lede { margin-inline: auto; }
@media (max-width: 720px) {
  .imnew-hero { min-height: 380px; }
  .imnew-hero-text { padding-bottom: 2rem; }
}

/* Missional Communities logo (Connect page) */
.mc-logo { width: min(430px, 78%); height: auto; margin: 0 auto 1.4rem; }
@media (max-width: 720px) { .mc-logo { width: 82%; } }

/* I'm New: campus cards reuse the home-page map takeover; next-step logos */
#locations .campus-time {
  display: block; font: 700 .68rem/1 var(--font-display); letter-spacing: .12em;
  text-transform: uppercase; color: var(--rust); margin-bottom: .55rem;
  position: relative; z-index: 2;
}
#locations .loc address {
  font-style: normal; color: var(--muted); font-size: .92rem; margin-bottom: .8rem;
  position: relative; z-index: 2;
}
/* every card gets the same 132px logo slot so the text below starts on
   the same line card-to-card; object-fit letterboxes whatever shape the
   logo is — wide lockups centre in the slot, the square bubbles fill it */
.step-card-logo { height: 132px; width: auto; max-width: min(340px, 82%);
                  object-fit: contain; margin: .2rem auto .9rem; }

/* ===== Next-step landing pages (Meet & Greet, Exploring Missio) ===== */
.step-logo { height: var(--logo-h, 130px); width: auto; margin: 0 auto 1.6rem; }
.page-hero .step-logo + .lede { margin-inline: auto; font-weight: 600; color: var(--ink); }
.step-body { font-size: 1.02rem; line-height: 1.85; }
.step-body p { margin-bottom: 1.2rem; }
.step-page .page-hero { padding-bottom: .4rem; }
.step-page .section { padding-top: 1rem; }
.mg-next { margin-top: 2rem; text-align: center; font-size: .92rem; color: var(--muted); }
.mg-next a { color: var(--rust); border-bottom: 1px solid var(--rust); }
@media (max-width: 720px) { .step-logo { height: calc(var(--logo-h, 130px) * .72); } }

/* ===== Event landing pages (generated by scripts/build-events.py) ===== */
.ev-hero { padding: 2.4rem 0 0; }
.ev-back {
  display: inline-block; margin-bottom: 1.8rem;
  font: 700 .74rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  /* the coral underline sweeps in on hover, as on .text-link — but with no
     resting underline, since this is wayfinding rather than a call to action */
  background-image: linear-gradient(var(--rust), var(--rust));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 2px;
  padding-bottom: .25rem;
  transition: color .2s, background-size .4s cubic-bezier(.2, .7, .3, 1);
}
.ev-back:hover { color: var(--rust); background-size: 100% 2px; }
/* the step pages' heroes center their content; the back link stays left,
   in the same spot it holds on the event pages */
.page-hero .ev-back { display: table; margin-right: auto; margin-bottom: 1.2rem; }
.ev-head { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.6rem; align-items: center; }
.ev-art {
  width: 100%; border-radius: var(--radius); background: var(--white);
  box-shadow: 0 18px 40px -24px rgba(38,36,31,.4);
}
.ev-headline h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: .9rem; }
.ev-when {
  font: 700 .84rem/1.6 var(--font-display); letter-spacing: .04em;
  color: var(--rust);
}
.ev-meta { margin-top: 1.3rem; display: flex; flex-direction: column; gap: .75rem; }
.ev-meta-row { display: flex; align-items: baseline; gap: 1rem; }
.ev-meta-label {
  flex: 0 0 3.4rem;
  font: 700 .66rem/1.6 var(--font-display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.ev-meta-content { flex: 1 1 auto; min-width: 0; }
.ev-meta-value { font-size: .97rem; line-height: 1.55; }
.ev-inline-link {
  display: inline-block; margin-left: .2rem;
  font: 700 .72rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); border-bottom: 2px solid var(--rust); padding-bottom: .15rem;
  transition: color .15s;
}
.ev-inline-link:hover { color: var(--rust); }

/* calendar dropdown: hover on pointer devices, tap/click everywhere else */
.cal-drop { position: relative; display: inline-block; }
/* styling comes from .ev-inline-link — only reset what the UA button adds */
.cal-toggle {
  background: none; border: 0; border-bottom: 2px solid var(--rust);
  padding: 0 0 .15rem; cursor: pointer; white-space: nowrap;
}
.cal-toggle::after { content: " ▾"; color: var(--rust); }
.cal-menu {
  display: none; position: absolute; left: 0; top: 100%; z-index: 30;
  margin-top: .55rem; min-width: 215px; padding: .4rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); flex-direction: column;
}
/* invisible bridge so the pointer can travel from link to menu */
.cal-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
.cal-menu a {
  padding: .58rem .8rem; border-radius: 8px; font-size: .88rem;
  white-space: nowrap; text-transform: none; letter-spacing: 0;
}
.cal-menu a:hover { background: var(--bg); color: var(--rust); }
.cal-drop.open .cal-menu { display: flex; }
@media (hover: hover) and (pointer: fine) {
  .cal-drop:hover .cal-menu, .cal-drop:focus-within .cal-menu { display: flex; }
}
.ev-body-section { padding-top: 3.2rem; }
.ev-body { font-size: 1.02rem; line-height: 1.8; }
.ev-body p { margin-bottom: 1.1rem; }
.ev-body h4 { font-family: var(--font-display); font-size: .95rem; margin: 1.6rem 0 .6rem; }
.ev-body ul, .ev-body ol { padding-left: 1.4rem; margin-bottom: 1.1rem; }
.ev-body li { margin-bottom: .4rem; }
.ev-body a { color: var(--rust); border-bottom: 1px solid var(--clay, var(--rust)); }
@media (max-width: 860px) {
  .ev-head { grid-template-columns: 1fr; gap: 1.6rem; }
  .ev-hero { padding-top: 1.6rem; }
}

/* About page: mission hero, compact section heads, outcomes */
.page-hero h1.mission-statement, .mission-statement {
  font-size: clamp(1.02rem, 1.75vw, 1.28rem); font-weight: 800;
  line-height: 1.55; letter-spacing: .01em; max-width: none; margin: 0 auto;
}
.section-head-wide { max-width: none; }
.h2-compact { font-size: clamp(1.02rem, 1.75vw, 1.28rem); letter-spacing: .01em; }
.outcome-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }
.outcome-grid .card { width: calc(33.333% - 1rem); min-width: 260px; }
.card .acc-refs { margin-top: .8rem; color: var(--muted); }

/* About page: sticky section nav */
.about-subnav {
  /* --header-h is measured by main.js; a hard-coded value drifted out of step
     with the real header height and clipped the top of the pills */
  position: sticky; top: var(--header-h, 80px); z-index: 50;
  display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap;
  padding: .8rem 4%; background: rgba(255,253,240,.94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.about-subnav a {
  font: 700 .72rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink);
  transition: background .15s, color .15s;
}
.about-subnav a:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
/* main.js marks the section you are currently scrolled into */
.about-subnav a.on { background: var(--navy); color: #fff; border-color: var(--navy); }
/* jump targets must clear the header AND the sticky pill bar; main.js measures
   both, so this stays correct when the bar wraps or the header changes */
/* Every id the sub-nav points at. Adding a pill means adding it here too:
   #mission went in without it, so its margin stayed at zero and it was the one
   target that landed underneath the bar instead of below it. */
[id="mission"], [id="vision"], [id="values"], [id="outcomes"],
[id="beliefs"], [id="leadership"], [id="contact"], [id="give-online"] {
  scroll-margin-top: var(--sticky-offset, 150px);
}
@media (max-width: 720px) { .about-subnav { gap: .4rem; } }

/* On a phone these bars wrapped to multiple rows: four rows on the kids books
   page, 38% of the screen. Pin them as a single row that swipes sideways
   instead, and main.js keeps the active pill scrolled into view. */
@media (max-width: 720px) {
  .about-subnav,
  .book-subnav .book-pills,
  .mc-pills {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .about-subnav::-webkit-scrollbar,
  .book-subnav .book-pills::-webkit-scrollbar,
  .mc-pills::-webkit-scrollbar { display: none; }
  .about-subnav > a, .book-subnav .book-pill, .mc-pill { flex: 0 0 auto; }
  /* the community pills sat one per row, six rows deep, on a phone */
  .mc-pills { padding-bottom: .2rem; }
}

/* Books banner (MissioKids page) */
.books-banner {
  margin-top: 2.6rem; display: flex; align-items: center; gap: 2.2rem;
  background: #fff; border-radius: 16px; padding: 1.6rem 2.2rem;
  border: 1px solid var(--line); border-top: 6px solid #FFE47A;
  text-decoration: none; color: var(--ink);
  box-shadow: 0 14px 34px -22px rgba(47,47,47,.35);
  transition: transform .15s ease;
}
.books-banner:hover { transform: translateY(-3px); }
.bb-covers { display: flex; flex-shrink: 0; }
.bb-covers img {
  width: 88px; aspect-ratio: 3/4; object-fit: cover; border-radius: 6px;
  border: 3px solid #fff; box-shadow: 0 8px 18px -8px rgba(47,47,47,.5);
}
.bb-covers img:nth-child(1) { transform: rotate(-6deg); }
.bb-covers img:nth-child(2) { transform: rotate(3deg); margin-left: -18px; }
.bb-covers img:nth-child(3) { transform: rotate(-2deg); margin-left: -18px; }
.bb-covers img:nth-child(4) { transform: rotate(5deg); margin-left: -18px; }
.bb-text h3 { margin-bottom: .3rem; }
.bb-text p { color: var(--muted); margin-bottom: .6rem; }
.bb-cta { font: 700 .78rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: #d84335; }
@media (max-width: 720px) { .books-banner { flex-direction: column; text-align: center; gap: 1.4rem; } }

/* Printables: the two Biggest Story cards carry the page, so give them weight */
.print-feature .print-external { gap: 2rem; }
.print-feature .print-ext-card {
  padding: 3rem 2.4rem; border-top-width: 8px;
  box-shadow: 0 16px 40px -24px rgba(38,36,31,.35);
}
.print-feature .print-ext-card h3 { font-size: 1.5rem; margin-bottom: .8rem; }
.print-feature .print-ext-card p { font-size: 1rem; line-height: 1.7; }
.print-feature .print-ext-card .text-link { font-size: .86rem; padding-top: 1.6rem; }
.print-feature .card-icon { font-size: .74rem; padding: .5rem 1.1rem; }
@media (max-width: 720px) { .print-feature .print-ext-card { padding: 2.2rem 1.6rem; } }

/* Printables page */
.print-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.8rem 1.4rem; }
.print-card em { font: italic 400 .8rem/1.45 var(--font-body); color: var(--muted); }
.print-card .print-dl {
  font: 700 .7rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase;
  color: #007b84; margin-top: .1rem;
}
.print-ext-card { text-decoration: none; }
.print-ext-card:hover { transform: translateY(-3px); }
.print-external { margin-top: 0; }

/* Kids sub-pages: books + team */
.kids-logo-page { height: 110px; width: auto; margin: 0 auto 1.4rem; position: relative; }
.book-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.8rem; position: relative; }
.book-pill {
  font: 700 .72rem/1 var(--font-head); letter-spacing: .09em; text-transform: uppercase;
  padding: .55rem 1.05rem; border-radius: 999px; color: var(--ink);
  border: 2px solid; text-decoration: none; transition: transform .15s ease;
}
.book-pill:hover { transform: translateY(-2px); }
.bp-teal { border-color: #00A5B1; color: #007b84; background: rgba(0,165,177,.08); }
.bp-coral { border-color: #FF6153; color: #d84335; background: rgba(255,97,83,.08); }
.bp-yellow { border-color: #ECD167; color: #8A7014; background: rgba(255,228,122,.16); }
/* books.html uses the site palette; the kids page keeps its own colors */
.page-books .book-pill {
  border-color: var(--navy); color: var(--navy); background: var(--white);
}
.page-books .book-pill:hover { background: var(--navy); color: #fff; }

/* The pills live outside the hero in their own sticky bar, so they stay
   reachable while you read. Sticky only works within the parent's box, which
   is why they are a sibling of the sections rather than inside the hero. */
.book-subnav {
  position: sticky; top: var(--header-h, 80px); z-index: 50;
  padding: .7rem 4%;
  background: rgba(255, 253, 240, .94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.book-subnav .book-pills { margin-top: 0; }
@media (max-width: 720px) { .book-subnav { padding: .6rem 3%; } }
/* active pill: navy on the adult page, each pill's own color on the kids page */
.page-books:not(.page-kids) .book-pill.on { background: var(--navy); color: #fff; }
.book-pill.bp-teal.on { background: #00A5B1; color: #fff; }
.book-pill.bp-coral.on { background: #FF6153; color: #fff; }
.book-pill.bp-yellow.on { background: #ECD167; color: #2F2F2F; }
.page-books .book-cat::after { background: var(--rust); }

.book-section { padding-top: 1rem; }
/* jump targets must clear the sticky header, or the heading lands under it */
.book-section[id] { scroll-margin-top: var(--sticky-offset, 104px); }
.book-section + .book-section { margin-top: 2.6rem; }
.book-cat {
  font: 800 1.05rem/1.2 var(--font-head); letter-spacing: .1em; text-transform: uppercase;
  text-align: center; margin-bottom: 1.6rem; padding-bottom: .7rem; position: relative;
}
.book-cat::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 54px; height: 4px; border-radius: 2px; }
.bc-teal::after { background: #00A5B1; }
.bc-coral::after { background: #FF6153; }
.bc-yellow::after { background: #FFE47A; }
/* Each sub-heading is wrapped with its own grid in .book-group, so it pins
   under the pill bar while you read that group and the next one pushes it
   out. Without the wrapper all 16 would stack at the same offset. */
.book-group { position: relative; }
.book-subcat {
  font: 700 .82rem/1.3 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-align: center; margin: 2.2rem 0 1.1rem;
  /* butts straight against the pill bar, so no covers peek through a gap */
  position: sticky; top: var(--chrome-h, 92px); z-index: 20;
  background: var(--bg); padding: .55rem 0 .5rem;   /* opaque, cards pass behind */
}
.book-group + .book-group .book-subcat { margin-top: 2.8rem; }

.book-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.4rem 1.1rem;
}
.book-card {
  display: flex; flex-direction: column; gap: .6rem; text-decoration: none; color: var(--ink);
  text-align: center; transition: transform .15s ease;
}
.book-card:hover { transform: translateY(-4px); }
.book-card img {
  width: 100%; aspect-ratio: 3/4; object-fit: contain; border-radius: 10px;
  background: #fff; border: 1px solid var(--line); padding: .5rem;
  box-shadow: 0 10px 24px -16px rgba(47,47,47,.4);
}
.book-card span { font: 600 .8rem/1.35 var(--font-body); }
/* both book pages: the cover stands on its own, no mat. Covers differ in shape,
   so each sits at the bottom of the same slot (titles stay in a row), and the
   shadow is a drop-shadow so it follows the cover itself, not the empty slot. */
.page-books .book-card img {
  background: none; border: 0; padding: 0; border-radius: 0; box-shadow: none;
  object-position: center bottom;
  filter: drop-shadow(0 8px 14px rgba(47, 47, 47, .22)) drop-shadow(0 1px 2px rgba(47, 47, 47, .18));
}

.team-cta { margin-top: 2.6rem; text-align: center; }
.team-cta-label {
  font: 700 .74rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .9rem;
}

.team-form { display: flex; justify-content: center; gap: .7rem; margin-top: 1.6rem; flex-wrap: wrap; position: relative; }
.team-form input {
  font: 600 1rem/1 var(--font-body); padding: .85rem 1.1rem; min-width: 240px;
  border: 2px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
}
.team-form input:focus { outline: none; border-color: #00A5B1; }
.team-error { margin-top: 1rem; color: #d84335; font-weight: 600; position: relative; }
.team-list { list-style: none; padding: 0; margin: 0; text-align: left; }
.team-list li { padding: .45rem 0 .45rem 1.5rem; position: relative; }
.team-list li::before { content: "✦"; position: absolute; left: .2rem; color: #00A5B1; font-size: .8rem; top: .55rem; }
.kc-coral .team-list li::before { color: #FF6153; }
.team-access { margin-top: 1.6rem; border-top-color: #FFE47A; }
.team-access .card-icon { color: #8A7014; background: rgba(255,228,122,.22); }
.team-access .section-cta-row { margin-top: 1.4rem; }

@media (max-width: 720px) {
  .kids-logo-page { height: 90px; }
  .kids-photo-row { flex-wrap: nowrap; gap: 0; }   /* keep the scattered row on phones */
  .kids-logo-hero { height: 200px; }
  .kp { width: 35%; border-width: 5px; }
  .kp-2 { width: 39%; margin: 0 -4%; }
  .book-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1.1rem .8rem; }
}

/* ===== Values → Outcomes star (About page) =====
   Hovering an outcome grows the circle itself to reveal its description;
   touch devices skip the growth and list the descriptions underneath. */
.oc-star { position: relative; width: min(660px, 100%); margin: 0 auto; aspect-ratio: 1; }
.oc-spokes { position: absolute; inset: 0; width: 100%; height: 100%; }
.oc-spokes line { stroke: var(--rust); stroke-width: .7; opacity: .5; }

.oc-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 28%; aspect-ratio: 1; border-radius: 50%; background: var(--navy); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; z-index: 3; box-shadow: 0 18px 40px -20px rgba(0,53,79,.6);
}
.oc-core strong {
  font: 800 clamp(.72rem, 1.4vw, .98rem)/1.5 var(--font-display);
  letter-spacing: .04em; text-transform: uppercase;
}
.oc-core .oc-core-god { font-size: clamp(1.35rem, 2.8vw, 1.95rem); line-height: 1.2; }
.oc-core-label {
  font: 700 .56rem/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase;
  color: #A8A9AD; margin-bottom: .45rem;
}

.oc-node {
  position: absolute; transform: translate(-50%, -50%);
  width: 24%; aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: .7rem; z-index: 2; cursor: default;
  border: 2px solid var(--tone, var(--rust));
  background: var(--tone-soft, var(--white));
  transition: width .38s cubic-bezier(.22,1,.36,1), padding .38s ease,
              background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.oc-node-title {
  font: 800 clamp(.85rem, 1.6vw, 1.15rem)/1.3 var(--font-display);
  /* ch scales with the font, so the title keeps the same line breaks while the
     circle grows — without this it snapped from two lines to one mid-animation */
  max-width: 11ch; margin-inline: auto;
  transition: font-size .38s ease;
}
.oc-desc {
  font: 400 clamp(.74rem, 1.3vw, .9rem)/1.5 var(--font-body);
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity .2s ease, max-height .38s ease, margin-top .38s ease;
}

/* grow on hover (and keyboard focus) to hold the description */
.oc-node:hover, .oc-node:focus-visible, .oc-node:focus-within {
  width: 51%; padding: 2.2rem; z-index: 6; outline: none;
  background: var(--tone); color: #fff;
  box-shadow: 0 24px 50px -22px rgba(38,36,31,.55);
}
.oc-node:hover .oc-node-title, .oc-node:focus-within .oc-node-title { font-size: clamp(1.1rem, 2vw, 1.4rem); }
.oc-node:hover .oc-desc, .oc-node:focus-within .oc-desc {
  opacity: 1; max-height: 12rem; margin-top: .5rem;
  transition: opacity .22s ease .16s, max-height .38s ease, margin-top .38s ease;
}

/* color cycle across the five outcomes: brand palette only, ordered so no two
   neighbours in the star match. Silver is too light for white text, so that
   circle fills with charcoal text instead. */
/* the resting fill is a faint wash of the circle's own color */
.oc-node { --tone-soft: color-mix(in srgb, var(--tone) 8%, #FFFFFF); }
.oc-c1 { --tone: #00354F; }   /* Pursuit of God — navy */
.oc-c2 { --tone: #FF6153; }   /* Fruit of the Spirit — coral */
.oc-c3 { --tone: #2F2F2F; }   /* Grace Story — charcoal */
.oc-c4 { --tone: #A8A9AD; }   /* Spiritual Giftedness — silver */
.oc-c5 { --tone: #FF6153; }   /* Stewardship of Life — coral */
.oc-c4:hover, .oc-c4:focus-visible, .oc-c4:focus-within { color: #2F2F2F; }

.oc-legend { display: none; }
.oc-legend-item h3 { font-size: .98rem; margin-bottom: .25rem; }
.oc-legend-item p { color: var(--muted); font-size: .92rem; }

/* no hover (phones/tablets): circles stay put, descriptions list below */
@media (hover: none), (max-width: 720px) {
  .oc-desc { display: none; }
  .oc-node:hover, .oc-node:focus-within {
    width: 24%; padding: .7rem; background: var(--tone-soft); color: inherit; box-shadow: none;
  }
  .oc-legend {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem; margin-top: 2.4rem; text-align: center;
  }
}
@media (max-width: 720px) {
  .oc-star { width: 100%; }
  .oc-node, .oc-node:hover { width: 27%; padding: .4rem; }
  .oc-node-title { font-size: .56rem; }
  .oc-core { width: 30%; }
  .oc-core strong { font-size: .62rem; }
  .oc-core .oc-core-god { font-size: .82rem; }
  .oc-core-label { font-size: .46rem; margin-bottom: .25rem; }
}

/* Giving page: the intro sits with the header; larger primary action */
.give-intro { margin: 1.6rem auto 0; }
.page-give .page-hero { padding-bottom: 2rem; }
.page-give .section { padding-top: 2.6rem; }
.give-ways-head { margin: 0; }
.section-head .give-ways-head { margin-bottom: 0; }
.btn-lg { padding: 1.15rem 2.6rem; font-size: .95rem; border-radius: 12px; }
@media (max-width: 600px) { .btn-lg { padding: 1rem 2rem; font-size: .88rem; } }

/* ===== Sermon search ===== */
.ss { max-width: 620px; margin: 0 auto 1.4rem; position: relative; }
.ss-field {
  display: flex; align-items: center; gap: .75rem;
  background: var(--white); border: 2px solid var(--line); border-radius: 999px;
  padding: .8rem 1.3rem; transition: border-color .2s, box-shadow .2s;
}
.ss-field:focus-within { border-color: var(--rust); box-shadow: 0 10px 30px -18px rgba(255,97,83,.65); }
.ss-field > svg { width: 17px; height: 17px; color: var(--muted); flex-shrink: 0; }
.ss-field input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: 400 .94rem/1.2 var(--font-body); color: var(--ink);
}
.ss-field input::placeholder { color: var(--muted); }
.ss-field input::-webkit-search-cancel-button { display: none; }
.ss-clear {
  border: 0; background: none; cursor: pointer; color: var(--muted);
  font-size: 1.25rem; line-height: 1; padding: 0 .2rem;
}
.ss-clear:hover { color: var(--rust); }

.ss-panel { display: flex; flex-direction: column; gap: .5rem; }
.ss-panel[hidden] { display: none; }
.ss-panel-head {
  font: 700 .68rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: .2rem .2rem .3rem;
}
.ss-meta { font-size: .84rem; color: var(--muted); margin-top: .15rem; }
.ss-hidden { display: none !important; }

/* results replacing the page below */
.ss-panel-replace { margin-top: 1.8rem; }
.ss-panel-replace .sermon-item { background: var(--white); }


/* Sermons page: tighter top so the current series is visible sooner */
.page-sermons .page-hero { padding: 3.2rem 0 1rem; }
.page-sermons .page-hero h1 { margin-bottom: .8rem; }
.page-sermons #series-app { padding-top: 1.2rem; }
.page-sermons .podcast-badges { margin-top: 1.4rem; }
/* the subscribe row lives under the location bar now, tied to the campus in
   view; a touch of air on both sides so it reads as part of the selector */
.page-sermons .sub-row { margin: 1.3rem 0 2.4rem; }
/* .btn's display:inline-flex outranks the hidden attribute's UA rule, so the
   not-yet-on-Spotify state needs saying explicitly */
.sub-row .btn[hidden] { display: none; }
/* App-store-badge layout: big mark, two-line label. Each platform's line is
   set in (or nearest to) its own face — SF Pro via the system stack, which IS
   San Francisco on Apple devices, and DM Sans standing in for Spotify's
   proprietary Mix/Circular. Mixed case like the real badges, so the site's
   uppercase button styling is undone here. */
.sub-row .btn { text-transform: none; letter-spacing: 0; text-align: left;
                padding: .7rem 1.5rem .7rem 1.1rem; gap: .75rem; }
.sub-row .ico-lg { width: 44px; height: 44px; margin: -.5rem 0; }
.sub-row .stack { display: flex; flex-direction: column; line-height: 1.3; }
.sub-row .stack em { font-style: normal; font-weight: 500; font-size: .68rem; opacity: .72; }
.sub-row .stack strong { font-size: 1.02rem; font-weight: 700; }
.btn-apple .stack { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif; }
.btn-spotify .stack { font-family: "DM Sans", "Helvetica Neue", "Segoe UI", sans-serif; }
/* brand-colored subscribe buttons */
.btn-ico { width: 23px; height: 23px; flex-shrink: 0; margin: -.25rem 0; }
/* buttons stay in the site palette; the platform marks keep their own colors */
.btn-apple, .btn-spotify {
  background: var(--white); color: var(--navy); border-color: var(--navy);
}
.btn-apple:hover, .btn-spotify:hover {
  background: var(--navy); color: #fff; transform: translateY(-2px);
}
.btn-apple .btn-ico { color: #9933CC; }
.btn-spotify .btn-ico { color: #1DB954; }
.btn.is-soon { opacity: .55; cursor: default; }
.btn.is-soon:hover { transform: none; background: var(--white); color: var(--navy); }
.btn.is-soon em {
  font-style: normal; font-size: .64rem; letter-spacing: .1em;
  opacity: .85; margin-left: .1rem;
}
@media (max-width: 720px) { .page-sermons .page-hero { padding: 2.4rem 0 1.2rem; } }

.connect-note { margin-top: 1rem; text-align: center; font-size: .9rem; color: var(--muted); }

/* Connect page: Breeze-hosted form embed.
   Breeze exposes no CSS control, so the only lever we have is the frame's
   width: kept under 760px, Breeze's description collapses from a floating
   panel into a plain line, so an empty description leaves no empty box.
   (Cropping the frame's header was tried and rejected — a layout change on
   Breeze's side would silently hide form fields.) */
.connect-form-wrap {
  width: 100%; max-width: 720px; margin: 0 auto; overflow: hidden;
}
.connect-form {
  display: block; width: 100%; height: 1420px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
}
.connect-fallback {
  margin-top: 1.4rem; text-align: center; font-size: .88rem; color: var(--muted);
}
.connect-fallback a { color: var(--rust); border-bottom: 1px solid var(--rust); }
@media (max-width: 720px) { .connect-form { height: 1660px; border-radius: 14px; } }

/* Sermons on small screens: tabs and subscribe buttons must not run off-screen */
@media (max-width: 620px) {
  /* Both subscribe buttons on one row. The mark sits above the label so each
     one grows taller rather than wider, which is what fits at this width. */
  .page-sermons .podcast-badges { flex-direction: row; align-items: stretch; gap: .5rem; }
  .page-sermons .podcast-badges .btn {
    flex: 1 1 0; width: auto; min-width: 0;
    flex-direction: column; gap: .4rem;
    padding: .85rem .5rem; font-size: .63rem; line-height: 1.3;
    letter-spacing: .05em; text-align: center;
  }
  .btn.is-soon em { display: block; margin: .15rem 0 0; font-size: .58rem; }
  /* close the gap between the buttons and the search field */
  .page-sermons .page-hero { padding-bottom: .5rem; }
  .page-sermons #series-app { padding-top: .9rem; }
  .page-sermons .podcast-badges { margin-top: 1.1rem; }
  .section .tabs { width: 100%; max-width: 100%; justify-content: center; padding: .3rem; }
  .section .tabs .tab { flex: 1 1 0; padding: .6rem .4rem; font-size: .68rem; text-align: center; }
}
@media (max-width: 380px) {
  .section .tabs .tab { font-size: .62rem; letter-spacing: .04em; }
}

/* ===== Homepage option E — home-alt.html =====
   A single full-screen hero and nothing else: no sections, no footer, and
   deliberately no scroll. Only this page uses these rules. */
.home-alt, .home-alt body { height: 100%; }
/* Dark rather than the site cream, so anything Safari leaves uncovered — the
   sliver between dvh and the toolbar, the safe areas — reads as part of the
   photo instead of a pale band. Matches the theme-color on these pages. */
.home-alt { overflow: hidden; background: #182B36; }              /* the page is exactly one screen */

/* one left margin for the whole page, so the lockup and the headline line up */
.alt-hero {
  --alt-gutter: max(clamp(1.2rem, 5vw, 4rem), env(safe-area-inset-left));
}

.alt-hero {
  position: relative; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; color: #fff;
}
.alt-bg, .alt-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.alt-bg img { opacity: 0; animation: heroFade 18s ease-in-out infinite; }
.alt-bg img:nth-of-type(1) { animation-name: heroFadeFirst; }
.alt-bg img:nth-of-type(2) { animation-delay: 6s; }
.alt-bg img:nth-of-type(3) { animation-delay: 12s; }
.alt-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,20,32,.58) 0%, rgba(0,20,32,.22) 40%, rgba(0,20,32,.8) 100%);
}

/* the bar rides on the photo: white lockup left, plain white links right */
.alt-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(1.5rem + env(safe-area-inset-top)) var(--alt-gutter) 1.5rem;
}
/* The links pull in towards the corner; the lockup keeps the full gutter, so
   the asymmetry is deliberate. Only while the row is on screen — under 1000px
   that corner is the burger, which needs the normal margin to stay tappable. */
@media (min-width: 1001px) {
  .alt-top { padding-right: max(clamp(.9rem, 2.4vw, 1.6rem), env(safe-area-inset-right)); }
}
.alt-brand img { height: 64px; display: block; }
.alt-nav { display: flex; align-items: center; gap: .5rem; }
.alt-nav a {
  color: #fff; font-family: var(--font-lockup); font-weight: 500;
  font-size: 1rem; letter-spacing: .005em; text-transform: lowercase;
  opacity: .92; transition: opacity .2s;
}
/* dot between each pair of links */
.alt-nav a + a::before {
  content: "·"; margin-right: .5rem; opacity: .55; font-weight: 500;
}
.alt-nav a:hover { opacity: 1; }

/* ---- burger, phones only ---- */
.alt-burger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 40px; height: 30px; padding: 6px 4px; flex-direction: column;
  justify-content: space-between;
}
.alt-burger span { display: block; height: 2px; background: #fff; border-radius: 2px; }
.alt-burger span:nth-child(2) { width: 78%; }   /* middle rule kept short */

.alt-menu {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(0,32,48,.97);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s ease;
}
.alt-menu.is-open { opacity: 1; }
.alt-menu[hidden] { display: none; }
.alt-menu nav { display: flex; flex-direction: column; gap: 1.5rem; text-align: center; }
.alt-menu nav a {
  color: #fff; font-family: var(--font-lockup); font-weight: 500;
  font-size: 1.9rem; text-transform: lowercase; letter-spacing: .005em;
  /* each link slides up a beat after the one above it */
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s ease, transform .3s ease;
}
.alt-menu.is-open nav a { opacity: 1; transform: none; }
.alt-menu nav a:nth-child(1) { transition-delay: .06s }
.alt-menu nav a:nth-child(2) { transition-delay: .10s }
.alt-menu nav a:nth-child(3) { transition-delay: .14s }
.alt-menu nav a:nth-child(4) { transition-delay: .18s }
.alt-menu nav a:nth-child(5) { transition-delay: .22s }
.alt-menu nav a:nth-child(6) { transition-delay: .26s }
.alt-menu-close {
  position: absolute; top: 1.1rem; right: calc(var(--alt-gutter, 1.2rem) - .35rem);
  background: none; border: 0; color: #fff; cursor: pointer;
  font: 300 2.6rem/1 var(--font-lockup); padding: .4rem .6rem;
}
/* the panel takes focus when it opens, so suppress the ring on that and show
   it only for people actually navigating by keyboard */
.alt-menu-close:focus { outline: none; }
.alt-menu-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  .alt-menu, .alt-menu nav a { transition: none; }
}

.alt-inner {
  position: relative; z-index: 2; max-width: 100%; min-width: 0;
  padding: 0 var(--alt-gutter) calc(clamp(3rem, 9vh, 7rem) + env(safe-area-inset-bottom));
  max-width: 60rem;
}
/* much larger than the site default, so the line carries the whole screen */
.alt-hero h1 {
  color: #fff; margin-bottom: 1.4rem;
  /* sized so each line fits between the gutters: the <br>s decide the breaks,
     nothing should wrap on its own */
  font-size: clamp(1.7rem, 5.6vw, 5.2rem); line-height: 1.02; letter-spacing: -.015em;
  max-width: none;
}
/* typing caret, only while the line is being typed */
.alt-hero h1.is-typing::after {
  content: ""; display: inline-block; width: .06em; height: .82em;
  background: #fff; margin-left: .06em; vertical-align: -.06em;
  animation: altCaret .75s step-end infinite;
}
@keyframes altCaret { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }
.alt-sub {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(.95rem, 1.35vw, 1.2rem);
  color: rgba(255,255,255,.9); margin-bottom: 2rem;
}
.alt-ctas { display: flex; flex-wrap: wrap; gap: .7rem; }
.btn-onphoto { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.btn-onphoto:hover { background: #fff; color: var(--navy); border-color: #fff; }

.alt-flag {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 4;
  background: rgba(0,53,79,.9); color: #fff; border-radius: 999px; padding: .4rem .95rem;
  font: 700 .58rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  pointer-events: none;
}
@media (max-width: 1200px) {
  .alt-nav a { font-size: .85rem; }
  .alt-nav { gap: .42rem; }
  .alt-nav a + a::before { margin-right: .42rem; }
  .alt-brand img { height: 48px; }
}
/* Eight links. The row stops clearing the lockup below this even at the
   smaller size, so it becomes the burger — earlier than the headline's own
   breakpoint, because the row runs out of room before the headline does. */
@media (max-width: 1000px) {
  .alt-nav { display: none; }
  .alt-burger { display: flex; }
}
@media (max-width: 700px) {
  .alt-brand img { height: 42px; }
  /* stack them: side by side, the two labels are wider than the screen */
  .alt-ctas { flex-direction: column; align-items: stretch; }
  .alt-ctas .btn { width: 100%; justify-content: center; }
  .alt-sub { max-width: 100%; }
}

/* Wide enough for the <br> to decide the break on its own. "For the good of
   Central New York." measures 17.5x its own font-size, so the size comes from
   the space between the gutters. Two brackets, because the gutter is 5vw until
   it pins at 4rem: a single vw value fits one of those and overruns the other.
   Below 900px the line wraps — holding it to two lines on a phone would mean a
   19px headline. */
/* Below 900px the second sentence has to wrap; balance splits it evenly
   ("For the good of" / "Central New York.") instead of leaving "New York."
   alone on a line. Browsers without it just wrap normally. */
.alt-hero h1 { text-wrap: balance; }

@media (min-width: 900px) {
  .alt-hero h1 { text-wrap: nowrap; }
  .br-sm { display: none; }            /* phones only — see index.html */
  .alt-inner { max-width: none; }      /* as wide as that line needs */
}
@media (min-width: 900px) and (max-width: 1279.98px) {
  .alt-hero h1 { font-size: 5.05vw; }                        /* gutter = 5vw */
}
@media (min-width: 1280px) {
  .alt-hero h1 { font-size: min(5.2rem, calc((100vw - 128px) / 17.8)); }
}



/* ---- add-event: duplicate picker, recurrence, and the repeat list on an
       event page. Kept with the other tool styles in spirit but appended
       here so nothing above can override them. ---- */
.ax-dup {
  margin: 0 0 1.6rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, .02);
}
.ax-dup label { display: block; font-weight: 600; margin-bottom: .45rem; }
.ax-dup select { width: 100%; }
.ax-dup .sx-hint { margin-top: .5rem; }

.ax-rep {
  margin-top: .9rem;
  padding: .9rem 1rem 1rem;
  border-left: 3px solid var(--rust);
  background: rgba(0, 0, 0, .02);
  border-radius: 0 8px 8px 0;
}
.ax-rep-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .7rem;
}
.ax-rep-row:last-of-type { margin-bottom: 0; }
.ax-rep-row > label,
.ax-rep-lab { font-weight: 600; margin: 0; }
.ax-rep input[type="number"] { width: 4.5rem; }
.ax-rep input[type="date"] { width: auto; }
.ax-rep input:disabled { opacity: .45; }

.ax-days { display: flex; flex-wrap: wrap; gap: .35rem; }
.ax-days label { position: relative; margin: 0; }
.ax-days input { position: absolute; opacity: 0; pointer-events: none; }
.ax-days span {
  display: block;
  padding: .34rem .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .85rem;
  cursor: pointer;
  user-select: none;
}
.ax-days input:checked + span {
  background: var(--rust);
  border-color: var(--rust);
  color: #fff;
}
.ax-days input:focus-visible + span { outline: 2px solid currentColor; outline-offset: 2px; }

.ax-ends { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.ax-ends label { display: inline-flex; align-items: center; gap: .3rem; margin: 0; font-weight: 400; }

.ax-rep-sum {
  margin: .9rem 0 0;
  font-size: .92rem;
  font-style: italic;
  opacity: .8;
}

.ev-upcoming { margin: 2.2rem 0 0; }
.ev-upcoming h3 { margin: 0 0 .6rem; font-size: 1.05rem; }
.ev-upcoming ul { list-style: none; margin: 0; padding: 0; max-width: 26rem; }
.ev-upcoming li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--line);
}
.ev-upcoming li:last-child { border-bottom: 0; }
.ev-upcoming li span { opacity: .65; }

.ax-nth-dow { font-weight: 600; opacity: .75; }


/* ---- add-event: one row per location ---- */
.ax-loc-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: .5rem;
  align-items: start;
  margin-bottom: .55rem;
}
.ax-loc-row .up-typeahead { position: relative; margin: 0; }
.ax-loc-row input { width: 100%; }
.ax-loc-row input[type="time"] { width: auto; min-width: 8.5rem; }
/* the per-row time only earns its place once there is more than one row */
#ax-locs:not(.is-multi) .ax-loc-time { display: none; }
.ax-loc-del {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 8px;
  width: 2.2rem; height: 2.6rem;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: .6;
}
.ax-loc-del:hover { opacity: 1; border-color: var(--rust); color: var(--rust); }
.ax-loc-add {
  border: 1px dashed var(--line);
  background: transparent;
  border-radius: 8px;
  padding: .45rem .8rem;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  opacity: .8;
}
.ax-loc-add:hover { opacity: 1; border-color: var(--rust); }

@media (max-width: 719.98px) {
  .ax-loc-row { grid-template-columns: 1fr auto; }
  .ax-loc-row .up-typeahead { grid-column: 1 / -1; }
  .ax-loc-row .ax-loc-addr { grid-column: 1 / -1; }
}

/* several places, each with its own hour, on an event page */
.ev-locs { list-style: none; margin: 0; padding: 0; }
.ev-locs li { margin-bottom: .35rem; }
.ev-locs li:last-child { margin-bottom: 0; }
.ev-locs .ev-loc-time { font-weight: 600; }
.ev-locs .ev-loc-addr { display: block; opacity: .7; font-size: .92em; }


/* ---- Leadership group headings (Elders / Staff) ----
   Centred, because everything else in that section already is: the section
   head, the grid and each card. Left-aligned they were the only thing in the
   block not lining up with anything.

   Set as a small tracked label with a short accent rule rather than plain
   heading text, so they read as section markers instead of stray bold words —
   and the gap before a following group is large enough that the eye catches
   the change while scrolling, which a 2.6rem gap did not do. */
.people-head {
  margin: 0 0 1.4rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--navy);
}
.people-head::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--rust);
  margin: .6rem auto 0;
}
/* any group after the first gets the separating space, so adding a third
   group later needs no new rule */
.people-grid + .people-head { margin-top: 5.2rem; }

@media (max-width: 719.98px) {
  .people-grid + .people-head { margin-top: 3.4rem; }
}


/* ---- Embedded giving form ----
   Breeze sends no height message to the parent window, so the frame cannot
   size itself to its contents. The height is set per breakpoint to fit the
   tallest step (card details) without the frame scrolling inside the page,
   which is the thing that makes an embed feel broken. */
.give-embed {
  border: 1px solid var(--line);
  border-radius: var(--radius, 14px);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.give-embed iframe {
  display: block;
  width: 100%;
  height: 860px;
  border: 0;
}
.give-embed-fallback {
  margin: 1rem 0 0;
  text-align: center;
  font-size: .93rem;
  color: var(--muted);
}
@media (max-width: 719.98px) {
  .give-embed iframe { height: 940px; }   /* the form stacks taller when narrow */
}


/* ---- "See below" cue on the Online card ----
   The Give Online button was removed when the form moved onto the page, so
   this points at it and jumps to it. The arrow bounces to catch the eye at a
   glance, and stops entirely for anyone who has asked for less motion. */
.give-jump {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rust);
  text-decoration: none;
}
.give-jump:hover { color: var(--rust-dark); }
.give-jump-arrow { animation: giveJumpBounce 1.5s ease-in-out infinite; }

@keyframes giveJumpBounce {
  0%, 20%, 100% { transform: translateY(0); }
  50%           { transform: translateY(5px); }
  70%           { transform: translateY(1px); }
}

@media (prefers-reduced-motion: reduce) {
  .give-jump-arrow { animation: none; }
}


/* ---- Removing an uploaded event ---- */
.ax-remove li { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.ax-remove li strong { flex: 1 1 auto; }
.ax-remove li span { color: var(--muted); font-size: .88rem; white-space: nowrap; }
.ax-del, .ax-edit {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: .3rem .75rem;
  font: 600 .74rem/1 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}
.ax-del:hover:not(:disabled), .ax-edit:hover { border-color: var(--rust); color: var(--rust); }
.ax-del:disabled { opacity: .5; cursor: default; }
.ax-remove li.is-gone { opacity: .45; }
.ax-remove li.is-gone strong { text-decoration: line-through; }
.ax-row-btns { display: flex; gap: .45rem; flex: none; }
.ax-edit:hover { border-color: var(--navy); color: var(--navy); }
/* one-date-or-series chooser, opened under the row */
.ax-scope {
  flex: 1 0 100%; margin: .2rem 0 .4rem; padding: .9rem 1rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
}
.ax-scope p { margin: 0 0 .7rem; font-size: .92rem; color: var(--ink); white-space: normal; }
.ax-scope-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.ax-scope-row select { font: inherit; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
/* shown above the form while an existing event is being edited */
.ax-editing {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  margin: 0 0 1.2rem; padding: .85rem 1.1rem; border-radius: 12px;
  background: rgba(0, 53, 79, .07); border-left: 4px solid var(--navy); font-size: .95rem;
}
.ax-editing[hidden] { display: none; }
.ax-editing span { flex: 1 1 16rem; }
.ax-edit-cancel {
  font: 700 .72rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--white); color: var(--ink); cursor: pointer;
}
.ax-edit-cancel:hover { border-color: var(--rust); color: var(--rust); }


/* ---- Missional Communities map (Community page) ----
   No sticky, no oversized scroll container. .section sets overflow:hidden,
   which disables position:sticky for anything inside it — the first build
   used sticky and the map slid away leaving a tall empty gap. The reveal
   plays once when the map scrolls into view instead. */
/* A tall track holding a pinned stage: the page stops while the map fills the
   screen and the communities arrive, then releases. 100svh rather than vh so
   an iOS toolbar appearing does not crop it. */
/* pulled up: .section already contributes 5.5rem of padding above */
.mcmap-track { position: relative; height: 300vh; margin: -1rem 0 -1.5rem; }
/* The pinned box is only as tall as the map, not the whole screen. At full
   height the short wide map had to be centered inside it, which put 190-odd
   pixels of nothing between the copy and the map before anything had even
   scrolled. Sized to its contents it sits straight under the text, and the
   top offset centers it in the viewport once it pins. */
.mcmap-sticky {
  position: sticky;
  top: max(1rem, calc((100svh - var(--mcmap-h, 41.5rem)) / 2));
  height: auto;
  display: flex; flex-direction: column;
  align-items: center; gap: .55rem;
}
/* wider than the text column: the frame carries a lot of spare land now, and
   it only works if the map is big enough for the middle to still read */
.mcmap-stage {
  position: relative; width: 100%; max-width: 1240px; margin: 0 auto;
  flex: 0 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.mcmap-svg {
  width: 100%; height: auto; display: block; max-height: 74svh;
  /* Two linear masks intersected, not one radial. A radial centered on a
     rectangle reaches its edge midpoints long before its corners — at the top
     edge the gradient was only two thirds through, so the frame's cut edge was
     still better than half opaque and read as a hard border. Fading each axis
     separately and intersecting them fades all four edges by the same amount,
     whatever the aspect. */
  -webkit-mask-image:
      linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 5%, #000 13%, #000 87%, rgba(0,0,0,.45) 95%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.45) 6%, #000 15%, #000 85%, rgba(0,0,0,.45) 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
      linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 5%, #000 13%, #000 87%, rgba(0,0,0,.45) 95%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.45) 6%, #000 15%, #000 85%, rgba(0,0,0,.45) 94%, transparent 100%);
  mask-composite: intersect;
}

.mcmap-county { fill: none; stroke: #E0D9C7; stroke-width: 1; }
.mcmap-city   { fill: #EEE9DA; stroke: none; }
.mcmap-lake   { fill: #D4E2EA; stroke: none; }
/* three road weights and the rivers, so the map reads as terrain rather than
   a shape. Interstates heaviest, secondary roads barely there. */
.mcmap-road   { fill: none; stroke: #D3C6A9; stroke-width: 1.5;
                stroke-linecap: round; stroke-linejoin: round; }
.mcmap-road2  { fill: none; stroke: #E0D6BF; stroke-width: .9;
                stroke-linecap: round; stroke-linejoin: round; }
.mcmap-road3  { fill: none; stroke: #E7E0CE; stroke-width: .6;
                stroke-linecap: round; stroke-linejoin: round; }
.mcmap-river  { fill: none; stroke: #CFDFE8; stroke-width: 1; }
.mcmap-place  {
  fill: #B3AB98; font-family: var(--font-display); font-size: 8.5px;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  text-anchor: middle;
  paint-order: stroke; stroke: var(--bg, #FDFBEF); stroke-width: 2.6px;
  stroke-linejoin: round; pointer-events: none;
}
.mcmap-place.is-big { font-size: 9.5px; fill: #A09884; }

.mcmap-mc-dot    {
  fill: var(--rust); stroke: #fff; stroke-width: 2;
  filter: drop-shadow(0 1px 2px rgba(0, 32, 48, .22));
}

.mcmap-cong-halo { fill: var(--navy); opacity: .10; }
.mcmap-cong-mark { filter: drop-shadow(0 1px 3px rgba(0, 32, 48, .28)); }
.mcmap-mc, .mcmap-cong { cursor: pointer; outline: none; }

/* The reveal. Dots are visible by default — if the script cannot arm them,
   a complete map is what shows. Arming hides them; .is-in brings them back,
   staggered by --i so they arrive nearest-first. */
.mcmap-stage.is-armed .mcmap-mc {
  opacity: 0;
  transform: scale(.35);
  transition: opacity .35s ease, transform .35s cubic-bezier(.34, 1.45, .64, 1);
}
.mcmap-stage.is-armed .mcmap-mc.is-on {
  opacity: 1;
  transform: scale(1);
}
.mcmap-mc:focus-visible .mcmap-mc-dot { stroke: var(--navy); stroke-width: 3; }
.mcmap-cong:focus-visible .mcmap-cong-halo { opacity: .3; }

/* the label now carries the night as well as the neighborhood, so it is the
   only place that information lives on the page */
.mcmap-tip {
  position: absolute;
  transform: translate(-50%, -175%);
  background: var(--navy);
  color: #fff;
  padding: .6rem .9rem;
  border-radius: 9px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .2);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  white-space: nowrap;
  text-align: center;
  z-index: 2;
}
.mcmap-tip.is-on { opacity: 1; }
.mcmap-tip strong {
  display: block;
  font: 700 1rem/1.15 var(--font-display);
  letter-spacing: .01em;
}
.mcmap-tip span {
  display: block;
  margin-top: .15rem;
  font-size: .84rem;
  opacity: .82;
}

.mcmap-key {
  flex: 0 0 auto; display: flex; gap: 1.4rem; flex-wrap: wrap; justify-content: center;
  margin: 0; font-size: .85rem; color: var(--muted);
}
.mcmap-key i {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: .4rem; vertical-align: middle;
}
/* Congregations are drawn as the Missio mark on the map, not as a dot, so the
   key shows the mark too. The map draws them about a third larger than a
   community; 14px against the 10px swatch keeps that proportion. Both the
   round-dot radius and the ring shadow from .mcmap-key i have to be undone. */
.mcmap-key .k-cong {
  width: 14px; height: 14px; border-radius: 0; box-shadow: none;
  background: url("/assets/img/mark-black.png?v=288") center / contain no-repeat;
}
.mcmap-key .k-mc   { background: var(--rust); }
.mcmap-hint { font-style: italic; }

/* How far through the pinned stretch you are. Hidden until the map is armed,
   so it never sits frozen at zero for reduced motion, a failed fetch or no
   JS at all — in those cases the map is a finished picture with nothing to
   track. It fills as the dots do, reaching full when the last one lands. */
.mcmap-progress {
  display: none;
  width: min(260px, 50vw); height: 2px; border-radius: 2px;
  margin: .5rem auto 0; overflow: hidden;
  background: rgba(0, 53, 79, .12);
}
.mcmap-stage.is-armed ~ .mcmap-progress { display: block; }
.mcmap-progress b {
  display: block; height: 100%; width: 0; border-radius: 2px;
  background: var(--rust);
}

/* every community as plain text, for screen readers and for no-JS. Hidden
   only once the map has actually drawn. */
.mcmap-fallback {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .8rem;
}
.mcmap-fallback li {
  background: #fff; border-radius: 999px; padding: .45rem .95rem;
  font-size: .9rem; box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.mcmap-stage.is-ready .mcmap-fallback {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 719.98px) {
  /* the map is bound by width here, so it takes the whole screen rather than
     sitting inside the container's gutters */
  .mcmap-track {
    height: 280vh;
    width: 100vw;
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  }
  .mcmap-tip strong { font-size: .92rem; }
  .mcmap-tip span { font-size: .78rem; }
  .mcmap-key { gap: .9rem; font-size: .78rem; }

  /* Everything on the map is sized in map units, and the tighter phone viewBox
     does not change those — it only crops. So the marks and names have to be
     scaled themselves, or they stay the same few pixels across. */
  .mcmap-mc-dot { r: 13px; stroke-width: 3px; }
  .mcmap-cong { transform: scale(1.5); }        /* origin set per marker in JS */
  .mcmap-place, .mcmap-place.is-big {
    font-size: 20px; stroke-width: 6px; letter-spacing: .1em;
  }
  .mcmap-place:not(.is-sm) { display: none; }   /* thinned in JS to avoid overlap */

  /* The crop puts the outermost communities nearer the edge than the desktop
     framing does, and the desktop fade would have eaten into them. Full bleed
     means a gentler fade reads fine here anyway. */
  .mcmap-svg {
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 3%, #000 8%, #000 92%, rgba(0,0,0,.45) 97%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.45) 4%, #000 10%, #000 90%, rgba(0,0,0,.45) 96%, transparent 100%);
    mask-image:
        linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 3%, #000 8%, #000 92%, rgba(0,0,0,.45) 97%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.45) 4%, #000 10%, #000 90%, rgba(0,0,0,.45) 96%, transparent 100%);
  }
}

/* no pinning for anyone who has asked for less motion: the map is simply a
   picture in the page, complete */
@media (prefers-reduced-motion: reduce) {
  .mcmap-track { height: auto !important; }
  .mcmap-sticky { position: static; height: auto; padding-bottom: 1rem; }
  .mcmap-svg { max-height: none; }
}

/* ===== back to the Team Tools portal (team pages only) =====
   Absolutely positioned with auto offsets: it keeps its natural spot at the
   content's left edge but leaves the flow, so the page header rises onto the
   same line beside it — the same relationship on every layout. */
.tt-back {
  position: absolute; display: block; width: max-content;
  padding-top: .9rem;
  font-family: var(--font-display); font-weight: 700; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.tt-back:hover { color: var(--rust); }
/* unlocked pages whose content has no centered hero: sit in flow above it */
.tt-back-flow { position: static; margin: 0 0 1rem; padding-top: 0; }
@media (max-width: 680px) {
  /* narrow screens: the centered header would collide — sit above it instead */
  .tt-back { position: static; margin: 0 auto 1rem; padding-top: 0; }
}

/* ---- Bible study resources ---- */
.bsr-crumb { color: inherit; text-decoration: none; }
.bsr-crumb:hover { color: var(--rust-dark); }
.bsr-group { padding-top: 0; }

/* ---- Bible study resources: podcasts & playlists ---- */
.pod-grid { --pod-cols: 4; --pod-gap: 1.1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--pod-gap); }
.pod-grid > .pod-card { flex: 0 0 calc((100% - (var(--pod-cols) - 1) * var(--pod-gap)) / var(--pod-cols)); min-width: 0; }
@media (max-width: 1000px) { .pod-grid { --pod-cols: 3; } }
@media (max-width: 720px)  { .pod-grid { --pod-cols: 2; } }
@media (max-width: 480px)  { .pod-grid { --pod-cols: 1; } }
.pod-card .text-link { padding-top: .75rem; }
/* a card with two links: stacked, the pair sits at the card's foot */
.pod-textlinks { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.pod-textlinks .text-link { margin-top: 0; }
.pod-card { padding: 1rem 1rem 1.1rem; }
.pod-card:hover { transform: translateY(-3px); }
.pod-art {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: 12px; margin-bottom: .85rem;
  box-shadow: 0 10px 26px -14px rgba(38,36,31,.35);
}
.pod-card .card-icon {
  margin-bottom: .45rem;
  /* every name pill is two lines tall, one-line names centered in it, so the
     descriptions under the (equal-height) cover art start on the same line */
  display: flex; align-items: center; justify-content: center;
  line-height: 1.6; min-height: calc(3.2em + .8rem);
}
.pod-card p { font-size: .88rem; line-height: 1.5; }
.pod-links { margin-top: auto; padding-top: .75rem; display: flex; justify-content: center; gap: .5rem; }
.pod-links a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg); color: var(--ink); transition: background .2s, color .2s, transform .2s;
}
.pod-links a:hover { background: var(--rust); color: var(--white); transform: translateY(-2px); }
.pod-ico {
  width: 20px; height: 20px; background-color: currentColor;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.pod-ico.icon-youtube { -webkit-mask-image: url("../assets/icons/youtube.svg"); mask-image: url("../assets/icons/youtube.svg"); }
.bsr-subhead { text-align: center; margin: 3rem 0 1.4rem; }