/* Text pages: contact (email card + aside), privacy/terms (prose) and 404.
   Loaded only on those pages, after blocks.css. */

.hero-short { padding: var(--s-9) 0 var(--s-7); }
.updated { margin-top: var(--s-4); }

/* ---------- contact ---------- */
.contact { padding: 0 0 var(--s-10); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); gap: var(--s-8); align-items: start; }

/* MVP: email only, no form (decision 5/10/2026). The address opens the visitor's own email app;
   the copy button helps webmail users whose system has no mail app. */
.contact-card { display: grid; gap: var(--s-4); align-content: start; justify-items: start; padding: var(--s-7); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.contact-email { font-size: var(--t-h2); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; }
.contact-hint { font-size: var(--t-small); color: var(--muted); max-width: 44ch; }

.contact-aside { display: grid; gap: var(--s-7); padding-top: var(--s-5); }
.aside-title { font-size: var(--t-body); letter-spacing: -0.01em; }
.aside-block p { margin-top: var(--s-2); font-size: var(--t-small); color: var(--muted); }
.copy-status { font-size: var(--t-caption); min-height: 1.4em; }

/* ---------- legal ---------- */
.legal { padding: 0 0 var(--s-10); }
.prose { display: grid; gap: var(--s-4); max-width: 68ch; }
.prose h2 { font-size: var(--t-title); margin-top: var(--s-5); }
.prose p { color: var(--muted); }

/* ---------- 404 ---------- */
.not-found { min-height: calc(100vh - 66px - 180px); display: flex; align-items: center; }
.not-found .wrap { width: 100%; }
.not-found .display { margin-top: var(--s-3); }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .contact-aside { padding-top: 0; }
}
@media (max-width: 620px) {
  .contact-card { padding: var(--s-5); }
}