/* ============================================================================
   Founder Press Kit Page (/press/<slug>)
   Loaded via $page_css = 'styles-press-founder.css'
   ============================================================================ */

:root {
  --fp-cream:      #fffcf5;
  --fp-cream-soft: #faf6ec;
  --fp-tint:       #e6f0ec;
  --fp-tint-soft:  #f2efe9;
  --fp-sage:       #75a293;
  --fp-sage-dark:  #5d8a7b;
  --fp-slate:      #3e6079;
  --fp-slate-deep: #2c3e50;
  --fp-ink:        #2c3e50;
  --fp-ink-60:     #4a5565;
  --fp-ink-30:     #9ba8b3;
  --fp-line:       #e7e0cf;
  --fp-shadow-sm:  0 1px 2px rgba(43,68,88,.06), 0 2px 8px rgba(43,68,88,.04);
  --fp-shadow-md:  0 6px 18px rgba(43,68,88,.10);
  --fp-radius-md:  14px;
  --fp-radius-lg:  24px;
  /* Outer container width. With 24px horizontal padding on sections this
     gives 1200px of visible content (4 headshots @ 288px + 3 gaps @ 16px,
     or 3 books @ 368px + 2 gaps @ 24px = 1200). */
  --fp-max:        1248px;
}

/* ---------- Subnav (breadcrumb + founder switcher) ---------- */
/* Body already accounts for the fixed nav; add a small top spacer so the
   breadcrumb doesn't sit flush against the bottom edge of the main nav. */
.founder-subnav {
  border-bottom: 1px solid var(--fp-line);
  background: var(--fp-cream-soft);
  padding-top: 10px;
}

.founder-subnav__inner {
  max-width: var(--fp-max);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.founder-crumbs {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: var(--fp-ink-60);
}

.founder-crumbs a {
  color: var(--fp-ink-60);
  text-decoration: none;
}

.founder-crumbs a:hover { color: var(--fp-slate); }

.founder-crumbs__sep {
  margin: 0 8px;
  color: var(--fp-ink-30);
}

.founder-switcher {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.founder-switcher a {
  padding: 6px 14px;
  border-radius: 999px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--fp-ink-60);
  background: transparent;
  border: 1px solid var(--fp-line);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.founder-switcher a:hover {
  color: var(--fp-slate);
  border-color: var(--fp-slate);
}

.founder-switcher a.is-active {
  color: #fff;
  background: var(--fp-slate);
  border-color: var(--fp-slate);
}

.founder-switcher a.is-active:hover {
  background: var(--fp-slate-deep);
  border-color: var(--fp-slate-deep);
  color: #fff;
}

/* ---------- Hero ---------- */
.founder-hero {
  background: linear-gradient(180deg, var(--fp-tint) 0%, var(--fp-cream) 100%);
  padding: 72px 24px 56px;
}

.founder-hero__inner {
  max-width: var(--fp-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: center;
}

.founder-hero__eyebrow {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fp-sage-dark);
  margin: 0 0 16px;
}

.founder-hero__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(44px, 5.5vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--fp-ink);
  margin: 0 0 20px;
}

.founder-hero__lede {
  font-family: 'Open Sans', sans-serif;
  font-size: 19px;
  color: var(--fp-ink-60);
  max-width: 56ch;
  margin: 0 0 28px;
  line-height: 1.55;
}

.founder-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: var(--fp-ink-60);
  margin-bottom: 32px;
  padding: 16px 0;
  border-top: 1px solid var(--fp-line);
  border-bottom: 1px solid var(--fp-line);
}

.founder-hero__meta-item strong {
  color: var(--fp-ink);
  font-weight: 700;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  margin-right: 6px;
}

.founder-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.founder-btn-ghost {
  background: #fff;
  color: var(--fp-ink);
  padding: 12px 22px;
  border-radius: 999px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid var(--fp-line);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}

