/* ==========================================================================
   Painter Creek Church of Christ
   assets/css/site.css

   Palette is drawn from the two logos: the creek blue, hill green and cross
   red of the church mark, the primary brights of Little Wonders.

   The signature is the creek itself. The church is named for one and its
   logo draws one, so a single meandering line runs down the whole page as
   you scroll — one continuous object, not a divider repeated six times.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Typefaces — self-hosted, so the site never waits on a third party
      Fraunces carries the identity through its variable axes:
        opsz 9-144 · wght 100-900 · SOFT 0-100 · WONK 0/1
      Set warm and slightly irregular here (SOFT 40, WONK 1).
      Baloo 2 appears only inside Little Wonders.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-var.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Baloo 2";
  src: url("../fonts/baloo2-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Baloo 2";
  src: url("../fonts/baloo2-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --ink:        #16202B;
  --ink-2:      #43535F;
  --ink-3:      #5E6E7C;   /* text-safe secondary */
  --ink-4:      #A6B1BB;   /* decorative only — never carries text */
  --paper:      #FCFBF8;
  --paper-2:    #F4F2EC;
  --line:       #E4E1D8;
  --line-2:     #CFCBBE;

  --creek:      #1B4D7A;
  --creek-2:    #2E6FA3;
  --water:      #C5E0F4;
  --water-pale: #EDF5FC;
  --hill:       #2F6B3F;
  --cross:      #C0342C;

  --lw-blue:    #176FC0;
  --lw-yellow:  #FCCE06;
  --lw-green:   #00A650;
  --lw-red:     #CF181F;
  --lw-purple:  #7A1D90;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --round:   "Baloo 2", "Public Sans", sans-serif;
  --fr-warm: "opsz" 96, "SOFT" 40, "WONK" 1;

  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1.03rem, 0.99rem + 0.20vw, 1.15rem);
  --step-1:  clamp(1.22rem, 1.14rem + 0.40vw, 1.48rem);
  --step-2:  clamp(1.52rem, 1.36rem + 0.80vw, 2.10rem);
  --step-3:  clamp(2.00rem, 1.68rem + 1.55vw, 3.15rem);
  --step-4:  clamp(2.60rem, 1.90rem + 3.30vw, 5.10rem);

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 64ch;
  --radius: 3px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(22,32,43,.05), 0 4px 12px rgba(22,32,43,.05);
  --shadow-md: 0 2px 4px rgba(22,32,43,.06), 0 14px 34px rgba(22,32,43,.10);
  --shadow-lg: 0 4px 8px rgba(22,32,43,.07), 0 28px 62px rgba(22,32,43,.14);
  --ease: cubic-bezier(.22,.61,.36,1);

  --header-h: 92px;
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.66;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-variation-settings: var(--fr-warm);
  font-weight: 500;
  line-height: 1.07;
  letter-spacing: -0.021em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.012em; }
h4 { font-size: var(--step-0); font-family: var(--body); font-weight: 700; letter-spacing: 0; }

p { margin: 0 0 1.15em; max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--creek); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--creek-2); }

:focus-visible { outline: 3px solid var(--creek-2); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--water); color: var(--ink); }

