/* ==========================================================================
   Peoplos — Base element styles
   Opt in via the `.pp` scope on a wrapper. Sets the two-voice typography,
   calm teal canvas, and link defaults.
   ========================================================================== */

.pp {
  font: var(--pp-font-body);
  color: var(--pp-text);
  background: var(--pp-surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.pp h1, .pp h2, .pp h3 { color: var(--pp-text); margin: 0; }
.pp h1 { font: var(--pp-font-display-xl); letter-spacing: var(--pp-tracking-display); }
.pp h2 { font: var(--pp-font-display-l);  letter-spacing: var(--pp-tracking-display); }
.pp h3 { font: var(--pp-font-title); letter-spacing: -0.01em; }

.pp p     { font: var(--pp-font-body); color: var(--pp-text-body); margin: 0; }
.pp small { font: var(--pp-font-small); color: var(--pp-text-muted); }

/* Uppercase mono section caption */
.pp .pp-caption {
  font: var(--pp-font-caption);
  letter-spacing: var(--pp-tracking-caption);
  text-transform: uppercase;
  color: var(--pp-text-faint);
}

/* Links — default + hover, always defined so editor-added links inherit brand */
a { color: var(--pp-link); text-decoration: none; }
a:hover { color: var(--pp-link-hover); text-decoration: underline; }
.pp a { color: var(--pp-link); }
.pp a:hover { color: var(--pp-link-hover); }

.pp :focus-visible {
  outline: 2px solid var(--pp-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.pp hr {
  border: 0;
  border-top: 1px solid var(--pp-border-subtle);
  margin: var(--pp-space-8) 0;
}