/*
 JOMI CUBOL — TYPOGRAPHY SYSTEM v1 (v3.13.0)
 Authoritative type-size layer loaded after screen.css.
 Whole-number pixel tokens are design targets; fluid display sizes use
 clamp() with integer-pixel bounds. Browsers can calculate fractional
 computed pixels during responsive interpolation.
 Fonts remain Heldane Text / Atlas Grotesk / Untitled Sans.
*/
:root {
 --type-hero: 112px;
 --type-page: 88px;
 --type-section: 52px;
 --type-featured-title: 56px;
 --type-recent-title: 44px;
 --type-article-title: 72px;
 --type-h2: 32px;
 --type-h3: 25px;
 --type-h4: 20px;
 --type-hero-description: 24px;
 --type-subhead: 21px;
 --type-body: 19px;
 --type-general: 18px;
 --type-callout: 18px;
 --type-blockquote: 22px;
 --type-caption: 14px;
 --type-navigation: 13px;
 --type-eyebrow: 13px;
 --type-metadata: 12px;
 --type-button: 13px;
 --type-footer: 13px;
 --type-book-title: 18px;
 --type-archive-title: 28px;
 --type-about-intro: 40px;
 --type-work-intro: 42px;
 --type-card-heading: 30px;
}

/* Expressive display headings */
.home-v4-intro-primary h1 {
 font-family: var(--font-display);
 font-size: clamp(72px, 7.8vw, var(--type-hero)) !important;
 line-height: 1 !important;
 letter-spacing: -.02em !important;
}
.about-hero-heading h1,
.work-hero-heading h1,
.library-hero h1,
.archive-page .listing-header h1,
.listing-header h1,
.page-header h1,
.about-title h1,
.work-hero h1 {
 font-family: var(--font-display);
 font-size: clamp(60px, 6.5vw, var(--type-page)) !important;
 line-height: 1 !important;
 letter-spacing: -.02em !important;
}
.home-v3-heading h2,
.section-heading h2,
.newsletter-panel h2,
.work-case-studies-heading h2,
.about-native-content > h2,
.library-native-content > h2 {
 font-size: clamp(40px, 3.7vw, var(--type-section)) !important;
 line-height: 1.05 !important;
 letter-spacing: -.02em !important;
}
.home-v4-feature-copy h2 {
 font-size: clamp(42px, 3.9vw, var(--type-featured-title)) !important;
 line-height: 1.08 !important;
 letter-spacing: -.02em !important;
}
.home-v4-row-copy > h3 {
 font-size: clamp(34px, 3.05vw, var(--type-recent-title)) !important;
 line-height: 1.12 !important;
 letter-spacing: -.015em !important;
}
.article-header h1 {
 font-size: clamp(52px, 5vw, var(--type-article-title)) !important;
 line-height: 1.08 !important;
 letter-spacing: -.02em !important;
}

/* Hero descriptions and post subheads */
.home-v4-description {
 font-size: var(--type-hero-description) !important;
 line-height: 1.45 !important;
}
.home-v4-feature-copy > p,
.home-v4-row-copy > .home-v4-row-dek {
 font-size: var(--type-subhead) !important;
 line-height: 1.55 !important;
 color: var(--muted) !important;
}
.article-header .article-dek,
.listing-header > p:last-child,
.page-header > p:last-child {
 font-size: var(--type-subhead) !important;
 line-height: 1.55 !important;
}

