/*
 * RyanHopman.com editorial typography system
 * Loaded after page styles so every template shares one deliberate hierarchy.
 */

:root {
  --rh-type-overline: clamp(.6875rem, .66rem + .1vw, .75rem);
  --rh-type-meta: clamp(.75rem, .72rem + .1vw, .8125rem);
  --rh-type-body: clamp(1rem, .96rem + .18vw, 1.125rem);
  --rh-type-lead: clamp(1.45rem, 1.18rem + 1.05vw, 2.125rem);
  --rh-type-quote: clamp(1.7rem, 1.25rem + 1.55vw, 2.75rem);
  --rh-type-h3: clamp(2rem, 1.5rem + 1.8vw, 3.25rem);
  --rh-type-h2: clamp(2.5rem, 1.65rem + 2.75vw, 4.5rem);
  --rh-type-h1: clamp(3rem, 1.75rem + 4vw, 6.25rem);
  --rh-type-display: clamp(3.5rem, 1.95rem + 4.9vw, 7rem);
  --rh-type-hero-home: clamp(3.25rem, 2.05rem + 3.8vw, 6rem);
  --rh-leading-body: 1.74;
  --rh-leading-lead: 1.42;
  --rh-leading-quote: 1.28;
  --rh-leading-h3: 1.08;
  --rh-leading-h2: 1.02;
  --rh-leading-h1: .95;
  --rh-measure-body: 68ch;
  --rh-measure-lead: 54ch;
  --rh-measure-heading: 21ch;
}

body {
  font-size: var(--rh-type-body);
  line-height: var(--rh-leading-body);
}

body:is(.rh-home, .rh-about, .rh-work, .rh-insights, .rh-contact) #main-content p {
  font-size: var(--rh-type-body);
  line-height: var(--rh-leading-body);
}

body:is(.rh-home, .rh-about, .rh-work, .rh-insights, .rh-contact) #main-content h1,
body:is(.rh-home, .rh-about, .rh-work, .rh-insights, .rh-contact) #main-content h2,
body:is(.rh-home, .rh-about, .rh-work, .rh-insights, .rh-contact) #main-content h3 {
  font-family: var(--rh-serif);
  font-weight: 400;
  -webkit-hyphens: none;
  hyphens: none;
  overflow-wrap: normal;
  text-wrap: balance;
  word-break: normal;
}

body:is(.rh-about, .rh-work, .rh-insights, .rh-contact) #main-content h1 {
  max-width: var(--rh-measure-heading);
  font-size: var(--rh-type-h1);
  letter-spacing: -.04em;
  line-height: var(--rh-leading-h1);
}

body.rh-about #main-content .rh-about-hero h1 {
  font-size: var(--rh-type-display);
}

body.rh-home #main-content .rh-hero-title {
  font-size: var(--rh-type-hero-home);
  letter-spacing: -.04em;
  line-height: .88;
}

body:is(.rh-home, .rh-about, .rh-work, .rh-insights, .rh-contact) #main-content h2 {
  max-width: var(--rh-measure-heading);
  font-size: var(--rh-type-h2);
  letter-spacing: -.035em;
  line-height: var(--rh-leading-h2);
}

body:is(.rh-home, .rh-about, .rh-work, .rh-insights, .rh-contact) #main-content h3 {
  max-width: 24ch;
  font-size: var(--rh-type-h3);
  letter-spacing: -.025em;
  line-height: var(--rh-leading-h3);
}

/* Intentionally prominent closing statements, kept below the former giant scale. */
body.rh-home #main-content :is(.rh-experience-heading h2, .rh-qualification h2, .rh-final-cta h2),
body.rh-about #main-content :is(.rh-about-close h2, .rh-about-work h2),
body.rh-work #main-content :is(.rh-work-conversation h2, .rh-work-close h2),
body.rh-insights #main-content :is(.rh-insights-point h2, .rh-insights-latest h2),
body.rh-contact #main-content .rh-contact-inquiry-heading h2 {
  font-size: var(--rh-type-display);
  letter-spacing: -.042em;
  line-height: .94;
}

/* Lead copy and editorial decks. */
body.rh-home #main-content :is(.rh-experience-deck, .rh-philosophy-intro p:first-child, .rh-qualification-lead),
body.rh-about #main-content :is(.rh-about-deck, .rh-about-fields-grid > p),
body.rh-work #main-content .rh-work-opening p:first-child,
body.rh-insights #main-content :is(.rh-insights-opening > p, .rh-insights-projects p),
body.rh-contact #main-content :is(.rh-contact-opening > p, .rh-contact-professional-note) {
  max-width: var(--rh-measure-lead);
  font-size: var(--rh-type-lead);
  letter-spacing: -.012em;
  line-height: var(--rh-leading-lead);
}

