/* ==========================================================================
   LOVE AND COMPASSION INTERNATIONAL MINISTRIES — site 2
   One stylesheet, shared by every page.

   THE THINGS YOU'LL MOST LIKELY WANT TO CHANGE:
     Colors ......... the :root block directly below
     Everything else is in the .html files
   ========================================================================== */

:root{
  /* Taken from the photographs rather than the logo: tropical foliage,
     painted concrete, the red of the relief bundles. */
  --deep:   #12241C;   /* darkest green-black — dark bands, footer */
  --field:  #1E4034;   /* forest green — header, rules */
  --field2: #2C5A48;   /* a step lighter, for borders on dark */
  --lime:   #B9D45C;   /* the one bright note. Used sparingly. */
  --clay:   #B23620;   /* warm red, the call to act */
  --clay-dk:#8D2916;
  --bone:   #F2EEE4;   /* main light ground */
  --bone2:  #E5DFCF;   /* rules and edges on light */
  --ink:    #1A1D19;   /* body text */
  --ink-mut:#565C52;   /* secondary text */
  --on-deep:#EAE7DA;   /* text on the dark greens */
  --on-deep-mut:#A9B3A2;

  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --text: "Newsreader", Georgia, "Times New Roman", serif;

  --gutter: clamp(1.25rem, 5vw, 3rem);
  --band: clamp(4.5rem, 10vw, 8rem);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--text);
  font-size:19px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  margin:0;
  line-height:1.04;
  letter-spacing:-.02em;
}

p{ margin:0; }
img{ max-width:100%; display:block; }
a{ color:inherit; }

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

