:where([data-etch-element="container"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  max-inline-size: var(--content-width, 1366px);
  align-self: center; margin-inline: auto;
}
:where([data-etch-element="flex-div"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
}
:where([data-etch-element="iframe"]) {
  inline-size: 100%;
  height: auto;
 aspect-ratio: 16/9;
}
:where([data-etch-element="section"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.site-header {
  background-color: var(--white);
padding-block: var(--space-m);
padding-inline: var(--gutter);
}
.site-header__inner {
  flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-s) var(--space-l);
}
.site-brand {
  display: flex;
flex-direction: column;
gap: 0.15em;
color: var(--text-dark);
text-decoration: none;
}
.site-brand__name {
  font-family: var(--heading-font-family);
font-size: var(--text-l);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.2;
}
.site-brand__tag {
  color: var(--primary);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.site-nav__list {
  position: fixed;
inset: 0 0 auto 0;
margin: 0;
inline-size: 100%;
flex-direction: column;
align-items: flex-start;
gap: var(--space-m);
padding: var(--space-m) var(--gutter) var(--space-l);
border: 0;
border-block-end: var(--border-dark);
background-color: var(--white);
color: var(--text-dark);
box-shadow: var(--box-shadow-1);

&:popover-open { display: flex; }

&::backdrop { background-color: color-mix(in oklch, var(--base-ultra-dark) 40%, transparent); }

@media (min-width: 48rem) {
position: static;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: var(--space-xs) var(--space-l);
inline-size: auto;
padding: 0;
border: 0;
background-color: transparent;
box-shadow: none;
overflow: visible;
}
}
.site-nav__link {
  color: var(--text-dark);
font-size: var(--text-s);
font-weight: 500;
letter-spacing: 0.06em;
text-decoration: none;
text-transform: uppercase;

&:hover { color: var(--primary); }

.site-nav[data-page="home"] &[href="/"],
.site-nav[data-page="about-us"] &[href="/about-us/"],
.site-nav[data-page="our-faith"] &[href="/our-faith/"],
.site-nav[data-page="events"] &[href="/events/"] {
  color: var(--primary);
  font-weight: 600;
}
}
.site-footer {
  background-color: var(--white);
border-block-start: var(--border-dark);
padding-block: var(--space-l);
padding-inline: var(--gutter);
}
.site-footer__inner {
  flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-s) var(--space-l);
}
.site-footer__name {
  color: var(--text-dark-muted);
font-size: var(--text-s);
}
.site-footer__links {
  display: flex;
flex-wrap: wrap;
gap: var(--space-xs) var(--space-l);
}
.site-footer__link {
  color: var(--text-dark);
font-size: var(--text-s);
font-weight: 500;
text-decoration: none;

&:hover { color: var(--primary); }
}
.section-intro {
  display: flex;
flex-direction: column;
gap: var(--space-s);
max-inline-size: 60ch;
}
.eyebrow {
  color: var(--eyebrow-color, var(--primary));
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.16em;
line-height: 1.3;
text-transform: uppercase;

&:empty { display: none; }
}
.section-intro__heading {
  color: inherit;
}
.page-hero__inner {
  flex-direction: row;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-l) var(--space-xl);
}
.page-hero__copy {
  display: flex;
flex: 1 1 30rem;
flex-direction: column;
gap: var(--space-s);
max-inline-size: 50rem;
}
.page-hero__title {
  color: inherit;
}
.page-hero__text {
  color: var(--text-dark-muted);
font-size: var(--text-l);
max-inline-size: 60ch;

&:empty { display: none; }
}
.mission-card {
  display: flex;
flex-direction: column;
gap: var(--space-s);
padding-block-start: var(--space-l);
}
.mission-card__text {
  color: var(--text-dark-muted);
}
.mission-card__refs {
  color: var(--secondary-semi-dark);
font-size: var(--text-s);
font-weight: 500;
padding-block-start: var(--space-xs);
}
.faith-item {
  display: grid;
gap: var(--space-xs) var(--space-l);
padding-block: var(--space-l);
border-block-end: var(--border-dark);

@media (min-width: 48rem) {
grid-template-columns: 3rem 1fr auto;
align-items: baseline;
}
}
.faith-item__number {
  color: var(--secondary-semi-dark);
font-size: var(--text-s);
font-weight: 600;
letter-spacing: 0.08em;
}
.faith-item__body {
  display: flex;
flex-direction: column;
gap: var(--space-xs);
max-inline-size: 65ch;
}
.faith-item__title {
  font-size: var(--h4);
}
.faith-item__text {
  color: var(--text-dark-muted);
}
.faith-item__refs {
  color: var(--primary);
font-size: var(--text-s);
font-weight: 500;

@media (min-width: 48rem) {
text-align: end;
}
}
.event-row {
  display: grid;
gap: var(--space-xs) var(--space-l);
padding-block: var(--space-l);
border-block-end: var(--border-dark);

@media (min-width: 48rem) {
grid-template-columns: 10rem 1fr auto;

&[data-variant="detail"] { grid-template-columns: 13.75rem 1fr; }
}

&[data-variant="detail"] { padding-block: var(--space-xl); }
}
.event-row__when {
  display: flex;
flex-direction: column;
gap: 0.25em;
}
.event-row__day {
  color: var(--secondary-semi-dark);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.event-row__time {
  color: var(--text-dark-muted);
font-weight: 500;

.event-row[data-variant="detail"] & {
  color: var(--text-dark);
  font-family: var(--heading-font-family);
  font-size: var(--h4);
  font-weight: 600;
}
}
.event-row__body {
  display: flex;
flex-direction: column;
gap: var(--space-xs);
max-inline-size: 65ch;
}
.event-row__title {
  font-size: var(--h4);

.event-row[data-variant="detail"] & { font-size: var(--h3); }
}
.event-row__text {
  color: var(--text-dark-muted);
}
.event-row__meta {
  color: var(--primary);
font-size: var(--text-s);
font-weight: 600;

@media (min-width: 48rem) {
text-align: end;

.event-row[data-variant="detail"] & {
  grid-column: 2;
  text-align: start;
}
}
}
.contact-card {
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-s);
padding-block: var(--space-l);
border-block-start: calc(var(--border-size) * 2) var(--border-style) var(--primary);
--eyebrow-color: var(--secondary-semi-dark);
}
.contact-card__title {
  font-size: var(--h4);
overflow-wrap: anywhere;
}
.text-link {
  color: var(--primary);
font-weight: 600;
text-decoration: none;

&:hover { text-decoration: underline; text-underline-offset: 0.2em; }
}
.cta-band {
  &[data-tone="dark"] {
  background-color: var(--bg-dark);
  color: var(--text-light);
  --eyebrow-color: var(--secondary);
  --muted-color: var(--text-light-muted);
}

&[data-tone="light"] {
  background-color: var(--bg-light);
  color: var(--text-dark);
  --eyebrow-color: var(--secondary-semi-dark);
  --muted-color: var(--text-dark-muted);
}
}
.cta-band__inner {
  flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-l);
}
.cta-band__content {
  display: flex;
flex-direction: column;
gap: var(--space-s);
max-inline-size: 47.5rem;
}
.cta-band__heading {
  color: inherit;
}
.cta-band__text {
  color: var(--muted-color, inherit);
font-size: var(--text-l);
}
.hero {
  position: relative;
isolation: isolate;
overflow: hidden;
justify-content: flex-end;
min-block-size: min(90svh, 40rem);
background-color: var(--bg-ultra-dark);
color: var(--white);
--eyebrow-color: var(--secondary);

&::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in oklch, var(--base-ultra-dark) 78%, transparent);
}

