html{ overflow-x: clip; }
@supports not (overflow-x: clip){ html{ overflow-x: hidden; } }

/* PORCH — shared styles for the restructured navigation, footer,
   progressive disclosure, and the What We Believe hub. */

/* ---- footer: place line + secondary Give ---- */
footer .foot-place{
  text-align: center;
  font-family: 'Karla', sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #C3CFD8;
  margin: 0 0 4px;
}
footer .footer-nav .fn-actions a.fn-give{
  font-size: 12px;
  letter-spacing: 0.18em;
  color: #C9D4DC;
  font-weight: 400;
}
footer .footer-nav .fn-actions a.fn-give:hover{ color: var(--porch-amber-soft, #F4C97A); }

/* ---- breadcrumb back to the hub ---- */
.hub-crumb{
  max-width: 720px;
  margin: 0 auto 6px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hub-crumb a{
  color: #B4C4CC;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
}
.hub-crumb a:hover{ color: var(--porch-amber, #E8A23B); }

/* ---- page subtitle under a page title ---- */
.page-kicker{
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--porch-amber, #E8A23B);
  font-weight: 700;
  margin: 0 0 16px;
}

/* ---- progressive disclosure ---- */
details.deeper{
  margin-top: 18px;
  border-top: 1px solid rgba(244,239,227,0.1);
}
details.deeper > summary{
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: 'Karla', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--porch-amber, #E8A23B);
}
details.deeper > summary::-webkit-details-marker{ display: none; }
details.deeper > summary::after{
  content: '+';
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: var(--porch-amber-soft, #F4C97A);
}
details.deeper[open] > summary::after{ content: '\2212'; }
details.deeper > summary:hover{ color: var(--porch-amber-soft, #F4C97A); }
details.deeper[open] > summary{ margin-bottom: 6px; }
details.deeper > *:not(summary){ animation: deeperIn 0.35s ease both; }
@keyframes deeperIn{ from{ opacity: 0; transform: translateY(-4px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){
  details.deeper > *:not(summary){ animation: none; }
}

/* short, plain-language summary shown before the deeper material */
.brief{
  font-family: 'EB Garamond','Fraunces', serif;
  font-size: clamp(17px, 2.4vw, 20px);
  line-height: 1.6;
  color: var(--cream, #F4EFE3);
  text-wrap: pretty;
  margin: 6px 0 0;
}
.brief-note{
  font-size: 13px;
  line-height: 1.7;
  color: #C4D2D9;
  margin-top: 10px;
}

/* ---- the 30-second version list (Statement of Faith, DNA) ---- */
.short-version{
  max-width: 560px;
  margin: 0 auto 8px;
  padding: 26px 24px 22px;
  border: 1px solid rgba(244,239,227,0.1);
  border-radius: 4px;
}
.short-version .label{
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--porch-amber, #E8A23B);
  font-weight: 700;
  margin-bottom: 16px;
}
.short-version ul{ list-style: none; margin: 0; padding: 0; }
.short-version li{
  font-family: 'EB Garamond','Fraunces', serif;
  font-size: 17px;
  line-height: 1.55;
  color: #E7EAED;
  padding: 9px 0 9px 16px;
  border-left: 1px solid rgba(232,162,59,0.35);
  margin-bottom: 8px;
  text-wrap: pretty;
}
.short-version li:last-child{ margin-bottom: 0; }
.short-version li b{
  display: block;
  font-family: 'Karla', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--porch-amber-soft, #F4C97A);
  margin-bottom: 3px;
}

/* ---- DNA letter cards: the whole card is the toggle ---- */
.section.dna-card{ margin-bottom: 18px; }
details.letter{
  border: 1px solid rgba(244,239,227,0.12);
  border-radius: 4px;
  background: rgba(244,239,227,0.02);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
details.letter:hover{
  border-color: rgba(232,162,59,0.45);
  background: rgba(232,162,59,0.04);
  transform: translateY(-2px);
}
details.letter[open]{
  border-color: rgba(232,162,59,0.4);
  background: rgba(244,239,227,0.03);
  transform: none;
}
details.letter > summary{
  list-style: none;
  cursor: pointer;
  display: block;
  padding: 26px 26px 22px;
  border-radius: 4px;
}
details.letter > summary::-webkit-details-marker{ display: none; }
details.letter > summary:focus-visible{
  outline: 2px solid var(--porch-amber, #E8A23B);
  outline-offset: 2px;
}
details.letter .section-head{ margin-bottom: 14px; }
details.letter .card-cue{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  min-height: 32px;
  font-family: 'Karla', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #B4C4CC;
  transition: color 0.25s ease;
}
details.letter:hover .card-cue,
details.letter[open] .card-cue{ color: var(--porch-amber-soft, #F4C97A); }
details.letter .card-cue .chev{
  font-size: 13px;
  line-height: 1;
  transition: transform 0.25s ease;
}
details.letter[open] .card-cue .chev{ transform: rotate(180deg); }
details.letter > *:not(summary){
  padding: 0 26px;
  animation: deeperIn 0.35s ease both;
}
details.letter[open] > *:not(summary){ cursor: default; }
details.letter[open] a,
details.letter[open] button{ cursor: pointer; }
details.letter > *:not(summary):last-child{ padding-bottom: 26px; }
@media (prefers-reduced-motion: reduce){
  details.letter > *:not(summary){ animation: none; }
  details.letter:hover{ transform: none; }
}
@media (max-width: 600px){
  details.letter > summary{ padding: 20px 18px 18px; }
  details.letter > *:not(summary){ padding: 0 18px; }
  details.letter > *:not(summary):last-child{ padding-bottom: 20px; }
}

/* ---- What We Believe hub cards ---- */
.believe-list{
  display: grid;
  gap: 14px;
  max-width: 620px;
  margin: 0 auto;
}
a.believe-card{
  display: block;
  padding: 24px 26px;
  border: 1px solid rgba(244,239,227,0.12);
  border-radius: 4px;
  text-decoration: none;
  background: rgba(244,239,227,0.02);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
a.believe-card:hover,
a.believe-card:focus-visible{
  border-color: rgba(232,162,59,0.55);
  background: rgba(232,162,59,0.05);
  transform: translateY(-2px);
}
a.believe-card .job{
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--porch-amber, #E8A23B);
  font-weight: 700;
  margin-bottom: 8px;
}
a.believe-card h2{
  font-family: 'EB Garamond','Fraunces', serif;
  font-weight: 600;
  font-size: clamp(21px, 3vw, 25px);
  color: var(--cream, #F4EFE3);
  margin-bottom: 8px;
}
a.believe-card p{
  font-size: 15px;
  line-height: 1.7;
  color: #C3CFD8;
  text-wrap: pretty;
}
a.believe-card p + p{ margin-top: 10px; }
a.believe-card p strong{ color: var(--cream, #F4EFE3); font-weight: 700; }
a.believe-card .more{
  display: block;
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--porch-amber-soft, #F4C97A);
  font-weight: 700;
}
@media (max-width: 600px){
  a.believe-card{ padding: 20px 20px; }
}


/* ---- deeper night: layered star field behind every page ---- */
.stars::before,
.stars::after{
  content: '';
  position: fixed;
  inset: -25%;
  pointer-events: none;
}
/* far field — small, dim, dense */
.stars::before{
  opacity: 0.5;
  background-image:
    radial-gradient(1px 1px at 7% 11%, rgba(244,239,227,0.45), transparent),
    radial-gradient(1px 1px at 19% 38%, rgba(244,239,227,0.32), transparent),
    radial-gradient(1px 1px at 27% 7%, rgba(244,239,227,0.4), transparent),
    radial-gradient(1px 1px at 36% 54%, rgba(244,239,227,0.28), transparent),
    radial-gradient(1px 1px at 44% 26%, rgba(244,239,227,0.38), transparent),
    radial-gradient(1px 1px at 53% 71%, rgba(244,239,227,0.3), transparent),
    radial-gradient(1px 1px at 61% 17%, rgba(244,239,227,0.36), transparent),
    radial-gradient(1px 1px at 69% 60%, rgba(244,239,227,0.26), transparent),
    radial-gradient(1px 1px at 74% 33%, rgba(244,239,227,0.42), transparent),
    radial-gradient(1px 1px at 83% 50%, rgba(244,239,227,0.3), transparent),
    radial-gradient(1px 1px at 91% 24%, rgba(244,239,227,0.34), transparent),
    radial-gradient(1px 1px at 96% 77%, rgba(244,239,227,0.28), transparent),
    radial-gradient(1px 1px at 14% 84%, rgba(244,239,227,0.3), transparent),
    radial-gradient(1px 1px at 40% 92%, rgba(244,239,227,0.26), transparent),
    radial-gradient(1px 1px at 66% 88%, rgba(244,239,227,0.32), transparent),
    radial-gradient(1px 1px at 87% 95%, rgba(244,239,227,0.24), transparent);
  animation: starDriftFar 300s linear infinite, starTwinkleFar 13s ease-in-out infinite;
}
/* near field — larger, brighter, sparse, each with a soft halo */
.stars::after{
  background-image:
    radial-gradient(2px 2px at 23% 19%, rgba(255,250,238,0.85), rgba(244,201,122,0.12) 40%, transparent 70%),
    radial-gradient(2px 2px at 58% 43%, rgba(255,250,238,0.7), rgba(244,201,122,0.1) 40%, transparent 70%),
    radial-gradient(2px 2px at 81% 13%, rgba(255,250,238,0.8), rgba(244,201,122,0.12) 40%, transparent 70%),
    radial-gradient(2px 2px at 12% 63%, rgba(255,250,238,0.62), rgba(244,201,122,0.1) 40%, transparent 70%),
    radial-gradient(2px 2px at 71% 79%, rgba(255,250,238,0.72), rgba(244,201,122,0.1) 40%, transparent 70%),
    radial-gradient(2px 2px at 45% 96%, rgba(255,250,238,0.6), rgba(244,201,122,0.1) 40%, transparent 70%);
  animation: starDriftNear 190s linear infinite, starTwinkleNear 8s ease-in-out infinite;
}
@keyframes starDriftFar{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-3%, 1.6%, 0); }
}
@keyframes starDriftNear{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(4%, -2.2%, 0); }
}
@keyframes starTwinkleFar{
  0%, 100%{ opacity: 0.5; }
  50%{ opacity: 0.34; }
}
@keyframes starTwinkleNear{
  0%, 100%{ opacity: 1; }
  50%{ opacity: 0.72; }
}
@media (prefers-reduced-motion: reduce){
  .stars::before, .stars::after{ animation: none; }
}

/* ---- one light over the wordmark, the tagline and the footer railing ---- */
footer{ position: relative; }
.closing{ position: relative; }
.closing::before{
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 50%;
  top: -30px;
  bottom: -420px;
  transform: translateX(-50%);
  /* 100% of the column — 100vw counts the scrollbar and pushes the page sideways */
  width: 100%;
  background:
    radial-gradient(ellipse 56% 52% at 50% 46%, rgba(232,162,59,0.19) 0%, rgba(232,162,59,0.075) 46%, rgba(232,162,59,0) 78%),
    radial-gradient(ellipse 30% 26% at 50% 42%, rgba(244,201,122,0.12) 0%, rgba(244,201,122,0) 74%);
}
/* wide screens have room for the glow to spill past the text column */
@media (min-width: 1360px){
  .closing::before{ width: 1240px; }
}
.closing .brand-small{
  text-shadow: 0 0 30px rgba(244,201,122,0.35);
}
.closing .tag-small{
  color: #C3CFD8;
  text-shadow: 0 0 22px rgba(244,201,122,0.2);
}

/* ---- hub cards: make it plain they are doors ---- */
a.believe-card{ position: relative; cursor: pointer; }
a.believe-card::after{
  content: '\2192';
  position: absolute;
  top: 22px;
  right: 22px;
  font-size: 17px;
  line-height: 1;
  color: rgba(244,201,122,0.5);
  transition: transform 0.25s ease, color 0.25s ease;
}
a.believe-card:hover::after,
a.believe-card:focus-visible::after{
  transform: translateX(4px);
  color: var(--porch-amber-soft, #F4C97A);
}
a.believe-card .job,
a.believe-card h2{ padding-right: 38px; }
a.believe-card .more{
  display: inline-block;
  margin-top: 14px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(232,162,59,0.45);
  transition: border-color 0.25s ease, color 0.25s ease;
}
a.believe-card:hover .more{
  color: var(--cream, #F4EFE3);
  border-bottom-color: var(--porch-amber-soft, #F4C97A);
}

/* centered variant: no corner arrow, everything on the centre line */
a.believe-card.centered{ text-align: center; padding: 26px 26px 24px; }
a.believe-card.centered::after{ content: none; }
a.believe-card.centered .job,
a.believe-card.centered h2{ padding-right: 0; }
a.believe-card.centered .more{
  border-bottom: none;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
a.believe-card.centered:hover .more{ color: var(--porch-amber-soft, #F4C97A); }

/* ---- a quiet invitation, set on the night sky (no card) ---- */
a.name-invite{
  position: relative;
  display: block;
  max-width: 520px;
  margin: 34px auto 54px;
  padding: 30px 20px 28px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
a.name-invite::before,
a.name-invite::after{
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,162,59,0.45) 20%, rgba(244,201,122,0.85) 50%, rgba(232,162,59,0.45) 80%, transparent);
  box-shadow: 0 0 12px rgba(244,201,122,0.55);
  opacity: 0;
  transition: width 1.1s cubic-bezier(.22,.61,.36,1), opacity 1.1s ease;
}
a.name-invite::before{ top: 0; }
a.name-invite::after{ bottom: 0; }
a.name-invite.lit::before,
a.name-invite.lit::after{ width: 86%; opacity: 1; }
a.name-invite .job{
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--porch-amber, #E8A23B);
  margin-bottom: 10px;
}
a.name-invite .head{
  display: block;
  font-family: 'EB Garamond','Fraunces', serif;
  font-weight: 600;
  font-size: clamp(22px, 3.2vw, 28px);
  line-height: 1.25;
  color: var(--cream, #F4EFE3);
  text-wrap: balance;
  transition: text-shadow 0.3s ease;
}
a.name-invite .desc{
  display: block;
  max-width: 34em;
  margin: 10px auto 0;
  font-family: 'EB Garamond','Fraunces', serif;
  font-size: clamp(16px, 2.2vw, 18px);
  line-height: 1.6;
  color: #C3CFD8;
  text-wrap: pretty;
}
a.name-invite .more{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  min-height: 34px;
  font-family: 'Karla', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--porch-amber-soft, #F4C97A);
}
a.name-invite .more i{ font-style: normal; transition: transform 0.25s ease; }
a.name-invite:hover .head,
a.name-invite:focus-visible .head{ text-shadow: 0 0 28px rgba(244,201,122,0.4); }
a.name-invite:hover .more i{ transform: translateX(4px); }
@media (prefers-reduced-motion: reduce){
  a.name-invite::before, a.name-invite::after{ transition: none; }
}

/* ---- DNA letter cards: the cue reads as a button ---- */
details.letter > summary{ cursor: pointer; }
details.letter .card-cue{
  color: var(--porch-amber-soft, #F4C97A);
  border: 1px solid rgba(232,162,59,0.38);
  border-radius: 999px;
  padding: 8px 15px;
  min-height: 38px;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
details.letter:hover .card-cue,
details.letter[open] .card-cue{
  background: rgba(232,162,59,0.12);
  border-color: rgba(232,162,59,0.6);
}

/* ---- a scripture line inside a What to expect block ---- */
.expect p.expect-verse,
.expect-verse{
  font-family: 'EB Garamond','Fraunces', serif;
  font-style: italic;
  font-size: clamp(17px, 2.5vw, 20px);
  line-height: 1.6;
  color: var(--porch-amber-soft, #F4C97A);
  max-width: 470px;
  margin: 26px auto 32px;
  text-wrap: pretty;
}
.expect p.expect-verse .ref,
.expect-verse .ref{
  display: block;
  font-family: 'Karla', sans-serif;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #B4C4CC;
  margin-top: 10px;
}

/* ---- quiet link out of the story, to the name ---- */
.porchlight .story-link{
  text-align: center;
  margin: 44px auto 0;
  font-family: 'EB Garamond','Fraunces', serif;
  font-size: clamp(17px, 2.3vw, 20px);
  letter-spacing: 0;
  text-transform: none;
}
.porchlight .story-link a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--porch-amber, #E8A23B);
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px solid rgba(232,162,59,0.4);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.porchlight .story-link a:hover,
.porchlight .story-link a:focus-visible{
  color: var(--porch-amber-soft, #F4C97A);
  border-bottom-color: var(--porch-amber-soft, #F4C97A);
}


/* ---- iOS Safari: several full-viewport fixed layers cannot be re-composited
   per scroll frame, so the page blanks mid-gesture. On phones and touch
   devices, paint the night sky once on <html> instead. ---- */
@media (max-width: 820px), (hover: none){
  .sky, .stars{ display: none !important; }
  .stars::before, .stars::after{ display: none !important; }
  html{
    background-color: #0F1A26;
    background-image:
      radial-gradient(1px 1px at 10% 14%, rgba(244,239,227,0.5), transparent),
      radial-gradient(1px 1px at 80% 31%, rgba(244,239,227,0.4), transparent),
      radial-gradient(1px 1px at 60% 48%, rgba(244,239,227,0.55), transparent),
      radial-gradient(1px 1px at 30% 62%, rgba(244,239,227,0.3), transparent),
      radial-gradient(1px 1px at 90% 79%, rgba(244,239,227,0.42), transparent),
      radial-gradient(1px 1px at 45% 90%, rgba(244,239,227,0.38), transparent),
      linear-gradient(180deg, #0F1A26 0%, #1B2A3C 45%, #2C4257 100%);
    /* stars tile down the page; the sky gradient spans it once */
    background-size:
      100% 62vh, 100% 62vh, 100% 62vh, 100% 62vh, 100% 62vh, 100% 62vh,
      100% 100%;
    background-repeat:
      repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y,
      no-repeat;
    background-attachment: scroll;
  }
}


/* ---- Phone readability: secondary text a little larger, tracking tighter ---- */
@media (max-width: 700px){
  footer .footer-nav a,
  footer .footer-nav .fn-actions a.fn-give{
    font-size: 14px;
    letter-spacing: 0.13em;
  }
  .page-kicker,
  .short-version .label,
  a.believe-card .job,
  a.name-invite .job{
    font-size: 13px;
    letter-spacing: 0.13em;
  }
  .brief-note{
    font-size: 15px;
    line-height: 1.75;
    color: #B4C2CE;
  }
  details.letter .card-cue{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 13px;
    letter-spacing: 0.11em;
  }
}


/* ---- Touch targets: raise the hit area, never the lettering.
   Keyed to coarse pointers, so landscape phones and rotated tablets are
   covered too, not just narrow portrait widths. Prefixed with html body
   so these win over each page's inline <style>. ---- */
@media (pointer: coarse), (hover: none){
  html body .topbar .site-nav a,
  html body .topbar .site-nav a.nav-cta,
  html body .topbar .site-nav a.nav-cta-outline,
  html body .topbar .topbar-mark,
  html body a.skip-link,
  html body a.directions,
  html body .cal-wrap a.cal-link,
  html body .place .aux a,
  html body .hub-crumb a,
  html body footer .footer-nav a,
  html body footer .footer-nav .fn-actions a,
  html body .home-foot a,
  html body .connect-foot .cf-links a,
  /* Every real button, rather than an ever-growing list of classes.
     Excluded: the concentric ring hit-areas, constellation stars, the
     round play button and the modal close — all sized by their own
     geometry and already comfortable. The menu toggle is excluded because
     each page's breakpoint owns whether it is shown at all: forcing a
     display here revealed it beside the full nav in landscape. */
  html body button:not(.ring):not([data-star]):not(.listen-btn):not(.verse-modal-close):not(.nav-toggle){
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Same hit area, without touching display. */
  html body .nav-toggle{
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 44px;
  }
  html body .topbar .site-nav a{ justify-content: flex-start; }
  html body .topbar .site-nav a.nav-cta,
  html body .topbar .site-nav a.nav-cta-outline,
  html body button:not(.ring):not([data-star]):not(.listen-btn):not(.verse-modal-close):not(.nav-toggle){ justify-content: center; }
  /* Long option labels read better left-aligned */
  html body .choices .choice{ justify-content: flex-start; }
  /* The step letters are images: pad the box, leave the artwork its own size */
  html body .rail .letter{
    box-sizing: content-box;
    padding: 6px 6px;
    min-height: 34px;
  }
  /* Taller aux rows already carry their own spacing */
  html body .place .aux{ margin-top: 4px; }
  html body .place .aux + .aux{ margin-top: 0; }
}