/* contact.css: the home's contact note (index.html #contact, js/contact.js; SPEC.md "Contact, privacy, imprint"). Loaded
   after hero.css (tokens, the spine, the About me it follows). The end of his own words behind the mask: the label left
   of the line, the note right of it (phones: right of the edge spine), like the About me. The Architect's is a paper note
   taped to the page, handwritten labels, a ruled box for the message, a stamped SEND; the Ghostwriter's is a terminal,
   the line as its cyan gutter, fields as prompts, [x] flags for the topic. It arrives once as it scrolls in (.is-in):
   slapped on with PUNCH / scanned in on BREATH; Reduce Motion: a 200 ms fade. Two curves only. */

.ct {
  position: relative; padding: 16vh 0 0;
  display: grid; grid-template-columns: calc(var(--lx) * 1px) minmax(0, 1fr); align-items: start;
}
.ct-h {
  grid-column: 1; grid-row: 1; justify-self: end; margin: 1.3rem var(--arm) 0 0; text-align: right;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent);
}
.ct-sheet {
  grid-column: 2; grid-row: 1; justify-self: start; position: relative;
  width: min(36rem, calc(100% - var(--arm) - var(--gutter))); margin-left: var(--arm);
}
/* each world says its own lines (the other world's are not read either) */
html[data-world="ll"] .ct .ct-gw, html[data-world="gw"] .ct .ct-ll { display: none; }

