.contact-sheet {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(100%, 540px);
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  overscroll-behavior: contain;
}
.contact-sheet[open],
.contact-sheet[open]::backdrop {
  animation-duration: .36s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}

.contact-sheet[open] { animation-name: sheet-enter; }
.contact-sheet[open]::backdrop { animation-name: backdrop-enter; }
.contact-sheet::backdrop { background: rgb(25 26 24 / 35%); backdrop-filter: blur(3px); cursor: pointer; }
html:has(.contact-sheet[open]) { overflow: hidden; }
body:has(.contact-sheet[open]) { padding-right: var(--contact-scrollbar-gap, 0px); }
.sheet-content { padding: 36px 40px max(32px, env(safe-area-inset-bottom)); }
.sheet-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sheet-heading .eyebrow { color: var(--quiet); }
.sheet-close {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.sheet-close:hover { background: var(--daydream); border-color: var(--daydream); }
.contact-sheet h2 { margin: 30px 0 18px; font-size: clamp(36px, 4vw, 48px); font-weight: 650; line-height: 1.05; letter-spacing: -.065em; }
#contact-description { margin: 0 0 28px; max-width: 350px; color: var(--quiet); font-size: 16px; line-height: 1.6; }
#contact-form { display: grid; gap: 18px; }
.contact-field { display: grid; gap: 7px; }
.contact-field label { font-size: 14px; font-weight: 600; }
.contact-field input, .contact-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #a6a79f;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
}
.contact-field textarea { resize: vertical; min-height: 120px; }
.contact-field input:focus-visible, .contact-field textarea:focus-visible { outline: 3px solid var(--daydream); outline-offset: 2px; }
.sheet-send { width: 100%; margin-top: 4px; cursor: pointer; }
.sheet-send:disabled { opacity: .55; cursor: not-allowed; }
.contact-status { min-height: 24px; margin: -3px 0 0; font-size: 14px; line-height: 1.6; }
.contact-status[data-state="error"] { color: #8c301a; }
@keyframes backdrop-enter {
  from { background-color: rgb(25 26 24 / 0%); backdrop-filter: blur(0); }
  to { background-color: rgb(25 26 24 / 35%); backdrop-filter: blur(3px); }
}

@keyframes sheet-enter { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 800px) {
  .contact-sheet { inset: auto 0 0; width: 100%; height: auto; max-height: 92dvh; border: 0; border-top: 1px solid var(--line); border-radius: 24px 24px 0 0; }
  .sheet-content { padding: 18px 24px max(28px, env(safe-area-inset-bottom)); }
  .contact-sheet h2 { margin-top: 18px; }
  #contact-description { margin-bottom: 22px; }
  @keyframes sheet-enter { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) {
  .contact-sheet[open],
  .contact-sheet[open]::backdrop { animation: none; }
}
@media print { .contact-sheet, .contact-sheet::backdrop { display: none !important; } }