/* Contact, sheet A-300. Prefix ct-.
   One sheet, the title block along its bottom edge. The address large on the left (columns 1 to 6), the note on the
   right (columns 8 to 12), written by filling in a sentence. Underlines only, no boxes. The address and the note's
   first line share one baseline; "Contact" and, once a note is prepared, its header line share the row above. */

.ct {
  position: relative;
  --fe: calc((6 * var(--col) + 5 * var(--gap)) / 16.2);    /* the address */
  --fs: clamp(20px, 1.5vw, 34px);                           /* the note */
}
.ct-sheet {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding-top: calc(var(--hd) + 24px);
}
.ct-code { margin: 0 var(--m); color: var(--soft); }
.ct-body {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline;
  /* Lower on tall screens so the sheet does not leave a dead band above the title block; set by the viewport
     only, so preparing a note never moves the address. */
  padding: clamp(64px, max(17vh, 50vh - 360px), 420px) var(--m) 0;
}
.ct-sheet .tb { margin-top: auto; }
.ct-label { grid-column: 1 / span 6; grid-row: 1; margin: 0 0 var(--s4); color: var(--ink); }

/* ------------------------------------------------------------------ the address */
.ct-to { grid-column: 1 / span 6; grid-row: 2; }
.ct-email {
  margin: 0; font-family: var(--f-body); font-weight: 300; color: var(--ink);
  font-size: var(--fe); line-height: 1.1; letter-spacing: -.012em;
  white-space: nowrap; user-select: all; -webkit-user-select: all; cursor: text;
}
.ct-row { margin: var(--s4) 0 0; display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; }
.ct-city { margin: var(--s7) 0 0; font-size: clamp(17px, 1.1vw, 20px); color: var(--soft); }

/* Text buttons: Jost caps, a hairline drawn in on hover, like the navigation. */
.ct-btn {
  position: relative; font-family: var(--f-display); font-size: 12.5px; letter-spacing: .24em; text-transform: uppercase;
  padding: 6px 0; color: var(--ink); white-space: nowrap;
}
.ct-btn::after {
  content: ""; position: absolute; left: 0; right: .24em; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out);
}
.ct-btn:hover::after, .ct-btn:focus-visible::after { transform: scaleX(1); }
.ct-btn:focus-visible { outline: none; }
.ct-quiet { color: var(--soft); }

/* ------------------------------------------------------------------ the note */
.ct-from { grid-column: 8 / span 5; grid-row: 2; min-width: 0; position: relative; }
.ct-stack { position: relative; display: grid; }
.ct-stack > form, .ct-stack > section { grid-area: 1 / 1; min-width: 0; }
.ct-form { margin: 0; }
.ct-sentence {
  margin: 0; font-family: var(--f-body); font-weight: 400; color: var(--ink);
  font-size: var(--fs); line-height: 1.8; letter-spacing: -.003em;
}
.ct-more { margin-top: var(--s3); }

/* A blank: an underline the width of what is written in it. */
.ct-nb { white-space: nowrap; }
.ct-blank {
  display: inline-block; vertical-align: baseline; max-width: 100%;
  font: inherit; color: var(--ink); background: transparent;
  height: 1.3em; padding: 0 4px; margin: 0 .04em;
  border: 0; border-bottom: 1px solid var(--soft); border-radius: 0;
  outline: none; box-shadow: none; -webkit-appearance: none; appearance: none;
  transition: border-color .4s ease;
}
.ct-blank::placeholder { color: var(--mute); opacity: 1; font-weight: 300; }
.ct-blank:focus { border-bottom-color: var(--ink); }
.ct-blank:focus::placeholder { color: var(--line); }
.ct-blank.is-filled { border-bottom-color: var(--ink); }