.skip {
  position: absolute; top: 0; left: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .8rem 1.2rem;
  clip-path: inset(50%); white-space: nowrap;
}
.skip:focus { clip-path: none; color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap { width: min(1180px, 100% - (var(--gutter) * 2)); margin-inline: auto; }
.wrap--narrow { width: min(720px, 100% - (var(--gutter) * 2)); margin-inline: auto; }

.section { padding-block: clamp(3.5rem, 8vw, 7.5rem); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--paper2 { background: var(--paper-2); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink h2, .section--ink h3, .section--ink h4 { color: var(--paper); }
.section--ink p { color: #C3CCD5; }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.center { text-align: center; margin-inline: auto; }
.center p { margin-inline: auto; }

/* Editorial split — deliberately uneven, so the page doesn't read as a
   stack of identical 50/50 rows. */
.editorial { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) {
  .editorial { grid-template-columns: 5fr 6fr; }
  .editorial--flip { grid-template-columns: 6fr 5fr; }
  .editorial--wide-left { grid-template-columns: 7fr 4fr; }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
  color: var(--creek); margin: 0 0 1rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; flex: none; }
.eyebrow--center { justify-content: center; }
.section--ink .eyebrow { color: var(--water); }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   4. The creek rule — signature
   The church is named for a creek and its logo draws one, so that line
   rules off the sections. Each one draws itself as it scrolls into view.
   -------------------------------------------------------------------------- */
.creek-rule { display: block; width: 100%; height: auto; overflow: visible; }
.creek-rule .hill  { fill: none; stroke: var(--hill);  stroke-width: 3; stroke-linecap: round; opacity: .5; }
.creek-rule .water { fill: none; stroke: var(--creek); stroke-width: 3; stroke-linecap: round; opacity: .4; }
.creek-rule--lw .hill    { stroke: var(--lw-green); opacity: .6; }
.creek-rule--lw .water   { stroke: var(--lw-blue);  opacity: .5; }
.creek-rule--onink .hill  { stroke: #6FB07E; opacity: .55; }
.creek-rule--onink .water { stroke: var(--water); opacity: .45; }

.creek-rule path { stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); }
.creek-rule.is-drawn path { transition: stroke-dashoffset 1.8s var(--ease); stroke-dashoffset: 0; }
.creek-rule.is-drawn .water { transition-delay: .22s; }

.creek-divider { padding-block: clamp(1.5rem, 4vw, 3rem); }

@media (prefers-reduced-motion: reduce) {
  .creek-rule path { stroke-dashoffset: 0 !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   5. Buttons + links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 1.7rem;
  border: 1.5px solid transparent; border-radius: 100px;
  background: var(--creek); color: #fff;
  font-family: var(--body); font-size: .84rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s var(--ease),
              box-shadow .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { background: var(--creek-2); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn--ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #fff; color: var(--creek); }
.btn--outline-light { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn--lw { background: var(--lw-blue); }
.btn--lw:hover { background: #1258A0; }
.btn--sm { padding: .62rem 1.2rem; font-size: .78rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; font-size: .84rem; letter-spacing: .05em;
  text-transform: uppercase; text-decoration: none;
}
.link-arrow svg { transition: transform .3s var(--ease); flex: none; }
.link-arrow:hover svg { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   6. Header
   The logo already carries the name, so no text lockup sits beside it —
   which lets the mark itself be the largest thing in the bar.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(252,251,248,.88);
  backdrop-filter: saturate(165%) blur(15px);
  -webkit-backdrop-filter: saturate(165%) blur(15px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 26px rgba(22,32,43,.07); }

.nav { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; flex: none; }
.brand img { height: 58px; width: auto; transition: height .3s var(--ease); }
@media (min-width: 700px)  { .brand img { height: 68px; } }
@media (min-width: 1020px) { .brand img { height: 76px; } }
.site-header.is-stuck .brand img { height: 50px; }
@media (min-width: 1020px) { .site-header.is-stuck .brand img { height: 60px; } }

.nav-links { display: none; }
@media (min-width: 1020px) {
  .nav-links { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
  .nav-links a {
    position: relative; display: block; padding: .6rem .85rem;
    font-size: .89rem; font-weight: 600; letter-spacing: .01em;
    color: var(--ink); text-decoration: none;
    transition: color .2s var(--ease);
  }
  .nav-links a::after {
    content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .28rem;
    height: 1.5px; background: var(--creek);
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--ease);
  }
  .nav-links a:hover { color: var(--creek); }
  .nav-links a:hover::after,
  .nav-links a[aria-current="page"]::after,
  .nav-links a.is-current::after { transform: scaleX(1); }
  .nav-links a[aria-current="page"], .nav-links a.is-current { color: var(--creek); }
}

/* Give sits where a primary button would, but reads as an invitation rather
   than a checkout. The job of this site is to get people through the door. */
.nav-give { display: none; }
@media (min-width: 1020px) {
  .nav-give {
    display: inline-flex; align-items: center; gap: .45rem;
    margin-left: .9rem; padding: .6rem 0 .6rem 1rem;
    border-left: 1px solid var(--line-2);
    font-size: .89rem; font-weight: 600; color: var(--ink-3);
    text-decoration: none; transition: color .25s var(--ease);
  }
  .nav-give:hover { color: var(--creek); }
  .nav-give svg { width: 14px; height: 14px; opacity: .8; }
}

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 0 12px;
  background: transparent; border: 1px solid var(--line-2); border-radius: 100px; cursor: pointer;
}
@media (min-width: 1020px) { .nav-toggle { display: none; } }
.nav-toggle span {
  display: block; height: 1.5px; background: var(--ink); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: var(--header-h) 0 0; z-index: 99;
  background: var(--paper); padding: 2rem var(--gutter) 3rem; overflow-y: auto;
  transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.drawer.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
@media (min-width: 1020px) { .drawer { display: none; } }
.drawer ul { list-style: none; margin: 0 0 2rem; padding: 0; }
.drawer li + li { border-top: 1px solid var(--line); }
.drawer a {
  display: flex; align-items: center; justify-content: space-between; padding: 1rem 0;
  font-family: var(--display); font-variation-settings: var(--fr-warm);
  font-size: 1.5rem; font-weight: 500; color: var(--ink); text-decoration: none;
}
.drawer a[aria-current="page"] { color: var(--creek); }
.drawer-meta { border-top: 1px solid var(--line); padding-top: 1.5rem; font-size: var(--step--1); color: var(--ink-2); }
.drawer-meta a { font-family: var(--body); font-size: var(--step--1); display: inline; }
body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Hero — headline and service times beside the building, with the
   address card overlapping the photo.
   -------------------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(2.5rem, 6vw, 5rem) 0; }
.hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr .95fr; } }

.hero h1 { margin-bottom: .35em; }
.hero h1 em { font-style: normal; color: var(--creek); display: block; }
.hero .lede { max-width: 46ch; }

.hero-times {
  display: flex; flex-wrap: wrap; gap: 0;
  margin: 2rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hero-times div {
  padding: .95rem 1.4rem .95rem 0;
  margin-right: 1.4rem;
  border-right: 1px solid var(--line);
}
.hero-times div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero-times dt {
  font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: .18rem;
}
.hero-times dd {
  margin: 0; font-family: var(--display); font-variation-settings: var(--fr-warm);
  font-size: 1.24rem; font-weight: 600; color: var(--ink);
}
/* Written in by JS onto whichever gathering is next */
.next-flag {
  display: block; margin-bottom: .22rem;
  font-family: var(--body); font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cross);
}

.hero-figure { position: relative; }
.hero-figure img {
  width: 100%; aspect-ratio: 4/3.2; object-fit: cover; object-position: center 55%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: var(--water);
}
/* Address card, overlapping the photo */
.hero-card {
  position: absolute; left: -8px; bottom: -24px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.05rem 1.3rem; box-shadow: var(--shadow-md); max-width: 268px;
}
@media (max-width: 899px) { .hero-card { position: static; margin-top: 1rem; max-width: none; } }
.hero-card .label {
  font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: .3rem;
}
.hero-card .place { font-weight: 700; margin: 0 0 .45rem; line-height: 1.35; }

/* Interior page hero */
.page-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.page-hero h1 { max-width: 17ch; }
.page-hero .lede { max-width: 56ch; }
.crumbs { font-size: var(--step--1); color: var(--ink-3); margin-bottom: 1.25rem; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--creek); text-decoration: underline; }
.crumbs span { margin: 0 .45rem; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   8. Content components
   -------------------------------------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.65rem;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card h3 { margin-bottom: .4rem; }
.card p { font-size: .97rem; color: var(--ink-2); }
.card-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 1rem;
  background: var(--water-pale); color: var(--creek); flex: none;
}
.card-icon svg { width: 21px; height: 21px; }

/* Numbered because a service really is a sequence — the order carries
   information a first-time visitor needs. */
.order-list { list-style: none; margin: 0; padding: 0; counter-reset: ord; }
.order-list li {
  counter-increment: ord;
  display: grid; grid-template-columns: 2.6rem 1fr; gap: 1.25rem;
  padding: 1.6rem 0; border-top: 1px solid var(--line);
}
.order-list li::before {
  content: counter(ord, decimal-leading-zero);
  font-family: var(--display); font-variation-settings: var(--fr-warm);
  font-size: 1.4rem; font-weight: 500; color: var(--creek); opacity: .5; line-height: 1.15;
}
.order-list h3 { margin-bottom: .3rem; }
.order-list p { color: var(--ink-2); font-size: .97rem; }

.person img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: center 22%;
  border-radius: var(--radius-lg); margin-bottom: 1rem; background: var(--paper-2);
}
.person .role {
  font-size: .74rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--creek); margin-bottom: .25rem;
}
.person h3 { margin-bottom: .45rem; }
.person p { font-size: .94rem; color: var(--ink-2); }
.section--ink .person p { color: #C3CCD5; }
.section--ink .person .role { color: var(--water); }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .7rem; }
.gallery figure { margin: 0; overflow: hidden; border-radius: var(--radius); }
.gallery img {
  width: 100%; aspect-ratio: 3/2; object-fit: cover;
  background: var(--paper-2); transition: transform .5s var(--ease);
}
.gallery figure:hover img { transform: scale(1.045); }

.verse { border-left: 3px solid var(--hill); padding: .25rem 0 .25rem 1.6rem; margin: 2.5rem 0; max-width: 34rem; }
.verse p {
  font-family: var(--display); font-variation-settings: var(--fr-warm);
  font-size: var(--step-2); font-weight: 400; line-height: 1.28; color: var(--ink);
  letter-spacing: -.017em; margin-bottom: .5rem;
}
.verse cite {
  font-style: normal; font-size: .82rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
}
.section--ink .verse { border-left-color: var(--water); }
.section--ink .verse p { color: #fff; }
.section--ink .verse cite { color: var(--water); }

.facts { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.fact dt {
  font-size: .74rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: .35rem;
}
.fact dd {
  margin: 0; font-family: var(--display); font-variation-settings: var(--fr-warm);
  font-size: var(--step-1); font-weight: 600; line-height: 1.25;
}
.fact dd a { text-decoration: none; }
.fact dd a:hover { text-decoration: underline; }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem 0; font-weight: 700; font-size: 1.04rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--body); font-weight: 400; font-size: 1.6rem; line-height: 1;
  color: var(--creek); flex: none; transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-body { padding-bottom: 1.4rem; }
.faq .faq-body p { color: var(--ink-2); font-size: .98rem; }

/* --------------------------------------------------------------------------
   9. Little Wonders — the one cross-link out of the main page
   -------------------------------------------------------------------------- */
.feature {
  display: grid; gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  background: #fff;
}
@media (min-width: 880px) { .feature { grid-template-columns: 1fr 1fr; } }
.feature-art {
  display: grid; place-items: center; padding: clamp(2.25rem, 5vw, 3.75rem);
  background: radial-gradient(circle at 50% 44%, #FFFDF4 0%, #FFF0B8 100%);
}
.feature-art img { max-width: min(330px, 82%); }
.feature-body { padding: clamp(1.75rem, 4vw, 3rem); align-self: center; }
.feature-body h2 {
  font-family: var(--round); font-variation-settings: normal;
  font-weight: 700; letter-spacing: -.02em;
}

.theme-lw { --creek: var(--lw-blue); --creek-2: #1258A0; --water-pale: #FFFBEC; --water: #FFF0B8; }
.theme-lw h1, .theme-lw h2, .theme-lw h3 {
  font-family: var(--round); font-variation-settings: normal; font-weight: 700; letter-spacing: -.018em;
}
.theme-lw .card, .theme-lw .feature { border-radius: 14px; }
.theme-lw .card-icon { background: #FFF0B8; color: var(--lw-blue); }

.badge-hero { display: grid; place-items: center; padding: clamp(2rem, 5vw, 3.5rem); border-radius: var(--radius-lg); }
.badge-hero--lw { background: radial-gradient(circle at 50% 42%, #FFFDF4 0%, #FFF0B8 100%); }
.badge-hero img { max-width: min(340px, 78%); }

.ladder {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
.ladder li { background: #fff; padding: 1.35rem 1.5rem; display: grid; gap: .35rem 1.5rem; }
@media (min-width: 860px) { .ladder li { grid-template-columns: minmax(150px, 200px) 1fr; align-items: baseline; } }
.ladder .rung {
  font-family: var(--display); font-variation-settings: var(--fr-warm);
  font-size: 1.2rem; font-weight: 600;
}
.theme-lw .ladder .rung { font-family: var(--round); font-variation-settings: normal; font-weight: 700; }
.ladder p { font-size: .96rem; color: var(--ink-2); margin: 0; }

/* --------------------------------------------------------------------------
   10. Embeds + giving
   -------------------------------------------------------------------------- */
.embed {
  position: relative; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.embed iframe { display: block; width: 100%; border: 0; }
.embed--calendar iframe { height: clamp(520px, 72vh, 740px); }
.embed--map iframe { height: clamp(300px, 42vh, 430px); }
.embed--fb { min-height: 520px; display: flex; justify-content: center; padding: 1rem; }
.embed--fb iframe { max-width: 500px; }
.embed-fallback { padding: 2.5rem 1.75rem; text-align: center; color: var(--ink-2); }
.embed-fallback strong { display: block; color: var(--ink); margin-bottom: .35rem; }

.upcoming { list-style: none; margin: 0; padding: 0; }
.upcoming li {
  display: grid; grid-template-columns: 66px 1fr; gap: 1.1rem; align-items: center;
  padding: 1rem 0; border-bottom: 1px solid var(--line);
}
.upcoming li:last-child { border-bottom: 0; }
.date-chip { text-align: center; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.date-chip .m {
  display: block; background: var(--creek); color: #fff;
  font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .24rem 0;
}
.date-chip .d {
  display: block; font-family: var(--display); font-variation-settings: var(--fr-warm);
  font-size: 1.16rem; font-weight: 600; padding: .22rem 0 .3rem;
}
.upcoming h4 { margin: 0 0 .1rem; }
.upcoming .when { font-size: .89rem; color: var(--ink-2); }

/* The giving panel keeps its blue field and cross. The header link stays
   quiet — the weight belongs here, where someone has chosen to read it. */
.give-panel {
  position: relative; overflow: hidden;
  padding: clamp(2rem, 5vw, 3.75rem);
  border-radius: var(--radius-lg);
  color: #fff;
  background-color: #143C60;  /* fallback: white text must never land on white */
  background-image: linear-gradient(160deg, var(--creek) 0%, #143C60 62%, #0F2E4A 100%);
}
.give-panel h2, .give-panel h3, .give-panel h4 { color: #fff; }
.give-panel p { color: #C9DCEC; }
.give-panel strong { color: #fff; }
.give-panel .eyebrow { color: var(--water); }
.give-panel a:not(.btn) { color: #fff; }   /* must not repaint .btn--light's dark label */
.give-panel-cross {
  position: absolute; right: -34px; top: -28px; width: 250px;
  opacity: .10; pointer-events: none;
}
@media (max-width: 700px) { .give-panel-cross { width: 160px; right: -46px; top: -22px; } }

.give-methods {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-top: 2.25rem;
}
.give-method {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.17);
  border-radius: var(--radius);
  padding: 1.2rem;
}
.give-method h4 { margin-bottom: .3rem; }
.give-method p { font-size: .92rem; margin: 0; }

.notice {
  border: 1px dashed var(--ink-4); border-radius: var(--radius);
  background: #FFFDF2; padding: 1rem 1.15rem; font-size: .92rem; color: var(--ink-2);
}
.notice strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #A9B6C2; padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.site-footer a { color: #D6DFE7; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1.2fr; } }
.footer-mark { background: #fff; border-radius: var(--radius); padding: .9rem 1.1rem; display: inline-block; margin-bottom: 1.25rem; }
.footer-mark img { height: 64px; width: auto; }
.site-footer h4 {
  color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; margin-bottom: 1rem;
}
.footer-list { list-style: none; margin: 0; padding: 0; font-size: .94rem; }
.footer-list li + li { margin-top: .55rem; }
.site-footer p { font-size: .94rem; color: #A9B6C2; }
.socials { display: flex; gap: .6rem; margin-top: 1.25rem; }
.socials a {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.2); color: #D6DFE7;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.socials a:hover { background: #fff; border-color: #fff; color: var(--ink); }
.socials svg { width: 18px; height: 18px; }
.colophon {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .85rem; color: #8494A2;
}

/* --------------------------------------------------------------------------
   12. Motion + input
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }

@media (pointer: coarse) {
  .footer-list a, .drawer-meta a, .crumbs a, .facts dd a, .band-caption a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .footer-list li + li { margin-top: 0; }
  .socials a { width: 46px; height: 46px; }
  .link-arrow { min-height: 44px; align-items: center; }
  .faq summary { padding-block: 1.05rem; min-height: 56px; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .card--hover:hover, .btn:hover, .gallery figure:hover img { transform: none; }
}

@media (forced-colors: active) {
  .section--ink { forced-color-adjust: none; background: Canvas; color: CanvasText; }
  .section--ink h2, .section--ink h3, .section--ink p { color: CanvasText; }
  .btn { border: 1px solid ButtonText; }
}

@media print {
  .site-header, .drawer, .site-footer, .embed, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1; transform: none; }
}