/* Dagboek Buiten — gallery & motion layer */
:root{--fx-green:#2e6d58;--fx-ink:#18201e;--fx-paper:#faf9f5;--fx-line:#d8ddd8}

/* Clickable images */
.photo img,.map img{cursor:zoom-in}
.photo{will-change:transform}
.photo img{transform-origin:center center}

/* Scroll reveal fallback; JS adds .fx-ready to the page */
.fx-ready main .group,
.fx-ready main .route,
.fx-ready main .empty,
.fx-ready main > .intro,
.fx-ready .archive .card{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);
}
.fx-ready main .group.is-visible,
.fx-ready main .route.is-visible,
.fx-ready main .empty.is-visible,
.fx-ready main > .intro.is-visible,
.fx-ready .archive .card.is-visible{opacity:1;transform:none}

/* Slight image drift while scrolling, only where motion is supported */
.fx-ready .group .photo img{transition:transform .7s cubic-bezier(.22,1,.36,1)}
.fx-ready .group .photo:hover img{transform:scale(1.035)}

/* Lightbox */
.fx-lock{overflow:hidden!important}
.fx-lightbox{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:28px;visibility:hidden;opacity:0;pointer-events:none;background:rgba(8,12,11,.88);backdrop-filter:blur(14px);transition:opacity .28s ease,visibility .28s ease}
.fx-lightbox.is-open{visibility:visible;opacity:1;pointer-events:auto}
.fx-lightbox__frame{position:relative;display:grid;place-items:center;width:min(94vw,1500px);height:min(90vh,1000px)}
.fx-lightbox__image{display:block;max-width:100%;max-height:calc(90vh - 64px);width:auto;height:auto;object-fit:contain;box-shadow:0 24px 80px rgba(0,0,0,.35);border-radius:2px}
.fx-lightbox__caption{position:absolute;left:50%;bottom:-2px;transform:translate(-50%,100%);color:#fff;font-size:12px;letter-spacing:.03em;text-align:center;max-width:80vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-lightbox__close,.fx-lightbox__prev,.fx-lightbox__next{position:absolute;border:0;background:rgba(250,249,245,.12);color:#fff;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:24px;line-height:1;cursor:pointer;backdrop-filter:blur(8px);transition:background .2s ease,transform .2s ease}
.fx-lightbox__close:hover,.fx-lightbox__prev:hover,.fx-lightbox__next:hover{background:rgba(250,249,245,.22);transform:scale(1.05)}
.fx-lightbox__close{top:18px;right:18px;font-size:26px}
.fx-lightbox__prev,.fx-lightbox__next{top:50%;transform:translateY(-50%)}
.fx-lightbox__prev:hover,.fx-lightbox__next:hover{transform:translateY(-50%) scale(1.05)}
.fx-lightbox__prev{left:18px}.fx-lightbox__next{right:18px}
.fx-lightbox[data-single="true"] .fx-lightbox__prev,.fx-lightbox[data-single="true"] .fx-lightbox__next{display:none}
.fx-lightbox__counter{position:absolute;top:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.75);font-size:10px;letter-spacing:.15em;text-transform:uppercase}

@media(max-width:700px){
  .fx-lightbox{padding:14px}
  .fx-lightbox__image{max-height:82vh}
  .fx-lightbox__prev,.fx-lightbox__next{width:38px;height:38px;font-size:20px}
  .fx-lightbox__prev{left:8px}.fx-lightbox__next{right:8px}
  .fx-lightbox__close{top:8px;right:8px}
  .fx-lightbox__caption{bottom:8px;transform:translateX(-50%);font-size:11px;background:rgba(8,12,11,.55);padding:7px 10px;border-radius:20px}
}

@media(prefers-reduced-motion:reduce){
  .fx-ready main .group,.fx-ready main .route,.fx-ready main .empty,.fx-ready main > .intro,.fx-ready .archive .card{opacity:1;transform:none;transition:none}
  .fx-lightbox,.photo img,.photo{transition:none!important}
}

/* Nature filter / chapter buttons */
.day-nav, nav:has(a[href^="#"]) {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  white-space:normal;
  padding-top:16px;
  padding-bottom:16px;
}
nav:has(a[href^="#"]) a {
  --pill-bg:#e8eee7;
  --pill-border:#cfd9ce;
  --pill-ink:#315546;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
  min-height:40px;
  padding:9px 15px;
  border:1px solid var(--pill-border);
  border-radius:999px;
  background:var(--pill-bg);
  color:var(--pill-ink);
  text-decoration:none;
  font-size:12px;
  line-height:1.1;
  letter-spacing:.01em;
  box-shadow:0 1px 0 rgba(24,32,30,.04);
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease;
}
nav:has(a[href^="#"]) a:nth-child(2n) { --pill-bg:#eee9df; --pill-border:#ddd2c2; --pill-ink:#68533c; }
nav:has(a[href^="#"]) a:nth-child(3n) { --pill-bg:#e7eee9; --pill-border:#cbd9d0; --pill-ink:#35604e; }
nav:has(a[href^="#"]) a:nth-child(4n) { --pill-bg:#eee8e5; --pill-border:#decfc8; --pill-ink:#765448; }
nav:has(a[href^="#"]) a:nth-child(5n) { --pill-bg:#e9ede4; --pill-border:#d2d9ca; --pill-ink:#4d5d3f; }
nav:has(a[href^="#"]) a:hover,
nav:has(a[href^="#"]) a:focus-visible {
  background:var(--fx-paper);
  border-color:var(--fx-green);
  color:var(--fx-green);
  transform:translateY(-2px);
  box-shadow:0 7px 18px rgba(36,63,51,.10);
  outline:none;
}
nav:has(a[href^="#"]) a.is-active {
  background:#315c49;
  border-color:#315c49;
  color:#fff;
  box-shadow:0 8px 20px rgba(49,92,73,.18);
}
nav:has(a[href^="#"]) a.is-active:hover,
nav:has(a[href^="#"]) a.is-active:focus-visible { background:#284d3d; border-color:#284d3d; color:#fff; }
@media(max-width:760px){
  nav:has(a[href^="#"]) { gap:8px; padding-top:12px; padding-bottom:12px; }
  nav:has(a[href^="#"]) a { min-height:38px; padding:8px 12px; font-size:11px; }
}