:root {
  --black: #060606;
  --white: #F5F5F2;
  --red: #E10600;
  --violet: #39FF14;
  --violet-glow: rgba(57, 255, 20, 0.4);
  --gray: #6a6a6a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}

body {
  font-family: 'Fraunces', serif;
  position: relative;
  min-height: 100vh;
  min-height: 100dvh; /* accounts for mobile browser chrome */
}

/* perspective on body would make body the containing block for every
   position:fixed descendant (nav.hud included) — since body grows taller
   than one screen on every content page, that scrolled the nav away
   instead of keeping it pinned to the viewport. Scoping perspective to
   this dedicated, always-viewport-sized wrapper keeps the grid's 3D tilt
   without hijacking the nav's fixed positioning. */
.grid-overlay-wrap {
  position: fixed;
  inset: 0;
  perspective: 900px;
  pointer-events: none;
  z-index: 0;
}

/* faint drone-viewfinder grid, ghosted into the background — static aside
   from the cursor-driven tilt handled in site.js */
.grid-overlay {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  background-image:
    linear-gradient(to right, rgba(245,245,242,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(245,245,242,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  transform-style: preserve-3d;
  will-change: transform;
}

.grid-overlay::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 22px;
  background: rgba(245,245,242,0.15);
  transform: translate(-50%, -50%);
}
.grid-overlay::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 1px;
  background: rgba(245,245,242,0.15);
  transform: translate(-50%, -50%);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* nav.hud needs translateX(-50%) to stay centered, but a plain "animation:
   rise" would replace the whole transform and wipe that centering out once
   the entrance animation finishes — so its rise keyframes bake the
   centering translateX into both states instead. */
@keyframes rise-nav {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---- floating HUD nav ---- */
nav.hud {
  position: fixed;
  left: 50%;
  bottom: calc(34px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 14px 20px;
  background: rgba(6,6,6,0.7);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(245,245,242,0.15);
  animation: rise-nav 1.1s ease-out 0.3s both;
  z-index: 2;
}

nav.hud::before,
nav.hud::after,
nav.hud .bracket-tr,
nav.hud .bracket-br {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--violet);
}
nav.hud::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
nav.hud::after   { bottom: -1px; left: -1px; border-right: none; border-top: none; }
nav.hud .bracket-tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
nav.hud .bracket-br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

nav.hud a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  padding: 8px 14px;
  position: relative;
  transition: color 0.2s ease;
  white-space: nowrap;
}

nav.hud a + a { border-left: 1px solid rgba(245,245,242,0.15); }

nav.hud a:hover,
nav.hud a:focus-visible { color: var(--violet); }

nav.hud a:focus-visible {
  outline: 1px solid var(--violet);
  outline-offset: 2px;
}

nav.hud a.give { color: var(--red); }
nav.hud a.give:hover,
nav.hud a.give:focus-visible { color: var(--violet); }

/* active nav state — persistent violet + small underline, subtle */
nav.hud a[aria-current="page"] {
  color: var(--violet);
}
nav.hud a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 1px;
  background: var(--violet);
}
nav.hud a.give[aria-current="page"] { color: var(--red); }
nav.hud a.give[aria-current="page"]::after { background: var(--red); }

/* ---- motion toggle: a small "O" pulled from the wordmark, first nav slot.
   Turns the grid's cursor-tilt effect on/off; its own hover-follow lean
   stays active either way (driven by JS transform, see site.js). ---- */
.motion-toggle {
  appearance: none;
  width: 30px;
  height: 30px;
  border-radius: 50% 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--red);
  text-shadow: 0 0 14px rgba(225, 6, 0, 0.55);
  background: transparent;
  border: none;
  border-right: 1px solid rgba(245,245,242,0.15);
  margin-right: 8px;
  padding-right: 10px;
  cursor: pointer;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.motion-toggle:hover,
.motion-toggle:focus-visible {
  color: var(--violet);
  text-shadow: 0 0 14px var(--violet-glow);
}
.motion-toggle:focus-visible { outline: 1px solid var(--violet); outline-offset: 2px; }
.motion-toggle[aria-pressed="false"] {
  color: var(--gray);
  text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero, .page-hero, nav.hud, .grid-overlay, .form-success { animation: none; }
}

/* ---- shared page-hero (Who/What/Give/Join/Contact) ---- */
.page-hero {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(96px, 18vh, 160px) 24px 220px;
  animation: rise 1.1s ease-out both;
}

.eyebrow {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 18px;
}

.eyebrow.eyebrow-red { color: var(--red); }

.o-accent { color: var(--red); }

.page-hero h1 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(2rem, 6vw, 3.2rem);
  line-height: 1.1;
}

.subhead {
  margin-top: 18px;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  color: rgba(245,245,242,0.85);
}

.section {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px 64px;
  position: relative;
  z-index: 1;
}

/* the floating nav is fixed at the bottom of the viewport, so the last
   section on the page needs enough bottom clearance that scrolling all
   the way down doesn't tuck content underneath it */
.section:last-of-type {
  padding-bottom: 220px;
}

.section h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  margin-bottom: 16px;
}

.section p {
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  line-height: 1.7;
  color: rgba(245,245,242,0.9);
}

