/* PeduliAI typography system
   One source of truth for marketing, product, legal and knowledge pages. */
:root {
  --font-body: "Source Sans 3", "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  --font-display: "Lexend", "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --font-ui: var(--font-body);
  --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --font: var(--font-body);
  --type-body: clamp(1rem, 0.985rem + 0.08vw, 1.0625rem);
  --type-reading: clamp(1.0625rem, 1.025rem + 0.18vw, 1.125rem);
  --type-lead: clamp(1.125rem, 1.04rem + 0.38vw, 1.35rem);
  --type-section: clamp(2.1rem, 1.55rem + 2.35vw, 4.25rem);
  --type-display-short: clamp(2.65rem, 1.85rem + 3.35vw, 5.75rem);
  --type-display-long: clamp(2.15rem, 1.68rem + 2.05vw, 4rem);
  --leading-body: 1.68;
  --leading-reading: 1.76;
  --measure-copy: 68ch;
  --measure-reading: 65ch;
  --tracking-display: -0.035em;
}

html {
  font-size: 100%;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--leading-body);
  font-kerning: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

.k-article,
.k-container,
.k-header,
.k-footer {
  font-family: var(--font-body);
}

.k-hero :is(h1, h2, h3),
.k-article :is(h1, h2, h3),
.k-card :is(h2, h3) {
  font-family: var(--font-display);
}

button,
input,
select,
textarea {
  font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-title,
.footer-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-kerning: normal;
  text-wrap: balance;
}

p,
li,
blockquote {
  text-wrap: pretty;
}

.logo-text,
.k-brand {
  font-family: var(--font-display);
  font-weight: 700;
}

.hero-title,
.live-hero-content h1,
.info-hero-content h1,
.legal-hero h1 {
  font-size: var(--type-display-short);
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
}

.hero-title:has(+ .hero-description),
.hero-content > h1 {
  max-width: 21ch;
}

.section-header h2,
.info-heading,
.live-copy h2,
.manifesto-heading,
.ubi-intro h2 {
  font-size: var(--type-section);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.hero-description,
.live-hero-content > p,
.info-hero-content > p,
.k-lead {
  font-size: var(--type-lead);
  line-height: 1.65;
  max-width: 62ch;
}

.hero-description,
.live-hero-content > p,
.info-hero-content > p,
.ubi-section p,
.dark-section p,
.dark-section li {
  font-weight: 500;
}

.live-principle p,
.info-principle p,
.info-prose,
.info-prose p,
.info-prose li {
  max-width: var(--measure-copy);
}

.vessel-desc,
.vessel-features li,
.business-line p,
.ubi-pathway p,
.ubi-boundary,
.neural-card p,
.live-step p,
.live-proof p,
.live-note,
.info-prose p,
.info-prose li {
  font-size: max(1rem, 1em);
  font-weight: 400;
  line-height: 1.68;
}

.footer-title {
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.footer-sub-tagline,
.footer-legal {
  font-size: 0.875rem;
  line-height: 1.55;
}

.eyebrow,
.hero-eyebrow,
.info-kicker,
.live-kicker,
.k-eyebrow,
.k-card small {
  font-family: var(--font-ui);
  font-weight: 700;
}

.capability-num,
.live-step-index,
.proof-index,
.principle-index {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Knowledge reading measure belongs here; its structural grid lives in knowledge.css. */
.k-article {
  font-size: var(--type-reading);
  line-height: var(--leading-reading);
}

.k-article > :where(p, ul, ol, blockquote, h2, h3),
.k-lead {
  max-width: var(--measure-reading);
}

.k-article h2 {
  font-size: clamp(1.65rem, 1.45rem + 0.85vw, 2.25rem);
  line-height: 1.22;
}

.k-article h3 {
  font-size: clamp(1.2rem, 1.13rem + 0.3vw, 1.4rem);
  line-height: 1.3;
}

/* CJK typography uses script-native system fonts and neutral tracking. */
html:lang(zh-CN),
html:lang(zh),
html:lang(ja),
html:lang(ko) {
  --tracking-display: 0;
}

html:lang(zh-CN),
html:lang(zh) {
  --font-body: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  --font-display: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
}

html:lang(ja) {
  --font-body: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", system-ui, sans-serif;
  --font-display: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", system-ui, sans-serif;
}

html:lang(ko) {
  --font-body: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans CJK KR", system-ui, sans-serif;
  --font-display: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans CJK KR", system-ui, sans-serif;
}

:is(html:lang(zh-CN), html:lang(zh), html:lang(ja), html:lang(ko))
  :is(h1, h2, h3, h4, h5, h6, .display-title, .footer-title) {
  line-height: 1.18;
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

:is(html:lang(zh-CN), html:lang(zh), html:lang(ja), html:lang(ko))
  :is(.eyebrow, .hero-eyebrow, .info-kicker, .live-kicker, .k-eyebrow, .k-card small) {
  letter-spacing: 0.04em;
  text-transform: none;
}

@media (max-width: 760px) {
  :root {
    --type-body: 1.0625rem;
    --type-reading: 1.0625rem;
    --type-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.16rem);
    --type-display-short: clamp(2.35rem, 1.85rem + 2.5vw, 3.25rem);
  }

  .hero-description,
  .live-hero-content > p,
  .info-hero-content > p {
    line-height: 1.68;
  }
}

/* Preserve navigation at browser zoom levels near a 160px CSS viewport. */
@media (max-width: 260px) {
  .container,
  .k-container {
    width: min(calc(100% - 16px), var(--max, var(--k-max)));
  }

  .site-header .logo-text,
  .k-brand span {
    display: none;
  }

  .site-header .logo,
  .k-brand {
    flex: 0 0 auto;
  }

  .lang-option {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}