/* Keep light text on red large enough to remain legible at every viewport. */
.photo-copy .hero-bio { font-size: clamp(24px, 1.9vw, 30px); }
.contact-copy > p { font-size: clamp(24px, 2vw, 29px); }
.contact-field label { font-size: 20px; }
.contact-copy .section-number, .contact-status { color: #10130e; }

/* Give Work and Contact the same section-entry rhythm. */
:root { --section-space: 88px; --section-label-gap: 16px; --section-intro-gap: 32px; }
.stuff-section { padding-block: var(--section-space); }
.contact-section { padding-top: var(--section-space); }
.stuff-section > .section-intro, .contact-copy > .section-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--section-label-gap);
  margin: 0 0 var(--section-intro-gap);
}
.section-intro > .section-number { padding: 0; font-size: 12px; line-height: 1.5; }
.section-intro > h2 { margin: 0; font-size: clamp(52px, 8.4vw, 134px); line-height: 1.1; }
.contact-copy > p { margin-bottom: 0; }

@media (max-width: 540px) {
  .red-nav { gap: clamp(8px, 2vw, 12px); padding-inline: clamp(12px, 3vw, 20px); font-size: clamp(14px, 4.1vw, 18px); font-weight: 700; }
  .red-nav a { display: inline-flex; align-items: center; min-height: 48px; white-space: nowrap; }
  .red-nav nav { gap: clamp(8px, 2vw, 12px); }
}
@media (max-width: 700px) {
  .suburban-hero .photo-hero-inner { padding-bottom: 32px; }
  .suburban-hero .photo-art { margin-top: 6px; margin-bottom: 0; }
}
@media (max-width: 800px) {
  .stuff-section, .contact-section { padding-top: 72px; }
  .stuff-projects .ws-project { font-size: 42px; line-height: 1.1; }
}

.contact-status:not(:empty) { background: var(--cream); color: var(--ink); padding: 16px; line-height: 1.5; }
.contact-status[data-state="success"] { background: var(--lime); font-weight: 700; }