/* Kivulini Trust — editorial/documentary design system */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root{
  --cream:#FBF6EC;
  --stone:#EDE2CB;
  --charcoal:#221C16;
  --terracotta:#C1502E;
  --ochre:#C98A2C;
  --forest:#1E3F20;
  --clay:#8B4A3B;
  --rule: rgba(34,28,22,0.14);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream);
  color:var(--charcoal);
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-display{
  font-family:'Playfair Display', Georgia, serif;
  letter-spacing:-0.01em;
}
.italic-tag{ font-family:'Playfair Display', serif; font-style:italic; }

/* -- Structural rules instead of card-shadows -- */
.rule-top{ border-top:1px solid var(--rule); }
.rule-bottom{ border-bottom:1px solid var(--rule); }
.rule-y{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }

/* -- Signature caption bar, taken from Kivulini's own photo-caption
      convention: a solid colour bar overlapping the base of a photo,
      thin left rule, small-caps-free caption text. -- */
.photo-frame{ position:relative; overflow:hidden; }
.photo-frame img{ display:block; width:100%; height:100%; object-fit:cover; }
.caption-bar{
  position:absolute; left:0; right:0; bottom:0;
  background:rgba(30,26,20,0.82);
  color:#F4EEE0;
  padding:0.85rem 1.1rem 0.85rem 1.35rem;
  font-size:0.86rem;
  line-height:1.35;
  border-left:4px solid var(--terracotta);
}
.caption-bar.forest{ border-left-color:var(--forest); }
.caption-bar.ochre{ border-left-color:var(--ochre); }

/* number markers reused from Kivulini's own program numbering (1–6) */
.num-mark{
  font-family:'Playfair Display', serif;
  font-weight:700;
  color:var(--terracotta);
  font-size:1.5rem;
  line-height:1;
}

.btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.85rem 1.6rem;
  font-weight:600; font-size:0.95rem;
  border:1px solid transparent;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary{ background:var(--terracotta); color:#fff; }
.btn-primary:hover{ background:#a63f22; }
.btn-outline{ border-color:var(--charcoal); color:var(--charcoal); }
.btn-outline:hover{ background:var(--charcoal); color:var(--cream); }
.btn-cream{ border-color:var(--cream); color:var(--cream); }
.btn-cream:hover{ background:var(--cream); color:var(--charcoal); }

/* nav */
#site-header{ background:rgba(251,246,236,0.96); backdrop-filter:blur(6px); }
.nav-link{ position:relative; font-weight:500; font-size:0.95rem; }
.nav-link.active{ color:var(--terracotta); }

/* mobile menu */
#mobile-menu{ display:none; }
#mobile-menu.open{ display:block; }

/* countdown */
.count-cell{
  border:1px solid rgba(244,238,224,0.35);
  padding:1.1rem 0.5rem;
  text-align:center;
  min-width:76px;
}
.count-num{ font-family:'Playfair Display', serif; font-weight:700; font-size:2.1rem; line-height:1; color:#F4EEE0; }
.count-label{ font-size:0.7rem; letter-spacing:0.05em; opacity:0.75; margin-top:0.35rem; color:#F4EEE0; }

/* impact counters */
.stat-num{ font-family:'Playfair Display', serif; font-weight:700; font-size:2.8rem; color:var(--terracotta); line-height:1; }

/* gallery */
.gfilter{ font-size:0.9rem; font-weight:600; padding:0.4rem 0; border-bottom:2px solid transparent; }
.gfilter.active{ border-bottom-color:var(--terracotta); color:var(--terracotta); }
.gitem{ cursor:pointer; }
.gitem img{ transition:transform .5s ease; }
.gitem:hover img{ transform:scale(1.045); }

/* lightbox */
#lightbox{ position:fixed; inset:0; background:rgba(18,15,11,0.94); z-index:60; display:none; align-items:center; justify-content:center; flex-direction:column; padding:2rem; }
#lightbox.open{ display:flex; }
#lightbox img{ max-height:78vh; max-width:92vw; object-fit:contain; }
#lightbox .lb-cap{ color:#F4EEE0; margin-top:1rem; max-width:60ch; text-align:center; font-size:0.95rem; }

/* form inputs */
.field label{ display:block; font-size:0.85rem; font-weight:600; margin-bottom:0.35rem; }
.field input, .field select, .field textarea{
  width:100%; background:transparent; border:1px solid var(--rule);
  padding:0.7rem 0.85rem; font-family:inherit; font-size:0.95rem; color:var(--charcoal);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--terracotta); outline-offset:1px; }

/* slideshow */
.slideshow{ position:relative; overflow:hidden; background:var(--charcoal); }
.slideshow .slide{ position:absolute; inset:0; opacity:0; transition:opacity 1s ease; }
.slideshow .slide.active{ opacity:1; z-index:1; }
.slideshow .slide img{ width:100%; height:100%; object-fit:contain; object-position:center; display:block; }
.slide-dots{ position:absolute; z-index:2; bottom:1rem; left:50%; transform:translateX(-50%); display:flex; gap:0.4rem; }
.slide-dots button{ width:8px; height:8px; border-radius:999px; background:rgba(244,238,224,0.45); border:none; padding:0; cursor:pointer; }
.slide-dots button.active{ background:var(--terracotta); width:22px; border-radius:999px; transition:width .3s ease; }
.slide-arrow{ position:absolute; z-index:2; top:50%; transform:translateY(-50%); background:rgba(20,16,12,0.45); color:#F4EEE0; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; }
.slide-arrow:hover{ background:rgba(20,16,12,0.7); }
.slide-arrow.prev{ left:0.75rem; }
.slide-arrow.next{ right:0.75rem; }

::selection{ background:var(--terracotta); color:#fff; }

@media (prefers-reduced-motion: reduce){
  .gitem img{ transition:none; }
  html{ scroll-behavior:auto; }
}