/* The homepage hero follows the approved magazine-cover mockup, not the
   larger long-form deck scale used deeper in the site. */
body.rh-home #main-content .rh-hero-lead {
  max-width: 590px;
  font-size: clamp(1.1875rem, 1.08rem + .36vw, 1.5rem);
  letter-spacing: 0;
  line-height: 1.48;
}

body.rh-home #main-content .rh-hero-bridge {
  max-width: 565px;
  font-size: clamp(.8125rem, .76rem + .18vw, .9375rem);
  line-height: 1.7;
}

body.rh-home #main-content .rh-service-body p:first-child {
  font-size: clamp(1.25rem, 1.08rem + .58vw, 1.6875rem);
  letter-spacing: 0;
  line-height: 1.38;
}

/* Pull quotes and emphasized conclusions. */
body.rh-home #main-content :is(.rh-services-close, .rh-coda-argument p:first-child, .rh-experience-close, .rh-margin-note),
body.rh-about #main-content .rh-about-prose blockquote,
body.rh-work #main-content :is(.rh-work-prose blockquote, .rh-work-related-copy blockquote),
body.rh-insights #main-content :is(.rh-insights-progress-close, .rh-article-empty),
body.rh-contact #main-content :is(.rh-contact-caution blockquote, .rh-contact-fit-close) {
  font-size: var(--rh-type-quote);
  letter-spacing: -.018em;
  line-height: var(--rh-leading-quote);
}

/* Reading copy: one size, rhythm, and mature line length across all templates. */
body.rh-home #main-content :is(.rh-perspective-body, .rh-services-context, .rh-service-body, .rh-experience-opening > div, .rh-chapter-copy, .rh-coda-argument, .rh-film-copy > div:last-child, .rh-philosophy-intro, .rh-principles, .rh-qualification-opening, .rh-qualification-chapters, .rh-final-cta-copy) p,
body.rh-about #main-content :is(.rh-about-opening > div, .rh-about-prose, .rh-about-work-copy, .rh-about-close) p,
body.rh-work #main-content :is(.rh-work-opening, .rh-work-prose, .rh-work-bridge-copy, .rh-work-related-copy, .rh-work-fit-grid, .rh-work-practical-sections, .rh-work-conversation-grid, .rh-work-close-copy) p,
body.rh-insights #main-content :is(.rh-insights-opening > div, .rh-insights-preface-grid, .rh-insights-prose, .rh-insights-declaration, .rh-insights-question-grid, .rh-insights-point, .rh-insights-latest-heading, .rh-article-index) p,
body.rh-contact #main-content :is(.rh-contact-opening > div, .rh-contact-prose, .rh-contact-caution, .rh-contact-process-grid) p {
  max-width: min(var(--rh-measure-body), 100%);
  font-size: var(--rh-type-body);
  line-height: var(--rh-leading-body);
}

/* Overlines, chapter labels, indexes, and compact reference labels. */
body :is(.rh-eyebrow, .rh-section-index, .rh-chapter-number),
body.rh-home #main-content :is(.rh-service-number, .rh-chapter-aside > p, .rh-fit-markers li, .rh-experience-last),
body.rh-about #main-content :is(.rh-about-chapter-label > p, .rh-credential-groups h3, .rh-affiliation-list p),
body.rh-work #main-content :is(.rh-work-label > p, .rh-work-related-label span, .rh-work-related-label p, .rh-work-fit-label, .rh-work-practical-label, .rh-work-next a),
body.rh-insights #main-content :is(.rh-insights-topic-label > p, .rh-article-index time, .rh-article-category),
body.rh-contact #main-content :is(.rh-contact-next a, .rh-form-field label) {
  font-family: var(--rh-sans);
  font-size: var(--rh-type-overline);
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* Navigation and actions. */
.rh-wordmark,
.rh-primary-nav > a,
.rh-button,
.rh-text-link,
.rh-footer-nav a,
.rh-footer-action a {
  font-family: var(--rh-sans);
  font-size: var(--rh-type-overline);
  font-weight: 600;
  letter-spacing: .13em;
  line-height: 1.35;
}

/* Forms are readable without competing with section headings. */
body.rh-contact #main-content .rh-form-field input {
  font-family: var(--rh-serif);
  font-size: clamp(1.35rem, 1.17rem + .55vw, 1.75rem);
  line-height: 1.35;
}

