/* anton-vietnamese-400-normal */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/anton-vietnamese-400-normal.CkBxLiRJ.woff2) format('woff2'), url(/_astro/anton-vietnamese-400-normal.2FfR1wHA.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* anton-latin-ext-400-normal */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/anton-latin-ext-400-normal.SyiqE2Jt.woff2) format('woff2'), url(/_astro/anton-latin-ext-400-normal.BMODBQc6.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* anton-latin-400-normal */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/anton-latin-400-normal.Byf51wtH.woff2) format('woff2'), url(/_astro/anton-latin-400-normal.AUNGEG_V.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* archivo-vietnamese-wght-normal */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/archivo-vietnamese-wght-normal.XAtsl5Q_.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* archivo-latin-ext-wght-normal */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/archivo-latin-ext-wght-normal.C4zznr8T.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* archivo-latin-wght-normal */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/archivo-latin-wght-normal.E0tuGl4L.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* ============================================================
   JESUS JESUS JESUS — design system
   Palette: warm near-black and paper from the event footage, with the
   church's brand blue (#25aae1, from mastersroad.com) as the accent.
   Theme: dark, locked site-wide.
   Shape rule: interactive elements are pills; media and panels
   are sharp (radius 0). No third radius exists.
   ============================================================ */

:root {
  /* color */
  --ink: #0e0b07;            /* page base — deep warm near-black */
  --ink-raised: #17120b;     /* raised panels / alt sections */
  --ink-border: rgb(244 237 227 / 0.12);
  --paper: #f4ede3;          /* warm off-white text */
  --paper-dim: rgb(244 237 227 / 0.66);
  --paper-faint: rgb(244 237 227 / 0.5);
  --accent: #25aae1;           /* church brand blue, the only accent */
  --accent-bright: #4dbceb;
  --accent-ink: #08222c;       /* text on the blue accent */

  /* type */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Archivo Variable', 'Helvetica Neue', sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.1875rem, 1rem + 0.8vw, 1.5rem);
  --display-sm: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  --display-md: clamp(2.5rem, 1.6rem + 4vw, 5rem);
  --display-lg: clamp(3.25rem, 1.8rem + 6.5vw, 7.5rem);
  --display-xl: clamp(3.75rem, 1.5rem + 10vw, 11rem);

  /* rhythm */
  --space-section: clamp(6rem, 4rem + 8vw, 11rem);
  --space-block: clamp(2.5rem, 2rem + 2vw, 4rem);
  --container: 76rem;
  --container-wide: 90rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* motion */
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 0.7s;

  color-scheme: dark;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 100%;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  font-size: var(--text-base);
  overflow-x: clip;
}

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- typography ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.96;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.display-xl { font-size: var(--display-xl); }
.display-lg { font-size: var(--display-lg); }
.display-md { font-size: var(--display-md); }
.display-sm { font-size: var(--display-sm); }

.lede {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--paper-dim);
  max-width: 38em;
  text-wrap: pretty;
}

.kicker {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
}