/* The four choices, written into the sentence. The chosen one in ink and underlined, the others recede. */
.ct-opts { position: relative; }
.ct-radio { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ct-opt {
  display: inline-block; height: 1.3em; line-height: 1.3em; cursor: pointer;
  color: var(--soft); border-bottom: 1px solid transparent; transition: color .35s ease, border-color .35s ease;
  white-space: nowrap;
}
.ct-sep { font-style: normal; color: var(--soft); transition: color .35s ease; }
.has-choice .ct-sep { color: var(--mute); }
.ct-opt:hover { color: var(--ink); }
.has-choice .ct-opt { color: var(--mute); border-bottom-color: transparent; }
.has-choice .ct-opt:hover { color: var(--soft); }
.ct-radio:checked + .ct-opt { color: var(--ink); border-bottom-color: var(--ink); }
.ct-radio:focus-visible + .ct-opt { color: var(--ink); border-bottom-color: var(--mute); }
.ct-radio:checked:focus-visible + .ct-opt { border-bottom-color: var(--ink); }

.ct-act { margin: var(--s6) 0 0; display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; }
#ct-msg { transition: color .3s ease; }
#ct-msg.is-ask { color: var(--ink); }

/* ------------------------------------------------------------------ the transmittal */
/* Its header: one mono line of pairs in the label row, opposite "Contact". Annotation, not a table.
   Out of flow: the note's column is lowered by the difference of the two first baselines (the address and the
   note share one), so the header is lifted by the same amount to sit on the label's line. */
.ct-head {
  position: absolute; left: 0; right: 0; margin: 0;
  bottom: calc(100% + var(--s4) + .925 * var(--fe) - 1.275 * var(--fs) - 2px);
  font-family: var(--f-mono); font-size: 12px; line-height: 1.6; color: var(--ink); letter-spacing: .01em;
  transition: opacity .3s ease;
}
.ct-head.is-gone { opacity: 0; }
/* Pairs are kept whole and spaced apart; a wrapped line never ends on a separator. */
.ct-hp { display: inline-block; white-space: nowrap; margin-right: 1.9em; }
.ct-hp:last-child { margin-right: 0; }
.ct-hp em { font-style: normal; color: var(--mute); text-transform: uppercase; letter-spacing: .08em; margin-right: .35em; }
.ct-hp b { font-weight: 400; }

.ct-tx { margin: 0; outline: none; }
.ct-tx .sr:focus { outline: none; }
/* The composed note takes the sentence's place, at its size and on its baseline. */
.ct-tx-body { margin: 0; font-size: var(--fs); line-height: 1.8; letter-spacing: -.003em; overflow-wrap: anywhere; user-select: text; }
.ct-tx .ct-act { gap: var(--s5); }
.ct-tx-warn { margin: var(--s4) 0 0; font-size: 15px; line-height: 1.5; color: var(--soft); max-width: 46ch; }
.ct-narrow-only { display: none; }

/* The parallel rule overshoots the note to the left, far enough that the square can ride it. */
.ct-rule { position: absolute; left: -40px; right: -24px; top: 0; height: 1px; background: var(--ink); opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------------ narrower screens */
@media (max-width: 1100px) {
  .ct-label { grid-column: 1 / -1; }
  .ct-to { grid-column: 1 / -1; }
  .ct { --fe: clamp(22px, calc((100vw - 2 * var(--m)) / 15), 64px); }
  .ct-city { margin-top: var(--s5); }
  .ct-from { grid-column: 1 / span 9; grid-row: 3; margin-top: var(--s7); }
  .ct-head { bottom: calc(100% + var(--s3)); }
}
@media (max-width: 900px) {
  .ct-wide-only { display: none; }
  .ct-narrow-only { display: inline; }
}
@media (max-width: 700px) {
  .ct-sheet .marks i:nth-child(1), .ct-sheet .marks i:nth-child(2) { top: calc(var(--hd) + 4px); }
  .ct-body { padding-top: 56px; }
  .ct { --fs: 20px; }
  .ct-head { font-size: 11px; }
  .ct-from { grid-column: 1 / -1; margin-top: 104px; }
  .ct-sentence { line-height: 1.85; }
  .ct-tx-body { line-height: 1.85; }
  .ct-rule { left: -24px; right: 0; }
  .ct-sheet .tb { margin-top: 0; }
  .ct-row, .ct-act { row-gap: 8px; }
  .ct-tx .ct-act { column-gap: var(--s4); }
}