/* Closing contact band, shared by the homepage and About page */
:root{--band:#1c1f24;--band-2:#262a31;--band-fg:#eeebe4;--band-lead:#a9adb5;--band-rule:#353a42;--band-blue:#8fbcef}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--band:#0f1114;--band-2:#1a1d22;--band-fg:#eeebe4;--band-lead:#a3a7b0;--band-rule:#2b2f36;--band-blue:#8fbcef}}
:root[data-theme="dark"]{--band:#0f1114;--band-2:#1a1d22;--band-fg:#eeebe4;--band-lead:#a3a7b0;--band-rule:#2b2f36;--band-blue:#8fbcef}

.contact{padding-top:0;margin-top:120px;background:var(--band);color:var(--band-fg);
  margin-left:calc(-1 * max(16px, env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(16px, env(safe-area-inset-right,0px)));
  padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px))}
.contact .in{max-width:1040px;margin:0 auto;padding-block:96px 72px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:end}
.contact h2{font-family:var(--display);font-weight:400;font-size:clamp(38px,5.4vw,64px);line-height:1.06;margin:0;text-wrap:balance}
.contact h2 .u{position:relative;white-space:nowrap;color:var(--band-blue)}
.contact h2 .u svg{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.34em;overflow:visible}
.contact h2 .u path{fill:none;stroke:var(--band-blue);stroke-width:3;stroke-linecap:round}
.contact p.sub{margin:22px 0 0;color:var(--band-lead);font-size:18px;max-width:46ch}
.mailrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:30px}
.mailbtn{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;background:var(--band-fg);color:var(--band);font:600 16px var(--body);text-decoration:none;user-select:all}
.copybtn{padding:12px 18px;border-radius:999px;border:1px solid var(--band-rule);background:transparent;color:var(--band-fg);font:500 15px var(--body);cursor:pointer}
.copybtn:hover{border-color:var(--band-blue);color:var(--band-blue)}
.mailbtn:focus-visible,.copybtn:focus-visible,.clist a:focus-visible{outline:2px solid var(--band-blue);outline-offset:3px}
.clist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px;font-size:16px}
.clist li{display:flex;align-items:center;gap:14px}
.clist svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--band-blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.clist a{color:inherit;text-decoration:none;border-bottom:1px solid var(--band-rule)}
.clist a:hover{border-color:var(--band-blue)}
.cfoot{border-top:1px solid var(--band-rule)}
.cfoot .in2{max-width:1040px;margin:0 auto;padding-block:22px 28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:14px;color:var(--band-lead)}
.cfoot a{color:var(--band-lead);text-decoration:none;margin-left:22px}
.cfoot a:first-child{margin-left:0}
.cfoot a:hover{color:var(--band-fg)}
@media (max-width:760px){.contact .in{grid-template-columns:1fr;gap:40px;padding-block:64px 48px}}
/* pencil underline under "human." draws in once, then floats */
.contact h2 .u svg{animation:cfloat 5s ease-in-out infinite}
@keyframes cfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
.contact h2 .u.draw path{stroke-dasharray:420;animation:cdraw 1.1s .15s ease-out both}
@keyframes cdraw{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.contact h2 .u svg,.contact h2 .u.draw path{animation:none}}
/* graph-paper grid revealed around the cursor, like the homepage hero */
.contact{position:relative;overflow:hidden;isolation:isolate}
.contact > .in,.contact > .cfoot{position:relative;z-index:1}
.cfx{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background-image:linear-gradient(rgba(143,188,239,.2) 1px, transparent 1px),linear-gradient(90deg, rgba(143,188,239,.2) 1px, transparent 1px);
  background-size:28px 28px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(circle 260px at var(--mx,50%) var(--my,50%), #000 0%, rgba(0,0,0,.55) 40%, transparent 72%);
  mask-image:radial-gradient(circle 260px at var(--mx,50%) var(--my,50%), #000 0%, rgba(0,0,0,.55) 40%, transparent 72%)}
.cfx::after{content:"";position:absolute;inset:0;background:radial-gradient(circle 180px at var(--mx,50%) var(--my,50%), rgba(143,188,239,.08), transparent 70%)}
.cfx.on{opacity:1}
@media (hover:none),(prefers-reduced-motion:reduce){.cfx{display:none}}