/* =========================================================
   Put Improv to Work — /legal
   Additions on top of the site-wide /styles.css. Only the
   pieces the legal page needs beyond the base design system:
   the alternate palette, the two-presenter layout, and the
   hero's practice-area chips.
   ========================================================= */

/* ---- Alternate palette: the legal edition ----
   Same brand, different suit. The ground warms from bone to
   beige, the violet swings a couple dozen degrees toward
   indigo, and the ink follows it bluer. Gold and the coral
   scribble stay exactly as they are on the main site — those
   are the two things that say "this is still Put Improv to
   Work" while everything around them shifts. Overrides the
   :root tokens in /styles.css plus the handful of lavender
   tints that were hardcoded there. */
:root {
  --ink: #1c2145;
  --ink-soft: #4d5470;
  --paper: #f8f3e8;
  --paper-2: #f0e7d5;
  --purple: #3f2fa6;
  --purple-deep: #281c6e;
  --purple-light: #8f86ff;
  --gold-soft: #f6e2b1;
  --line: #e2d8c3;
  /* bluer stand-ins for the lavender tints baked into /styles.css */
  --tint: #e9ecff;
  --tint-line: #bcc3e6;
  --on-deep: #e9ebfb;
  --on-deep-soft: #ccd3ef;
}

.kicker { background: var(--tint); }
.skill-card:nth-child(even) .emoji { background: var(--tint); }
#marquee span::after { color: #a9a3ff; }
.guarantee p { color: var(--ink-soft); }
#about { color: var(--on-deep); }
#about p { color: var(--on-deep-soft); }
#siteFooter { color: #aeb2ce; }
#siteFooter a { color: var(--on-deep-soft); }

/* ---- Presenters (two-up, on the deep purple band) ---- */
#presenters {
  background: var(--purple-deep);
  color: var(--on-deep);
  padding-block: 84px;
}
#presenters .section-head { max-width: 66ch; }
#presenters h2 { color: #fff; }
#presenters .section-head .lede { color: var(--on-deep-soft); }
#presenters .kicker {
  background: rgba(255, 255, 255, .1);
  border-color: var(--purple-light);
  color: var(--gold);
}

.presenter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  align-items: start;
}

.presenter {
  background: rgba(255, 255, 255, .06);
  border: 1.5px solid rgba(255, 255, 255, .16);
  border-radius: 22px;
  padding: 26px;
}
.presenter img {
  width: 100%;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  border-radius: 16px;
  border: 2.5px solid var(--gold);
  margin-bottom: 20px;
  background: var(--on-deep);
}
/* Both headshots are taller than the card window, so `cover` would trim
   equally top and bottom and clip the top of each head. Anchor the crop
   high on both and let it take from the bottom instead. */
.presenter.is-lex img { object-position: 50% 18%; }
.presenter.is-susan img { object-position: 50% 0; }

.presenter h3 {
  font-size: 26px;
  color: #fff;
  margin-bottom: 4px;
}
.presenter .role {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 14px;
}
.presenter p { color: var(--on-deep-soft); margin-bottom: 14px; font-size: 15.5px; }
.presenter p:last-child { margin-bottom: 0; }
.presenter strong { color: #fff; }
.presenter a { color: var(--gold); }
.presenter a:hover { color: #ffc447; }

@media (max-width: 860px) {
  .presenter-grid { grid-template-columns: 1fr; gap: 26px; }
  .presenter img { max-width: 340px; margin-inline: auto; }
}

/* ---- Practice-area chips under the hero lede ---- */
.practice-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.practice-chips span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  background: var(--tint);
  border: 1.5px solid var(--tint-line);
  color: var(--purple-deep);
  border-radius: 999px;
  padding: 5px 14px;
}