.ct-prompt { display: none; }
.ct-tape { position: absolute; z-index: 1; display: block; width: 96px; height: 26px; pointer-events: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.ct-tape--a { left: -30px; top: 10px; rotate: -30deg; background: rgba(236, 229, 205, 0.74); }
.ct-tape--b { right: -28px; top: -8px; rotate: 34deg; background: rgba(255, 46, 126, 0.55); }

.ct-form { display: grid; gap: 1.4rem; margin-top: 1.5rem; }
.ct-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem 1.6rem; }
.ct-field { display: grid; gap: 0.3rem; min-width: 0; }
.ct-label { display: block; padding: 0; }
.ct-input {
  display: block; width: 100%; min-width: 0; margin: 0; padding: 0.45rem 0; border: 0; border-radius: 0; outline: none;
  font: inherit; color: inherit; background: transparent; -webkit-appearance: none; appearance: none;
  transition: border-color var(--d-hit) linear, box-shadow var(--d-short) var(--ease), background-color var(--d-hit) linear;
}
.ct-input:focus-visible { outline: none; }
.ct-text { resize: vertical; min-height: 10.2rem; max-height: 60vh; }
.ct-topic { min-width: 0; margin: 0; padding: 0; border: 0; }
.ct-topic > legend { margin-bottom: 0.6rem; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 0.6rem 0.75rem; }
.ct-chip { position: relative; display: inline-flex; cursor: pointer; }
/* the radio itself stays in the page (keyboard, screen readers), drawn by the span after it */
.ct-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ct-chip span { display: block; transition: transform var(--d-short) var(--punch), background-color var(--d-hit) linear, color var(--d-hit) linear, border-color var(--d-hit) linear, box-shadow var(--d-short) var(--ease); }
/* the bot's field: never seen, never tabbed to */
.ct-hp { position: absolute; left: -10000px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.ct-go { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; margin-top: 0.4rem; }
.ct-send { position: relative; flex: none; }
.ct-send[aria-disabled="true"] { cursor: progress; opacity: 0.62; }
.ct-status { flex: 1 1 12rem; min-height: 1.5em; }
.ct-status:empty { min-height: 0; }
.ct-done { margin-top: 1.5rem; outline: none; }
.ct-again { margin-top: 1.3rem; padding: 0.4rem 0; text-decoration: underline 1px; text-underline-offset: 0.4em; }
.ct-note { margin-top: 1.7rem; }
.ct-privacy { display: inline; transition: color var(--d-hit) linear; }
.ct-privacy i {
  position: relative; display: inline-block; width: 1.6rem; height: 9px; margin-left: 0.6em; vertical-align: 0.05em;
  background: linear-gradient(currentColor, currentColor) 0 50% / 62% 1px no-repeat; transition: background-size var(--d-mid) var(--ease);
}
.ct-privacy i::after { content: ''; position: absolute; right: 1px; top: 1px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateX(-0.6rem) rotate(45deg); transition: transform var(--d-mid) var(--ease); }
.ct-privacy:hover i, .ct-privacy:focus-visible i { background-size: 100% 1px; }
.ct-privacy:hover i::after, .ct-privacy:focus-visible i::after { transform: rotate(45deg); }
.ct .draft-tag { margin: 1rem 0 0; }

/* ---------------------------------------------------------------- the Architect: a paper note, taped on */
html[data-world="ll"] .ct-sheet {
  rotate: 0.5deg;
  padding: 1.9rem 2.3rem 1.7rem 2.2rem;
  color: #17181c;
  background: #fbfaf4 var(--grain);
  box-shadow: 0 1px 0 rgba(11, 11, 12, 0.06), 0 24px 38px -24px rgba(11, 11, 12, 0.55);
}
html[data-world="ll"] .ct-lead { font-family: var(--hand); font-weight: 500; font-size: 1.72rem; line-height: 1.12; text-wrap: pretty; }
html[data-world="ll"] .ct-label { font-family: var(--hand); font-weight: 600; font-size: 1.32rem; line-height: 1.1; color: #4a4740; }
html[data-world="ll"] .ct-input { font-family: var(--body); font-size: 1.02rem; line-height: 1.5; color: #17181c; border-bottom: 1.5px solid #17181c; }
html[data-world="ll"] .ct-input:focus {
  border-bottom-color: #ff2e7e; box-shadow: 0 1.5px 0 #ff2e7e;
  background-color: rgba(255, 210, 63, 0.2);
}
/* the message: a ruled box (the rules scroll with the words) */
html[data-world="ll"] .ct-text {
  --rule: 1.7rem;
  padding: 0.35rem 0.8rem 0.5rem; line-height: var(--rule); border: 1.5px solid #17181c;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--rule) - 1px), rgba(88, 124, 168, 0.32) calc(var(--rule) - 1px) var(--rule)) local;
  background-origin: content-box; background-color: rgba(255, 255, 255, 0.55);
}
html[data-world="ll"] .ct-text:focus { border-color: #17181c; box-shadow: 4px 4px 0 #ff2e7e; background-color: #fff; }
html[data-world="ll"] .ct-input[aria-invalid="true"] { border-bottom-color: #b23a00; box-shadow: 0 2px 0 #b23a00; }
html[data-world="ll"] .ct-text[aria-invalid="true"] { border-color: #b23a00; box-shadow: 4px 4px 0 rgba(178, 58, 0, 0.35); }
html[data-world="ll"] .ct-chip span {
  padding: 0.55rem 1rem 0.5rem; font: 600 0.6rem/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase;
  color: #17181c; background: #fbfaf4; border: 1.5px solid #17181c; transform: rotate(var(--r, -1.2deg));
}
html[data-world="ll"] .ct-chip:nth-child(2) span { --r: 0.9deg; }
html[data-world="ll"] .ct-chip:nth-child(3) span { --r: -0.5deg; }
html[data-world="ll"] .ct-chip:hover span { transform: rotate(0deg) translateY(-1px); }
html[data-world="ll"] .ct-chip input:checked + span { background: #ffd23f; box-shadow: 3px 3px 0 #17181c; transform: rotate(0deg) translate(-1px, -1px); }
html[data-world="ll"] .ct-chip input:focus-visible + span { outline: 2px solid #ff2e7e; outline-offset: 3px; }
html[data-world="ll"] .ct-send {
  padding: 0.85rem 1.75rem 0.8rem; font: 400 1.55rem/1 var(--display); letter-spacing: 0.07em;
  color: #f4f4f0; background: #0b0b0c; box-shadow: 5px 5px 0 #ff2e7e; transform: skewX(-8deg);
  transition: transform var(--d-short) var(--punch), box-shadow var(--d-short) var(--punch), opacity var(--d-hit) linear;
}
html[data-world="ll"] .ct-send > span { display: block; transform: skewX(8deg); }
html[data-world="ll"] .ct-send:hover, html[data-world="ll"] .ct-send:focus-visible { transform: skewX(-8deg) translate(-3px, -3px); box-shadow: 9px 9px 0 #ff2e7e; }
html[data-world="ll"] .ct-send:active { transform: skewX(-8deg) translate(2px, 2px); box-shadow: 2px 2px 0 #ff2e7e; }
html[data-world="ll"] .ct-send:focus-visible { outline: 2px solid #0b0b0c; outline-offset: 6px; }
html[data-world="ll"] .ct-status { font-family: var(--hand); font-weight: 600; font-size: 1.3rem; line-height: 1.15; color: #4a4740; }
html[data-world="ll"] .ct-status[data-tone="bad"] { color: #9a3300; }
html[data-world="ll"] .ct-thanks {
  font-family: var(--hand); font-weight: 600; font-size: 2.1rem; line-height: 1.12; color: #17181c; text-wrap: pretty;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html[data-world="ll"] .ct-thanks span { background: linear-gradient(transparent 58%, rgba(255, 210, 63, 0.7) 58%, rgba(255, 210, 63, 0.7) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
html[data-world="ll"] .ct-again { font: 600 0.62rem/1.4 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: #17181c; text-decoration-color: #ff2e7e; }
html[data-world="ll"] .ct-again:focus-visible { outline: 2px solid #0b0b0c; outline-offset: 4px; }
html[data-world="ll"] .ct-privacy { font: 500 0.6rem/1.8 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: #4a4740; }
html[data-world="ll"] .ct-privacy:hover, html[data-world="ll"] .ct-privacy:focus-visible { color: #0b0b0c; }
html[data-world="ll"] .ct-privacy:focus-visible { outline: 2px solid #0b0b0c; outline-offset: 4px; }
html[data-world="ll"] .ct .draft-tag { color: #9a3300; }
html[data-world="ll"] .ct-input:-webkit-autofill { -webkit-text-fill-color: #17181c; box-shadow: inset 0 0 0 100px #fbfaf4, 0 1.5px 0 #17181c; }

/* ---------------------------------------------------------------- the Ghostwriter: a terminal, the line as its gutter */
html[data-world="gw"] .ct-tape { display: none; }
html[data-world="gw"] .ct-sheet {
  padding: 1.15rem 1.6rem 1.4rem 1.5rem; border-radius: 6px; border-left: 2px solid var(--cyan); color: #c3e8ee;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px), rgba(3, 7, 10, 0.92);
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.2), -1px 0 12px rgba(0, 229, 255, 0.35), 0 0 36px rgba(0, 229, 255, 0.07);
}
html[data-world="gw"] .ct-prompt { display: block; margin-bottom: 0.95rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--gw-dim); }
html[data-world="gw"] .ct-gt { color: var(--cyan); margin-right: 0.3em; text-shadow: 0 0 8px rgba(0, 229, 255, 0.6); }
html[data-world="gw"] .ct-lead { font-family: var(--mono); font-size: 0.84rem; line-height: 1.85; letter-spacing: 0.02em; text-wrap: pretty; }
html[data-world="gw"] .ct-form { gap: 1.25rem; }
html[data-world="gw"] .ct-label { font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: lowercase; color: var(--gw-dim); }
html[data-world="gw"] .ct-label::after { content: ':'; }
html[data-world="gw"] .ct-input {
  font-family: var(--mono); font-size: 0.9rem; line-height: 1.6; letter-spacing: 0.02em; color: #dffcff; caret-color: var(--cyan);
  border-bottom: 1px solid rgba(0, 229, 255, 0.32);
}
html[data-world="gw"] .ct-input:focus { border-bottom-color: var(--cyan); box-shadow: 0 1px 0 var(--cyan), 0 8px 14px -10px rgba(0, 229, 255, 0.8); }
html[data-world="gw"] .ct-text { padding: 0.55rem 0.75rem; border: 1px solid rgba(0, 229, 255, 0.26); border-radius: 3px; background: rgba(0, 0, 0, 0.3); }
html[data-world="gw"] .ct-text:focus { border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.35), 0 0 18px rgba(0, 229, 255, 0.18); }
html[data-world="gw"] .ct-input[aria-invalid="true"] { border-color: #ff6b9a; box-shadow: 0 1px 0 #ff6b9a; }
html[data-world="gw"] .ct-chip span { padding: 0.45rem 0.8rem; font: 500 0.7rem/1.2 var(--mono); letter-spacing: 0.08em; text-transform: lowercase; color: var(--gw-dim); border: 1px solid rgba(0, 229, 255, 0.24); border-radius: 3px; }
html[data-world="gw"] .ct-chip span::before { content: '[ ] '; white-space: pre; color: rgba(0, 229, 255, 0.55); }
html[data-world="gw"] .ct-chip:hover span { color: #dffcff; border-color: rgba(0, 229, 255, 0.5); }
html[data-world="gw"] .ct-chip input:checked + span { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 12px rgba(0, 229, 255, 0.3), inset 0 0 10px rgba(0, 229, 255, 0.1); text-shadow: 0 0 8px rgba(0, 229, 255, 0.55); }
html[data-world="gw"] .ct-chip input:checked + span::before { content: '[x] '; color: var(--cyan); }
html[data-world="gw"] .ct-chip input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 3px; }
html[data-world="gw"] .ct-send {
  padding: 0.85rem 1.4rem; font: 600 0.7rem/1 var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--cyan);
  border: 1px solid rgba(0, 229, 255, 0.7); border-radius: 3px; box-shadow: 0 0 18px rgba(0, 229, 255, 0.25), inset 0 0 14px rgba(0, 229, 255, 0.08);
  transition: box-shadow var(--d-mid) var(--breath), background-color var(--d-mid) var(--breath), opacity var(--d-hit) linear;
}
html[data-world="gw"] .ct-send > span::before { content: '> '; white-space: pre; }
html[data-world="gw"] .ct-send:hover, html[data-world="gw"] .ct-send:focus-visible { background-color: rgba(0, 229, 255, 0.08); box-shadow: 0 0 30px rgba(0, 229, 255, 0.5), inset 0 0 18px rgba(0, 229, 255, 0.16); }
html[data-world="gw"] .ct-send:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
html[data-world="gw"] .ct-status { font-family: var(--mono); font-size: 0.74rem; line-height: 1.6; letter-spacing: 0.04em; color: var(--cyan); }
html[data-world="gw"] .ct-status:not(:empty)::before { content: '> '; white-space: pre; }
html[data-world="gw"] .ct-status[data-tone="bad"] { color: #ff8fb1; }
html[data-world="gw"] .ct-thanks { font-family: var(--mono); font-size: 0.92rem; line-height: 1.8; letter-spacing: 0.02em; color: #dffcff; }
html[data-world="gw"] .ct-thanks::before { content: '> '; white-space: pre; color: var(--cyan); text-shadow: 0 0 8px rgba(0, 229, 255, 0.6); }
html[data-world="gw"] .ct-thanks::after {
  content: ''; display: inline-block; width: 0.6em; height: 1.1em; margin-left: 0.35em; vertical-align: -0.2em;
  background: #dffcff; box-shadow: 0 0 4px #00e5ff, 0 0 10px rgba(0, 229, 255, 0.7);
}
/* the caret blinks while the thank-you shows, never under Reduce Motion */
html[data-world="gw"]:not([data-rm="1"]) .ct[data-state="sent"] .ct-thanks::after { animation: ctBlink 1.06s steps(1, end) infinite; }
@keyframes ctBlink { 50% { opacity: 0; } }
html[data-world="gw"] .ct-again { font: 500 0.7rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: lowercase; color: var(--cyan); text-decoration-color: rgba(0, 229, 255, 0.45); }
html[data-world="gw"] .ct-again:hover, html[data-world="gw"] .ct-again:focus-visible { text-decoration-color: var(--cyan); text-shadow: 0 0 10px rgba(0, 229, 255, 0.55); }
html[data-world="gw"] .ct-again:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
html[data-world="gw"] .ct-privacy { font: 400 0.7rem/1.8 var(--mono); letter-spacing: 0.04em; color: var(--gw-dim); }
html[data-world="gw"] .ct-privacy:hover, html[data-world="gw"] .ct-privacy:focus-visible { color: var(--cyan); text-shadow: 0 0 10px rgba(0, 229, 255, 0.5); }
html[data-world="gw"] .ct-privacy:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
html[data-world="gw"] .ct .draft-tag { color: var(--cyan); }
html[data-world="gw"] .ct-input:-webkit-autofill { -webkit-text-fill-color: #dffcff; box-shadow: inset 0 0 0 100px #03070a, 0 1px 0 rgba(0, 229, 255, 0.32); caret-color: var(--cyan); }

/* ---------------------------------------------------------------- the arrival (JS only: without it the note simply stands) */
.ct[data-js] .ct-h { opacity: 0; transform: translateY(14px); transition: opacity var(--d-long) var(--breath), transform var(--d-long) var(--ease); }
.ct[data-js].is-in .ct-h { opacity: 1; transform: none; }
.ct[data-js] .ct-sheet { opacity: 0; }
.ct[data-js].is-in .ct-sheet { opacity: 1; }
html[data-world="ll"] .ct[data-js] .ct-sheet { transform: translateY(30px) rotate(-3deg) scale(1.04); transition: opacity 180ms linear 80ms, transform 520ms var(--punch) 80ms; }
html[data-world="ll"] .ct[data-js].is-in .ct-sheet { transform: none; }
html[data-world="ll"] .ct[data-js] .ct-tape { opacity: 0; scale: 1.6; transition: opacity 120ms linear 380ms, scale 320ms var(--punch) 380ms; }
html[data-world="ll"] .ct[data-js].is-in .ct-tape { opacity: 1; scale: 1; }
html[data-world="gw"] .ct[data-js] .ct-sheet { clip-path: inset(-3rem -3rem 100% -3rem); transition: opacity 320ms linear 120ms, clip-path 1100ms var(--breath) 120ms; }
html[data-world="gw"] .ct[data-js].is-in .ct-sheet { clip-path: inset(-3rem -3rem -3rem -3rem); }
html[data-rm="1"] .ct[data-js] .ct-h, html[data-rm="1"] .ct[data-js] .ct-sheet, html[data-rm="1"] .ct[data-js] .ct-tape {
  transform: none; scale: none; clip-path: none; transition: opacity 200ms linear;
}
html[data-rm="1"] .ct[data-js].is-in .ct-sheet { clip-path: none; }
html[data-rm="1"] .ct-input, html[data-rm="1"] .ct-chip span, html[data-rm="1"] .ct-send, html[data-rm="1"] .ct-privacy i, html[data-rm="1"] .ct-privacy i::after { transition: none; }

/* ---------------------------------------------------------------- phones: right of the edge spine, one column */
@media (max-width: 719.98px) {
  .ct { display: block; padding: 11vh var(--gutter) 0 calc(var(--lx) * 1px + var(--arm)); }
  .ct-h { justify-self: auto; margin: 0 0 1.1rem; text-align: left; }
  .ct-sheet { width: auto; margin: 0 0.4rem 0 0; }
  .ct-pair { grid-template-columns: minmax(0, 1fr); }
  /* 16 px at least: iOS zooms the page into a smaller field */
  html[data-world] .ct .ct-input { font-size: 16px; }
  html[data-world="ll"] .ct-input:not(.ct-text) { padding: 0.25rem 0; }
  .ct-note { margin-top: 1.4rem; }
  .ct-tape { width: 72px; height: 22px; }
  .ct-tape--a { left: -10px; top: -8px; rotate: -20deg; }
  .ct-tape--b { right: -4px; top: -10px; rotate: 24deg; }
  html[data-world="ll"] .ct-sheet { rotate: 0.3deg; padding: 1.45rem 1.2rem 1.35rem 1.25rem; }
  html[data-world="ll"] .ct-lead { font-size: 1.45rem; }
  html[data-world="ll"] .ct-thanks { font-size: 1.75rem; }
  html[data-world="ll"] .ct-send { font-size: 1.4rem; }
  html[data-world="gw"] .ct-sheet { padding: 1rem 1.05rem 1.2rem 1.05rem; }
  html[data-world="gw"] .ct-lead { font-size: 0.8rem; line-height: 1.8; }
}