/*
 * grafo74 — Modern UI Phase 2: Typography
 * Adaptive, readable and non-destructive type system.
 * Version: var.4 grafo74
 */

:root {
  --type-font-body: "Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --type-font-display: "Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --type-font-reading: Georgia, "Times New Roman", serif;
  --type-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --type-size-xs: 0.75rem;
  --type-size-sm: 0.875rem;
  --type-size-base: clamp(1rem, 0.975rem + 0.125vw, 1.0625rem);
  --type-size-lg: clamp(1.125rem, 1.075rem + 0.25vw, 1.25rem);
  --type-size-h4: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --type-size-h3: clamp(1.25rem, 1.08rem + 0.8vw, 1.75rem);
  --type-size-h2: clamp(1.5rem, 1.16rem + 1.4vw, 2.25rem);
  --type-size-h1: clamp(1.875rem, 1.25rem + 2.6vw, 3.25rem);

  --type-leading-tight: 1.15;
  --type-leading-heading: 1.24;
  --type-leading-body: 1.68;
  --type-leading-compact: 1.42;
  --type-measure: 72ch;
  --type-measure-wide: 88ch;
  --type-tracking-tight: -0.025em;
  --type-tracking-heading: -0.015em;
  --type-tracking-label: 0.025em;
}

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

body {
  font-family: var(--type-font-body);
  font-size: var(--type-size-base);
  line-height: var(--type-leading-body);
  font-kerning: normal;
  font-synthesis: none;
  font-variant-ligatures: common-ligatures contextual;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6,
.title,
[class$="__title"],
[class*="__title "] {
  font-family: var(--type-font-display);
  font-weight: 700;
  line-height: var(--type-leading-heading);
  letter-spacing: var(--type-tracking-heading);
  text-wrap: balance;
  overflow-wrap: normal;
}

h1 { font-size: var(--type-size-h1); line-height: var(--type-leading-tight); letter-spacing: var(--type-tracking-tight); }
h2 { font-size: var(--type-size-h2); }
h3 { font-size: var(--type-size-h3); }
h4 { font-size: var(--type-size-h4); }
h5 { font-size: var(--type-size-lg); }
h6 { font-size: var(--type-size-base); }

p, li, dd, dt, blockquote, figcaption, address {
  hanging-punctuation: first last;
}

p {
  text-wrap: pretty;
}

main p,
.main p,
[class*="content"] p,
[class*="article"] p,
[class*="text"] p {
  max-width: var(--type-measure-wide);
}

small,
.small,
.caption,
figcaption,
[class*="__caption"],
[class*="__meta"],
[class*="__date"] {
  font-size: var(--type-size-sm);
  line-height: var(--type-leading-compact);
}

strong, b { font-weight: 700; }

abbr[title] {
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

code, kbd, samp, pre {
  font-family: var(--type-font-mono);
  font-size: 0.925em;
  font-variant-ligatures: none;
}

pre {
  line-height: 1.55;
  tab-size: 2;
  white-space: pre-wrap;
}

blockquote {
  font-family: var(--type-font-reading);
  font-size: var(--type-size-lg);
  line-height: 1.65;
}

button, input, select, textarea {
  letter-spacing: normal;
}

label,
button,
.button,
.btn,
.main-block__button,
.topnav a,
.dropbtn {
  line-height: var(--type-leading-compact);
}

/* Preserve compact viewer controls while unifying their font stack. */
[class^="viewer"] button,
[class*=" viewer"] button,
[class^="doc2026"] button,
[class*=" doc2026"] button {
  font-family: var(--type-font-body);
}

/* Do not override icon glyph fonts. */
.fa, .fas, .far, .fal, .fab,
[class^="fa-"], [class*=" fa-"] {
  font-family: "Font Awesome 5 Free", "FontAwesome" !important;
}

@media (max-width: 480px) {
  :root {
    --type-leading-body: 1.62;
  }
}

@media print {
  body {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11pt;
    line-height: 1.5;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: Arial, Helvetica, sans-serif;
    break-after: avoid;
  }

  p, li, blockquote {
    orphans: 3;
    widows: 3;
  }
}