/* ============================================================
   East of Europe for Christ
   ============================================================ */

:root{
  --bg:        #06070a;
  --bg-soft:   #0b0e14;
  --navy:      #16324f;
  --navy-deep: #0d1b2c;
  --ink:       #f2f0ec;
  --ink-dim:   #a6a49f;
  --ink-faint: #6f6d69;
  --fire:      #ff9648;
  --fire-soft: #ffc48a;
  --line:      rgba(255,255,255,.09);

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gut: clamp(1.25rem, 5vw, 3rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .3vw, 1.125rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video,picture{ display:block; max-width:100%; }

.wrap{
  width:100%;
  max-width:1120px;
  margin-inline:auto;
  padding-inline:var(--gut);
}
.wrap--narrow{ max-width:820px; }

/* ---------- shared type ---------- */

.eyebrow,
.hero__eyebrow{
  margin:0;
  font-size:.7rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--fire);
  font-weight:600;
}

h2{
  margin:.5rem 0 0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2rem, 1.3rem + 3.2vw, 3.4rem);
  line-height:1.08;
  letter-spacing:-.015em;
}

.section-head{ margin-bottom:clamp(2rem,5vw,3.5rem); }

/* ============================================================
   BRAND MARK + LANGUAGE SWITCH
   ============================================================ */

/* Official artwork, original navy — needs a light chip behind it to read
   against the hero photo, which swings from pale sky to near-black feather. */
.brandmark{
  position:fixed;
  top:clamp(.7rem,1.9vw,1.4rem);
  left:clamp(.9rem,2.2vw,1.6rem);
  z-index:50;
  display:flex;
  align-items:center;
  padding:.6rem;
  border-radius:999px;
  background:rgba(242,240,236,.94);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 6px 20px -8px rgba(0,0,0,.5);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform .3s, box-shadow .3s;
}
.brandmark:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px -8px rgba(0,0,0,.6);
}
.brandmark img{
  display:block;
  height:clamp(38px,4.6vw,50px);
  width:auto;
}
.brandmark:focus-visible{
  outline:2px solid var(--fire);
  outline-offset:3px;
}

.langswitch{
  position:fixed;
  top:clamp(.9rem,2.2vw,1.6rem);
  right:clamp(.9rem,2.2vw,1.6rem);
  z-index:50;
  display:flex;
  gap:.15rem;
  padding:.25rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(8,10,14,.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.langswitch a{
  padding:.4rem .8rem;
  border-radius:999px;
  color:var(--ink-dim);
  text-decoration:none;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.12em;
  line-height:1;
  transition:color .25s, background .25s;
}
.langswitch a:hover{ color:var(--ink); }
.langswitch a.is-on{
  background:rgba(255,150,72,.16);
  color:var(--fire-soft);
}
.langswitch a:focus-visible{
  outline:2px solid var(--fire);
  outline-offset:2px;
}

/* ============================================================
   HERO
   ============================================================ */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}

.hero__media{
  position:absolute;
  inset:0;
  z-index:-2;
}
.hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 45%;
  animation:heroIn 2.4s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes heroIn{
  from{ transform:scale(1.08); opacity:0; }
  to  { transform:scale(1);    opacity:1; }
}

/* darken + melt the photo into the page below */
.hero__veil{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(120% 80% at 50% 32%, transparent 0%, rgba(6,7,10,.35) 62%, rgba(6,7,10,.8) 100%),
    linear-gradient(to bottom, rgba(6,7,10,.55) 0%, transparent 22%, transparent 45%, rgba(6,7,10,.86) 82%, var(--bg) 100%);
}

.hero__inner{
  position:relative;
  width:100%;
  max-width:1120px;
  margin-inline:auto;
  padding:0 var(--gut) clamp(2.5rem,7vh,5rem);
  text-align:center;
}

.hero__title{
  margin:.75rem 0 0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.6rem, 1.1rem + 7.2vw, 6.5rem);
  line-height:.98;
  letter-spacing:-.03em;
  text-shadow:0 2px 60px rgba(0,0,0,.6);
}
.hero__title span{ display:block; }
.hero__title-sub{
  font-family:var(--sans);
  font-size:.24em;
  font-weight:600;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--fire-soft);
  margin-top:1.1em;
  padding-left:.42em; /* optical: compensate trailing letter-space */
}

.hero__lede{
  margin:1.6rem auto 0;
  max-width:34rem;
  color:var(--ink-dim);
  font-size:clamp(.95rem,.9rem + .3vw,1.1rem);
  line-height:1.75;
}

