/* Dean Courtier — typography refinement | 6 November 2026
   Load after styles.css and page-specific CSS. Keeps the existing visual identity.
   Uses the existing Google Fonts Open Sans variable and Bebas Neue assets. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body, button, input, select, textarea {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

body {
  font-optical-sizing: auto;
  font-synthesis: none;
  font-kerning: normal;
  line-height: 1.62;
}

/* Modern font rasterisation is platform dependent: do not force grayscale
   antialiasing across the entire site, as it can make small text appear thinner. */

.wordmark, .bebas-neue-regular {
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-weight: 400;
  letter-spacing: 0.005em;
  font-synthesis: none;
}

h1, h2, .display-heading, blockquote,
.portfolio-card h3, .service-card h3 {
  font-kerning: normal;
  text-wrap: balance;
}

h1, h2, .display-heading, blockquote {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  letter-spacing: -0.018em;
  font-optical-sizing: auto;
}

/* Prevent extremely tight large headlines from visually colliding. */
h1 { line-height: 1.04; }
.section-pad h2 { line-height: 1.08; }
.display-heading { line-height: 1.04 !important; }
.archive-hero h1 { line-height: 1.04; }
.error-hero h1 { line-height: 1.04; }
blockquote { line-height: 1.14; }

/* Typography details */
p, li, dd, .lead, .portfolio-description {
  overflow-wrap: break-word;
}

p, .lead, .portfolio-description, .service-card p, .portfolio-card p {
  text-wrap: pretty;
}

.nav-link, .dropdown-item {
  font-weight: 600;
  letter-spacing: 0.005em;
}

.eyebrow, .section-number, .hero-note,
.portfolio-card-meta, .portfolio-badge,
.modal-category, .portfolio-sort label {
  letter-spacing: 0.12em;
  line-height: 1.5;
}

.eyebrow, .section-number { font-size: 0.78rem; }
.hero-note { font-size: 0.75rem; }

/* Maintain crisp UI text without changing paragraph scale. */
button, .btn, .btn-brand, .nav-link, .dropdown-item, input, select, textarea {
  font-optical-sizing: auto;
}

/* Accessibility: preserve legibility when users enlarge or zoom text. */
@media (max-width: 767.98px) {
  h1 { line-height: 1.08; }
  .display-heading { line-height: 1.08 !important; }
  .archive-hero h1, .error-hero h1 { line-height: 1.08; }
  .wordmark { letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}