/* ---------- layout ---------- */
.container {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.container-wide {
  width: min(var(--container-wide), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.section { padding-block: var(--space-section); }
.section-raised { background: var(--ink-raised); }

/* ---------- buttons: pills only ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.9rem;
  border-radius: 999px;
  font-weight: 640;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease-out), background-color 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.btn:active { transform: scale(0.97); }

.btn-accent {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-accent:hover { background: var(--accent-bright); }

.btn-ghost {
  border: 1px solid rgb(244 237 227 / 0.35);
  color: var(--paper);
}
.btn-ghost:hover { border-color: var(--paper); }

.btn .btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: -0.6rem;
  border-radius: 999px;
  background: rgb(14 11 7 / 0.14);
  transition: transform 0.45s var(--ease-out);
}
.btn-ghost .btn-arrow { background: rgb(244 237 227 / 0.12); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(2.2rem);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* When scroll-driven animations are available, elements marked .scrub run
   their own choreography; neutralize the generic IO reveal so the two
   systems never fight. Browsers without support keep the reveal fallback. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .scrub.reveal,
    .scrub.reveal.is-visible {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
}

/* ---------- shared choreography utilities ----------
   .enter        time-based hero entrance (stagger with --enter-delay)
   .fx + .fx-*   scroll-scrubbed animations on the element's view() timeline;
                 pair with .reveal + .scrub so unsupported browsers fall back
                 to the IO reveal. Stagger with inline `animation-range`.
   .fx-bar       accent bar that draws itself across the element's top edge. */
@media (prefers-reduced-motion: no-preference) {
  .enter {
    animation: enter-up 0.9s var(--ease-out) both;
    animation-delay: var(--enter-delay, 0s);
  }
}

.fx-bar { position: relative; }
.fx-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  transform-origin: left;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fx {
      animation: linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }
    .fx-rise { animation-name: fx-rise; }
    .fx-ignite { animation-name: fx-ignite; }
    .fx-slide-l { animation-name: fx-slide-l; }
    .fx-slide-r { animation-name: fx-slide-r; }
    .fx-tilt-l { animation-name: fx-tilt-l; }
    .fx-tilt-r { animation-name: fx-tilt-r; }
    .fx-zoom { animation-name: fx-zoom; }
    .fx-bar::before {
      animation: fx-bar-draw linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 50%;
    }
  }
}

@keyframes enter-up {
  from { opacity: 0; transform: translateY(1.6rem); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-rise {
  from { opacity: 0; transform: translateY(3rem); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-ignite {
  from { opacity: 0.1; filter: blur(5px); transform: translateY(1.5rem); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes fx-slide-l {
  from { opacity: 0.08; transform: translateX(-3rem); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-slide-r {
  from { opacity: 0.08; transform: translateX(3rem); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-tilt-l {
  from { opacity: 0; transform: translateY(4rem) rotate(-3deg); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-tilt-r {
  from { opacity: 0; transform: translateY(4rem) rotate(3deg); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-zoom {
  from { opacity: 0; transform: scale(1.07); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-bar-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---------- parallax on full-bleed media (progressive enhancement) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .parallax {
      scale: 1.18;
      animation: parallax-drift linear both;
      animation-timeline: view();
    }
    @keyframes parallax-drift {
      from { translate: 0 -4%; }
      to { translate: 0 4%; }
    }
  }
}

/* ---------- film grain, fixed overlay ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.nav-wrap[data-astro-cid-wpvy4v7s] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.nav[data-astro-cid-wpvy4v7s] {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  width: min(var(--container-wide), 100% - var(--gutter) * 2);
  margin-inline: auto;
  margin-top: 1rem;
  padding: .55rem .65rem .55rem 1.1rem;
  border-radius: 999px;
  background: #0e0b07b8;
  border: 1px solid #f4ede31a;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.nav-logo[data-astro-cid-wpvy4v7s] {
  flex-shrink: 0;
}

.nav-logo[data-astro-cid-wpvy4v7s] img[data-astro-cid-wpvy4v7s] {
  width: 3.4rem;
  height: auto;
}

.nav-links[data-astro-cid-wpvy4v7s] {
  display: flex;
  gap: 1.6rem;
  margin-left: auto;
  padding: 0;
  list-style: none;
}

.nav-links[data-astro-cid-wpvy4v7s] a[data-astro-cid-wpvy4v7s] {
  font-size: var(--text-sm);
  font-weight: 560;
  text-decoration: none;
  color: var(--paper-dim);
  transition: color .3s var(--ease-out);
}

.nav-links[data-astro-cid-wpvy4v7s] a[data-astro-cid-wpvy4v7s]:hover, .nav-links[data-astro-cid-wpvy4v7s] a[data-astro-cid-wpvy4v7s][aria-current="page"] {
  color: var(--paper);
}

.nav-give[data-astro-cid-wpvy4v7s] {
  padding: .65rem 1.5rem;
}

.nav-burger[data-astro-cid-wpvy4v7s] {
  display: none;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  border-radius: 999px;
  border: 1px solid #f4ede32e;
}

.nav-burger[data-astro-cid-wpvy4v7s] span[data-astro-cid-wpvy4v7s] {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.1rem;
  height: 1.5px;
  background: var(--paper);
  transform: translate(-50%, calc(-50% - 3px));
  transition: transform .45s var(--ease-out);
}

.nav-burger[data-astro-cid-wpvy4v7s] span[data-astro-cid-wpvy4v7s] + span[data-astro-cid-wpvy4v7s] {
  transform: translate(-50%, calc(3px - 50%));
}

.nav-burger[data-astro-cid-wpvy4v7s][aria-expanded="true"] span[data-astro-cid-wpvy4v7s] {
  transform: translate(-50%, -50%) rotate(45deg);
}

.nav-burger[data-astro-cid-wpvy4v7s][aria-expanded="true"] span[data-astro-cid-wpvy4v7s] + span[data-astro-cid-wpvy4v7s] {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.mobile-menu[data-astro-cid-wpvy4v7s] {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: grid;
  align-content: center;
  padding: var(--gutter);
  background: #0e0b07eb;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease-out), visibility 0s .5s;
}

.mobile-menu[data-astro-cid-wpvy4v7s].is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s var(--ease-out);
}

.mobile-menu[data-astro-cid-wpvy4v7s] ul[data-astro-cid-wpvy4v7s] {
  list-style: none;
  padding: 0;
  display: grid;
  gap: .4rem;
}

.mobile-menu[data-astro-cid-wpvy4v7s] li[data-astro-cid-wpvy4v7s] {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
  transition-delay: calc(var(--i) * 55ms);
}

.mobile-menu[data-astro-cid-wpvy4v7s].is-open li[data-astro-cid-wpvy4v7s] {
  opacity: 1;
  transform: none;
}

.mobile-menu[data-astro-cid-wpvy4v7s] a[data-astro-cid-wpvy4v7s] {
  font-family: var(--font-display);
  font-size: var(--display-md);
  text-transform: uppercase;
  line-height: 1.15;
  text-decoration: none;
  color: var(--paper);
}

.mobile-menu[data-astro-cid-wpvy4v7s] .mobile-give[data-astro-cid-wpvy4v7s] {
  color: var(--accent);
}

@media (width <= 820px) {
  .nav-links[data-astro-cid-wpvy4v7s], .nav-give[data-astro-cid-wpvy4v7s] {
    display: none;
  }

  .nav-burger[data-astro-cid-wpvy4v7s] {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu[data-astro-cid-wpvy4v7s], .mobile-menu[data-astro-cid-wpvy4v7s] li[data-astro-cid-wpvy4v7s] {
    transition: none;
  }
}
.newsletter[data-astro-cid-c5a5jkvp] {
  max-width: 30rem;
}

.hp[data-astro-cid-c5a5jkvp] {
  position: absolute;
  left: -9999px;
}

.newsletter-label[data-astro-cid-c5a5jkvp] {
  display: block;
  margin-bottom: .5rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.newsletter-row[data-astro-cid-c5a5jkvp] {
  display: flex;
  gap: .5rem;
  padding: .35rem;
  border-radius: 999px;
  border: 1px solid #f4ede338;
  background: #f4ede30d;
  transition: border-color .3s var(--ease-out);
}

.newsletter-row[data-astro-cid-c5a5jkvp]:focus-within {
  border-color: var(--accent);
}

.newsletter-row[data-astro-cid-c5a5jkvp] input[data-astro-cid-c5a5jkvp] {
  flex: 1;
  min-width: 0;
  padding: .6rem 1rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--paper);
  font: inherit;
  font-size: var(--text-sm);
}

.newsletter-row[data-astro-cid-c5a5jkvp] input[data-astro-cid-c5a5jkvp]::placeholder {
  color: var(--paper-faint);
}

.newsletter-row[data-astro-cid-c5a5jkvp] input[data-astro-cid-c5a5jkvp]:focus-visible {
  outline: none;
}

.newsletter-row[data-astro-cid-c5a5jkvp] .btn[data-astro-cid-c5a5jkvp] {
  padding: .6rem 1.4rem;
  flex-shrink: 0;
}

@media (width <= 480px) {
  .newsletter-row[data-astro-cid-c5a5jkvp] {
    flex-direction: column;
    padding: 0;
    border: 0;
    background: none;
  }

  .newsletter-row[data-astro-cid-c5a5jkvp] input[data-astro-cid-c5a5jkvp] {
    border: 1px solid #f4ede338;
    background: #f4ede30d;
    padding: .85rem 1.2rem;
  }

  .newsletter-row[data-astro-cid-c5a5jkvp] .btn[data-astro-cid-c5a5jkvp] {
    justify-content: center;
  }
}
.footer[data-astro-cid-jo6i4kqk] {
  padding-block: var(--space-section) 2.5rem;
  border-top: 1px solid var(--ink-border);
  background: var(--ink);
}

.footer-mission[data-astro-cid-jo6i4kqk] {
  max-width: 14em;
}

.footer-grid[data-astro-cid-jo6i4kqk] {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto auto;
  gap: var(--space-block);
  margin-top: var(--space-block);
  padding-top: var(--space-block);
  border-top: 1px solid var(--ink-border);
}

.footer-heading[data-astro-cid-jo6i4kqk] {
  margin-bottom: 1rem;
  font-weight: 640;
}

.footer-nav[data-astro-cid-jo6i4kqk] ul[data-astro-cid-jo6i4kqk] {
  list-style: none;
  padding: 0;
  display: grid;
  gap: .55rem;
}

.footer-nav[data-astro-cid-jo6i4kqk] a[data-astro-cid-jo6i4kqk] {
  text-decoration: none;
  color: var(--paper-dim);
  transition: color .3s var(--ease-out);
}

.footer-nav[data-astro-cid-jo6i4kqk] a[data-astro-cid-jo6i4kqk]:hover {
  color: var(--paper);
}

.footer-info[data-astro-cid-jo6i4kqk] {
  color: var(--paper-dim);
}

.footer-social[data-astro-cid-jo6i4kqk] {
  list-style: none;
  padding: 0;
  margin-top: 1.25rem;
  display: grid;
  gap: .55rem;
}

.footer-social[data-astro-cid-jo6i4kqk] a[data-astro-cid-jo6i4kqk] {
  color: var(--paper-dim);
  transition: color .3s var(--ease-out);
}

.footer-social[data-astro-cid-jo6i4kqk] a[data-astro-cid-jo6i4kqk]:hover {
  color: var(--accent);
}

.footer-base[data-astro-cid-jo6i4kqk] {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: var(--space-block);
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink-border);
  font-size: var(--text-xs);
  color: var(--paper-faint);
}

@media (width <= 820px) {
  .footer-grid[data-astro-cid-jo6i4kqk] {
    grid-template-columns: 1fr;
  }
}
.skip-link[data-astro-cid-hkbrpulz] {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 200;
  padding: .6rem 1.2rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 640;
  text-decoration: none;
  transform: translateY(-300%);
  transition: transform .3s var(--ease-out);
}

.skip-link[data-astro-cid-hkbrpulz]:focus-visible {
  transform: none;
}