/* The contact dialog: one form, shared by every page. Self-contained (its own tokens, light and dark) and scoped to
   #contact-dialog, so it sits above whatever the page or base.css says about the same classes. */
#contact-dialog {
  --cf-bg: #ffffff; --cf-ink: #0d0d0d; --cf-ink2: #5d5d5d; --cf-line: rgba(13, 13, 13, 0.12);
  --cf-field: #f8f7f4; --cf-fill: #0d0d0d; --cf-on: #ffffff; --cf-ring: rgba(13, 13, 13, 0.12);
  --cf-err: #b3261e; --cf-ok: #0b8f6d; --cf-ease: cubic-bezier(0.23, 1, 0.32, 1);
  border: 0; padding: 0; background: transparent; max-width: none; max-height: none; overflow: visible;
  color: var(--cf-ink); font-family: inherit;
}
:root[data-theme="dark"] #contact-dialog {
  --cf-bg: #181818; --cf-ink: #f3f3f3; --cf-ink2: #b4b4b4; --cf-line: rgba(255, 255, 255, 0.14);
  --cf-field: #212121; --cf-fill: #f3f3f3; --cf-on: #0d0d0d; --cf-ring: rgba(255, 255, 255, 0.16);
  --cf-err: #ff8f84; --cf-ok: #34d3a1;
}
#contact-dialog::backdrop { background: rgba(13, 13, 13, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
:root[data-theme="dark"] #contact-dialog::backdrop { background: rgba(0, 0, 0, 0.66); }

/* the panel */
#contact-dialog .contact-panel {
  position: relative; width: min(504px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; margin: auto;
  padding: 40px 36px 30px; background: var(--cf-bg); color: var(--cf-ink);
  border: 1px solid var(--cf-line); border-radius: 24px;
  box-shadow: 0 1px 2px rgba(13, 13, 13, 0.06), 0 40px 90px -30px rgba(13, 13, 13, 0.4);
  opacity: 0; transform: translateY(12px) scale(0.985);
  transition: opacity 240ms var(--cf-ease), transform 280ms var(--cf-ease);
}
#contact-dialog[open] .contact-panel { opacity: 1; transform: none; }
@starting-style { #contact-dialog[open] .contact-panel { opacity: 0; transform: translateY(12px) scale(0.985); } }

/* close */
#contact-dialog .contact-x {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--cf-ink2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 150ms ease, color 150ms ease, transform 120ms ease;
}
#contact-dialog .contact-x::after { content: ""; position: absolute; inset: -4px; }
#contact-dialog .contact-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#contact-dialog .contact-x:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { #contact-dialog .contact-x:hover { background: var(--cf-field); color: var(--cf-ink); } }
#contact-dialog .contact-x:focus-visible, #contact-dialog .contact-submit:focus-visible, #contact-dialog .contact-done:focus-visible,
#contact-dialog .contact-foot a:focus-visible { outline: 2px solid var(--cf-ink); outline-offset: 3px; }

/* words */
#contact-dialog h2 { margin: 0; padding-right: 28px; font-size: clamp(1.625rem, 5.4vw, 1.9375rem); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
#contact-dialog .sub { margin: 12px 0 28px; font-size: 1rem; line-height: 1.55; color: var(--cf-ink2); text-wrap: pretty; }

/* fields */
#contact-dialog .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
#contact-dialog .cf-field { margin: 0 0 18px; }
#contact-dialog .cf-field label { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 8px; font-size: 0.875rem; font-weight: 500; color: var(--cf-ink); }
#contact-dialog .cf-field label span { font-size: 0.8125rem; font-weight: 400; color: var(--cf-ink2); }
#contact-dialog .cf-field input, #contact-dialog .cf-field textarea {
  display: block; width: 100%; margin: 0; padding: 0 14px; height: 48px; box-sizing: border-box;
  font: inherit; font-size: 1rem; color: var(--cf-ink); background: var(--cf-field);
  border: 1px solid var(--cf-line); border-radius: 12px; outline: none;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
#contact-dialog .cf-field textarea { height: auto; min-height: 124px; padding: 13px 14px; resize: vertical; line-height: 1.5; }
#contact-dialog .cf-field input::placeholder, #contact-dialog .cf-field textarea::placeholder { color: color-mix(in srgb, var(--cf-ink2) 72%, transparent); }
#contact-dialog .cf-field input:focus, #contact-dialog .cf-field textarea:focus {
  border-color: color-mix(in srgb, var(--cf-ink) 60%, transparent); background: var(--cf-bg); box-shadow: 0 0 0 4px var(--cf-ring); }
