/* A writing surface held in the light of the original fish mark. */
.contact-desk {
  --desk-ground: #0b100f;
  --letter: #eeeee8;
  --letter-ink: #202a27;
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 152px var(--gutter) 0;
  background: radial-gradient(ellipse at 43% 48%, #343422 0, #15201b 24%, var(--desk-ground) 62%);
  color: #eeeee8;
}
.contact-composition {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(48px, 7vw, 112px);
  max-width: 1296px;
  margin-inline: auto;
  padding-bottom: 60px;
}
.contact-introduction { position: relative; display: flex; flex-direction: column; min-width: 0; }
.contact-introduction h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(80px, 8.5vw, 126px);
  font-stretch: 66%;
  font-style: italic;
  font-weight: 850;
  letter-spacing: -.025em;
  line-height: 1;
}
.contact-invitation { position: relative; z-index: 1; margin: 20px 0 0; max-width: 15em; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3; letter-spacing: -.025em; }
.contact-form-jump { display: none; }
.contact-fish { position: relative; width: min(100%, 440px); margin: -20px 0 -28px -3%; pointer-events: none; }
.contact-lit-cup { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.contact-fish .material-mark { opacity: .85; }
.contact-fish .material-mark-sweep { opacity: .2; }
.contact-lure-light {
  position: absolute;
  left: 84%;
  top: 53%;
  width: 62%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, #efc17952, #dba34514 35%, transparent 68%);
  pointer-events: none;
}
.contact-direct { position: relative; z-index: 1; display: grid; gap: 5px; margin-top: auto; padding-top: 18px; }
.contact-direct a { color: #eeeee8; width: fit-content; max-width: 100%; min-height: 44px; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.contact-direct .contact-email { display: flex; align-items: center; gap: 12px; font-size: clamp(16px, 1.55vw, 22px); overflow-wrap: anywhere; }
.contact-direct .contact-email .icon { flex: none; color: #edc17d; }
.contact-direct .contact-phone { display: inline-flex; align-items: center; font-size: 20px; color: #c5cec7; }
.contact-letter {
  position: relative;
  align-self: start;
  margin-top: 14px;
  padding: clamp(28px, 3vw, 44px);
  border-top: 3px solid #d7af6b;
  border-radius: 3px 3px 20px 3px;
  background: linear-gradient(125deg, #fff8e5 0%, var(--letter) 35%, #e4e8e2 100%);
  color: var(--letter-ink);
  box-shadow: -22px 28px 70px #0005, 0 2px 0 #acae9f, 0 5px 0 #343c33;
  color-scheme: light;
  scroll-margin-top: 112px;
}
.contact-letter::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(#f6ca83, #d59b39 45%, transparent);
  opacity: .35;
  pointer-events: none;
}
.contact-letter:focus-within::before { opacity: 1; }
.contact-letter-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.contact-letter-heading h2 { margin: 0; font-size: clamp(25px, 2.35vw, 34px); font-weight: 650; letter-spacing: -.035em; line-height: 1.2; }
.contact-letter-heading > .icon { color: #745018; flex: none; }
.form-notice { margin: 19px 0 30px; max-width: 36em; color: #505c54; font-size: 14px; line-height: 1.6; }
.form-notice a { color: #62440f; font-weight: 600; text-underline-offset: 3px; }
.contact-form { display: grid; gap: 24px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field { min-width: 0; }
.field label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.field input, .field textarea {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid #6e7a6f;
  border-radius: 2px;
  appearance: none;
  background: #ffffff40;
  color: #202a27;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
}
.field textarea { min-height: 128px; padding-block: 0; line-height: 32px; background: repeating-linear-gradient(transparent 0 31px, #9da79a80 31px 32px); resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid #79541d; outline-offset: 3px; background: #fffaf0; }
.contact-letter :is(a, button):focus-visible { outline: 2px solid #79541d; outline-offset: 5px; }
.contact-desk .contact-direct a:focus-visible, .contact-form-jump:focus-visible { outline: 2px solid #edc17d; outline-offset: 5px; }
.contact-letter-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: 2px; }
.contact-letter-bottom button { display: inline-flex; align-items: center; gap: 20px; min-height: 48px; padding: 12px 18px; border: 1px solid #687264; border-radius: 3px; background: #d7dcd2; color: #505c4d; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.contact-letter-bottom button:disabled { cursor: not-allowed; }
.contact-letter-bottom button:not(:disabled) { border-color: #62440f; background: #edc17d; color: #202a27; }
.contact-letter-bottom button:not(:disabled):hover { background: #f3d39f; }
.contact-letter-bottom > span { font-size: 13px; color: #505c54; }
.contact-colophon { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 40px; max-width: 1296px; margin: 0 auto; padding: 25px 0 34px; border-top: 1px solid #42493b; }
.contact-colophon p { margin: 0; color: #bac4b9; font-size: 14px; line-height: 1.6; }
.contact-address { display: flex; align-items: center; gap: 14px; max-width: 25em; }
.contact-address .icon { flex: none; color: #d7af6b; }
.reach-badge { flex: none; width: 43px; height: auto; }

/* Field focus is the only new motion, and it follows the visitor's action. */
html.motion-ready:not(.motion-paused) .contact-letter::before { transition: opacity 220ms ease; }
html.motion-ready:not(.motion-paused) .contact-composition:has(.contact-form :focus) .contact-lure-light { opacity: 1; }
html.motion-ready:not(.motion-paused) .contact-lure-light { opacity: .65; transition: opacity 400ms ease; }
.contact-composition:not(.material-in-view) .material-mark-sweep,
html.motion-hidden .contact-composition .material-mark-sweep { animation-play-state: paused !important; }

@media (min-width: 1600px) { .contact-desk { padding-top: 180px; } }
@media (max-width: 1050px) and (min-width: 761px) {
  .contact-composition { gap: 32px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .contact-letter { padding: 26px; }
  .field-row { grid-template-columns: 1fr; gap: 24px; }
  .contact-fish { margin-top: 30px; }
}
@media (max-width: 760px) {
  .contact-desk { padding-top: 48px; }
  .contact-composition { grid-template-columns: 1fr; gap: 28px; padding-bottom: 38px; }
  .contact-introduction h1 { font-size: clamp(74px, 18vw, 110px); }
  .contact-invitation { margin-top: 15px; max-width: 11em; font-size: 24px; }
  .contact-fish { width: 72%; max-width: 340px; margin: -55px -2% -25px auto; }
  .contact-fish .material-mark { opacity: .68; }
  .contact-form-jump { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; width: fit-content; min-height: 44px; margin-top: 15px; color: #edc17d; font-size: 15px; text-underline-offset: 5px; }
  .contact-direct { padding-top: 0; }
  .contact-direct .contact-email { font-size: clamp(15px, 4vw, 22px); gap: 8px; }
  .contact-direct .contact-phone { font-size: 18px; }
  .contact-letter { margin: 0; padding: 27px 23px; scroll-margin-top: 88px; }
  .contact-colophon { grid-template-columns: 1fr auto; gap: 16px 22px; padding-bottom: 28px; }
  .contact-address { grid-column: 1; }
  .contact-parent { grid-column: 1; }
  .contact-colophon .reach-badge { grid-column: 2; grid-row: 1 / 3; }
}
@media (max-width: 420px) {
  .field-row { grid-template-columns: 1fr; gap: 24px; }
  .contact-letter-bottom { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-composition *, .contact-composition *::before { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .contact-desk, .contact-letter { background: Canvas; color: CanvasText; }
  .contact-fish, .contact-letter::before { display: none; }
  .contact-introduction { gap: 20px; }
  .contact-letter, .field input, .field textarea { border: 1px solid CanvasText; }
  .contact-desk p, .contact-letter-bottom > span { color: CanvasText; }
  .contact-desk a { color: LinkText !important; }
}

/* The existing confirmation route shares only these compact styles. */
.contact-page .opening { padding-bottom: clamp(28px, 4svh, 44px); }
.contact-page > .wrap { padding-bottom: clamp(64px, 8vw, 104px); }
.thanks-card { max-width: 40rem; padding: clamp(22px, 3vw, 40px); }
.thanks-note { margin: 0 0 20px; font-size: var(--t-read); }
@media print {
  .contact-desk { padding: 0; background: none; color: #000; }
  .contact-composition { display: block; padding: 0; }
  .contact-introduction h1 { font-size: 28pt; }
  .contact-fish, .contact-letter, .contact-form-jump { display: none; }
  .contact-direct a, .contact-colophon p { color: #000 !important; }
  .contact-colophon { margin-top: 8mm; }
}