/* Contact, Hanging (2026-10-10). He picked "Hanging" from the /contacts board ("I like this but make sure to add it
   with no bugs") after the Bookend read as "repetitive like the landing page" (kept: m-contact-bookend.html, at
   /contact-bookend; the rows before it at /contact-rows). His four channels hang like tags on green strings, the
   line's colour, swaying; brush the mouse through them and they swing away; pointing at one lights it in its colour.
   "let's talk" (pink, the one word pink is for) big at the bottom left, on phones above them. The footer follows.
   m-contact.js hangs them, places them so none leaves the screen or covers another, and swings them. */
.contact { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding: 0 32px; overflow-x: clip; color: var(--white); }
/* the room they hang in, edge to edge so a swing can reach the side of the screen; clipped, so nothing ever hangs
   off it (m-contact.js makes it taller when the tags and "let's talk" need more than the screen) */
.c-stage { position: relative; flex: 1 0 auto; margin: 0 -32px; overflow: hidden; }

/* "let's talk", big at the bottom left; its arrow drawn as a line so it can draw itself and poke */
.c-title { position: absolute; z-index: 5; left: 32px; bottom: 6vh; margin: 0; font-size: clamp(56px, 10vw, 180px); font-weight: 800; letter-spacing: -.035em; line-height: 1;
  font-variation-settings: 'opsz' 96; font-kerning: none; }
.c-talk { display: inline-block; color: #ec0b8d; text-decoration: none; white-space: nowrap; outline: none; }
.c-talk .tc { display: inline-block; transform-origin: 50% 100%; }
.c-talk .pa { width: .58em; height: .58em; margin-left: .12em; vertical-align: .04em; }
.c-talk .pa path { stroke-width: 3.2; }
.c-talk:focus-visible { outline: 3px solid #ec0b8d; outline-offset: 8px; border-radius: 14px; }

/* the four. Before m-contact.js hangs them (or if it never runs) they sit in a plain row */
.c-tags { position: absolute; z-index: 2; left: 32px; right: 32px; top: 12vh; display: flex; flex-wrap: wrap; gap: 16px; }
.c-tags.hung { inset: 0; display: block; pointer-events: none; }
.hang { position: absolute; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }   /* its own layer: a sway never repaints */
/* the string: comes down out of the dark above (it fades in at the top) to the tag's eyelet */
.string { position: absolute; left: -1px; top: 0; width: 2px; border-radius: 1px; background: linear-gradient(rgba(155, 197, 61, 0), #9bc53d min(90px, 60%)); }
.c-tag { position: relative; display: flex; flex-direction: column; align-items: center; padding: .52em .56em .36em; background: #15191b; border: 1px solid rgba(244, 241, 234, .16);
  border-radius: .2em; color: var(--white); text-decoration: none; font-size: clamp(26px, 3.3vw, 58px); font-weight: 800; letter-spacing: -.035em; line-height: 1;
  font-variation-settings: 'opsz' 96; white-space: nowrap; outline: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .25s, color .25s, border-color .25s; }
.c-tags.hung .c-tag { position: absolute; left: 0; top: 0; transform: translateX(-50%); pointer-events: auto; }
/* the eyelet the string ties into */
.c-tag::before { content: ''; position: absolute; left: 50%; top: .13em; width: .2em; height: .2em; margin-left: -.1em; border-radius: 50%; background: #090b0c; box-shadow: inset 0 0 0 2px #9bc53d; }
.t-w { display: inline-flex; align-items: center; gap: .24em; }
.t-ico { flex: none; width: .74em; height: .74em; }
.t-ico svg { display: block; width: 100%; height: 100%; overflow: visible; }
.t-m { margin-top: .5em; font: 500 13px/1.3 'Azeret Mono', monospace; letter-spacing: .02em; opacity: .72; }   /* 72%: reads on paper too (55% was 4.3:1); the audit's items 6 and 12 */
/* lit (pointed at, focused, tapped): the tag takes its colour, the words and the icon go dark */
.hang.on .c-tag { background: var(--cc); border-color: var(--cc); color: #090b0c; }
.hang.on .t-m { opacity: .8; }
.hang.on .t-ico svg > g { fill: #090b0c; }
.hang.on .t-ico svg [stroke^="url"] { stroke: #090b0c; }
.hang.on .t-ico svg [stroke="#090b0c"] { stroke: var(--cc); stroke-opacity: 1; }   /* the fold, the flap, the tick: in the tag's colour */
.c-tag:focus-visible { outline: 2px solid var(--cc); outline-offset: 4px; }

/* the end of the page is the footer now (m-footer.css, he picked "A sign off" on /footers, 2026-10-11), with back to top */

@media (max-width: 760px) {
  /* as tall as what's in it, not a screen (he, 2026-10-10: "lower black part is very empty"): with "let's talk" on top,
     a full screen left a hole under the tags; m-contact.js sizes the room */
  .contact { padding: 0 18px; min-height: 0; }
  .c-stage { margin: 0 -18px; }
  .c-title { left: 18px; top: 96px; bottom: auto; font-size: 18vw; }   /* above the tags on phones; m-contact.js sets the exact top under the nav */
  .c-tags { left: 18px; right: 18px; }
  .c-tag { font-size: 22px; }
  .t-m { font-size: 13px; }
}