.hero__cue{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin-top:clamp(1.75rem,4vh,2.75rem);
  padding:.7rem 1.4rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--ink);
  text-decoration:none;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  transition:background .3s, border-color .3s, transform .3s;
}
.hero__cue:hover{
  background:rgba(255,150,72,.14);
  border-color:rgba(255,150,72,.45);
  transform:translateY(-2px);
}
.hero__cue svg{
  width:16px; height:16px;
  animation:nudge 2.4s ease-in-out infinite;
}
@keyframes nudge{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(4px); }
}

/* fade the hero text in after the image */
.hero__eyebrow,.hero__title,.hero__lede,.hero__cue{
  animation:riseIn 1.1s cubic-bezier(.2,.7,.3,1) both;
}
.hero__eyebrow{ animation-delay:.5s; }
.hero__title  { animation-delay:.66s; }
.hero__lede   { animation-delay:.86s; }
.hero__cue    { animation-delay:1.02s; }
@keyframes riseIn{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:none; }
}

/* ============================================================
   VIDEO
   ============================================================ */

.video{
  padding:clamp(4rem,10vh,7rem) 0 clamp(3rem,8vh,5rem);
}

.player{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:#000;
  box-shadow:
    0 0 0 1px var(--line),
    0 40px 90px -30px rgba(0,0,0,.9),
    0 0 140px -60px rgba(255,150,72,.5);
}
/* Bunny's embed is a fixed-ratio iframe; the classic padding-top hack keeps
   16:9 without layout shift while it loads. */
.player--embed{ position:relative; padding-top:56.25%; }
.player--embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.player__caption{
  margin:1.5rem auto 0;
  max-width:46rem;
  text-align:center;
  color:var(--ink-dim);
  font-size:.92rem;
}
.player__caption strong{ color:var(--ink); font-weight:600; }
.player__caption span{
  display:block;
  margin-top:.35rem;
  font-size:.76rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* ============================================================
   VISION
   ============================================================ */

.vision{
  position:relative;
  padding:clamp(4rem,10vh,7.5rem) 0 clamp(3.5rem,8vh,6rem);
}
.vision::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(70% 55% at 50% 0%, rgba(22,50,79,.55), transparent 70%);
  pointer-events:none;
}
.vision > .wrap{ position:relative; }

.prose{ max-width:44rem; }
.prose p{ margin:0 0 1.25rem; color:var(--ink-dim); }
.prose p:last-child{ margin-bottom:0; }
.prose__lead{
  font-size:clamp(1.08rem,1rem + .5vw,1.3rem);
  line-height:1.65;
  color:var(--ink) !important;
}

.cards{
  display:grid;
  gap:1.25rem;
  grid-template-columns:repeat(3,1fr);
  margin:clamp(2.5rem,6vw,4rem) 0;
}
@media (max-width:760px){
  .cards{ grid-template-columns:1fr; }
}

.card{
  position:relative;
  padding:1.75rem 1.5rem 1.6rem;
  border:1px solid var(--line);
  border-radius:12px;
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  transition:border-color .4s, transform .4s;
}
.card:hover{
  border-color:rgba(255,150,72,.32);
  transform:translateY(-3px);
}
.card__num{
  display:block;
  font-size:.7rem;
  letter-spacing:.24em;
  color:var(--fire);
  font-weight:700;
}
.card h3{
  margin:.7rem 0 .6rem;
  font-family:var(--serif);
  font-weight:400;
  font-size:1.4rem;
  letter-spacing:-.01em;
}
.card p{
  margin:0;
  font-size:.94rem;
  line-height:1.65;
  color:var(--ink-dim);
}
.card em{ color:var(--fire-soft); font-style:italic; }

