/* Header, footer and placeholder styles for the published site.
   The page bodies keep their inline styles from the canvas; only the parts that
   the design runtime used to compute in JS live here as real CSS. */

.ape-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: rgba(242, 239, 228, 0.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 2px solid rgba(32, 48, 27, 0.18);
  color: #20301b; font-family: Archivo, system-ui, sans-serif;
}
.ape-header-bar {
  max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 96px; transition: height .28s cubic-bezier(.4, 0, .2, 1);
}
.ape-header.is-scrolled .ape-header-bar { height: 64px; }

.ape-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #20301b; }
.ape-mark { height: 74px; width: auto; flex: none; display: block; transition: height .28s cubic-bezier(.4, 0, .2, 1); }
.ape-header.is-scrolled .ape-mark { height: 48px; }
.ape-wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.ape-wordmark-name { font-weight: 800; font-size: 14px; letter-spacing: .02em; }

.ape-nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 24px); }
.ape-navlink {
  text-decoration: none; font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 600; padding: 6px 0; border-bottom: 2px solid transparent;
  color: rgba(32, 48, 27, .8); white-space: nowrap;
}
.ape-navlink:hover { color: #316420; }
.ape-navlink.is-active { color: #20301b; border-bottom-color: #316420; }

.ape-header-actions { display: flex; align-items: center; gap: 14px; }
.ape-lang { display: flex; border: 1px solid rgba(32, 48, 27, .22); }
.ape-lang-btn {
  background: transparent; color: rgba(32, 48, 27, .85); border: 0; font-family: inherit;
  font-weight: 800; font-size: 11px; letter-spacing: .1em; padding: 6px 9px; cursor: pointer;
}
.ape-lang-btn + .ape-lang-btn { border-left: 1px solid rgba(32, 48, 27, .22); }
.ape-lang-btn.is-on { background: #20301b; color: #f7f5ee; }

.ape-cta {
  background: #3f7d2c; color: #f7f5ee; text-decoration: none; font-weight: 800; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; padding: 11px 18px; display: inline-flex;
  white-space: nowrap;
}
.ape-cta:hover { background: #2a5a1c; color: #f7f5ee; }

.ape-burger {
  display: none; background: transparent; border: 1px solid rgba(32, 48, 27, .22); color: #20301b;
  width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer;
  flex-direction: column; gap: 4px; flex: none;
}
.ape-burger span { width: 16px; height: 2px; background: #20301b; display: block; }

.ape-panel { border-top: 2px solid rgba(32, 48, 27, .18); padding: 8px clamp(20px, 5vw, 56px) 22px; }
.ape-panel[hidden] { display: none; }
.ape-panellink {
  display: block; text-decoration: none; color: rgba(32, 48, 27, .8); font-weight: 800;
  font-size: 19px; letter-spacing: -.01em; padding: 11px 0; border-bottom: 1px solid rgba(32, 48, 27, .16);
}
.ape-panellink.is-active { color: #20301b; }
.ape-panel-cta {
  display: block; margin-top: 16px; background: #3f7d2c; color: #f7f5ee; text-decoration: none;
  font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 14px 16px;
}

/* Between the burger breakpoint and ~1300px the six nav items, the language
   toggle and the CTA leave the lockup barely 200px, which forces the wordmark
   onto a third line. Step the mark down there so the two-line lockup holds. */
@media (max-width: 1300px) and (min-width: 1081px) {
  .ape-mark { height: 64px; }
  .ape-header-bar { height: 88px; }
  .ape-nav { gap: clamp(12px, 1.6vw, 24px); }
  /* Six nav items plus the toggle and the CTA squeeze the lockup until its
     text collides with the nav. The CTA yields here — it is repeated in the
     hero and the footer, while the nav has nowhere else to go. */
  .ape-cta { display: none; }
}

/* The canvas swapped nav for a burger at 1080px of viewport width. */
@media (max-width: 1080px) {
  .ape-nav { display: none; }
  .ape-cta { display: none; }
  .ape-burger { display: flex; }
}

/* Phones: the full lockup wraps to three lines and crowds the bar, so the
   locality line drops and the mark shrinks. */
@media (max-width: 640px) {
  .ape-mark { height: 56px; }
  .ape-header.is-scrolled .ape-mark { height: 44px; }
  .ape-wordmark-name { font-size: 12px; }
  .ape-header-actions { gap: 10px; }
}

/* Unfilled image slots: a panel in the site palette rather than an empty hole.
   Drop a file into photos/<slot-id>.jpg and the build emits a real <img>. */
.ape-photo {
  background:
    radial-gradient(120% 90% at 20% 15%, rgba(63, 125, 44, .34), transparent 62%),
    radial-gradient(110% 80% at 85% 80%, rgba(184, 130, 63, .28), transparent 60%),
    repeating-linear-gradient(135deg, rgba(32, 48, 27, .05) 0 2px, transparent 2px 9px),
    #e6e2d3;
}

:focus-visible { outline: 2px solid #3f7d2c; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ape-header-bar, .ape-mark { transition: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}


/* generated hover/focus states */
.h0:hover{background:#2a5a1c !important}
.h1:hover{background:rgba(32,48,27,0.08) !important}
.h2:hover{background:rgba(32,48,27,0.03) !important}
.h3:hover{color:#20301b !important}
.h4:hover{background:#3f7d2c !important;color:#f7f5ee !important}
.h5:hover{color:#316420 !important}
.h6:hover{background:#eee9dc !important}
.f7:focus{border-color:#316420 !important;outline:2px solid #3f7d2c !important;outline-offset:0 !important}