/* Shared reading hierarchy. Keep display lettering and printed CV independent. */
:root {
  --text-body: 1rem;
  --text-support: .875rem;
  --text-label: .75rem;
  --text-card: 1.25rem;
  --text-section: clamp(2rem, 3.4vw, 2.75rem);
  --text-title: clamp(2.25rem, 4.5vw, 3.5rem);
}

@media screen {
  body { font-family: var(--sans); font-size: var(--text-body); }

  /* Paragraphs use the same face and rhythm across page templates. */
  body .about-story p,
  .cv-page .journey-inline-detail .detail-body p,
  body .pv-side p,
  body .pv-process-head p,
  body .pv-product-top p,
  body .pv-outro > p,
  body .case-sections p,
  body .dialog-meta p,
  body .project-list-intro > p,
  .projects-page .project-preview-copy p,
  .home-page .hero-introduction,
  .home-page .home-path-cv .bento-cv-description {
    font-family: var(--sans);
    font-size: var(--text-body);
    line-height: 1.75;
    letter-spacing: normal;
  }

  /* Small section names, dates, counters and categories. */
  body .tiny,
  body .eyebrow,
  body .about-kicker,
  .home-page .hero-kicker,
  .home-page .hero-baseline,
  .home-page .bento-intro > span,
  .home-page .bento-kicker,
  .home-page .bento-photo-copy p,
  body .pv-overline,
  body .pv-num,
  body .pv-facts small,
  body .dialog-meta > div > span,
  .projects-page .project-node small,
  .projects-page .project-preview-copy > .eyebrow,
  .projects-page .project-preview-count,
  .projects-page .project-preview-tags span,
  .cv-page .node-date,
  .cv-page .node-date small,
  .photography-page .photo-topline,
  .photography-page .photo-bottomline,
  body .gallery-count {
    font-family: var(--sans);
    font-size: var(--text-label);
    line-height: 1.5;
    letter-spacing: .08em;
  }

  /* Supporting copy, captions and text controls stay readable on mobile. */
  body .back-link,
  body .pv-back,
  body .pv-cta,
  body .pv-facts strong,
  body .pv-photo figcaption,
  body .pv-tile figcaption,
  body .pv-tile figcaption span,
  body .pv-phones figcaption,
  body .pv-feature-tile figcaption,
  body .pv-concept,
  body .pv-outro > a,
  body .case-next,
  body .case-main figcaption,
  body .footer,
  .home-page .home-contact-bottom,
  .home-page .bento-cv-link,
  .home-page .bento-all-projects,
  body .about-bottom-link,
  .projects-page .project-node-summary,
  .projects-page .project-read-more,
  .cv-page .node-org,
  .cv-page .cv-timeline-tip,
  .cv-page .cv-filters button,
  .cv-page .journey-inline-detail .journey-next,
  .cv-page .journey-collapse,
  .cv-page .cv-profile-chips li,
  .cv-page .journey-head > span:last-child,
  .cv-page .text-button,
  body .gallery-toolbar p,
  body .dialog-close {
    font-family: var(--sans);
    font-size: var(--text-support);
    line-height: 1.5;
    letter-spacing: normal;
  }

  body .about-story h2,
  body .pv-wrap h2,
  body .case-sections h2,
  .projects-page .project-preview-copy h2,
  .home-page .bento-intro h2,
  .home-page .home-contact-copy h2 {
    font-family: var(--serif);
    font-size: var(--text-section);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.035em;
  }

  .home-page .home-contact-copy h2 {
    font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  }

  body .about-intro h1,
  body .pv-hero h1,
  body .case-main h1,
  .projects-page .project-list-intro h1 {
    font-family: var(--serif);
    font-size: var(--text-title);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -.04em;
  }

  body .about-story h3,
  .projects-page .project-node strong,
  .cv-page .node-text > strong,
  .cv-page .cv-software h2 {
    font-family: var(--sans);
    font-size: var(--text-card);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.02em;
  }

  body .case-intro,
  body .pv-lead {
    font-family: var(--sans);
    font-size: var(--text-body);
    line-height: 1.75;
  }

  body .header nav { font-family: var(--sans); font-size: var(--text-support); }
  body .header sup { font-size: var(--text-label); }
  .home-page .home-contact { font-family: var(--sans); }
  body .header .menu-toggle,
  body .header .menu-toggle .menu-toggle-label { font-size: var(--text-support); }
  body .mobile-nav.mobile-nav-panel a { font-family: var(--sans); font-size: var(--text-body); }
  body .mobile-nav.mobile-nav-panel::before,
  body .mobile-link-index { font-family: var(--sans); font-size: var(--text-label); }

  /* Wrap longer labels instead of shrinking them to fit. */
  .photography-page .photo-topline,
  .photography-page .photo-bottomline { flex-wrap: wrap; gap: 8px 16px; }
  .cv-page .journey-head { flex-wrap: wrap; gap: 12px; }
}