/* Homepage and article pages share one comfortable reading scale. */
.article:not(.article-work) > .gh-content.shell-content,
.home-v4-row-copy .home-v4-article-full {
 font-family: var(--font-body);
 font-size: var(--type-body) !important;
 line-height: 1.7 !important;
}
.home-v4-row-copy .home-v4-article-full {
 color: #e6e3dd !important;
}
.home-v4-row-copy .home-v4-article-full :is(p, li) {
 font-size: inherit !important;
 line-height: inherit !important;
}
.home-v4-row-copy .home-v4-article-full :is(p, li, blockquote) {
 color: #e6e3dd !important;
}
.article:not(.article-work) > .gh-content.shell-content h2,
.home-v4-row-copy .home-v4-article-full h2 {
 font-size: var(--type-h2) !important;
 line-height: 1.2 !important;
 letter-spacing: -.012em !important;
}
.article:not(.article-work) > .gh-content.shell-content h3,
.home-v4-row-copy .home-v4-article-full h3 {
 font-size: var(--type-h3) !important;
 line-height: 1.25 !important;
 letter-spacing: -.01em !important;
}
.article:not(.article-work) > .gh-content.shell-content h4,
.home-v4-row-copy .home-v4-article-full h4 {
 font-size: var(--type-h4) !important;
 line-height: 1.35 !important;
 letter-spacing: 0 !important;
}
.article:not(.article-work) > .gh-content.shell-content blockquote,
.home-v4-row-copy .home-v4-article-full blockquote {
 font-size: var(--type-blockquote) !important;
 line-height: 1.5 !important;
}
.article:not(.article-work) > .gh-content.shell-content .kg-callout-card,
.article:not(.article-work) > .gh-content.shell-content .kg-callout-card :is(.kg-callout-text, p, li),
.home-v4-row-copy .home-v4-article-full .kg-callout-card,
.home-v4-row-copy .home-v4-article-full .kg-callout-card :is(.kg-callout-text, p, li) {
 font-size: var(--type-callout) !important;
 line-height: 1.6 !important;
}
.article .gh-content figcaption,
.home-v4-article-full figcaption,
.about-native-content figcaption,
.library-native-content figcaption,
.work-native-content figcaption {
 font-size: var(--type-caption) !important;
 line-height: 1.5 !important;
}

/* About, Work and Library: editorial introductions, consistent body scale. */
.about-native-content,
.library-native-content,
.work-native-content,
.page-main > .gh-content,
.work-entry-body > p,
.work-native-closing-body p {
 font-size: var(--type-general) !important;
 line-height: 1.65 !important;
}
.about-native-content > p:first-child,
.library-native-content > p:first-child {
 font-size: var(--type-about-intro) !important;
 line-height: 1.16 !important;
}
.about-hero-deck,
.work-hero-copy > p {
 font-size: var(--type-card-heading) !important;
 line-height: 1.2 !important;
}
.work-native-content > p:first-child,
.work-entry-body > p.work-entry-lead {
 font-size: var(--type-work-intro) !important;
 line-height: 1.14 !important;
}
.work-entry-heading h2,
.work-card-copy h3,
.home-work-grid .work-card-copy h3 {
 font-size: var(--type-card-heading) !important;
 line-height: 1.15 !important;
}
.about-native-content > ul > li,
.library-native-content > ul:not(.library-book-cover-grid) > li {
 font-size: var(--type-general) !important;
 line-height: 1.55 !important;
}
.about-native-content > ul > li strong,
.library-native-content > ul:not(.library-book-cover-grid) > li strong {
 font-size: var(--type-card-heading) !important;
 line-height: 1.15 !important;
}
.library-native-content > ul.library-book-cover-grid > li strong {
 font-size: var(--type-book-title) !important;
 line-height: 1.2 !important;
}
.archive-row h2 {
 font-size: var(--type-archive-title) !important;
 line-height: 1.15 !important;
}
.post-card-content h3,
.editorial-copy h3,
.pattern-row h2,
.podcast-row h2 {
 font-size: var(--type-card-heading) !important;
 line-height: 1.15 !important;
}
.post-card-content > p,
.work-card-copy > p:not(.eyebrow),
.library-list-item p,
.library-intro-note p:last-child,
.work-case-studies-heading > p {
 font-size: var(--type-general) !important;
 line-height: 1.65 !important;
}