.quote{
  margin:clamp(2.5rem,6vw,4rem) 0;
  padding:0 0 0 clamp(1.25rem,3vw,2rem);
  border-left:2px solid var(--fire);
}
.quote p{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.4rem,1rem + 2vw,2.2rem);
  line-height:1.25;
  letter-spacing:-.01em;
}
.quote cite{
  display:block;
  margin-top:.9rem;
  font-style:normal;
  font-size:.74rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* ============================================================
   LEADERS
   ============================================================ */

.bio{
  padding:clamp(3rem,8vh,5.5rem) 0 clamp(4rem,10vh,7rem);
  border-top:1px solid var(--line);
}

.bio__grid{
  display:grid;
  grid-template-columns:minmax(180px,240px) 1fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
}

.bio__portrait{
  position:relative;
  margin:0;
  display:flex;
  justify-content:center;
}
/* glow behind the cut-out so it sits on the dark page instead of floating.
   Fixed bleed (not a % of the container) so it can never push past the
   viewport on narrow screens — a % basis here blew out to 420px wide on a
   335px-wide mobile column and forced a page-wide horizontal scrollbar,
   which in turn miscomputed every `position:fixed; right:` anchor on the
   page (langswitch, brandmark) by the same overflow amount. */
.bio__portrait::before{
  content:"";
  position:absolute;
  left:50%;
  top:6%;
  width:calc(100% + 48px);
  aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(30,68,107,.95) 0%, rgba(24,54,86,.5) 42%, transparent 72%);
  z-index:-1;
}
/* soft ground shadow under their feet */
.bio__portrait::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  width:70%;
  height:22px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(0,0,0,.55) 0%, transparent 70%);
  z-index:-1;
}
.bio__portrait img{
  width:100%;
  max-width:240px;
  height:auto;
}

.bio__body p{
  margin:0 0 1.25rem;
  color:var(--ink-dim);
}
.bio__body strong{ color:var(--ink); font-weight:600; }

.facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1.5rem 2rem;
  margin:2rem 0 0;
  padding-top:1.75rem;
  border-top:1px solid var(--line);
}
.facts div{ margin:0; }
.facts dt{
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--fire);
  font-weight:700;
  margin-bottom:.5rem;
}
.facts dd{
  margin:0;
  font-size:.92rem;
  line-height:1.6;
  color:var(--ink-dim);
}

@media (max-width:760px){
  .bio__grid{ grid-template-columns:1fr; }
  .bio__portrait img{ max-width:200px; }
}

/* ============================================================
   UPCOMING EVENTS
   ============================================================ */

.events{ padding:clamp(3.5rem,9vh,6rem) 0; border-top:1px solid var(--line); }

.events__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
}

.events__item{
  display:grid;
  grid-template-columns:minmax(120px,160px) 1fr;
  gap:1.5rem;
  padding:1.75rem 0;
  border-top:1px solid var(--line);
}
.events__item:last-child{ border-bottom:1px solid var(--line); }

.events__date{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fire);
  font-weight:700;
  padding-top:.2rem;
}

.events__body h3{
  margin:0 0 .35rem;
  font-family:var(--serif);
  font-weight:400;
  font-size:1.35rem;
  letter-spacing:-.01em;
}
.events__place{
  margin:0 0 .5rem;
  font-size:.82rem;
  letter-spacing:.04em;
  color:var(--ink-faint);
}
.events__desc{
  margin:0;
  font-size:.94rem;
  line-height:1.65;
  color:var(--ink-dim);
}

@media (max-width:560px){
  .events__item{ grid-template-columns:1fr; gap:.4rem; }
}

/* ============================================================
   GALLERY
   ============================================================ */

.gallery{ padding:clamp(3.5rem,9vh,6rem) 0; border-top:1px solid var(--line); }

.gallery__event + .gallery__event{
  margin-top:clamp(3rem,7vw,4.5rem);
  padding-top:clamp(3rem,7vw,4.5rem);
  border-top:1px solid var(--line);
}

.gallery__event-head{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.6rem 1rem;
}
.gallery__event-head h3{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:1.6rem;
  letter-spacing:-.01em;
}
.gallery__date{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.gallery__desc{
  margin:.65rem 0 0;
  max-width:44rem;
  font-size:.95rem;
  line-height:1.65;
  color:var(--ink-dim);
}

.gallery__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:.6rem;
  margin-top:1.75rem;
}
.gallery__photo{
  position:relative;
  aspect-ratio:1;
  padding:0;
  border:0;
  border-radius:8px;
  overflow:hidden;
  cursor:pointer;
  background:var(--bg-soft);
}
.gallery__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1), filter .4s;
}
.gallery__photo:hover img{ transform:scale(1.06); }
.gallery__photo:focus-visible{
  outline:2px solid var(--fire);
  outline-offset:2px;
}

/* ============================================================
   LIGHTBOX
   ============================================================ */

.lightbox{
  border:0;
  padding:0;
  max-width:none;
  max-height:none;
  width:100vw;
  height:100vh;
  margin:0;
  background:rgba(4,5,7,.96);
  display:none;
  align-items:center;
  justify-content:center;
}
.lightbox[open]{ display:flex; }
.lightbox::backdrop{ background:transparent; }