.shell{
  width:100%;
  max-width:1240px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.shell-narrow{ max-width:860px; }

.skip{
  position:absolute; left:-9999px;
  background:var(--lime); color:var(--deep);
  padding:.7rem 1.1rem; font-weight:700; z-index:100;
  text-decoration:none; font-family:var(--display);
}
.skip:focus{ left:1rem; top:1rem; }

/* --------------------------------------------------------------- Buttons */
.btn{
  display:inline-block;
  font-family:var(--display);
  font-size:1rem;
  font-weight:700;
  letter-spacing:-.005em;
  padding:.85rem 1.7rem;
  border:2px solid transparent;
  border-radius:2px;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease;
}
.btn-solid{ background:var(--clay); color:#FFF4EC; border-color:var(--clay); }
.btn-solid:hover{ background:var(--clay-dk); border-color:var(--clay-dk); }

.btn-lime{ background:var(--lime); color:var(--deep); border-color:var(--lime); }
.btn-lime:hover{ background:#CADE7E; border-color:#CADE7E; }

.btn-onLight{ background:transparent; color:var(--field); border-color:var(--field); }
.btn-onLight:hover{ background:var(--field); color:var(--bone); }

.btn-onDeep{ background:transparent; color:var(--on-deep); border-color:var(--field2); }
.btn-onDeep:hover{ border-color:var(--lime); color:var(--lime); }

.btn-onClay{ background:#FFF4EC; color:var(--clay-dk); border-color:#FFF4EC; }
.btn-onClay:hover{ background:var(--lime); border-color:var(--lime); color:var(--deep); }

/* ==========================================================================
   UTILITY BAR + HEADER   —  CONTACT DETAILS live in the utility bar
   ========================================================================== */
.utility{
  background:var(--deep);
  color:var(--on-deep-mut);
  font-family:var(--display);
  font-size:.875rem;
  font-weight:500;
}
.utility-inner{
  display:flex; flex-wrap:wrap; gap:.35rem 1.5rem;
  align-items:center; justify-content:space-between;
  padding-block:.5rem;
}
.utility a{ text-decoration:none; }
.utility a:hover{ color:var(--lime); }
.utility-social{ display:flex; gap:1rem; align-items:center; }

@media (max-width:620px){ .utility-inner{ justify-content:center; } }

.masthead{
  position:sticky; top:0; z-index:50;
  background:var(--field);
  color:var(--on-deep);
}
.masthead-inner{
  display:flex; align-items:center; gap:1.5rem;
  min-height:74px;
  padding-block:.6rem;
  position:relative;
}

.brand{
  display:flex; align-items:center; gap:.75rem;
  text-decoration:none; color:var(--on-deep);
  margin-right:auto;
}
.brand-mark{
  width:46px; height:46px; flex:none;
  border-radius:50%; overflow:hidden;
  background:var(--deep);
}
.brand-mark picture{ display:block; width:100%; height:100%; }
.brand-mark img{
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.7);
  transform-origin:50% 33%;
}
.brand-name{
  display:block;
  font-family:var(--display);
  font-weight:700;
  font-size:1.15rem;
  line-height:1.05;
  letter-spacing:-.02em;
}
.brand-sub{
  display:block;
  font-family:var(--display);
  font-size:.75rem;
  font-weight:500;
  color:var(--lime);
  margin-top:.15rem;
  letter-spacing:.01em;
}

.nav{ display:flex; align-items:center; gap:1.4rem; }
.nav a{
  font-family:var(--display);
  font-size:1rem;
  font-weight:600;
  text-decoration:none;
  color:var(--on-deep);
  white-space:nowrap;
  padding-block:.3rem;
  border-bottom:2px solid transparent;
  transition:border-color .16s ease, color .16s ease;
}
.nav a:hover{ border-bottom-color:var(--lime); }
.nav a[aria-current="page"]{ border-bottom-color:var(--lime); color:var(--lime); }
.nav a.btn{ border-bottom-width:2px; }
.nav a.btn-lime{ color:var(--deep); }
.nav a.btn-lime:hover{ color:var(--deep); border-color:#CADE7E; }

.masthead .btn{ padding:.6rem 1.25rem; font-size:.9375rem; }

.navToggle{
  display:none;
  background:none;
  border:2px solid var(--field2);
  color:var(--on-deep);
  font-family:var(--display); font-size:.9375rem; font-weight:700;
  padding:.5rem .9rem; border-radius:2px; cursor:pointer;
}

@media (max-width:1080px){
  .navToggle{ display:block; }
  .nav{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--field);
    padding:.25rem var(--gutter) 1.4rem;
    box-shadow:0 12px 24px rgba(0,0,0,.2);
  }
  .nav.isOpen{ display:flex; }
  .nav a{ padding:.85rem 0; border-bottom:1px solid var(--field2); }
  .nav a:hover{ border-bottom-color:var(--field2); }
  .nav a.btn{ margin-top:1rem; text-align:center; border-bottom-width:2px; }
}

/* ==========================================================================
   HERO — the photograph comes first, the words come after it
   ========================================================================== */
.heroImage{
  /* 58vh on an ordinary window. The 34vw floor only matters on a wide but
     short window — a laptop with the browser not maximised — where 58vh
     alone leaves too little height and crops the faces out of the photo. */
  height:clamp(300px, max(58vh, 34vw), 620px);
  overflow:hidden;
  background:var(--deep);
}
.heroSlides{ position:relative; width:100%; height:100%; }
.heroSlides img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 56%;
  opacity:0;
}
/* Each photograph is cropped differently because the subject sits in a
   different part of the frame. The second number is how far DOWN the visible
   window sits: a smaller number shows more of the top of the photograph.
   The children's photo needs a small number or their faces are cut off. */
.heroSlides img:nth-child(1){ object-position:50% 8%; }

.heroWords{
  background:var(--bone);
  padding-block:clamp(2.75rem,6vw,4.75rem) clamp(3rem,6vw,5rem);
}
.heroWords h1{
  font-size:clamp(2.6rem, 7vw, 5.5rem);
  max-width:14ch;
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
}
.heroGrid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:end;
}
.heroLede{
  font-size:clamp(1.15rem,1.6vw,1.3rem);
  color:var(--ink-mut);
  max-width:44ch;
}
.heroActions{ display:flex; flex-wrap:wrap; gap:.8rem; }

@media (max-width:820px){
  .heroGrid{ grid-template-columns:1fr; align-items:start; }
}

/* The hero cross-fades between three photographs, each drifting very slowly
   while it is visible. 24 seconds round; 8 seconds a photograph.
   Everything else on the page stays still. */
@media (prefers-reduced-motion: no-preference){
  .heroSlides img{ animation:heroFade 24s linear infinite; }
  .heroSlides img:nth-child(1){ animation-delay:0s; }
  .heroSlides img:nth-child(2){ animation-delay:8s; }
  .heroSlides img:nth-child(3){ animation-delay:16s; }
  .heroWords h1{ animation:lift .8s cubic-bezier(.2,.7,.25,1) .15s backwards; }
}
@keyframes heroFade{
  0%   { opacity:0; transform:scale(1); }
  3%   { opacity:1; }
  30%  { opacity:1; }
  36%  { opacity:0; transform:scale(1.05); }
  100% { opacity:0; transform:scale(1.05); }
}
@keyframes lift{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* No animation allowed: show the first photograph and leave it alone. */
@media (prefers-reduced-motion: reduce){
  .heroSlides img:nth-child(1){ opacity:1; }
}

/* ==========================================================================
   VIDEO
   preload="none" — nothing downloads until somebody presses play.
   ========================================================================== */
.film{ margin:0; max-width:640px; }
.film video{
  width:100%; height:auto; display:block;
  background:#0A130F;
}
.film figcaption{
  margin-top:.85rem;
  font-size:1rem;
  color:var(--ink-mut);
}
.week .film figcaption{ color:var(--on-deep-mut); }

/* ==========================================================================
   THE FOUR CALLINGS — a photograph, the word, one line
   ========================================================================== */
.callings{ background:var(--bone); padding-block:var(--band); }
.callings h2{
  font-size:clamp(1.9rem,3.6vw,3rem);
  max-width:18ch;
  margin-bottom:clamp(2.25rem,4.5vw,3.25rem);
}
.callingGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.25rem,2.6vw,2rem);
}
.calling{ margin:0; }
.calling img{
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
}
.calling figcaption{
  border-top:3px solid var(--lime);
  padding-top:1rem;
  margin-top:1.1rem;
}
.calling h3{
  font-size:clamp(1.5rem,2.3vw,1.9rem);
  margin-bottom:.4rem;
}
.calling p{ color:var(--ink-mut); font-size:1.0313rem; line-height:1.6; }