.founder-btn-ghost:hover {
  border-color: var(--fp-slate);
  color: var(--fp-slate);
}

.founder-hero__portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--fp-radius-lg);
  background: linear-gradient(135deg, var(--fp-tint), var(--fp-cream));
  box-shadow: var(--fp-shadow-md);
  position: relative;
  overflow: hidden;
}

.founder-hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- In-page section nav ---------- */
/* The site sets overflow-x: hidden on html + body which breaks
   position: sticky in some browsers. We rely on a tiny JS helper that
   toggles .founder-section-nav--fixed once the user scrolls past it.
   z-index 10000 keeps it above the main nav (which is z-index 9999). */
.founder-section-nav {
  position: relative;
  z-index: 10000;
  background: var(--fp-cream);
  border-bottom: 1px solid var(--fp-line);
}

.founder-section-nav--fixed {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
}

.founder-section-nav__inner {
  max-width: var(--fp-max);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.founder-section-nav a {
  font-family: 'Open Sans', sans-serif;
  color: var(--fp-ink-60);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  letter-spacing: .02em;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}

.founder-section-nav a:hover {
  color: var(--fp-ink);
  border-color: var(--fp-line);
}

.founder-section-nav a.is-active {
  color: var(--fp-ink);
  border-color: var(--fp-sage);
}

/* ---------- Section frames ---------- */
.founder-section {
  max-width: var(--fp-max);
  margin: 0 auto;
  padding: 80px 24px;
  /* Anchor-jump offset = main nav (80px) + in-page section nav (~60px). */
  scroll-margin-top: 140px;
}

/* Tinted full-bleed section: used for headshots + app */
.founder-section--tinted {
  background: var(--fp-tint-soft);
  max-width: none;
  padding: 80px 0;
}

.founder-section--tinted .founder-section__inner {
  max-width: var(--fp-max);
  margin: 0 auto;
  padding: 0 24px;
}

.founder-section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 36px;
  gap: 24px;
  flex-wrap: wrap;
}

.founder-section__head h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(30px, 3.2vw, 44px);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fp-ink);
}

.founder-section__head p {
  font-family: 'Open Sans', sans-serif;
  margin: 8px 0 0;
  color: var(--fp-ink-60);
  max-width: 60ch;
  font-size: 15px;
}

.founder-download-all {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: var(--fp-ink);
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--fp-line);
  background: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color .15s ease, color .15s ease;
}

.founder-download-all:hover {
  border-color: var(--fp-slate);
  color: var(--fp-slate);
}

/* ---------- Bio (two-column) ---------- */
.founder-bio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}

.founder-bio h3 {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fp-sage-dark);
  font-weight: 700;
  margin: 0 0 14px;
}

.founder-bio__h3-spaced { margin-top: 32px !important; }

.founder-bio__short p {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  color: var(--fp-ink);
  font-weight: 500;
  line-height: 1.55;
  margin: 0;
}

.founder-bio__50 {
  font-size: 15px !important;
  color: var(--fp-ink-60) !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
}

.founder-bio__long p {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: var(--fp-ink-60);
  margin: 0 0 14px;
  line-height: 1.7;
}

.founder-chips {
  margin-top: 24px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.founder-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: var(--fp-ink);
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--fp-line);
  background: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}

.founder-chip:hover {
  border-color: var(--fp-slate);
  color: var(--fp-slate);
}

.founder-chip--ok {
  border-color: var(--fp-sage) !important;
  color: var(--fp-sage-dark) !important;
}

/* ---------- Headshots ---------- */
/* Cards split the row equally regardless of count via flex: 1 1 0 (see
   .founder-headshot below). For our current data:
     Nick (4 photos)    -> ~288px each
     Jessica (5 photos) -> ~227px each
     Alex (3 photos)    -> ~389px each
   The --cols-N modifiers are no longer required by the layout but remain
   valid markup. */
