/* Evident — the shared layer of the public marketing surface.
   Linked by landing.html and by the five /sample worked-example pages.

   WHAT LIVES HERE, and why only this. Measured before it was written: of
   landing.html's 41 KB of CSS and sample.css's 13 KB, exactly 432 bytes were
   byte-identical, and the design tokens differed only in whitespace. So the
   genuinely shared layer is the type, the tokens and the one component both
   surfaces render — not the page layouts, which share nothing. Folding those
   in would move private rules into a "shared" file that shares nothing, and
   cost the landing page a render-blocking request for the privilege.

   Loaded BEFORE each page's own stylesheet, which keeps the cascade order the
   pages had when these rules were inline. */

/* ── Type ─────────────────────────────────────────────────────────────── */

@font-face{
  font-family:'Fraunces';
  src:url('/fonts/fraunces-600.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
/* Metric-compatible fallback — tuned against Georgia to minimise layout shift
   on swap. It existed only on the landing page; the sample pages inherit the
   shift mitigation by joining this file. */
@font-face{
  font-family:'Fraunces-fb';
  src:local('Georgia'),local('serif');
  font-weight:600;
  size-adjust:105%;
  ascent-override:90%;
  descent-override:22%;
  line-gap-override:0%;
}

/* ── Tokens ───────────────────────────────────────────────────────────── */
/* One definition for both surfaces. Teal stays exclusively positive and amber
   is reserved for pain — the colour grammar the 2026-07-05 audit asked to be
   protected. Palette ruled 2026-08-31: the site and app keep teal; navy and
   gold is the LinkedIn identity only. */

:root{
  --ink:#0f1720; --ink-soft:#3a4654; --muted:#657282;
  --surface:#ffffff; --bg:#f8f7f4; --bg-2:#f1efe9;
  --line:#e2ddd6; --line-soft:#ebe7e0;
  --accent:#0d9488; --accent-deep:#0b7c72; --accent-deeper:#095e56; --accent-soft:#d6f3ef; --mint:#5eead4;
  --warn:#b45309; --warn-soft:rgba(180,83,9,.12);
  --verdict-ink:#7c5800; --verdict-bg:#fdf3dd; --verdict-border:#ecd9a8;
  --error:#b91c1c; --error-soft:rgba(185,28,28,.08);
  --shadow-sm:0 1px 2px rgba(15,23,32,.05),0 2px 8px rgba(15,23,32,.04);
  --shadow-md:0 10px 30px rgba(15,23,32,.08);
  --r:14px;
}

/* ── Role-family band component ───────────────────────────────────────── */
/* The one component both surfaces render: the landing page's illustration and
   the /sample/career-exploration worked example show the same person's
   families, so they must not drift apart. They already had — 12px against
   13px of padding, 64px against 66px, one line-height present and one absent,
   within hours of being written. Reconciled here to a single definition.

   The honest-states rule is IN the component, not in the page that uses it:
   every band carries the same size and weight, and a Stretch is never dimmed.
   Teal marks the positive band only. */

.fam-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line-soft)}
.fam-row:first-of-type{border-top:none}
.fam-name{flex:1;font-size:15px;font-weight:600;color:var(--ink)}
.fam-band{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--ink);background:var(--bg-2);white-space:nowrap}
.fam-band.strong{color:var(--accent-deeper);background:var(--accent-soft);border-color:var(--accent-soft)}
.fam-live{font-size:14px;color:var(--ink-soft);min-width:66px;text-align:right;white-space:nowrap}
.fam-note{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.55}