@media (max-width:860px){ .callingGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .callingGrid{ grid-template-columns:1fr; } }

/* ==========================================================================
   SCRIPTURE
   ========================================================================== */
.scripture{
  background:var(--field);
  color:var(--on-deep);
  padding-block:clamp(3.5rem,7vw,5.5rem);
}
.scripture blockquote{
  margin:0;
  max-width:26ch;
  font-family:var(--text);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.75rem,4.2vw,3.1rem);
  line-height:1.3;
}
.scripture cite{
  display:block;
  margin-top:1.5rem;
  font-family:var(--display);
  font-style:normal;
  font-size:1rem;
  font-weight:700;
  color:var(--lime);
}

/* ==========================================================================
   ACT — give, pray, go
   ========================================================================== */
.act{ background:var(--clay); color:#FFF4EC; padding-block:var(--band); }
.act h2{ color:#FFF4EC; font-size:clamp(1.9rem,3.6vw,3rem); max-width:16ch; margin-bottom:clamp(2rem,4vw,3rem); }
.actGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2rem,4vw,3.5rem);
}
.actGrid > div{ border-top:2px solid rgba(255,244,236,.45); padding-top:1.3rem; }
.actGrid h3{ font-size:1.5rem; margin-bottom:.55rem; }
.actGrid p{ color:#FBE7DE; margin-bottom:1.5rem; max-width:32ch; }

/* The giving code. Hold the page up, somebody scans it, they land on the
   giving page on their own phone. It sits on white because a QR code needs
   a light background and a clear margin to be readable. */
.qr{ margin:1.75rem 0 0; }
.qr img{
  display:block;
  width:180px; height:auto;
  padding:10px;
  background:#FFFFFF;
  border-radius:10px;
}
.qr figcaption{
  margin-top:.75rem;
  font-family:var(--display);
  font-weight:700;
  font-size:.9375rem;
  color:#FBE7DE;
}

@media (max-width:820px){ .actGrid{ grid-template-columns:1fr; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{
  background:var(--deep);
  color:var(--on-deep-mut);
  padding-block:clamp(3.5rem,7vw,5rem) 2rem;
  font-size:1rem;
}
.footGrid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:clamp(2rem,5vw,4rem);
  padding-bottom:2.5rem;
  border-bottom:1px solid var(--field2);
}
.foot h2{
  font-size:1.35rem;
  color:var(--on-deep);
  margin-bottom:.8rem;
}
.foot h3{
  font-family:var(--display);
  font-size:.9375rem;
  font-weight:700;
  color:var(--lime);
  margin-bottom:1rem;
}
.footAbout p{ max-width:40ch; line-height:1.7; }
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li + li{ margin-top:.6rem; }
.foot a{ color:var(--on-deep-mut); text-decoration:none; }
.foot a:hover{ color:var(--lime); }

.footBottom{
  display:flex; flex-wrap:wrap; gap:.7rem 2rem;
  justify-content:space-between;
  padding-top:1.6rem;
  font-size:.875rem;
  color:#8C9686;
}

@media (max-width:820px){ .footGrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footGrid{ grid-template-columns:1fr; } }

/* ==========================================================================
   INNER PAGES
   These class names match the ones the other pages already use, so they
   pick up this design without any change to their markup.
   ========================================================================== */
.pageHead{
  background:var(--field);
  color:var(--on-deep);
  padding-block:clamp(3rem,6vw,5rem);
}
.pageHead h1{
  font-size:clamp(2.2rem,5vw,3.6rem);
  max-width:16ch;
}
.pageHead p{
  margin-top:1.1rem;
  max-width:52ch;
  font-size:clamp(1.1rem,1.6vw,1.25rem);
  color:var(--on-deep-mut);
}

.pageBody{ padding-block:var(--band); }
.prose{ max-width:66ch; }
.prose h2{
  font-size:clamp(1.6rem,2.8vw,2.3rem);
  margin-top:3rem;
  margin-bottom:1rem;
}
.prose h2:first-child{ margin-top:0; }
.prose p{ margin-bottom:1.2rem; color:var(--ink-mut); }
.prose ul{ margin:0 0 1.5rem; padding-left:1.2rem; color:var(--ink-mut); }
.prose li{ margin-bottom:.5rem; }
.prose a{ color:var(--clay); font-weight:600; }

.draft{
  background:#FBF7E9;
  border-left:4px solid var(--lime);
  padding:1rem 1.25rem;
  margin-bottom:2.25rem;
  font-size:1rem;
  color:var(--ink-mut);
  max-width:66ch;
}

/* verse set inside running prose */
.pull{ margin:2.75rem 0; padding-left:1.6rem; border-left:3px solid var(--lime); max-width:58ch; }
.pull blockquote{
  margin:0;
  font-style:italic;
  font-size:clamp(1.3rem,2.2vw,1.65rem);
  line-height:1.4;
  color:var(--ink);
}
.pull cite{
  display:block; margin-top:.8rem;
  font-family:var(--display); font-style:normal;
  font-size:.9375rem; font-weight:700; color:var(--clay);
}

.outcome{
  margin:2.25rem 0 2.5rem;
  border-top:2px solid var(--lime);
  border-bottom:1px solid var(--bone2);
  padding:1.5rem 0 .5rem;
  max-width:60ch;
}
.outcome h3{
  font-family:var(--display);
  font-size:1rem; font-weight:700;
  color:var(--clay);
  margin-bottom:1rem;
}
.outcome ul{ list-style:none; margin:0; padding:0; }
.outcome li{
  margin-bottom:1rem; padding-left:1.3rem; position:relative;
  color:var(--ink-mut); line-height:1.6;
}
.outcome li::before{
  content:""; position:absolute; left:0; top:.66em;
  width:7px; height:7px; background:var(--lime);
}
.outcome li b{ color:var(--ink); font-weight:600; }

.beliefs{ margin:0 0 1rem; max-width:62ch; }
.beliefs p{ padding-left:1.5rem; border-left:1px solid var(--bone2); margin-bottom:1.35rem; }

.people{ list-style:none; margin:1.75rem 0 2rem; padding:0; max-width:46ch; }
.people li{
  display:flex; flex-wrap:wrap; gap:.25rem .9rem;
  justify-content:space-between;
  padding:.7rem 0; border-bottom:1px solid var(--bone2);
}
.people b{ font-weight:600; color:var(--ink); }
.people span{ color:var(--ink-mut); font-size:1rem; }

.reach{
  margin-top:1.5rem;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,22rem));
  gap:1.5rem 2.5rem;
  max-width:52rem;
}
.reach div{ border-top:3px solid var(--lime); padding-top:1rem; }
.reach b{ display:block; font-weight:600; color:var(--ink); margin-bottom:.25rem; }
.reach a{ color:var(--clay); font-weight:600; text-decoration:none; font-size:1.1rem; }
.reach a:hover{ text-decoration:underline; }