.founder-headshots {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.founder-headshot {
  position: relative;
  /* Equal share of the row: each card = (container - gaps) / count.
     Single row regardless of how many headshots a founder has. */
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--fp-radius-md);
  background: linear-gradient(135deg, var(--fp-tint), var(--fp-cream));
  overflow: hidden;
  display: block;
  box-shadow: var(--fp-shadow-sm);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.founder-headshot:hover {
  transform: translateY(-2px);
  box-shadow: var(--fp-shadow-md);
}

.founder-headshot img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

.founder-headshot__label {
  position: absolute;
  inset: auto 10px 10px 10px;
  padding: 8px 12px;
  background: rgba(255, 252, 245, 0.95);
  border-radius: 8px;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--fp-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.founder-headshot__label small {
  color: var(--fp-ink-60);
  font-weight: 500;
  font-size: 11px;
}

/* ---------- Books ---------- */
/* Fixed 368px cards in a flex row, 24px gap. 3 fit in the 1200px content
   area (3*368 + 2*24 = 1152, with 48px slack). Wrap when there are more. */
.founder-books {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.founder-book {
  width: 368px;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-radius-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.founder-book:hover {
  border-color: var(--fp-sage);
  transform: translateY(-2px);
  box-shadow: var(--fp-shadow-sm);
}

.founder-book__cover {
  align-self: center;
  height: 240px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.founder-book__cover img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.founder-book__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  margin: 0;
  line-height: 1.2;
  color: var(--fp-ink);
}

.founder-book__desc {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: var(--fp-ink-60);
  margin: 0;
  line-height: 1.6;
}

.founder-book__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

/* ---------- Videos & interviews ---------- */
.founder-videos {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.founder-video-card {
  position: relative;
  border-radius: var(--fp-radius-md);
  overflow: hidden;
  background-color: var(--fp-slate-deep);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fp-cream);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--fp-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}

a.founder-video-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--fp-shadow-md);
}

/* Dark gradient overlay so the caption stays legible on thumbnails. */
a.founder-video-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%);
}

.founder-video-card--small {
  aspect-ratio: 16 / 10;
}

/* While the iframe is rendered the card no longer needs the dark gradient
   overlay (which would sit on top of the player and intercept clicks).
   Also kill the hover transform so the embedded video doesn't jitter on
   pointer move. */
.founder-video-card--playing::before { display: none; }
.founder-video-card--playing { cursor: default; }
a.founder-video-card--playing:hover { transform: none; }

/* Force the embedded player (YouTube iframe or HTML5 <video>) to fill the
   card. !important is required because header.php sets a global rule
   "img, iframe, video { max-width: 100% !important; height: auto !important }"
   that would otherwise collapse the player to its default size. */
.founder-video-card iframe,
.founder-video-card video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
  background: #000;
}

.founder-video-card--placeholder {
  background-color: rgba(43, 68, 88, 0.4);
  cursor: default;
}

.founder-video-card--placeholder .founder-video-card__caption {
  position: static;
  color: rgba(255, 252, 245, 0.7);
  font-family: 'Open Sans', sans-serif;
  font-style: italic;
  font-size: 14px;
  text-shadow: none;
}

.founder-video-card__play {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 252, 245, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 252, 245, 0.3);
}

.founder-video-card__play::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 16px solid var(--fp-cream);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left: 4px;
}

.founder-video-card__caption {
  position: absolute;
  z-index: 1;
  left: 20px;
  right: 20px;
  bottom: 20px;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.founder-video-card--small .founder-video-card__caption {
  font-size: 14px;
}

.founder-video-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- App section ---------- */
.founder-app {
  background: var(--fp-tint);
  border-radius: var(--fp-radius-lg);
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: start;
}

.founder-app h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 34px;
  margin: 0 0 14px;
  line-height: 1.15;
  color: var(--fp-ink);
}

