/* ============================================================
   Obludzyner & Co. — Base layer & brand utility classes
   ------------------------------------------------------------
   Lightweight, opt-in helpers built on the tokens. Not a reset.
   ============================================================ */

.ob-eyebrow {
  font-family: var(--eyebrow-family);
  font-weight: var(--eyebrow-weight);
  font-size: var(--eyebrow-size);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
}

.ob-display {
  font-family: var(--display-family);
  font-weight: var(--display-weight);
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  color: var(--text-primary);
}

.ob-headline {
  font-family: var(--headline-family);
  font-weight: var(--headline-weight);
  line-height: var(--headline-leading);
  letter-spacing: var(--headline-tracking);
  color: var(--text-primary);
}

.ob-headline--caps {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.ob-body {
  font-family: var(--body-family);
  font-weight: var(--body-weight);
  font-size: var(--text-base);
  line-height: var(--body-leading);
  color: var(--text-secondary);
}

.ob-serif { font-family: var(--font-serif); }
.ob-sans  { font-family: var(--font-sans); }
.ob-mono  { font-family: var(--font-mono); }

/* A hairline rule the brand uses to separate editorial blocks */
.ob-rule {
  border: 0;
  border-top: var(--border-hairline) solid var(--border-default);
  margin: 0;
}

/* Thin gold tick used as a section marker */
.ob-tick {
  display: inline-block;
  width: 36px;
  height: 2px;
  background: var(--accent);
}