.cols{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.75rem,3.5vw,3rem);
  margin-top:2.5rem;
}
.cols > div{ border-top:2px solid var(--lime); padding-top:1.2rem; }
.cols h3{ font-size:1.5rem; margin-bottom:.5rem; }
.cols p{ color:var(--ink-mut); }

@media (max-width:760px){ .cols{ grid-template-columns:1fr; } }

.empty{
  border:1px dashed var(--bone2);
  padding:clamp(2rem,4vw,3rem);
  text-align:center;
  color:var(--ink-mut);
  max-width:46rem;
}
.empty strong{ display:block; color:var(--ink); font-size:1.15rem; margin-bottom:.4rem; }

/* ---- Forms ---- */
.form{ max-width:34rem; }
.field{ margin-bottom:1.35rem; }
.field label{
  display:block;
  font-family:var(--display);
  font-weight:600; font-size:1rem;
  margin-bottom:.4rem;
}
.field input, .field textarea{
  width:100%;
  font-family:var(--text);
  font-size:1.0625rem;
  color:var(--ink);
  background:#FBF9F2;
  border:1px solid var(--bone2);
  border-radius:2px;
  padding:.75rem .85rem;
}
.field textarea{ min-height:9rem; resize:vertical; }
.field input:focus, .field textarea:focus{
  outline:2px solid var(--lime);
  outline-offset:1px;
  border-color:var(--field);
}
.hp{ position:absolute; left:-9999px; }

/* ==========================================================================
   FILM BESIDE THE VERSE
   The home page scripture band: the 2017 film on the left, the verse of the
   day on the right. On a narrow screen the film sits above the verse.
   ========================================================================== */
.filmVerseGrid{
  display:grid;
  grid-template-columns:minmax(0,620px) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.scripture .film{ max-width:none; }
.scripture .film figcaption{ color:var(--on-deep-mut); }

/* the verse shares the row with the film, so it runs smaller than it would
   on its own */
.scripture .filmVerseGrid blockquote{
  max-width:none;
  font-size:clamp(1.35rem,2.5vw,1.95rem);
  line-height:1.35;
}
.scripture .filmVerseGrid cite{ margin-top:1.1rem; }

@media (max-width:860px){
  .filmVerseGrid{ grid-template-columns:1fr; }
}