#contact-dialog .cf-field input:user-invalid, #contact-dialog .cf-field textarea:user-invalid { border-color: var(--cf-err); }
#contact-dialog .cf-field input:user-invalid:focus, #contact-dialog .cf-field textarea:user-invalid:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--cf-err) 18%, transparent); }

/* send */
#contact-dialog .contact-submit {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; margin-top: 6px;
  border: 0; border-radius: 999px; background: var(--cf-fill); color: var(--cf-on); cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 600; letter-spacing: -0.005em;
  transition: opacity 150ms ease, transform 120ms ease;
}
#contact-dialog .contact-submit .cs-arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--cf-ease); }
@media (hover: hover) and (pointer: fine) {
  #contact-dialog .contact-submit:hover { opacity: 0.9; }
  #contact-dialog .contact-submit:hover .cs-arrow { transform: translateX(3px); }
}
#contact-dialog .contact-submit:active { transform: scale(0.985); }
#contact-dialog .contact-submit .cs-spin { position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--cf-on) 30%, transparent); border-top-color: var(--cf-on); opacity: 0; animation: cf-spin 0.8s linear infinite; }
#contact-dialog .contact-submit.is-busy { cursor: progress; }
#contact-dialog .contact-submit.is-busy .cs-label, #contact-dialog .contact-submit.is-busy .cs-arrow { opacity: 0; }
#contact-dialog .contact-submit.is-busy .cs-spin { opacity: 1; }
#contact-dialog .contact-submit:disabled { pointer-events: none; }
@keyframes cf-spin { to { transform: rotate(360deg); } }

#contact-dialog .contact-status { margin: 14px 0 0; min-height: 1.3em; font-size: 0.875rem; line-height: 1.4; text-align: center; color: var(--cf-ink2); }
#contact-dialog .contact-status.err { color: var(--cf-err); }
#contact-dialog .contact-status a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
#contact-dialog .contact-foot { margin: 6px 0 0; font-size: 0.875rem; text-align: center; color: var(--cf-ink2); }
#contact-dialog .contact-foot a { color: var(--cf-ink); text-decoration: underline; text-decoration-color: var(--cf-line); text-underline-offset: 3px; transition: text-decoration-color 150ms ease; }
@media (hover: hover) and (pointer: fine) { #contact-dialog .contact-foot a:hover { text-decoration-color: var(--cf-ink); } }

/* sent */
#contact-dialog .contact-success { display: none; text-align: center; padding: 18px 0 6px; }
#contact-dialog .contact-success.is-on { display: block; }
#contact-dialog .cs-check { width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--cf-ok) 14%, transparent); color: var(--cf-ok); }
#contact-dialog .cs-check svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
#contact-dialog .contact-success.is-on .cs-check svg { animation: cf-draw 420ms 120ms var(--cf-ease) forwards; }
@keyframes cf-draw { to { stroke-dashoffset: 0; } }
#contact-dialog .contact-success h3 { margin: 0 0 8px; font-size: 1.625rem; font-weight: 600; letter-spacing: -0.03em; }
#contact-dialog .contact-success p { margin: 0 auto 26px; max-width: 30ch; font-size: 1rem; line-height: 1.55; color: var(--cf-ink2); }
#contact-dialog .contact-done { height: 46px; padding: 0 24px; border: 1px solid var(--cf-line); border-radius: 999px; background: transparent; color: var(--cf-ink);
  font: inherit; font-size: 0.9375rem; font-weight: 500; cursor: pointer; transition: background-color 150ms ease, transform 120ms ease; }
#contact-dialog .contact-done:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { #contact-dialog .contact-done:hover { background: var(--cf-field); } }

@media (max-width: 560px) {
  #contact-dialog .contact-panel { padding: 34px 22px 24px; border-radius: 22px; }
  #contact-dialog .cf-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #contact-dialog .contact-panel { transform: none; transition: opacity 120ms ease; }
  #contact-dialog .contact-submit .cs-arrow, #contact-dialog .contact-submit, #contact-dialog .contact-x { transition: none; }
  #contact-dialog .contact-success.is-on .cs-check svg { animation: none; stroke-dashoffset: 0; }
}