/* Jacobs Language Services. Design Tokens.
 * Single source of truth for the visual system. Import once at the top of
 * every page so all colors, fonts and rhythm values stay aligned.
 */

:root {
  /* ── Surfaces ───────────────────────────────────────────────────── */
  --jls-paper:       #F5F4ED;            /* page background */
  --jls-ink:         oklch(0.22 0.01 60); /* primary text */
  --jls-mute:        oklch(0.55 0.01 60); /* secondary text, kicker labels */
  --jls-rule:        oklch(0.85 0.01 60); /* light hairline rules */

  /* ── Coral (the only accent) ────────────────────────────────────── */
  --jls-coral:       #D86F4B;            /* matches the logo stamp */
  --jls-coral-soft:  color-mix(in oklch, #D86F4B 22%, var(--jls-paper));

  /* ── Type ───────────────────────────────────────────────────────── */
  --jls-serif:       "Fraunces", "Iowan Old Style", Georgia, serif;
  --jls-sans:        "Inter Tight", "Helvetica Neue", Inter, system-ui, sans-serif;
  --jls-mono:        "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* ── Rhythm ─────────────────────────────────────────────────────── */
  --jls-page-pad-x:  64px;        /* horizontal page padding (desktop) */
  --jls-col-narrow:  660px;       /* the letter / narrow text column */
  --jls-col-wide:    980px;       /* listings, three-up footers */
  --jls-rule-w:      1px;
  --jls-rule-w-bold: 1.5px;
}

/* Body defaults */
html, body {
  background: var(--jls-paper);
  color: var(--jls-ink);
  font-family: var(--jls-serif);
}

/* The four reusable type marks ─────────────────────────────────────── */

/* Kicker. The small mono labels above sections. Coral when it's the
   active section's mark, mute otherwise. */
.jls-kicker {
  font-family: var(--jls-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--jls-mute);
}
.jls-kicker--coral { color: var(--jls-coral); }

/* Display headline. Large serif, slight negative tracking, balanced. */
.jls-display {
  font-family: var(--jls-serif);
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1.04;
  text-wrap: balance;
}

/* Italic-coral phrase inside a headline. Optional soft underline. */
.jls-mark {
  font-style: italic;
  color: var(--jls-coral);
  position: relative;
}
.jls-mark--underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 6px;
  background: var(--jls-coral-soft);
  z-index: -1;
}

/* Coral signature. Used for "Richard Jacobs" sign-offs. */
.jls-signature {
  font-family: var(--jls-serif);
  font-style: italic;
  font-size: 28px;
  color: var(--jls-coral);
}
.jls-signature + .jls-signature__role {
  font-family: var(--jls-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--jls-mute);
  margin-top: 6px;
}

/* Coral rule used as section closer / signature underline. */
.jls-rule-coral {
  width: 48px;
  height: 1px;
  background: var(--jls-coral);
}