.section p + p { margin-top: 16px; }

.callout {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  color: var(--violet);
  margin-bottom: 20px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.card {
  border: 1px solid rgba(245,245,242,0.15);
  padding: 22px 20px;
  position: relative;
}

.card h3 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.card p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(245,245,242,0.8);
}

.cluster {
  margin-top: 28px;
}

.cluster h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 10px;
}

.cluster ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cluster li {
  font-size: 0.88rem;
  border: 1px solid rgba(245,245,242,0.15);
  padding: 6px 12px;
  color: rgba(245,245,242,0.9);
}

.scripture-list {
  list-style: none;
  margin-top: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.5px;
  color: rgba(245,245,242,0.85);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.cta-button {
  display: inline-block;
  margin-top: 12px;
  padding: 14px 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--black);
  background: var(--red);
  border: 1px solid var(--red);
  transition: background 0.2s ease, color 0.2s ease;
}

.cta-button:hover,
.cta-button:focus-visible {
  background: transparent;
  color: var(--red);
}

.cta-button:focus-visible {
  outline: 1px solid var(--violet);
  outline-offset: 3px;
}

.zelle-qr {
  display: block;
  margin-top: 4px;
  width: 160px;
  height: 160px;
  border: 6px solid var(--white);
}

.site-form {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 440px;
}

.site-form label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(245,245,242,0.7);
  margin-bottom: 6px;
  display: block;
}

.site-form input,
.site-form textarea {
  width: 100%;
  background: rgba(245,245,242,0.04);
  border: 1px solid rgba(245,245,242,0.2);
  color: var(--white);
  font-family: 'Fraunces', serif;
  font-size: 0.95rem;
  padding: 10px 12px;
}

.site-form input:focus-visible,
.site-form textarea:focus-visible {
  outline: 1px solid var(--violet);
  outline-offset: 2px;
}

.site-form textarea { resize: vertical; min-height: 100px; }

/* Formspree honeypot. display:none (not off-screen positioning) is
   required here: the HTML autofill spec skips fields that aren't
   rendered, so this is what keeps Chrome's autofill from writing a
   value into it and tripping Formspree's spam check — an off-screen
   but still-rendered field doesn't get that exemption. */
.hp-field {
  display: none;
}

.form-success {
  margin-top: 24px;
  max-width: 440px;
}

.form-success:not([hidden]) {
  animation: rise 0.6s ease-out both;
}

.form-success h3 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.form-success p {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(245,245,242,0.9);
}

.site-form button {
  align-self: flex-start;
  cursor: pointer;
  border: 1px solid var(--violet);
  background: transparent;
  color: var(--violet);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 24px;
  transition: background 0.2s ease, color 0.2s ease;
}

.site-form button:hover,
.site-form button:focus-visible {
  background: var(--violet);
  color: var(--black);
}

.site-form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: transparent;
  color: var(--violet);
}

.form-error {
  margin-top: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  color: var(--red);
}

.social-links {
  display: flex;
  gap: 14px;
  margin-top: 20px;
}

.social-links a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(245,245,242,0.4);
  border: 1px solid rgba(245,245,242,0.15);
  padding: 10px 16px;
  text-decoration: none;
}

/* ---- phones: portrait ---- */
@media (max-width: 640px) {
  nav.hud {
    gap: 0;
    padding: 10px 6px;
    max-width: calc(100vw - 32px);
    bottom: calc(20px + env(safe-area-inset-bottom));
  }
  nav.hud a { padding: 8px 5px; font-size: 0.56rem; letter-spacing: 0.2px; }
  .motion-toggle { width: 22px; height: 22px; font-size: 0.82rem; margin-right: 3px; padding-right: 5px; }

  .page-hero { padding: 72px 20px 200px; }
  .section:last-of-type { padding-bottom: 200px; }
}

/* ---- phones: landscape (short viewport height) ---- */
@media (max-height: 500px) and (orientation: landscape) {
  nav.hud {
    bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 6px 10px;
  }
  nav.hud a { padding: 5px 8px; font-size: 0.56rem; }
  .motion-toggle { width: 20px; height: 20px; font-size: 0.78rem; margin-right: 3px; padding-right: 5px; }

  .page-hero { padding: 28px 16px 160px; }
  .page-hero h1 { font-size: clamp(1.4rem, 4.2vw, 1.9rem); }
  .eyebrow { margin-bottom: 10px; }
  .subhead { margin-top: 10px; }
  .section:last-of-type { padding-bottom: 160px; }
}

/* ---- tablets: landscape (wide but short viewport) ----
   At this width, text reflows into short/wide blocks, so on a short
   viewport the page-hero + first section can end up entirely within one
   screen's height — meaning the fixed nav can land on top of the first
   section's heading before the user ever scrolls. Forcing the hero to
   fill at least one viewport height guarantees the first section always
   starts below the fold, so the nav only ever overlaps hero whitespace
   on initial load, never real content. Bounded to exclude phone
   landscape (already handled above) and the desktop breakpoint. */
@media (orientation: landscape) and (min-width: 768px) and (max-width: 1200px) and (min-height: 501px) and (max-height: 900px) {
  .page-hero {
    min-height: 100vh;
    min-height: 100dvh;
  }
}