/* ==========================================================================
   UNIFIED FLUID RESPONSIVE TYPOGRAPHY SYSTEM
   Fluid scaling with CSS clamp() across all screen sizes
   ========================================================================== */

:root {
  --serif: "Poppins", sans-serif;
  --sans: "Poppins", sans-serif;
  
  /* Recommended Fluid Typography with clamp() */
  --font-h1: clamp(27px, 3.2vw, 46px);
  --font-h2: clamp(21px, 2.25vw, 32px);
  --font-h3: clamp(16px, 1.45vw, 21px);
  --font-h4: clamp(14px, 1.1vw, 16px);
  --font-h5: clamp(13px, 0.95vw, 14px);
  --font-h6: clamp(11px, 0.85vw, 12px);
  
  --font-eyebrow: clamp(9.5px, 0.8vw, 11px);
  --font-lead: clamp(15px, 1.25vw, 18px);
  --font-body: clamp(14px, 1.1vw, 16px);
  --font-small: clamp(10.5px, 0.85vw, 12px);
  --font-button: clamp(11.5px, 0.95vw, 13px);

  /* Backward compatibility for existing references */
  --heading-h1: var(--font-h1);
  --heading-h2: var(--font-h2);
  --heading-h3: var(--font-h3);
  --heading-h4: var(--font-h4);
  --heading-h5: var(--font-h5);
  --heading-h6: var(--font-h6);
  --heading-label: var(--font-eyebrow);
}

h1, h2, h3, h4, h5, h6 {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--font-h1);
  line-height: 1.22;
  letter-spacing: -0.02em;
}

h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--font-h2);
  line-height: 1.28;
  letter-spacing: -0.015em;
}

h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--font-h3);
  line-height: 1.35;
  letter-spacing: 0;
}

h4, h5, h6 {
  margin-top: 0;
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
}

h4 { font-size: var(--font-h4); }
h5 { font-size: var(--font-h5); }
h6 { font-size: var(--font-h6); }

/* Category labels and footer headings */
.site-footer h3,
h3.detail-label,
.contact-methods h3,
.home-contact-details h3 {
  font-weight: 500;
  font-size: var(--font-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Allow heading-bearing grid/flex items to shrink when text is enlarged */
.values-grid > *,
.philosophy-grid > *,
.process-grid > *,
.story-concept > *,
.services-preview > *,
.service-title > * {
  min-width: 0;
}

/* Card titles across all collections (Home, Projects, Services) */
.project-title,
.collection-grid .project-title,
.featured-grid .project-title,
.gallery-grid .project-title {
  font-family: var(--serif);
  font-size: var(--font-h3);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Eyebrows and kickers across all pages */
.eyebrow,
.service-category,
.project-category,
.section-kicker,
.founder-role,
.contact-channel-label {
  font-family: var(--sans);
  font-size: var(--font-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.6;
}

/* Lead and intro copy */
.lead,
.page-intro,
.service-short,
.service-detail-copy > p.service-short,
.hero-copy p.lead,
.about-story-approach .lead,
.story-subtitle {
  font-family: var(--sans);
  font-size: var(--font-lead);
  font-weight: 400;
  line-height: 1.65;
}

/* Standard body paragraphs */
body,
p:not(.eyebrow):not(.lead):not(.small-note):not(.stat-desc):not(.project-location):not(.page-intro):not(.service-short):not(.testimonial-quote):not(.site-footer *),
.service-description,
.service-detail-copy > p.service-description,
.service-offers,
.benefits li,
.contact-info-card > p:not(.eyebrow),
.story-body p,
.article-content p,
.col-body p {
  font-size: var(--font-body);
  line-height: 1.75;
}

/* Small notes, metadata and captions */
.small-note,
.stat-desc,
.project-location,
.service-image-caption,
figcaption,
.service-offers li,
.contact-hours dt,
.contact-hours dd,
.map-address,
#gallery-count,
.collection-note,
.testimonial-person span {
  font-size: var(--font-small);
  line-height: 1.5;
}

/* Action buttons and links */
.button,
.text-link,
.project-story-link,
.lightbox-story-link {
  font-size: var(--font-button);
}

/* ==========================================================================
   Forced line breaks in headings
   Headings are authored with a <br> so they read as two lines on a phone, for
   example "From possibility / to perspective." From tablet upwards there is
   ample width, so the break is switched off and the heading sets on one line:
   "From possibility to perspective." Replacing the break with a generated
   space keeps the two halves apart; a literal space in the markup would be
   stripped by the build's whitespace collapsing. Below 768px the rule does
   not apply and the heading stacks exactly as authored.
   ========================================================================== */
@media (min-width: 768px) {
  h1 > br.head-break,
  h2 > br.head-break,
  h3 > br.head-break,
  h4 > br.head-break {
    /* The break becomes an inline space. A literal space in the markup would
       not survive the build's whitespace collapsing, so it is supplied here. */
    content: " ";
    display: inline;
    white-space: pre;
    font-size: inherit;
  }
}