/* 5. FRONT DOOR: Household's people and warmth on Facet's system.
   From Household: real photography first, the orange welcome card set into a photo,
   a photo wall. From Facet: the four facet colors and glyphs, and the icon's 45° fold
   as the one cut corner on cards and media. Everything else stays quiet. */
.d-frontdoor {
  --bg: var(--white); --fg: var(--charcoal); --muted: #4B5663; --line: #E1E4E7;
  --btn-bg: var(--orange); --btn-fg: var(--charcoal); --btn2-line: var(--charcoal);
  --focus: var(--charcoal); --head-bg: var(--white); --ov-bg: var(--white);
  --radius: 5px; --cut: clamp(28px, 4vw, 56px);
}
.d-frontdoor .site-head { border-bottom: 1px solid var(--line); }

.fd-cut, .fd-card { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.fd-cut .video, .fd-cut img { border-radius: 0; }

/* The orange card, with the icon's fold cut from its corner */
.fd-card { background: var(--orange); color: var(--charcoal); padding: clamp(1.75rem, 4vw, 3.25rem); --focus: var(--charcoal); }
.fd-card .btn--primary { background: var(--charcoal); color: var(--white); }
.fd-card .btn--primary:hover { background: var(--charcoal-3); }

/* The four logo colors, in equal quarters, under the header on every page. A
   thinner one closes the page at the foot of the footer, with a lighter charcoal
   so that quarter still shows on the charcoal footer. */
.fd-strip { height: 6px; background: linear-gradient(90deg, var(--charcoal) 0 25%, var(--orange) 25% 50%, var(--peach) 50% 75%, var(--slate) 75% 100%); }
.fd-strip--foot { position: absolute; inset: auto 0 0; height: 4px; background: linear-gradient(90deg, var(--charcoal-3) 0 25%, var(--orange) 25% 50%, var(--peach) 50% 75%, var(--slate) 75% 100%); }

/* Hero: full width. The orange panel's right edge folds over the photo on a diagonal;
   the photo keeps the sign and every face in frame, so its height is capped on wide screens. */
.fd-hero { display: grid; }
.fd-hero__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.fd-hero__card { padding: clamp(2rem, 6vw, 3rem) var(--gutter); }
.fd-hero__h { font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-weight: 800; text-transform: none; letter-spacing: -.03em; font-size: clamp(2.4rem, 4.6vw, 4.8rem); line-height: 1; max-width: 10.5ch; }
.fd-hero__m { font-family: 'Lequire', sans-serif; text-transform: uppercase; font-size: clamp(1.05rem, 1.5vw, 1.4rem); line-height: 1.25; margin-top: 1.5rem; }
.fd-hero__m span { white-space: nowrap; }
.fd-hero__s { font-weight: 500; margin-top: .75rem; max-width: 34ch; }
.fd-hero__card .ctas { margin-top: 1.75rem; }
/* The icon's facets, scaled up behind the welcome text, tone-on-tone in orange */
.fd-hero__card { position: relative; isolation: isolate; overflow: hidden; }
.fd-hero__card > :not(.fd-geo) { position: relative; }
.fd-geo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 959px) { .fd-hero__card { clip-path: none; } .fd-hero__photo { order: -1; } }
@media (min-width: 960px) {
  .fd-hero { grid-template-columns: 34fr 8fr 58fr; min-height: max(520px, min(calc(100svh - 82px), 42vw)); }
  .fd-hero__photo { grid-area: 1 / 2 / 2 / 4; }
  .fd-hero__photo img { height: 100%; aspect-ratio: auto; object-position: 60% 45%; }
  .fd-hero__card {
    grid-area: 1 / 1 / 2 / 3; z-index: 1; display: flex; flex-direction: column; justify-content: center;
    padding: 3rem calc(7vw + 2rem) 3rem clamp(var(--gutter), calc((100vw - 1240px) / 2), 8vw);
    clip-path: polygon(0 0, calc(100% - 7vw) 0, 100% 100%, 0 100%);
  }
}

