/* ===== Stella Moon — overrides on top of the original Squarespace theme ===== */

/* images are served locally; no lazy-load fade needed */
img.loaded { opacity: 1; }

/* contact form (replaces the Squarespace React form) */
.sm-form-wrap { width: 100%; color: #fff; font-family: var(--body-font-font-family, 'Arimo'), sans-serif; }
.sm-form { display: flex; flex-direction: column; gap: 18px; }
.sm-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sm-legend { font-size: 16px; line-height: 1.4; margin-bottom: 6px; padding: 0; }
.sm-desc { font-size: 12px; letter-spacing: .04em; margin: 0 0 6px; opacity: .85; }
.sm-row { display: flex; gap: 12px; }
.sm-row .sm-field { flex: 1; }
.sm-field { display: flex; flex-direction: column; gap: 6px; }
.sm-label { font-size: 13px; line-height: 1.3; }
.sm-label em { font-style: normal; opacity: .7; font-size: 12px; }
.sm-field input, .sm-field textarea {
  width: 100%; box-sizing: border-box; font: 16px/1.4 var(--body-font-font-family, 'Arimo'), sans-serif;
  color: #fff; background: rgba(255,255,255,.22); border: 0; border-bottom: 1px solid rgba(255,255,255,.6);
  border-radius: 0; padding: 10px 12px; transition: background .2s, transform .2s;
}
.sm-field input:focus, .sm-field textarea:focus { outline: none; background: rgba(255,255,255,.3); border-bottom-color: #f98aff; transform: scale(1.01); }
.sm-field input[type=date] { color-scheme: dark; }
.sm-check { display: flex; align-items: center; gap: 12px; font-size: 13px; cursor: pointer; }
.sm-check input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.22); margin: 0; cursor: pointer; display: grid; place-content: center; }
.sm-check input::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #f98aff; transform: scale(0); transition: transform .15s; }
.sm-check input:checked::before { transform: scale(1); }
.sm-submit {
  margin-top: 6px; width: 100%; padding: 16px 20.8px; background: transparent; color: #f98aff;
  border: 1px solid #f98aff; border-radius: 0; font: 16px var(--body-font-font-family, 'Arimo'), sans-serif;
  letter-spacing: .02em; cursor: pointer; transition: background .2s, color .2s;
}
.sm-submit:hover { background: #f98aff; color: #000; }
@media (max-width: 767px) { .sm-row { flex-direction: column; } }

/* thank-you page */
.sm-thanks { width: 100%; box-sizing: border-box; min-height: calc(100vh - 139px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 20px; padding: 140px 6vw 80px; }
.sm-thanks h1 { color: #fff; margin: 0; }
.sm-thanks p { color: #fff; margin: 0; }
.sm-thanks a.sm-btn { color: #fff; border: 1px solid #fff; padding: 14px 22px; text-decoration: none; font-family: var(--body-font-font-family, 'Arimo'), sans-serif; }
.sm-thanks a.sm-btn:hover { background: #f98aff; border-color: #f98aff; color: #000; }

/* section divider: original renders a 6px accent stroke, no extra padding */
.page-section.has-section-divider { padding-bottom: 0 !important; }
.page-section.has-section-divider .section-divider-display { display: none; }
.page-section.has-section-divider::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 6px; background: var(--sm-divider, #f98aff); z-index: 5; pointer-events: none; }

/* shape blocks: size the SVG to its block (Squarespace did this in JS) */
.sqs-shape-block-outer-container, .sqs-shape-block-container { width: 100%; height: 100%; }
.sqs-shape-block-container .sqs-shape { width: 100%; height: 100%; overflow: visible; display: block; }

/* gallery grid (2 columns, 3:4 portrait, like the original) */
.gallery-grid--layout-grid .gallery-grid-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.9vw; width: auto; }
.gallery-grid--layout-grid .gallery-grid-item { margin: 0; width: auto !important; }
.gallery-grid--layout-grid .gallery-grid-item-wrapper { position: relative; padding-bottom: 133.333%; overflow: hidden; }
.gallery-grid--layout-grid .gallery-grid-item-wrapper img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.sm-hp { display: none !important; }