/* Contact section, the demo form, the footer, and the photo lightbox. */

.contact {
  position: relative;
  padding: 96px var(--gutter) 110px;
  border-top: 1px solid var(--line-soft);
  overflow: hidden;
}

.contact__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(52% 62% at 26% 18%, rgba(201, 242, 77, 0.09), rgba(0, 0, 0, 0) 70%);
}

.contact__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 72px;
  align-items: start;
}

.badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding: 14px 18px;
  border: 1px solid rgba(201, 242, 77, 0.35);
  background: var(--accent-soft);
  width: fit-content;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.badge__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(201, 242, 77, 0.18);
}

.links { display: grid; gap: 2px; margin-top: 40px; }

.link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 4px;
  border-top: 1px solid var(--line);
  transition: padding-left 200ms var(--ease);
}
.link:hover { padding-left: 14px; }

.link__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 240, 236, 0.5);
}

.link__value {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.link__arrow { color: var(--accent); }

/* --- Form ------------------------------------------------------------------ */

/*
 * Named `contact-card`, not `card` — carousel.css already owns `.card` for the
 * 3D frames, and that rule is `position: absolute` with a fixed aspect ratio.
 * Sharing the name pulled this panel out of the contact grid entirely.
 */
.contact-card {
  padding: 36px;
  border: 1px solid rgba(242, 240, 236, 0.14);
  background: rgba(242, 240, 236, 0.025);
}

.form { display: grid; gap: 22px; }
.form__fields { display: grid; gap: 22px; }

.field { display: grid; gap: 9px; }

.field__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
}

.field__input {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid rgba(242, 240, 236, 0.18);
  background: var(--bg-veil);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  outline: none;
  transition: border-color 180ms ease;
}
.field__input:focus { border-color: var(--accent); }
.field__input[aria-invalid='true'] { border-color: #ff6b6b; }

textarea.field__input { resize: vertical; }

/* Honeypot: off-screen rather than display:none, since some bots skip anything
   they can tell is hidden. Never focusable, never in the layout. */
.field__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.field__error {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff8f8f;
}

.form__error {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff8f8f;
}

.submit {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 24px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(242, 240, 236, 0.2);
  background: transparent;
  color: var(--ink-45);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: not-allowed;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
.submit:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  cursor: pointer;
}

.sent {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  min-height: 420px;
  text-align: center;
}
.sent__mark { font-size: 34px; line-height: 1; color: var(--accent); }
.sent__title { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.sent__note {
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(242, 240, 236, 0.6);
}

/* --- Footer ---------------------------------------------------------------- */

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 28px var(--gutter);
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-45);
}

/* --- Lightbox --------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  place-items: center;
  padding: 48px;
}
.lightbox[hidden] { display: none; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 9, 0.94);
  backdrop-filter: blur(10px);
  cursor: zoom-out;
}

.lightbox__inner {
  position: relative;
  max-width: min(1100px, 92vw);
  width: 100%;
}

.lightbox__img {
  width: 100%;
  max-height: 78vh;
  aspect-ratio: var(--ratio, 3 / 4);
  object-fit: contain;
  background: var(--bg-raise);
}

.lightbox__meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.lightbox__exif { color: rgba(242, 240, 236, 0.62); }

.lightbox__close {
  position: fixed;
  top: 26px;
  right: 30px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: rgba(11, 11, 12, 0.5);
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
.lightbox__close:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* Set on <html> while the lightbox is open so the page behind cannot scroll. */
.is-locked { overflow: hidden; }