/* Times strip, as on today's homepage: one line, centered */
.fd-when { background: var(--charcoal); color: var(--white); --focus: var(--orange); }
.fd-when__in { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; text-align: center; gap: .5rem 2.5rem; padding-block: 1.6rem; }
.fd-when__t { font-size: clamp(1.5rem, 3vw, 2.4rem); color: var(--orange); }
.fd-when__t .fd-plus { color: var(--peach); }
.nw { white-space: nowrap; }
.fd-when__a { font-weight: 500; opacity: .85; }
.fd-when__l { font-weight: 700; text-underline-offset: .3em; text-decoration-thickness: 2px; }

/* The four ways in, one per facet */
/* Full-bleed: the four logo colors as one band between the family section and the
   photo below it (a white island between two dark sections looked stranded). */
.fd-four .fd-four__in { width: 100%; border-radius: 0; }
.fd-four + .fd-who { margin-top: 0; }
.fc-tile { padding: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 3.5vw, 3rem); display: flex; flex-direction: column; gap: .6rem; min-height: 250px; }
.fc-tile p { font-size: .98rem; }
.fc-tile__a { margin-top: auto; padding-top: 1rem; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.fc-tile--dark { background: var(--charcoal); color: var(--white); --focus: var(--orange); }
.fc-tile--dark .fc-glyph { color: var(--orange); }
.fc-tile--orange { background: var(--orange); color: var(--charcoal); }
.fc-tile--orange .fc-glyph { color: var(--charcoal); }
.fc-tile--peach { background: var(--peach); color: var(--charcoal); }
.fc-tile--peach .fc-glyph { color: var(--charcoal); }
.fc-tile--stem { background: var(--slate); color: var(--white); --focus: var(--white); }
.fc-tile--stem .fc-glyph { color: var(--peach); }
.fd-four__in { display: grid; border-radius: var(--radius); overflow: hidden; }
@media (min-width: 700px) { .fd-four__in { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .fd-four__in { grid-template-columns: repeat(4, 1fr); } }

/* Who we are: a full-bleed photo section with the vision set over it */
.fd-who { position: relative; display: grid; color: var(--white); margin-top: clamp(4rem, 8vw, 6.5rem); --fg: var(--white); --btn2-line: var(--white); --bg: var(--charcoal); --focus: var(--orange); }
.fd-who > * { grid-area: 1 / 1; }
.fd-who__img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; object-position: 60% 40%; }
.fd-who::after { content: ''; grid-area: 1 / 1; background: linear-gradient(90deg, rgba(32, 36, 42, .9) 0, rgba(32, 36, 42, .86) 42%, rgba(32, 36, 42, .35) 78%); }
.fd-who__in { position: relative; z-index: 1; padding-block: clamp(4rem, 9vw, 7.5rem); align-self: center; }
.fd-who__copy { max-width: 40rem; }
.fd-who__copy .h2 { margin-bottom: 1.25rem; color: var(--orange); }
.fd-lede { font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 700; line-height: 1.3; margin-bottom: 1.5rem; letter-spacing: -.01em; }
.fd-who__copy p:not(.fd-lede) { color: rgba(255, 255, 255, .88); }
/* "Not like family" sits right under the service times (Bre's order). It is
   white, so the charcoal times band reads as the divider above it. */
.fd-family { margin-top: clamp(4rem, 8vw, 6.5rem); }
.fd-when + .fd-family { margin-top: 0; }
.fd-family + .fd-who { margin-top: 0; }

/* The church is not like family */
.fd-family { background: var(--white); color: var(--charcoal); padding-block: clamp(3.5rem, 7vw, 6.5rem); --muted: #4B5663; --focus: var(--charcoal); }
.fd-family__top { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) { .fd-family__top { grid-template-columns: 1.1fr .9fr; gap: 5rem; } }
.fd-family__h { font-size: clamp(2.3rem, 5vw, 4.4rem); line-height: .96; margin-bottom: 1.75rem; color: var(--charcoal); }
.fd-family__top p { max-width: 54ch; font-size: 1.08rem; }
.fd-family__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* The family mark: a family photo in each facet (see ofc_family_mark). When
   theme.js arms it, the facets start pulled apart; scrolled into view, their
   outlines draw, they glide together, and the photos fade up inside them. */
.fd-family__mark { justify-self: center; width: min(100%, 440px); }
.fm { display: block; width: 100%; height: auto; overflow: visible; }
.fm-line { fill: none; stroke: var(--charcoal); stroke-width: 2.2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0; }
.fm-f { transform-box: fill-box; transform-origin: center; }
.fm-f--dark { --from: translate(-46px, -14px) rotate(-14deg); }
.fm-f--peach { --from: translate(40px, -40px) rotate(16deg); }
.fm-f--orange { --from: translate(48px, 26px) rotate(-10deg); }
.fm-f--stem { --from: translate(-26px, 52px) rotate(12deg); }
.fm.is-armed .fm-f { transform: var(--from) scale(.86); }
.fm.is-armed .fm-photo { opacity: 0; }
.fm.is-armed .fm-line { opacity: .85; stroke-dashoffset: 1; }
.fm.is-in .fm-f { transform: none; transition: transform 1.3s cubic-bezier(.65, 0, .25, 1) calc(.55s + var(--i) * .14s); }
.fm.is-in .fm-photo { opacity: 1; transition: opacity 1s ease calc(1.5s + var(--i) * .12s); }
.fm.is-in .fm-line { stroke-dashoffset: 0; opacity: 0; transition: stroke-dashoffset .9s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * .12s), opacity .8s ease calc(2.3s + var(--i) * .1s); }
.fm-shot.fm-in { animation: fm-in 1.4s ease both; }
@keyframes fm-in { from { opacity: 0; } }
.fd-pillars { display: grid; gap: 2.5rem; margin-top: clamp(3.5rem, 7vw, 5.5rem); }
@media (min-width: 860px) { .fd-pillars { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.fd-pillar { border-top: 4px solid var(--orange); padding-top: 1.5rem; }
.fd-pillar--peach { border-top-color: var(--peach); }
.fd-pillar--stem { border-top-color: var(--slate); }
.fd-pillar h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: .75rem; }
.fd-pillar p:not(.refs) { color: var(--muted); }

/* Latest sermon */
.fd-sermon { display: grid; gap: 2.5rem; align-items: center; padding-block: clamp(4.5rem, 9vw, 8rem); }
@media (min-width: 960px) { .fd-sermon { grid-template-columns: .75fr 1.5fr; gap: 4rem; } }
.fd-sermon__t { font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.15; margin: 1.25rem 0 .5rem; }
.fd-sermon__copy p:not(.fd-sermon__t) { color: var(--muted); font-weight: 500; }

/* Life in the family: the photo wall that replaces the Instagram embed */
.fd-life { padding-bottom: clamp(4rem, 8vw, 6rem); }
.fd-life__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-bottom: 2rem; }
.fd-wall { display: grid; gap: 6px; padding-inline: 6px; grid-template-columns: repeat(2, 1fr); }
.fd-wall img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; background: var(--tint-2); }
.fd-wall .fd-w6, .fd-wall .fd-w7 { display: none; }
@media (min-width: 900px) {
  .fd-wall { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, clamp(180px, 17vw, 260px)); }
  .fd-wall img { aspect-ratio: auto; }
  .fd-wall .fd-w0 { grid-area: 1 / 1 / 3 / 2; }
  .fd-wall .fd-w1 { grid-area: 1 / 2 / 2 / 4; }
  .fd-wall .fd-w2 { grid-area: 1 / 4 / 3 / 5; }
  .fd-wall .fd-w3 { grid-area: 1 / 5 / 2 / 7; }
  .fd-wall .fd-w4 { grid-area: 2 / 2 / 3 / 3; }
  .fd-wall .fd-w5 { grid-area: 2 / 3 / 3 / 4; }
  .fd-wall .fd-w6 { grid-area: 2 / 5 / 3 / 6; display: block; }
  .fd-wall .fd-w7 { grid-area: 2 / 6 / 3 / 7; display: block; }
}

