@layer components {
.about-intro { max-width: 30ch; font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  line-height: 1.3; color: var(--ink); }
.draft-note { margin-bottom: var(--s8); padding: var(--s4) var(--s5);
  border: 1px dashed var(--rule); border-radius: var(--r-lg);
  font-size: var(--t-small); color: var(--ink-2); max-width: 68ch; }
.about-body { padding-block: var(--s8); border-top: 1px solid var(--rule-soft); }
.contact { display: grid; gap: 0; border-top: 1px solid var(--rule-soft); max-width: 44ch; }
.contact > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s4);
  padding-block: var(--s4); border-bottom: 1px solid var(--rule-soft); }
.contact dt { font-size: var(--t-caption); color: var(--graphite); }
.contact dd { margin: 0; font-size: var(--t-small); }
.about .pagehead { padding-bottom: var(--s7); }
}