/* contact.css — Contact: the hands above, the form on the axis of their gap, the address apart below it.
   Loaded after site.css; it restates what it needs of the form, so the shared rules can change underneath it. */

/* the hands' canvas: above the field and the objects, under every control, and never in the pointer's way */
#reach{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }

/* one column, centred in the room above the bottom navigation. contact.js then holds that top edge (.held, --lead) and
   moves it only on a resize, so a growing message extends downward and never moves the hands */
.contact{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; justify-content:safe center;
  padding:28px 16px calc(92px + env(safe-area-inset-bottom)); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:none; pointer-events:none; }
.contact.held{ justify-content:flex-start; padding-top:var(--lead, 28px); }
.contact::-webkit-scrollbar{ display:none; }
.contact > *{ pointer-events:auto; }
.contact > .contact-hands{ pointer-events:none; }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* the band the hands are drawn into: its box is the composition's measure */
.contact-hands{ flex:none; width:100%; height:clamp(160px, 30vh, 330px); }

/* the form: no card, no boxes. Three hairlines and a button, on the gap's axis */
.contact #contactCard{ position:relative; isolation:isolate; inset:auto; transform:none; flex:none; width:min(460px, 100%); margin:clamp(36px, 7.5vh, 76px) 0 0; padding:0;
  border:0; border-radius:0; background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  display:grid; grid-template-columns:1fr 1fr; column-gap:32px; row-gap:34px; color:var(--ink); }
.contact .cf{ position:relative; display:flex; flex-direction:column; gap:12px; min-width:0; }
.contact .cf-full{ grid-column:1 / -1; }
.contact .cf > span{ font:400 10px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); transition:color .3s var(--ease); }
.contact #contactCard .cf input, .contact #contactCard .cf textarea{ display:block; width:100%; margin:0; padding:0 0 10px; font:400 15px/1.55 var(--font-sans); color:var(--ink); caret-color:var(--accent);
  background:transparent; border:0; border-bottom:1px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius:0; outline:none; box-shadow:none; resize:none; cursor:text;
  -webkit-appearance:none; appearance:none; transition:border-color .3s var(--ease); }
.contact #contactCard .cf textarea{ min-height:calc(1.55em + 10px); overflow-y:hidden; }
/* a clearing in the field under the words: no edge, no surface, only fewer dots where you read */
.contact #contactCard::before{ content:""; position:absolute; inset:-56px -88px -48px; z-index:-1; pointer-events:none;
  background-color:var(--bg); -webkit-mask-image:radial-gradient(closest-side, #000 62%, transparent 100%); mask-image:radial-gradient(closest-side, #000 62%, transparent 100%);
  opacity:.82; transition:background-color .5s var(--ease); }
/* focus draws the line in ink, from the left, over the hairline */
.contact .cf::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:0 50%; transition:transform .5s var(--ease); pointer-events:none; }
.contact .cf:focus-within::after{ transform:scaleX(1); }
.contact .cf:focus-within > span{ color:var(--ink); }
.contact .cf input:-webkit-autofill{ -webkit-text-fill-color:var(--ink); caret-color:var(--accent); transition:background-color 100000s 0s, color 100000s 0s; }
.contact #contactCard .hp{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

.contact .cf-foot{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:-6px; min-height:40px; }
.contact #contactCard .note{ flex:1; min-width:0; min-height:0; font:400 10.5px/1.45 var(--font-mono); letter-spacing:.02em; color:var(--ink-muted); }
.contact #contactCard .send{ flex:none; font:500 12px/1 var(--font-sans); letter-spacing:.02em; padding:13px 24px; border-radius:999px; background:var(--ink-fill); color:var(--bg);
  transition:opacity .25s var(--ease), transform .3s var(--ease); }
.contact #contactCard .send:hover{ transform:translateY(-1px); }
.contact #contactCard .send:disabled{ opacity:.45; transform:none; }
.contact #contactCard .send:focus-visible, .contact .elsewhere a:focus-visible{ outline:1px solid var(--ink); outline-offset:4px; }

/* the other way in: a sentence, well clear of the form */
.contact .elsewhere{ position:relative; isolation:isolate; flex:none; margin:clamp(64px, 11vh, 112px) 0 0; max-width:100%; font:400 15px/1.5 var(--font-sans); color:var(--ink-muted); text-align:center; text-wrap:balance; }
.contact .elsewhere::before{ content:""; position:absolute; inset:-22px -40px; z-index:-1; pointer-events:none; background-color:var(--bg); opacity:.82; transition:background-color .5s var(--ease);
  -webkit-mask-image:radial-gradient(closest-side, #000 58%, transparent 100%); mask-image:radial-gradient(closest-side, #000 58%, transparent 100%); }
.contact .elsewhere a{ color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; text-decoration-color:color-mix(in srgb, var(--ink) 30%, transparent); transition:text-decoration-color .3s var(--ease); }
.contact .elsewhere a:hover{ text-decoration-color:var(--ink); }

/* arrival: the words settle in as the hands finish gathering */
@keyframes contactRise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes contactFade{ from{ opacity:0; } to{ opacity:1; } }
.contact #contactCard{ animation:contactRise 1s var(--ease) 1.1s both; }
.contact .elsewhere{ animation:contactRise 1s var(--ease) 1.4s both; }
@media (prefers-reduced-motion:reduce){ .contact #contactCard, .contact .elsewhere{ animation:contactFade .6s linear both; } }

/* phones: one field to a row, the hands smaller above */
@media (max-width:640px){
  .contact{ padding-top:20px; }
  .contact-hands{ height:clamp(120px, 21vh, 200px); }
  .contact #contactCard{ grid-template-columns:1fr; row-gap:26px; margin-top:clamp(20px, 3.5vh, 36px); }
  .contact .elsewhere{ margin-top:clamp(44px, 7vh, 72px); font-size:14px; }
  .contact #contactCard::before{ inset:-40px -16px -36px; } .contact .elsewhere::before{ inset:-20px -12px; } /* the clearings stay inside the screen */
  .contact #contactCard .cf input, .contact #contactCard .cf textarea{ font-size:16px; } /* 16 px: iOS does not zoom into the field */
}
@media (max-height:560px){ .contact-hands{ height:clamp(110px, 30vh, 170px); } .contact .elsewhere{ margin-top:40px; } }