/* Thechristhetics type system. Layout and color remain in styles.css. */
:root {
  --font-heading: 'Syne', Arial, sans-serif;
  --font-body: 'Inter', Arial, sans-serif;
  --type-display: clamp(3rem, 5vw, 6rem);
  --type-section: clamp(2.75rem, 4.7vw, 5.5rem);
  --type-feature: clamp(3rem, 7.5vw, 7.5rem);
  --type-title: clamp(1.5rem, 2.4vw, 2.25rem);
  --type-lead: clamp(1rem, 1.25vw, 1.125rem);
  --type-body: 1rem;
  --type-small: .875rem;
  --type-label: .6875rem;
}

body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.65;
  font-optical-sizing: auto;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .project-meta strong, .wordmark {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  text-wrap: balance;
}

h1, h2 { font-weight: 600; }
h3 { font-weight: 600; }
h1 em, h2 em {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 400;
}

.hero h1 {
  font-size: var(--type-display);
  line-height: 1.06;
  letter-spacing: -.065em;
}
.hero h1 em,
.section h2 em { color: #6b6b6b; }
.approach-section h2 em,
.contact-section h2 em { color: var(--lime); }

.section h2 {
  font-size: var(--type-section);
  line-height: 1.1;
  letter-spacing: -.06em;
}
.contact-section h2 {
  font-size: var(--type-feature);
  line-height: 1.06;
  letter-spacing: -.065em;
}
.dialog-content h2 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.1;
}
.approach-steps h3 {
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -.035em;
}
.project-meta strong {
  font-size: var(--type-title);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.045em;
}
.wordmark { letter-spacing: -.055em; }

.intro-band p {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 3.25rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.045em;
}
.hero-intro,
.section-lead,
.approach-main > p:not(.eyebrow),
.contact-bottom p,
.dialog-content > p:not(.eyebrow) {
  font-size: var(--type-lead);
  line-height: 1.7;
  letter-spacing: -.012em;
}
.approach-steps p,
.review-grid figcaption,
.footer-top p { font-size: var(--type-small); line-height: 1.55; }
.review-grid blockquote {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1.75vw, 1.5rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.025em;
}
.review-grid figcaption strong { font-weight: 600; }

.eyebrow, .section-number, .project-meta small,
.hero-index, .image-caption, .footer-bottom,
.site-nav, .button, .text-link {
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .12em;
}
.eyebrow, .section-number { letter-spacing: .15em; }
.button, .text-link { letter-spacing: .11em; }

@media (max-width: 760px) {
  :root {
    --type-display: clamp(2.8rem, 11vw, 4.25rem);
    --type-section: clamp(2.625rem, 9.5vw, 4.25rem);
    --type-feature: clamp(3rem, 11vw, 5.625rem);
    --type-title: clamp(1.5rem, 6vw, 2rem);
    --type-lead: 1rem;
  }
  .hero h1 { line-height: 1.07; }
  .section h2 { line-height: 1.12; }
  .contact-section h2 { line-height: 1.08; }
  .review-grid blockquote { font-size: 1.125rem; }
}

@media (max-width: 400px) {
  .footer-top .wordmark { font-size: clamp(23px, 7.2vw, 28px); }
}