/* Content headings and introductory copy on supporting pages. */
.work-entry-body h3,
.about-native-content > h3,
.library-native-content > h3 {
 font-size: var(--type-h3) !important;
 line-height: 1.25 !important;
}
.work-entry-body h4,
.about-native-content > h4,
.library-native-content > h4 {
 font-size: var(--type-h4) !important;
 line-height: 1.35 !important;
}
.about-native-content > h2 + p,
.library-native-content > h2 + p,
.home-v3-now > p:not(.eyebrow) {
 font-size: var(--type-general) !important;
 line-height: 1.65 !important;
}
.home-v3-now > a,
.hero-subscribe-fields input,
.hero-subscribe-message {
 font-size: var(--type-button) !important;
}

/* Untitled Sans navigation and utility labels */
.site-header .nav-link,
.site-header .search-button,
.menu-toggle {
 font-family: var(--font-label);
 font-size: var(--type-navigation) !important;
}
.eyebrow {
 font-family: var(--font-label);
 font-size: var(--type-eyebrow) !important;
 line-height: 1.5 !important;
}
.home-v4-row-meta,
.home-v4-row-meta time,
.home-area-tag,
.archive-area-tag,
.archive-date-meta time,
.archive-filter,
.article-type-row time,
.article-featured-mark,
.home-v4-row-meta .home-v4-featured-mark,
.post-card-meta,
.work-entry-number,
.work-entry-meta,
.work-hero-facts span {
 font-family: var(--font-label);
 font-size: var(--type-metadata) !important;
}
.button,
.home-v4-continue-reading,
.home-v4-load-more,
.hero-subscribe-fields button,
.hero-subscribe-note,
.home-v4-recent-heading .text-link,
.article-share-trigger {
 font-family: var(--font-label);
 font-size: var(--type-button) !important;
}
.footer-links a,
.footer-meta,
.site-footer .footer-meta a,
.footer-bottom,
.site-footer .footer-nav a {
 font-family: var(--font-label);
 font-size: var(--type-footer) !important;
}

/* Mobile type targets, with 680px and below as the reading breakpoint */
@media (max-width: 680px) {
 :root {
  --type-hero: 56px;
  --type-page: 52px;
  --type-section: 36px;
  --type-featured-title: 38px;
  --type-recent-title: 30px;
  --type-article-title: 42px;
  --type-h2: 28px;
  --type-h3: 23px;
  --type-h4: 18px;
  --type-hero-description: 20px;
  --type-subhead: 18px;
  --type-body: 18px;
  --type-general: 17px;
  --type-callout: 17px;
  --type-blockquote: 20px;
  --type-caption: 13px;
  --type-navigation: 13px;
  --type-eyebrow: 12px;
  --type-metadata: 12px;
  --type-button: 13px;
  --type-footer: 13px;
  --type-book-title: 16px;
  --type-archive-title: 23px;
  --type-about-intro: 30px;
  --type-work-intro: 32px;
  --type-card-heading: 26px;
 }
 .home-v4-intro-primary h1 {
  font-size: clamp(46px, 14vw, var(--type-hero)) !important;
  line-height: 1 !important;
 }
 .about-hero-heading h1,
 .work-hero-heading h1,
 .library-hero h1,
 .archive-page .listing-header h1,
 .listing-header h1,
 .page-header h1,
 .about-title h1,
 .work-hero h1 {
  font-size: clamp(40px, 12vw, var(--type-page)) !important;
  line-height: 1 !important;
 }
 .home-v3-heading h2,
 .section-heading h2,
 .newsletter-panel h2,
 .work-case-studies-heading h2,
 .about-native-content > h2,
 .library-native-content > h2 {
  font-size: var(--type-section) !important;
 }
 .home-v4-feature-copy h2 {
  font-size: var(--type-featured-title) !important;
 }
 .home-v4-row-copy > h3 {
  font-size: var(--type-recent-title) !important;
 }
 .article-header h1 {
  font-size: var(--type-article-title) !important;
 }
 /* The mobile overlay is a separate navigation presentation. */
 .header-actions.is-open .nav-link {
  font-size: 20px !important;
 }
}