/* yotta.bot/founder — pitch deck slide 03 "Meet the founder" as a page
 * (owner, 2026-11-04). The deck's .founder-photo rules
 * (src/yotta-investors/frontend/content/seed/PitchDeck.css): the founder on a
 * sky-blue stage with the ghosts in the right half, her frosted card, with the
 * USC / IBM / Namu / Twitch marks at its foot, in a 37% column on the left. The photo is
 * light in both themes, so the words on it stay dark in both. */

body[data-page="careers-founder"] {
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Sans', sans-serif;
}

.fd-stage {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: calc(100svh - 72px);
  display: flex;
  align-items: center;
  background-color: #cae7fd;
  background-image: url("/founder/founder-tiffany-boo.webp");
  background-size: cover;
  /* Pinned to the top (owner, 2026-11-04): on a wide, short window cover
   * trims the photo, and the trim comes off the floor of Boos, never her
   * head under the header. */
  background-position: 70% top;
  background-repeat: no-repeat;
  color: #231a15;
}

.fd-col {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--gutter, 24px);
}
.fd-col > * { max-width: min(37vw, 460px); }

/* Back to Careers (owner, 2026-11-04), the careers pages' link: dark in both
 * themes, since it sits on the light photo. */
.fd-col > .fd-back { color: #231a15; margin-bottom: 24px; }
.fd h1 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: #231a15;
  margin: 0;
}

/* Translucent white over a blur of the stage, as in the deck. */
.fd-card {
  position: relative;
  margin-top: 24px;
  padding: 24px 26px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}
.fd-card::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: calc(100% + 18px);
  height: 26px;
  background: radial-gradient(closest-side, rgba(46, 78, 118, 0.3), rgba(46, 78, 118, 0.12) 55%, rgba(46, 78, 118, 0));
  pointer-events: none;
}
.fd-card h2 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: #231a15;
  margin: 0;
  max-width: none;
}
.fd-highlights {
  list-style: none;
  padding: 0;
  margin: 16px 0 20px;
  display: grid;
  gap: 10px;
}
.fd-highlights li {
  position: relative;
  padding-left: 16px;
  font-size: 14.5px;
  line-height: 1.45;
  color: #231a15;
}
.fd-highlights li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #231a15;
}
/* Where the deck has Education (owner, 2026-11-04): the USC, IBM, Namu and
 * Twitch marks along the card's foot, in faint black, under a hairline. */
.fd-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 16px 16px 0;
  border-top: 1px solid rgba(35, 26, 21, 0.10);
  color: #000;
}
/* Each mark links to its organization's site. The Twitch and IBM paths run
 * to the edge of their viewBox, so the SVGs draw past their box rather than
 * clipping an antialiased edge. */
.fd-logos a { display: block; line-height: 0; color: inherit; }
.fd-logos svg { display: block; width: auto; opacity: 0.4; overflow: visible; transition: opacity 0.15s; }
.fd-logos a:hover svg { opacity: 0.7; }
.fd-logos a:focus-visible { outline: 1px solid #463e37; outline-offset: 4px; border-radius: 4px; }
.fd-logos .logo-usc { height: 24px; }
.fd-logos .logo-ibm { height: 15px; }
.fd-logos .logo-namu { height: 17px; }
.fd-logos .logo-twitch { height: 22px; }


/* Too narrow for a column beside the stage: the card takes the width and the
 * photo sits below it, fitted to the screen, as the deck does. The words are
 * on the page's own background, cream in light and dark in dark (owner,
 * 2026-11-05), not the photo's sky, so they follow the theme. */
@media (max-width: 860px) {
  .fd-stage {
    display: block;
    min-height: 0;
    background-color: var(--bg);
    background-size: 100% auto;
    background-position: center bottom;
    padding-bottom: 56.3vw;
    color: var(--text);
  }
  .fd-col { padding-bottom: 32px; }
  .fd-col > * { max-width: none; }
  .fd-col > .fd-back,
  .fd h1,
  .fd-card h2,
  .fd-highlights li { color: var(--text); }
  .fd-highlights li::before { background: var(--text); }
  .fd-card { border-color: var(--border); }
  .fd-card::after { display: none; }
  .fd-logos { color: var(--text); border-top-color: var(--border); }
  [data-theme="dark"] .fd-card {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .fd-logos a:focus-visible { outline-color: var(--focus-ink); }
}