body.rh-contact #main-content .rh-form-field textarea {
  font-family: var(--rh-sans);
  font-size: var(--rh-type-body);
  line-height: 1.65;
}

body.rh-contact #main-content :is(.rh-form-optional, .rh-form-footer > p, .rh-form-status) {
  font-size: var(--rh-type-meta);
  line-height: 1.65;
}

/* Credentials, metadata, and footer text remain secondary but never tiny. */
body.rh-about #main-content .rh-credential-groups p {
  font-size: clamp(1.2rem, 1.05rem + .48vw, 1.55rem);
  line-height: 1.5;
}

body.rh-about #main-content .rh-credential-groups dt {
  font-size: 1.25rem;
  line-height: 1.35;
}

body.rh-about #main-content .rh-credential-groups dd,
.rh-footer-identity > span:last-child,
.rh-footer-bottom {
  font-size: var(--rh-type-meta);
  line-height: 1.6;
}

.rh-footer-identity p {
  font-size: clamp(1.5rem, 1.36rem + .45vw, 1.875rem);
  line-height: 1.2;
}

@media (min-width: 641px) and (max-width: 900px) {
  :root {
    --rh-type-body: 1rem;
    --rh-type-lead: 1.45rem;
    --rh-type-quote: 1.7rem;
    --rh-type-h3: 2.1rem;
    --rh-type-h2: 2.65rem;
    --rh-type-h1: 3.45rem;
    --rh-type-display: 3.8rem;
    --rh-type-hero-home: 3.75rem;
    --rh-leading-body: 1.7;
  }

  body:is(.rh-about, .rh-work, .rh-insights, .rh-contact) #main-content h1 {
    line-height: .96;
  }

  body:is(.rh-home, .rh-about, .rh-work, .rh-insights, .rh-contact) #main-content h2 {
    line-height: 1.06;
  }

  body:is(.rh-home, .rh-about, .rh-work, .rh-insights, .rh-contact) #main-content h3 {
    line-height: 1.12;
  }

  body.rh-about #main-content .rh-about-deck,
  body.rh-work #main-content .rh-work-opening p:first-child,
  body.rh-insights #main-content .rh-insights-opening > p,
  body.rh-contact #main-content .rh-contact-opening > p {
    font-size: 1.45rem;
    line-height: 1.48;
  }

  body:is(.rh-about, .rh-work, .rh-insights, .rh-contact) #main-content :is(p, li) {
    line-height: 1.72;
  }
}

@media (max-width: 640px) {
  :root {
    --rh-type-lead: clamp(1.7rem, 1.28rem + 2.1vw, 2.05rem);
    --rh-type-quote: clamp(1.875rem, 1.45rem + 2.15vw, 2.35rem);
    --rh-type-h3: clamp(1.875rem, 1.45rem + 2.1vw, 2.35rem);
    --rh-type-h2: clamp(2.25rem, 1.55rem + 3.5vw, 3.05rem);
    --rh-type-h1: clamp(2.75rem, 1.35rem + 7vw, 4.25rem);
    --rh-type-display: clamp(3rem, 1.4rem + 8vw, 4.75rem);
    --rh-type-hero-home: clamp(3rem, 1.8rem + 6vw, 4.3rem);
  }

  .rh-primary-nav > a {
    font-size: clamp(1.75rem, 1.3rem + 2.25vw, 2.25rem);
    letter-spacing: -.015em;
    line-height: 1.15;
  }

  body.rh-home #main-content .rh-hero-lead {
    font-size: 1.125rem;
    line-height: 1.43;
  }

  body.rh-home #main-content .rh-hero-bridge {
    font-size: .875rem;
    line-height: 1.65;
  }

  body:is(.rh-about, .rh-work, .rh-insights, .rh-contact) #main-content h1,
  body:is(.rh-home, .rh-about, .rh-work, .rh-insights, .rh-contact) #main-content h2,
  body:is(.rh-home, .rh-about, .rh-work, .rh-insights, .rh-contact) #main-content h3 {
    -webkit-hyphens: none;
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (max-width: 360px) {
  :root {
    --rh-type-h3: 1.875rem;
    --rh-type-h2: 2.25rem;
    --rh-type-h1: 2.75rem;
    --rh-type-display: 3rem;
    --rh-type-hero-home: 2.9rem;
  }

  .rh-shell {
    width: min(calc(100% - 40px), var(--rh-max-width));
  }
}