/* Contact page. Loaded after talks.css (tokens, menu, .btn) and studio.css; the footer has its own stylesheet.
   A message card on the black ground, in the site's own lines: a dark panel with a thin border, labels in small
   capitals, the white button. Behind it a canvas where what you write grows a circuit out of the card's edges: thin
   traces in the data colours (amber, coral, orchid, warm white), pads where sentences end, and the growing tip as the
   one crimson dot. contact.js draws it and builds the email. */
.ct-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ct-page { position: relative; display: grid; place-items: center; min-height: 100svh; padding-block: clamp(6.5rem, 10vw, 8rem) clamp(3.5rem, 7vw, 6rem); overflow: hidden; }
.ct-circuit { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.ct-center { position: relative; z-index: 1; display: grid; justify-items: center; width: 100%; }

/* The card. Solid enough that the circuit only lives around it. */
.ct-card { box-sizing: border-box; width: min(100%, 44rem); padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid rgba(250, 250, 250, 0.16); border-radius: 0.6rem; background: rgba(8, 8, 8, 0.94); }
.ct-top { margin: 0 0 1.2rem; font: 500 0.68rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.ct-live::before { content: ""; display: inline-block; width: 0.42rem; height: 0.42rem; margin-right: 0.55rem; border-radius: 50%; background: var(--accent); vertical-align: 0.05em; }
.ct-row { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); align-items: baseline; gap: 0.6rem 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.ct-row:last-of-type { border-bottom: 0; }
.ct-key { font: 500 0.68rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.ct-row:focus-within { border-bottom-color: rgba(250, 250, 250, 0.4); }
.ct-row:focus-within .ct-key { color: var(--ink); }
.ct-to { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; font-family: var(--display); font-size: 1.25rem; }
.ct-mail { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 1px; overflow-wrap: anywhere; }
.ct-mail:hover, .ct-mail:focus-visible { border-bottom-width: 2px; }
.ct-card input, .ct-card textarea { width: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1.1rem; line-height: 1.5; }
.ct-card textarea { min-height: 8rem; max-height: 45svh; resize: vertical; field-sizing: content; }
.ct-card input::placeholder, .ct-card textarea::placeholder { color: var(--ink-3); }
.ct-card input:focus, .ct-card textarea:focus { outline: none; }

/* Send and Copy share one shape: small rectangles with square corners, like the site's buttons. Send is the solid one. */
.ct-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.4rem; margin-top: 1.3rem; }
.ct-send { display: inline-flex; align-items: center; padding: 0.55rem 1.3rem; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); font: 500 0.92rem/1.2 var(--body); text-decoration: none; }
.ct-send:hover, .ct-send:focus-visible { background: #fff; border-color: #fff; }
.ct-foot .ct-note { flex: 1 1 16rem; }
.ct-copy { display: inline-flex; align-items: center; padding: 0.38rem 0.6rem; border: 1px solid var(--rule); background: transparent; color: var(--ink-2); font: 500 0.68rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.ct-copy:hover, .ct-copy:focus-visible { color: var(--ink); border-color: rgba(250, 250, 250, 0.4); }
.ct-copy.is-done { color: var(--ink); border-color: var(--accent); }
.ct-note { margin: 0; color: var(--ink-3); font-size: 0.85rem; line-height: 1.5; }

@media (max-width: 760px) {
  .ct-page { padding-block: 6.5rem 7rem; }
  .ct-row { grid-template-columns: minmax(0, 1fr); gap: 0.45rem; }
}