/* Custom palette: gray + olive + gold */
:root {
  --olive: #6b705c;
  --olive-700: #4f5747;
  --gold: #d4af37;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-600: #6c757d;
}

/* Full-height layout so footer sticks to bottom on short pages */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }

/* Header: lighter gray background */
.bg-header {
  background-color: var(--gray-200) !important;
}

/* Footer: medium gray with good contrast */
.bg-footer {
  background-color: var(--gray-600) !important;
  color: #fff;
}

/* Accent colors */
.text-olive { color: var(--olive) !important; }
.text-gold { color: var(--gold) !important; }
.border-olive { border-color: var(--olive) !important; }

/* Map Bootstrap helpers to our palette */
.text-success { color: var(--olive) !important; }
.border-success { border-color: var(--olive) !important; }

/* Optional: subtle header shadow for definition */
header.bg-header { box-shadow: 0 1px 0 rgba(0,0,0,0.04); }

/* Typography: slightly larger, traditional/handwritten feel for body text */
.card-text {
  font-size: 1.125rem; /* ~18px */
  line-height: 1.8;
  font-family: "Apple Chancery", "Lucida Handwriting", cursive, serif;
}



/* Utility: push floated image down by ~3 lines on lg+ */
@media (min-width: 992px) {
  /* Float images on md+ with readable width */
  .float-wrap-md-start {
    float: left;
    margin: 0 1rem 1rem 0;
  }
  .start-after-3-lines-md {
    margin-top: calc(3 * 1.8em);
  }
  .float-spacer-md {
    float: right;
    width: 50%;
    height: calc(3 * 1.8em);
  }
  .float-split-3-lines-md {
    float: right;
    /* let first ~3 lines flow full width, then wrap */
    shape-outside: linear-gradient(to bottom, transparent calc(3 * 1.8em), black 0);
    -webkit-shape-outside: linear-gradient(to bottom, transparent calc(3 * 1.8em), black 0);
  }
  .float-split-3-lines-md-left {
    float: left;
    shape-outside: linear-gradient(to bottom, transparent calc(3 * 1.8em), black 0);
    -webkit-shape-outside: linear-gradient(to bottom, transparent calc(3 * 1.8em), black 0);
  }
  /* Consistent float with 2-line top gap before wrap */
  .float-split-md-left {
    float: left;
    width: 40%;
    max-width: 420px;
    margin: 0 1rem 1rem 0;
    shape-outside: linear-gradient(to bottom, transparent calc(2 * 1.8em), black 0);
    -webkit-shape-outside: linear-gradient(to bottom, transparent calc(2 * 1.8em), black 0);
  }
  .float-split-md-right {
    float: right;
    width: 40%;
    max-width: 420px;
    margin: 0 0 1rem 1rem;
    shape-outside: linear-gradient(to bottom, transparent calc(2 * 1.8em), black 0);
    -webkit-shape-outside: linear-gradient(to bottom, transparent calc(2 * 1.8em), black 0);
  }
}

.fog {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 15vh;
  pointer-events: none;
  background: radial-gradient(ellipse at bottom, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 95%);
  filter: blur(8px);
  z-index: 5;
}

footer {
  position: relative;
  z-index: 10; /* higher */
  margin-top: auto; /* push footer to bottom */
}

/* Navigation buttons below cards */
.nav-buttons { margin-top: 1rem; }
.btn.nav-arrow { transition: transform 0.05s ease, box-shadow 0.1s ease; }
.btn.nav-arrow:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) !important; }

/* Masonry gallery */
#gallery-grid { position: relative; }
.gallery-item {
  position: absolute;
  background: #fff;
  border: 3px solid var(--olive);
  border-radius: .25rem;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  overflow: hidden;
}
.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
}