/* ============================================================
   IUDEX — Base elements & brand utilities
   Minimal reset + the recurring brand primitives expressed as
   classes so cards, kits and one-off pages stay consistent.
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv01';
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-primary);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--ink); color: var(--white); }

/* ---------- Display / headline ---------- */
.iudex-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
  text-wrap: balance;
}
/* the "ghost" words inside a two-tone headline */
.iudex-ghost { color: var(--text-ghost); }

.iudex-h1 { font: var(--fw-regular) var(--fs-h1)/var(--lh-tight) var(--font-display); letter-spacing: var(--ls-display); color: var(--text-strong); }
.iudex-h2 { font: var(--fw-regular) var(--fs-h2)/var(--lh-heading) var(--font-display); letter-spacing: var(--ls-heading); color: var(--text-strong); }
.iudex-h3 { font: var(--fw-medium) var(--fs-h3)/var(--lh-snug) var(--font-display); letter-spacing: var(--ls-heading); color: var(--text-primary); }

/* ---------- Eyebrow / section label ---------- */
.iudex-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-primary);
}
.iudex-label--muted { color: var(--text-muted); }

/* a label paired with its bracketed section index, justified */
.iudex-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  border: 0;
}
.iudex-index {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Body copy helpers ---------- */
.iudex-lead { font-size: var(--fs-body-lg); line-height: var(--lh-snug); color: var(--text-body); }
.iudex-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.iudex-justify { text-align: justify; text-justify: inter-word; }

/* ---------- Giant stat number ---------- */
.iudex-stat {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--text-ghost);          /* default: the light ghost-gray stat   */
}
.iudex-stat--ink { color: var(--text-strong); }
.iudex-stat__caption {
  margin-top: var(--space-3);
  font-size: var(--fs-label-sm);
  letter-spacing: var(--ls-label-sm);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Dotted divider ---------- */
.iudex-divider-dotted {
  border: 0;
  border-top: 1px dotted var(--divider-dotted);
  margin: 0;
}

/* ---------- Layout container ---------- */
.iudex-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}