/* Inner page header: a 2025–26 photo with the orange card set into it */
.fd-phead__img img { width: 100%; height: clamp(260px, 44vh, 500px); object-fit: cover; object-position: 50% 35%; }
.fd-phead__strip { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: minmax(0, 1fr); gap: 6px; height: clamp(260px, 44vh, 500px); overflow: hidden; }
.fd-phead__strip img { min-height: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; background: var(--tint-2); }
.fd-phead__strip img:nth-child(n+4) { display: none; }
.fd-phead__strip:has(> img:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) {
  .fd-phead__strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .fd-phead__strip img:nth-child(n+4) { display: block; }
}
/* Plan Your Visit: phones get just the first photo (the volunteer and boy with the welcome sign), full width. */
@media (max-width: 899px) {
  .fd-phead--plan-your-visit .fd-phead__strip { grid-template-columns: 1fr; }
  .fd-phead--plan-your-visit .fd-phead__strip img:nth-child(n+2) { display: none; }
  .fd-phead--plan-your-visit .fd-phead__strip img { object-position: 85% 30%; }
}
/* Baptism, Family Care, Gospel: the photo already spans its full width, so it gets taller instead, and the faces (and the gospel lyric) clear the card on laptops. */
@media (min-width: 900px) {
  .fd-phead--baptism .fd-phead__img img, .fd-phead--family-care .fd-phead__img img, .fd-phead--what-is-the-gospel .fd-phead__img img { height: clamp(370px, 56vh, 540px); object-position: 50% 26%; }
  .fd-phead--family-care .fd-phead__img img { object-position: 50% 36%; }
  .fd-phead--what-is-the-gospel .fd-phead__img img { object-position: 50% 15%; }
}
.fd-phead__card { margin-top: clamp(-9rem, -11vw, -4rem); position: relative; max-width: 44rem; }
.fd-phead__card h1 { font-size: clamp(2.3rem, 5vw, 4.2rem); line-height: .95; }
.fd-phead__card .lead { margin-top: 1rem; font-weight: 500; }
.d-frontdoor .ofc-page .b-text__media { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.d-frontdoor .ofc-page .b-text__media img { border-radius: 0; }
.d-frontdoor .ofc-page .b-text.is-flipped .b-text__media { clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); }
.d-frontdoor .card { border-top: 4px solid var(--orange); }
.d-frontdoor .card:nth-child(3n + 2) { border-top-color: var(--peach); }
.d-frontdoor .card:nth-child(3n) { border-top-color: var(--slate); }

