/* ─────────────────────────────────────────────────────────────
   The Career Portfolio — Base element styles & helper classes
   Lightweight, opt-in. Components rely on tokens, not these.
   ───────────────────────────────────────────────────────────── */

/* Headings default to the display serif */
.tcp-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}
.tcp-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-h1); line-height: var(--lh-snug); color: var(--text-strong); }
.tcp-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-h2); line-height: var(--lh-snug); color: var(--text-strong); }
.tcp-h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-h3); line-height: var(--lh-snug); color: var(--text-strong); }

/* Eyebrow / overline — the brand's signature label style */
.tcp-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--teal-600);
}

.tcp-body { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--text-body); }
.tcp-lead { font-family: var(--font-sans); font-size: var(--text-lg); line-height: var(--lh-relaxed); color: var(--text-body); }

/* Three-dot pillar motif as pure CSS (coral · gold · teal) */
.tcp-dots {
  display: inline-flex;
  gap: 0.32em;
  align-items: center;
}
.tcp-dots > i {
  display: block;
  width: 0.5em;
  height: 0.5em;
  border-radius: var(--radius-pill);
}
.tcp-dots > i:nth-child(1) { background: var(--pillar-clarify); }
.tcp-dots > i:nth-child(2) { background: var(--pillar-build); }
.tcp-dots > i:nth-child(3) { background: var(--pillar-communicate); }

/* Utility: warm focus ring for any focusable */
.tcp-focusable:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* ── The revamped TCP wordmark (Fredoka + three dots) ──
   <span class="tcp-logo">TCP<i class="tcp-logo-dots"><b></b><b></b><b></b></i></span>
   Size with font-size on .tcp-logo; dots scale in em. */
.tcp-logo {
  font-family: var(--font-logo);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--navy-800);
  display: inline-flex;
  align-items: flex-end;
}
.tcp-logo-dots {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.09em;
  margin-left: 0.1em;
  margin-bottom: 0.06em;
}
.tcp-logo-dots > b {
  display: block;
  width: 0.21em;
  height: 0.21em;
  border-radius: var(--radius-pill);
}
.tcp-logo-dots > b:nth-child(1) { background: var(--pillar-clarify); }
.tcp-logo-dots > b:nth-child(2) { background: var(--pillar-build); }
.tcp-logo-dots > b:nth-child(3) { background: var(--pillar-communicate); }