.founder-app p {
  font-family: 'Open Sans', sans-serif;
  color: var(--fp-ink-60);
  font-size: 16px;
  margin: 0 0 24px;
  line-height: 1.65;
}

.founder-app__stats {
  display: flex;
  gap: 32px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.founder-app__stat-num {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 34px;
  font-weight: 600;
  color: var(--fp-slate);
  line-height: 1;
}

.founder-app__stat-label {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: var(--fp-ink-60);
  margin-top: 6px;
  letter-spacing: .04em;
}

.founder-app__screens {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.founder-app__screen {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--fp-shadow-md);
  overflow: hidden;
  line-height: 0;
}

.founder-app__screen img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 9 / 19.5 !important;
  object-fit: cover !important;
}

/* ---------- Interview prompts ---------- */
.founder-prompts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.founder-prompt {
  background: #fff;
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-radius-md);
  padding: 22px 24px;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  color: var(--fp-ink-60);
  line-height: 1.55;
}

.founder-prompt strong {
  color: var(--fp-sage-dark);
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  margin-right: 8px;
}

/* ---------- Press contact CTA ---------- */
.founder-cta {
  background: var(--fp-slate-deep);
  color: var(--fp-cream);
  border-radius: var(--fp-radius-lg);
  padding: 60px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.founder-cta::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 6px;
  background: linear-gradient(90deg, var(--fp-sage), var(--fp-sage-dark));
}

.founder-cta__copy h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 36px;
  margin: 0 0 14px;
  line-height: 1.15;
  color: var(--fp-cream);
}

.founder-cta__copy p {
  font-family: 'Open Sans', sans-serif;
  color: rgba(255, 252, 245, 0.8);
  margin: 0 0 26px;
  max-width: 50ch;
  line-height: 1.65;
}

.founder-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.founder-btn-cream {
  background: var(--fp-cream);
  color: var(--fp-ink);
  padding: 14px 22px;
  border-radius: 999px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: background .15s ease;
}

.founder-btn-cream:hover {
  background: var(--fp-tint);
  color: var(--fp-ink);
}

.founder-btn-outline {
  background: transparent;
  color: var(--fp-cream);
  padding: 14px 22px;
  border-radius: 999px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid rgba(255, 252, 245, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}

.founder-btn-outline:hover {
  border-color: var(--fp-cream);
  background: rgba(255, 252, 245, 0.05);
  color: var(--fp-cream);
}

.founder-cta__card {
  background: rgba(255, 252, 245, 0.06);
  border: 1px solid rgba(255, 252, 245, 0.14);
  border-radius: var(--fp-radius-md);
  padding: 28px;
}

.founder-cta__card h4 {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--fp-sage);
  font-weight: 700;
}

.founder-cta__card p {
  font-family: 'Open Sans', sans-serif;
  color: rgba(255, 252, 245, 0.85);
  font-size: 15px;
  margin: 0 0 6px;
}

.founder-cta__card p strong { color: var(--fp-cream); }

.founder-cta__card a {
  color: var(--fp-sage);
  font-weight: 600;
  text-decoration: none;
}

.founder-cta__card a:hover { color: var(--fp-cream); }

.founder-cta__muted {
  color: rgba(255, 252, 245, 0.6) !important;
  font-size: 13px !important;
  margin-top: 14px !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .founder-hero__inner,
  .founder-bio,
  .founder-app,
  .founder-cta,
  .founder-videos { grid-template-columns: 1fr; gap: 32px; }

  .founder-prompts { grid-template-columns: 1fr; }

  .founder-app,
  .founder-cta { padding: 36px; }
}

@media (max-width: 600px) {
  .founder-hero { padding: 48px 20px 36px; }
  .founder-section { padding: 56px 20px; }
  .founder-section--tinted { padding: 56px 0; }
  .founder-section--tinted .founder-section__inner { padding: 0 20px; }

  .founder-app__screens { grid-template-columns: repeat(2, 1fr); }
}