/* Contact page layout only (§6.15). Shared components live in components.css and fig.css. */

/* T-2: the letter sits right under the hero */
.contact-letter { padding-bottom: var(--chapter-gap); }

/* No JS: the form posts to mailto; sheet, counter and recipient line are JS-only */
html:not(.js) .contact-letter :is(.letter-sheet, .letter-count, #letter-to) { display: none; }

/* Chapter heads without label or numeral */
.contact-head { margin-bottom: var(--s-8); }
.chapter-section > .rule-dots + .contact-head { margin-top: var(--s-12); }

/* T-3: direct lines */
.contact-direct { width: 100%; }
.contact-direct .ledger-name { width: 70%; }
.contact-direct .ledger-use { white-space: nowrap; text-align: right; vertical-align: middle; }
.contact-val { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); max-width: 100%; }
.contact-val a { overflow-wrap: anywhere; transition: color var(--dur-xs); }
.contact-val a:is(:hover, :focus-visible) { color: var(--accent); }
.contact-addr { font-style: normal; font-weight: 400; line-height: 1.55; color: var(--text); }
.contact-now { margin-top: var(--s-6); color: var(--text-2); }

/* T-4: clocks */
.contact-overlap { margin-top: var(--s-6); max-width: var(--measure); color: var(--text-2); }

/* T-5: what happens next */
.contact-next { max-width: var(--measure-wide); }
.contact-step { font-size: var(--t-body); line-height: 1.5; color: var(--text); max-width: 52ch; }

/* T-6: sign-off */
.contact-signoff { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); padding-block: var(--s-12) var(--chapter-gap); text-align: center; }
.contact-signoff-mark { width: 2rem; height: 2rem; color: var(--accent); }
.contact-signoff-line { font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-2); }

@media (max-width: 599px) {
  .contact-direct tr { display: grid; grid-template-columns: minmax(0, 1fr); }
  .contact-direct td { display: block; width: auto; padding-inline: 0; }
  .contact-direct .ledger-name { width: auto; padding-bottom: 0; border-bottom: 0; }
  .contact-direct .ledger-use { text-align: left; padding-top: var(--s-1); }
}

/* T-3: the Maps link reads as a link; the address's copy button stays on its last line */
.contact-direct .ledger-use a.u { color: var(--accent); font-weight: 500; }
@media (pointer: coarse) { .contact-direct .ledger-use a.u { display: inline-flex; align-items: center; min-height: 44px; } }

/* T-2 below 900 px the sheet is hidden, so the recipient line is shown (a Careers-only letter goes to hrm@) */
@media (max-width: 899.98px) {
  .js .contact-letter #letter-to { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; flex-basis: 100%; font-family: var(--font-mono); font-size: var(--t-readout); letter-spacing: 0.02em; color: var(--text-2); }
}

/* T-2: the sheet never outgrows the viewport; a long message scrolls inside it */
@media (min-width: 900px) {
  .contact-letter .letter-sheet { max-height: calc(100vh - var(--nav-h) - 4rem); overflow-y: auto; overscroll-behavior: contain; }
}