.contact__form { display: grid; gap: 1rem; max-width: 34rem; margin: 1.6rem 0 2.4rem; }
/* the form writes on ruled lines: a name line, an email line, and lined paper for the message */
.field { display: grid; gap: 0.2rem; }
.field span { font-family: var(--font); font-size: 0.9rem; color: var(--ink-2); }
.field input, .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid color-mix(in oklab, var(--ink) 55%, transparent); padding: 0.4rem 0; font-family: var(--font-text); font-size: 1.0625rem; transition: border-color 250ms ease, box-shadow 250ms ease; }
.field input:hover, .field textarea:hover { border-bottom-color: color-mix(in oklab, var(--ink) 75%, transparent); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent); }
.field textarea { --rule: 1.65em; line-height: var(--rule); padding: 0; resize: vertical; min-height: calc(var(--rule) * 5 + 1px);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--rule) - 1px), color-mix(in oklab, var(--ink) 14%, transparent) calc(var(--rule) - 1px), color-mix(in oklab, var(--ink) 14%, transparent) var(--rule));
  background-attachment: local; }
.contact__form .btn { justify-self: start; min-width: 10rem; }

/* how to reach me: the address leads, set in the display face; the rest are grouped by what a visitor wants */
.reach { container-type: inline-size; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem clamp(1.5rem, 6cqi, 3.5rem); margin: 0.4rem 0 2.8rem; max-width: 46rem; }
.reach__mail { grid-column: 1 / -1; }
.reach__address { display: inline-block; font-family: var(--font); font-weight: 700; font-size: clamp(1.45rem, 6.2cqi, 2.7rem); line-height: 1.12; letter-spacing: -0.03em; overflow-wrap: anywhere; text-decoration: none; }
/* the address reads left to right, so on a right-to-left page it lines up with the column by its end */
.reach__mail:dir(rtl) .reach__address { text-align: end; }
/* the underline sits on the text, which is its own box so the beam can sweep both lines at once */
.reach__text { display: inline-block; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in oklab, var(--ink) 25%, transparent); transition: text-decoration-color 300ms ease; }
.reach__address:hover .reach__text, .reach__address:focus-visible .reach__text { text-decoration-color: var(--accent); }
.reach__also { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.5rem; margin-top: 0.7rem; color: var(--ink-2); }
.reach__also .linklike { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; color: var(--ink); font-weight: 500; }
.reach__also .icon { width: 1.05rem; height: 1.05rem; opacity: 0.8; }

/* copying sends the lighthouse beam across the address once: a warm copy of the letters, seen through a moving slit of light */
.reach__text { position: relative; }
.reach__text::after { content: none; position: absolute; inset: 0; pointer-events: none; color: color-mix(in oklab, var(--accent) 80%, #ffe6bf); text-decoration: none; opacity: 0;
  -webkit-mask-image: linear-gradient(100deg, transparent 38%, #000 50%, transparent 62%); mask-image: linear-gradient(100deg, transparent 38%, #000 50%, transparent 62%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
.reach__address.is-beam .reach__text::after { content: attr(data-text); content: attr(data-text) / ""; animation: reach-beam 1400ms cubic-bezier(0.45, 0, 0.35, 1) both; }
@keyframes reach-beam { 0% { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; } 100% { opacity: 1; -webkit-mask-position: 0% 0; mask-position: 0% 0; } }

.reach__group { border-top: 1px solid var(--hairline); padding-top: 0.9rem; }
.reach__group h3 { font-size: 1rem; font-weight: 600; color: var(--ink-2); margin: 0 0 0.3rem; }
.links { list-style: none; padding: 0; margin: 0; display: grid; }
.links a, .links .linklike { display: grid; grid-template-columns: 1.15rem auto; column-gap: 0.6rem; align-items: baseline; min-height: 44px; padding: 0.45rem 0; text-align: start; text-decoration: none; }
.links .icon { width: 1.15rem; height: 1.15rem; align-self: center; opacity: 0.75; transition: opacity 250ms ease; }
.links__name { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: transparent; transition: text-decoration-color 250ms ease; }
.links__where { grid-column: 2; font-size: 0.92rem; color: var(--ink-2); overflow-wrap: anywhere; }
.links a:hover .links__name, .links .linklike:hover .links__name, .links a:focus-visible .links__name, .links .linklike:focus-visible .links__name { text-decoration-color: var(--accent); }
.links a:hover .icon, .links .linklike:hover .icon { opacity: 1; }
@media (max-width: 600px) { .reach { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; } }
.end__terminal { margin-bottom: 3rem; }
/* the page ends on a sentence, set like the last line of a letter */
.end__close { font-style: italic; font-size: 1.35rem; margin-bottom: 0.8rem; }

@media (prefers-reduced-motion: reduce) {
  .reach__address.is-beam .reach__text::after { animation: none; }
}