@media (min-width: 48rem) {
&::before {
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--base-ultra-dark) 94%, transparent) 0%, color-mix(in oklch, var(--base-dark) 82%, transparent) 45%, color-mix(in oklch, var(--base-dark) 35%, transparent) 100%),
    linear-gradient(0deg, color-mix(in oklch, var(--base-ultra-dark) 70%, transparent) 0%, transparent 55%);
}
}
}
.hero__image {
  position: absolute;
inset: 0;
z-index: -2;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center 60%;
}
.hero__content {
  display: flex;
flex-direction: column;
gap: var(--space-m);
max-inline-size: 47.5rem;
}
.hero__title {
  color: var(--white);
}
.hero__text {
  color: var(--text-light-muted);
font-size: var(--text-l);
max-inline-size: 36ch;
}
.hero__actions {
  display: flex;
flex-wrap: wrap;
gap: var(--space-s);
padding-block-start: var(--space-xs);
}
.club-intro__inner {
  display: grid;
align-items: center;
gap: var(--space-xl);

@media (min-width: 62rem) {
grid-template-columns: var(--grid-2);
}
}
.club-intro__text {
  color: var(--text-dark-muted);
font-size: var(--text-l);
}
.photo-card {
  position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-block-size: 26.25rem;
padding: var(--space-l);
border-radius: var(--radius);
background-color: var(--bg-dark);

&::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, color-mix(in oklch, var(--base-ultra-dark) 85%, transparent) 0%, color-mix(in oklch, var(--base-ultra-dark) 25%, transparent) 40%, transparent 65%);
}
}
.photo-card__image {
  position: absolute;
inset: 0;
z-index: -2;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center 40%;
}
.photo-card__caption {
  display: flex;
flex-direction: column;
gap: var(--space-xs);
--eyebrow-color: var(--secondary);
}
.photo-card__title {
  color: var(--white);
font-family: var(--heading-font-family);
font-size: var(--h4);
font-weight: 500;
line-height: 1.2;
}
.video-feature {
  --eyebrow-color: var(--secondary);
}
.video-feature__inner {
  display: grid;
align-items: center;
gap: var(--space-xl);

@media (min-width: 62rem) {
grid-template-columns: var(--grid-1-2);
}
}
.video-feature__text {
  color: var(--text-light-muted);
font-size: var(--text-l);
}
.mission__inner {
  gap: var(--space-xl);
}
.mission-list {
  display: grid;
gap: var(--grid-gap);
border-block-start: var(--border-dark);

@media (min-width: 48rem) {
grid-template-columns: var(--grid-3);
}
}
.events-teaser__inner {
  gap: var(--space-l);
}
.events-teaser__header {
  display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-s) var(--space-l);
}
.event-list {
  display: flex;
flex-direction: column;
border-block-start: var(--border-dark);
}
.page-hero__image {
  flex: 0 1 27.5rem;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: var(--radius);
}
.about-story__inner {
  display: grid;
align-items: start;
gap: var(--space-xl);

@media (min-width: 62rem) {
grid-template-columns: var(--grid-3-2);
}
}
.about-story__body {
  display: flex;
flex-direction: column;
gap: var(--content-gap);
max-inline-size: 65ch;
}
.about-story__text {
  color: var(--text-dark-muted);
font-size: var(--text-l);
}
.verse-card {
  display: flex;
flex-direction: column;
gap: var(--space-m);
padding: var(--space-l);
border-radius: var(--radius);
background-color: var(--bg-dark);
color: var(--text-light);
--eyebrow-color: var(--secondary);
--blockquote-background: transparent;
--blockquote-padding: 0;
--blockquote-text-color: var(--white);
--blockquote-text-font-family: var(--heading-font-family);
--blockquote-text-font-size: var(--text-xl);
}
.verse-card__ref {
  color: var(--text-light-muted);
font-size: var(--text-s);
font-weight: 500;
}
.faith-list {
  display: flex;
flex-direction: column;
border-block-start: var(--border-dark);
}
.contact-list {
  display: grid;
gap: var(--grid-gap);

@media (min-width: 48rem) {
grid-template-columns: var(--grid-3);
}
}
.video-feature__embed {
  border: 0;
border-radius: var(--radius);
background-color: var(--bg-ultra-dark);
}
.site-nav__toggle {
  display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-s);
border: var(--border-dark);
border-radius: var(--radius);
color: var(--text-dark);
font-size: var(--text-s);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;

@media (min-width: 48rem) {
display: none;
}
}
.site-nav__toggle-icon {
  inline-size: 1.25rem;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-width: 2;
}
.site-nav__close {
  align-self: flex-end;

@media (min-width: 48rem) {
display: none;
}
}
.site-nav__close-button {
  color: var(--text-dark-muted);
font-size: var(--text-s);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}