/* Static-site additions: lightbox overlay + rebuilt contact form.
   Kept intentionally neutral to sit under the site's existing serif/greyscale styling. */

/* ---------- Lightbox ---------- */
.sx-lb {
  position: fixed; inset: 0; z-index: 99999;
  display: none; align-items: center; justify-content: center;
  background: rgba(12, 12, 12, 0.94);
}
.sx-lb.open { display: flex; }
.sx-lb-stage {
  position: relative; width: 92vw; height: 90vh;
  display: flex; align-items: center; justify-content: center;
}
.sx-lb-img {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  max-width: 92vw; max-height: 90vh; width: auto; height: auto;
  object-fit: contain; box-shadow: 0 2px 40px rgba(0,0,0,0.6);
  opacity: 0; transition: opacity .3s ease;
}
.sx-lb-img.on { opacity: 1; }
.sx-lb-btn {
  position: absolute; background: transparent; border: 0; color: #eee;
  cursor: pointer; line-height: 1; padding: 0 .3em; opacity: .7; transition: opacity .15s;
  font-family: Georgia, 'Times New Roman', serif;
}
.sx-lb-btn:hover { opacity: 1; }
.sx-lb-close { top: 14px; right: 22px; font-size: 40px; }
.sx-lb-prev, .sx-lb-next { top: 50%; transform: translateY(-50%); font-size: 64px; }
.sx-lb-prev { left: 12px; }
.sx-lb-next { right: 12px; }
.sx-lb-count {
  position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
  color: #bbb; font-size: 13px; letter-spacing: .08em;
}
@media (max-width: 640px) {
  .sx-lb-prev, .sx-lb-next { font-size: 44px; }
  .sx-lb-close { font-size: 32px; top: 8px; right: 14px; }
}

/* ---------- Gallery (justified rows) ----------
   justified.js positions each anchor absolutely to fill every row edge-to-edge
   with a balanced mix of orientations, re-flowing on resize. Hidden until the
   first layout runs to avoid a flash of stacked images. */
.sx-gallery { position: relative; margin: 0; visibility: hidden; }
.sx-gallery.sx-ready { visibility: visible; }
.sx-gallery a {
  position: absolute; top: 0; left: 0; margin: 0;
  display: block; overflow: hidden; background: #f0f0f0;
}
.sx-gallery img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  cursor: pointer; transition: opacity .15s;
}
.sx-gallery a:hover img { opacity: .85; }

/* ---------- Slideshow (Info page) — centered, crossfading ---------- */
.sx-slideshow {
  position: relative; width: 100%; max-width: 600px; margin: 0 auto;
  aspect-ratio: 1 / 1;   /* square, matching the original; centers when the column goes full-width */
}
.sx-slideshow a {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .8s ease; pointer-events: none;
}
.sx-slideshow a.on { opacity: 1; pointer-events: auto; }
.sx-slideshow img {
  width: 100%; height: 100%; object-fit: cover; cursor: pointer;
}

/* ---------- Cloaked phone (JS-injected tel: link, styled as plain text) ---------- */
a.sx-tel-link { color: inherit; text-decoration: none; }
a.sx-tel-link:hover { text-decoration: none; }

/* ---------- Contact form ---------- */
.sx-contact-wrap { max-width: 640px; margin: 0 auto; }
.sx-field { margin: 0 0 18px; }
.sx-field label { display: block; margin: 0 0 5px; font-size: 14px; letter-spacing: .04em; }
.sx-field .sx-req { color: #a00; }
.sx-field input,
.sx-field select,
.sx-field textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid #cfcfcf; background: #fff; color: #222;
  font-size: 15px; font-family: inherit;
}
.sx-field input:focus,
.sx-field select:focus,
.sx-field textarea:focus { outline: none; border-color: #666; }
.sx-field textarea { min-height: 150px; resize: vertical; }
.sx-row { display: flex; gap: 16px; }
.sx-row .sx-field { flex: 1; }
.sx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sx-actions { margin-top: 6px; }
.sx-submit {
  display: inline-block; padding: 11px 30px; border: 0; cursor: pointer;
  background: #222; color: #fff; font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  font-family: inherit; transition: background .15s;
}
.sx-submit:hover { background: #000; }
.sx-submit:disabled { opacity: .5; cursor: default; }
.sx-status { margin: 16px 0 0; font-size: 14px; }
.sx-status-busy { color: #666; }
.sx-status-ok { color: #1a7a3a; }
.sx-status-err { color: #a00; }
@media (max-width: 560px) { .sx-row { flex-direction: column; gap: 0; } }