.lightbox__img{
  max-width:min(92vw,1100px);
  max-height:80vh;
  width:auto;
  height:auto;
  border-radius:4px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
}
.lightbox__caption{
  position:absolute;
  bottom:clamp(1rem,4vh,2rem);
  left:0;
  right:0;
  margin:0;
  text-align:center;
  font-size:.8rem;
  letter-spacing:.04em;
  color:var(--ink-dim);
}
.lightbox__close,
.lightbox__nav{
  position:fixed;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(255,255,255,.06);
  color:var(--ink);
  font-size:1.3rem;
  line-height:1;
  cursor:pointer;
  transition:background .25s, border-color .25s;
}
.lightbox__close:hover,
.lightbox__nav:hover{
  background:rgba(255,150,72,.14);
  border-color:rgba(255,150,72,.4);
}
.lightbox__close{ top:clamp(.8rem,3vh,1.6rem); right:clamp(.8rem,3vw,1.6rem); }
.lightbox__nav{ top:50%; transform:translateY(-50%); font-size:1.1rem; }
.lightbox__nav--prev{ left:clamp(.5rem,2vw,1.6rem); }
.lightbox__nav--next{ right:clamp(.5rem,2vw,1.6rem); }

@media (max-width:560px){
  .lightbox__nav{ width:40px; height:40px; }
  .lightbox__close{ width:40px; height:40px; }
}

/* ============================================================
   CLOSING
   ============================================================ */

.closing{
  padding:clamp(4rem,11vh,8rem) 0;
  text-align:center;
  background:
    radial-gradient(60% 100% at 50% 50%, rgba(255,150,72,.11), transparent 70%),
    var(--bg-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.closing__line{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.75rem,1rem + 3.6vw,3.2rem);
  line-height:1.15;
  letter-spacing:-.02em;
}
.closing__mark{
  margin:1.25rem 0 0;
  font-size:.74rem;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--fire);
  font-weight:600;
  padding-left:.36em;
}

/* ============================================================
   FOOTER
   ============================================================ */

.foot{
  padding:clamp(3rem,7vh,4.5rem) 0 clamp(2rem,5vh,3rem);
  text-align:center;
}

/* the site's own mark. Official artwork is navy-on-transparent, made for light
   surfaces — logo-light.png is that same art recoloured to --ink so it reads
   on this dark page. logo.png / logo-512.png (navy) stay for the favicon,
   where the browser chrome is usually light. */
.foot__logo{
  width:clamp(88px,9vw,110px);
  height:auto;
  margin:0 auto;
}
.foot__meta{
  margin:1rem 0 0;
  font-size:.78rem;
  color:var(--ink-faint);
}

.foot__social{
  display:flex;
  justify-content:center;
  gap:.75rem;
  margin:clamp(1.5rem,4vh,2.25rem) 0 0;
  padding:0;
  list-style:none;
}
.foot__social a{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--ink-dim);
  transition:color .3s, border-color .3s, background .3s, transform .3s;
}
.foot__social svg{ width:19px; height:19px; }
.foot__social a:hover{
  color:var(--fire-soft);
  border-color:rgba(255,150,72,.45);
  background:rgba(255,150,72,.1);
  transform:translateY(-2px);
}
.foot__social a:focus-visible{
  outline:2px solid var(--fire);
  outline-offset:3px;
}

/* Release the Fire — the parent ministry, deliberately quieter */
.foot__secondary{
  margin-top:clamp(2rem,5vh,3rem);
  padding-top:clamp(1.75rem,4vh,2.5rem);
  border-top:1px solid var(--line);
}
.foot__rtf{
  width:170px;
  height:auto;
  margin:0 auto;
  opacity:.8;
}
.foot__secondary p{
  margin:.85rem 0 0;
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--ink-faint);
}

.foot__copy{
  margin:clamp(2rem,5vh,2.75rem) 0 0;
  font-size:.72rem;
  color:var(--ink-faint);
  opacity:.75;
}


/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */

/* hidden only when JS is running — no JS, no blank page */
.js .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1);
  will-change:opacity, transform;
}
.js .reveal.is-in{ opacity:1; transform:none; }
.cards .reveal:nth-child(2){ transition-delay:.12s; }
.cards .reveal:nth-child(3){ transition-delay:.24s; }

/* ============================================================
   MOTION / SMALL SCREENS
   ============================================================ */

@media (max-width:700px){
  .hero{ min-height:92svh; }
  .hero__media img{ object-position:52% 42%; }
  .foot__inner{ flex-direction:column; text-align:center; gap:.9rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .reveal{ opacity:1; transform:none; }
}