/* Main text and interface copy. System fonts remain available while web fonts load. */
body.kn-page {
  font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Headings and navigation share one Vietnamese-friendly display face. */
body.kn-page :is(h1, h2, h3, h4, h5, h6),
body.kn-page #site-nav,
body.kn-page .mobile-toggle {
  font-family: "Be Vietnam Pro", "Roboto", system-ui, sans-serif;
}

body.kn-page .block-hero .hero-title {
  line-height: 1.16;
}

body.kn-page .kn-page-hero h1 {
  line-height: 1.2;
}

body.kn-page .kn-page-hero-article h1,
body.kn-page .kn-page-hero-about h1 {
  max-width: 1080px;
  font-size: clamp(1.55rem, 2vw, 2rem);
  line-height: 1.32;
  letter-spacing: -0.015em;
}

/* Keep all inner-page banners, including contact, at one compact height. */
.kn-page-hero:not(.kn-page-hero-article) {
  min-height: 144px;
}

@media (max-width: 680px) {
  .kn-page-hero:not(.kn-page-hero-article) {
    min-height: 112px;
  }
}

/* Show page and homepage headings in uppercase without changing CMS or SEO text. */
body.kn-page .kn-page-hero h1,
body.kn-home .block-heading :is(h1, h2),
body.kn-home .content-card h3 {
  text-transform: uppercase;
}

/* A heavier display face separates the animated figures from body copy. */
body.kn-page .kn-stat-number {
  font-family: "Barlow Semi Condensed", "Be Vietnam Pro", "Roboto", sans-serif;
  font-weight: 900;
  letter-spacing: -0.035em;
}

/* Article content should use the full reading column and keep headings compact. */
body.kn-page .kn-article-detail .prose :is(p, h2, h3, ul, ol, blockquote),
body.kn-page .kn-article-survey {
  max-width: 100%;
}

body.kn-page .kn-article-detail .prose :is(p, h2, h3) {
  text-align: left !important;
}

body.kn-page .kn-article-detail .prose p {
  text-align: justify !important;
  text-align-last: left;
}

body.kn-page .kn-article-detail .prose h2 {
  margin: 1.1em 0 0.45em;
  font-size: clamp(1.5rem, 2vw, 1.85rem);
  line-height: 1.28;
  letter-spacing: -0.025em;
  text-align: justify !important;
  text-align-last: left;
  text-justify: inter-word;
  text-wrap: wrap;
}

body.kn-page .kn-article-detail .prose h3 {
  margin: 1.05em 0 0.4em;
  line-height: 1.35;
  text-align: left !important;
  text-align-last: auto;
  text-wrap: wrap;
  overflow-wrap: break-word;
}

/* Publication dates share the calendar-and-date layout on cards and articles. */
.kn-article-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.kn-article-meta svg {
  flex: 0 0 16px;
}

.kn-article-meta time {
  white-space: nowrap;
}

.kn-page-hero-article .kn-article-meta {
  margin: 14px 0 0;
  color: #dbe5f5;
  font-size: 0.9375rem;
}

/* Keep the homepage banner prominent without changing article hero titles. */
body.kn-home .block-hero {
  min-height: clamp(440px, 68svh, 680px);
  padding-block: 32px;
}

body.kn-home .block-hero .block-heading {
  max-width: 980px;
}

body.kn-home .block-hero .hero-title {
  max-width: 980px;
  margin-bottom: 12px;
  font-size: clamp(2.35rem, 3.35vw, 3.5rem);
  line-height: 1.28;
  letter-spacing: -0.025em;
}

body.kn-home .block-hero .eyebrow {
  margin-bottom: 12px;
}

body.kn-home .section:not(.block-hero) {
  padding-block: clamp(38px, 3.8vw, 56px);
}

body.kn-home .block-heading h2 {
  font-size: clamp(1.6rem, 2.35vw, 2.1rem);
  line-height: 1.22;
  letter-spacing: -0.025em;
}

body.kn-home .block-image .container {
  align-items: start;
}

body.kn-home .block-heading .lead {
  line-height: 1.5;
}

@media (min-width: 901px) {
  body.kn-page .kn-header {
    position: sticky;
    top: 0;
    z-index: 50;
  }

  body.kn-page .section[id] {
    scroll-margin-top: 160px;
  }
}

@media (max-width: 680px) {
  body.kn-home .block-hero {
    min-height: 430px;
    padding-block: 28px;
  }

  body.kn-home .block-hero .hero-title {
    font-size: clamp(1.7rem, 6vw, 2.1rem);
  }

  body.kn-home .block-heading h2 {
    font-size: clamp(1.5rem, 6vw, 1.85rem);
  }
}