/* Join the family (closes every page, like today's footer) */
.fd-join { background: var(--orange); color: var(--charcoal); padding-block: clamp(2.5rem, 5vw, 3.75rem); --focus: var(--charcoal); }
.fd-join__in { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) { .fd-join__in { grid-template-columns: 1fr auto; gap: 2.5rem; } .fd-join .ctas { margin: 0; } }
.fd-join p { font-weight: 500; margin-top: .5rem; max-width: 62ch; }
.fd-join .btn--primary { background: var(--charcoal); color: var(--white); }
.fd-join .btn--primary:hover { background: var(--charcoal-3); }

.d-frontdoor .site-foot { background: var(--charcoal); color: var(--white); --focus: var(--orange); }
.d-frontdoor .site-foot__brand p { color: var(--orange); }
.fd-foot__in { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .fd-foot__in { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; } }
.fd-foot__brand img { height: 96px; width: auto; margin-bottom: 1.25rem; }
.fd-foot__brand p { font-family: 'Lequire', sans-serif; text-transform: uppercase; color: var(--orange); font-size: 1.15rem; line-height: 1.25; max-width: 20ch; }
.fd-foot p { font-size: .95rem; }
.fd-foot__in > div > a { display: inline-block; margin-top: .5rem; font-weight: 700; text-decoration: underline; text-underline-offset: .3em; }

/* Pages without a header photo: the orange card becomes a full-width band, as tall as a header photo */
.fd-phead--band { background: var(--orange); color: var(--charcoal); padding-block: clamp(2.5rem, 6vw, 4.5rem); --focus: var(--charcoal); min-height: clamp(260px, 44vh, 500px); display: flex; align-items: center; }
.fd-phead--band .fd-phead__card { margin-top: 0; }
.fd-phead--band .lead { max-width: none; }

/* Pages with their own title art (Formation Night): the art is the whole header, uncropped, with the lead under it. #272B31 is the art's grain-lifted charcoal, so the edges don't show. */
.fd-phead--art { background: #272B31; text-align: center; padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.fd-phead--art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 5; }
@media (max-width: 699px) { .fd-phead--art img { aspect-ratio: 67 / 40; } }
.fd-phead--art .lead { color: var(--peach); font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.35rem); margin: .25rem auto 0; max-width: none; }