/* Keep page and section titles on one line at every viewport size. */
#hero-title,
#work-title,
#aigc-heading,
#skills-title,
#practice-title,
#about-title,
#contact-title {
  white-space: nowrap;
  max-width: 100%;
}

#hero-title {
  font-size: min(5.2vw, 80px);
  width: max-content;
  line-height: 1.2;
}
#hero-title > span,
#hero-title > em {
  display: inline;
}
#hero-title > em {
  font-size: 1.15em;
  line-height: inherit;
  transform: none;
  margin: 0;
  padding: 0;
}

.section-heading,
.aigc-heading-row,
.skills-heading,
#practice .practice-heading {
  flex-wrap: wrap;
  gap: 24px 40px;
}

#main :is(#work-title, #aigc-heading, #skills-title, #practice-title, #about-title, #contact-title) {
  flex: 0 0 auto;
  font-size: var(--section-title-size);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.035em;
}
#aigc-heading > em,
#skills-title > em,
#practice #practice-title > em,
#about-title > em,
#contact-title > span {
  display: inline;
}

:root {
  --section-title-size: clamp(42px, 6.6vw, 102px);
  --section-space: clamp(88px, 8.6vw, 136px);
  --heading-space: clamp(44px, 4.2vw, 64px);
}

#main :is(#work, #aigc, #skills, #practice, #about) {
  padding-block: var(--section-space);
}
#main :is(.section-heading, .aigc-heading-row, .skills-heading, .practice-heading) {
  margin-bottom: var(--heading-space);
}
#about .about-sketch-intro { margin-top: var(--heading-space); }
#about .little { font-size: 1.15em; }
#about .about-process { margin-top: 72px; }
#contact { padding-top: calc(var(--section-space) + 105px); }
#contact .contact-links { margin-top: var(--heading-space); }
#contact .contact-footer { margin-top: 72px; padding-bottom: 42px; }
.skills-grid { gap: 16px 48px; }
#aigc-grid { column-gap: 32px; }
.aigc-card { margin-bottom: 40px; }
.work-filters { margin-bottom: 36px; }

@media (max-width: 640px) {
  :root {
    --section-title-size: 8.9vw;
    --section-space: 64px;
    --heading-space: 36px;
  }
  #hero-title { font-size: 10.4vw; }
  #about .about-process { margin-top: 48px; }
  #contact { padding-top: calc(var(--section-space) + 72px); }
  #contact .contact-footer { margin-top: 48px; padding-bottom: 32px; }
  .skills-grid { gap: 12px 16px; }
  #aigc-grid { column-gap: 20px; }
  .aigc-card { margin-bottom: 32px; }
  .work-filters { margin-bottom: 30px; }
}

/* Restore the original expressive scale for the About heading. */
#main #about-title{font-size:clamp(76px,13.8vw,212px);line-height:1;letter-spacing:-.045em}
#about .little{font-size:1.35em}
@media(max-width:1200px){#main #about-title{font-size:13.4vw}}
@media(max-width:640px){#main #about-title{font-size:21vw;line-height:1.08;white-space:normal}#main #about-title>em{display:block}#about .little{font-size:1.32em}}

/* Restore the contact invitation to two lines. */
#main #contact-title{white-space:normal}
#contact #contact-title>span{display:block}