@import url('https://fonts.googleapis.com/css2?family=Gilda+Display&family=Outfit:wght@300;400;500;600;700&display=swap');


/**
 * ACME Fellowship — Global Styles
 *
 * Base reset, typography defaults, and shared utility classes.
 * Design tokens are imported separately via tokens.css.
 */
/**
 * ACME Fellowship — Design Tokens
 *
 * Single source of truth for all colors, typography, spacing, and
 * animation values used across the site. Update here to change
 * the look globally.
 */
:root {
  /* ─── Color Palette ───────────────────────────────────────── */

  /* Brand blues — extracted from the ACME brand */
  --color-blue:        #425B76;   /* Primary brand blue */
  --color-blue-deep:   #2e4057;   /* Darker — churches section bg */
  --color-blue-deeper: #1a2638;   /* Deeper — mission section bg */
  --color-blue-darkest:#0f1820;   /* Near-black — hero/footer bg */
  --color-blue-mid:    #6b8ba4;   /* Midtone — decorative accents */
  --color-blue-light:  #eef2f6;   /* Near-white — light backgrounds */

  /* Gold — the accent / CTA color */
  --color-gold:        #c09a3e;
  --color-gold-dark:   #a8832e;   /* Hover state */

  /* Neutral text */
  --color-text:        #1a1a1a;
  --color-muted:       #4a5568;
  --color-border:      #d4dde6;

  /* ─── Typography ──────────────────────────────────────────── */

  /* Serif: editorial headings, hero, section titles */
  --font-serif: 'Gilda Display', Georgia, serif;

  /* Sans: body copy, labels, nav, UI text */
  --font-sans:  'Outfit', system-ui, sans-serif;

  /* Scale — fluid where possible via clamp() in component CSS */
  --text-xs:   10px;
  --text-sm:   13.5px;
  --text-base: 15.5px;
  --text-lg:   16.5px;
  --text-xl:   17px;

  /* Letter spacing presets */
  --tracking-wide:   0.08em;
  --tracking-wider:  0.14em;
  --tracking-widest: 0.22em;

  /* ─── Spacing ─────────────────────────────────────────────── */

  --space-xs:   12px;
  --space-sm:   20px;
  --space-md:   36px;
  --space-lg:   56px;
  --space-xl:   80px;
  --space-2xl:  120px;

  /* ─── Layout ──────────────────────────────────────────────── */

  --nav-height:      76px;
  --container-max:   1400px;
  --section-padding: 0 var(--space-lg);

  /* ─── Borders & Radii ─────────────────────────────────────── */

  --radius-none: 0;     /* The design is intentionally square/editorial */

  /* ─── Transitions ─────────────────────────────────────────── */

  --transition-base: 0.2s ease;
  --transition-slow: 0.4s ease;
  --transition-photo: 0.7s ease;

  /* ─── Overlays ────────────────────────────────────────────── */

  /* Reusable dark overlay values for photo sections */
  --overlay-hero-start:    rgba(10, 18, 28, 0.52);
  --overlay-hero-end:      rgba(10, 18, 28, 0.74);
  --overlay-conf-left:     rgba(10, 18, 28, 0.90);
  --overlay-conf-mid:      rgba(10, 18, 28, 0.62);
  --overlay-conf-right:    rgba(10, 18, 28, 0.28);
  --overlay-backdrop:      rgba(0, 0, 0, 0.55);  /* Nav mobile drawer backdrop */

  /* ─── Z-index scale ───────────────────────────────────────── */

  --z-nav:        100;
  --z-backdrop:    99;   /* Nav mobile backdrop — sits behind nav bar */
  --z-drawer:     101;   /* Nav mobile drawer — sits above everything */
  --z-content: 2;
  --z-decor:   1;
}
/* ─── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-sans);
  background: var(--color-blue-darkest);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
a {
  text-decoration: none;
  color: inherit;
}
/* ─── Shared Typographic Utilities ───────────────────────────── */
/* Small all-caps label above headings */
.overline {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
/* Decorative horizontal rule */
.rule {
  width: 48px;
  height: 1px;
  background: currentColor;
}
/* ─── Shared Button Styles ────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  background: var(--color-gold);
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 14px 34px;
  transition: background var(--transition-base);
  cursor: pointer;
  border: none;
}
.btn-primary:hover {
  background: var(--color-gold-dark);
}
.btn-ghost {
  display: inline-block;
  font-size: 15px;
  font-style: italic;
  font-family: var(--font-serif);
  color: rgba(255, 255, 255, 0.80);
  border-bottom: 1px solid rgba(255, 255, 255, 0.38);
  padding-bottom: 2px;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.btn-ghost:hover {
  color: white;
  border-color: white;
}
.text-link {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
  border-bottom: 1px solid var(--color-gold);
  padding-bottom: 2px;
  transition: color var(--transition-base);
}
.text-link:hover {
  color: var(--color-gold-dark);
}
/* ─── "A" Pattern System ──────────────────────────────────────
   The ACME "A" logo has three geometric elements used as SVG
   decorations: left diagonal, right diagonal, and crossbar.
   Used as absolutely-positioned overlays in dark sections.
────────────────────────────────────────────────────────────── */
.a-pattern {
  position: absolute;
  pointer-events: none;
  user-select: none;
  overflow: visible;
}

.cf-turnstile {
    text-align: center
}