/* ===================================================
   TaskMasters — Founder profile pages · v2 Quiet Ledger
   Used by about-jake.php and about-marc.php.

   Deliberately NOT folded into about-full.css: that file styles the
   combined story page, which stays as it is. These pages exist so each
   founder carries their own URL and their own Person schema, which is
   what makes a name verifiable to a search engine.
   =================================================== */

.tm-per-page {
  /* Two gutters, as on the homepage (index.css .tm-v2-page): the nav sits on
     the narrow nav gutter, page sections on the wider section gutter, so
     content reads a little inside the logo and Login edges rather than
     pinned to them. Same 1440px frame; phones use the homepage's 16/14px. */
  --tm-per-px: clamp(32px, 7vw, 100px);
  background: var(--tm-cream);
  color: var(--tm-ink-700);
}

.tm-per-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--tm-per-px);
}

/* ── Breadcrumb ─────────────────────────────────────────
   Its own namespace rather than reusing .tm-abt-breadcrumb from about-full.css:
   these pages do not load that stylesheet, and borrowing a class whose
   definition lives in a file you did not include is how a link ends up
   rendering as default blue underline on the one page nobody checked. */
.tm-per-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 26px;
  font-family: var(--tm-font-body);
  font-size: 0.82rem;
}

.tm-per-crumb__link {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 150ms ease;
}

.tm-per-crumb__link:hover { color: rgba(255, 255, 255, 0.88); }

.tm-per-crumb__sep {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.25);
}

.tm-per-crumb__current { color: rgba(255, 255, 255, 0.7); }

/* ── Hero ───────────────────────────────────────────── */
.tm-per-hero {
  background: linear-gradient(160deg, var(--tm-navy) 0%, var(--tm-navy-2) 60%, var(--tm-navy-3) 100%);
  padding: clamp(96px, 12vw, 150px) 0 clamp(64px, 9vw, 104px);
}

.tm-per-hero__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--tm-per-px);
}

.tm-per-hero__eyebrow {
  font-family: var(--tm-font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tm-gold-soft);
  margin: 0 0 14px;
}

.tm-per-hero__name {
  font-family: var(--tm-font-display);
  font-size: clamp(2.4rem, 6vw, 3.9rem);
  font-weight: 600;
  line-height: 1.05;
  color: #FFFFFF;
  margin: 0 0 12px;
}

.tm-per-hero__role {
  font-family: var(--tm-font-body);
  font-size: clamp(0.95rem, 1.7vw, 1.08rem);
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  max-width: 46ch;
  line-height: 1.6;
}

/* ── Two-column intro: portrait + lead ──────────────── */
.tm-per-intro {
  padding: clamp(52px, 8vw, 88px) 0 clamp(24px, 4vw, 40px);
}

.tm-per-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.tm-per-portrait {
  position: relative;
  border-radius: var(--tm-radius-lg);
  overflow: hidden;
  background: var(--tm-navy-2);
  border: 1px solid var(--tm-line-200);
  box-shadow: var(--tm-shadow-hero);
  /* The two source photos have different aspect ratios (Jake 3:4, Marc 1:1).
     A fixed ratio here keeps the two pages visually consistent; object-fit
     does the cropping rather than the browser stretching either one. */
  aspect-ratio: 3 / 4;
}

.tm-per-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: grayscale(8%);
}

.tm-per-lead {
  font-family: var(--tm-font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.62rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--tm-navy);
  margin: 0 0 28px;
}

.tm-per-lead + .tm-per-body { margin-top: 0; }

.tm-per-body p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--tm-ink-700);
  margin: 0 0 18px;
  max-width: 68ch;
}

/* ── Section blocks ─────────────────────────────────── */
.tm-per-section {
  padding: clamp(40px, 6vw, 68px) 0;
  border-top: 1px solid var(--tm-line-200);
}

.tm-per-section:first-of-type { border-top: 0; }

.tm-per-section__eyebrow {
  font-family: var(--tm-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tm-emerald);
  margin: 0 0 12px;
}

.tm-per-section__heading {
  font-family: var(--tm-font-display);
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--tm-navy);
  margin: 0 0 22px;
}

/* ── Accountability list ────────────────────────────── */
.tm-per-owns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  max-width: 74ch;
}

.tm-per-owns li {
  position: relative;
  padding: 14px 0 14px 34px;
  border-bottom: 1px solid var(--tm-line-200);
  font-size: 0.98rem;
  line-height: 1.6;
}

.tm-per-owns li:last-child { border-bottom: 0; }

.tm-per-owns li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 21px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--tm-emerald);
}

/* ── Credential chips ───────────────────────────────── */
.tm-per-creds {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.tm-per-creds li {
  font-family: var(--tm-font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--tm-navy);
  background: var(--tm-warm);
  border: 1px solid var(--tm-line-200);
  border-radius: var(--tm-radius-pill);
  padding: 8px 16px;
}

/* ── Pull quote ─────────────────────────────────────── */
.tm-per-quote {
  margin: 0;
  padding: clamp(28px, 4vw, 40px);
  background: var(--tm-warm);
  border-left: 3px solid var(--tm-gold);
  border-radius: 0 var(--tm-radius-lg) var(--tm-radius-lg) 0;
  max-width: 72ch;
}

.tm-per-quote p {
  font-family: var(--tm-font-display);
  font-size: clamp(1.1rem, 2.1vw, 1.38rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.55;
  color: var(--tm-navy);
  margin: 0 0 14px;
}

.tm-per-quote footer {
  font-family: var(--tm-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm-ink-500);
}

/* ── Draft banner ───────────────────────────────────────
   One notice at the top of the page rather than a marker per sentence. The
   copy below it is written to be read as copy — a reviewer cannot judge prose
   that is interrupted every paragraph by a box explaining itself.

   It is still deliberately visible: these pages make claims about real people,
   and one that shipped unreviewed would be worse than no page. Remove it by
   setting $tmDraft = false in the page, not by deleting this rule. */
.tm-per-draft {
  font-family: var(--tm-font-body);
  font-size: 0.86rem;
  line-height: 1.6;
  color: #7A4F00;
  background: #FFF6E0;
  border-bottom: 1px solid #E8C97A;
  padding: 12px clamp(16px, 3.5vw, 56px);
}

.tm-per-draft strong { color: #5E3D00; }

/* A section intentionally left empty, explaining why. Quieter than the banner:
   it is a note to the reviewer, not a warning about the page. */
.tm-per-note {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--tm-ink-500);
  font-style: italic;
  margin: 0;
  max-width: 68ch;
  padding-left: 16px;
  border-left: 2px solid var(--tm-line-300);
}

/* ── Footer nav: the other founder ──────────────────── */
.tm-per-next {
  padding: clamp(40px, 6vw, 72px) 0 clamp(64px, 9vw, 104px);
  border-top: 1px solid var(--tm-line-200);
}

.tm-per-next__row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}

.tm-per-next__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tm-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tm-navy);
  text-decoration: none;
  border: 1px solid var(--tm-line-300);
  border-radius: var(--tm-radius-pill);
  padding: 12px 24px;
  transition: border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.tm-per-next__link:hover {
  color: var(--tm-emerald-deep);
  border-color: var(--tm-emerald);
  box-shadow: var(--tm-shadow-hover);
}

/* ── Scroll reveal (same contract as about-full.php) ── */
[data-per-fade] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 620ms ease, transform 620ms ease;
}

[data-per-fade].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-per-fade] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Phones: the nav's own 16px gutter. There is no room to inset content on a
   small screen, and the homepage's 14px at 480px put text 2px outside the nav. */
@media (max-width: 720px) {
  .tm-per-page { --tm-per-px: 16px; }
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 860px) {
  .tm-per-intro__grid {
    grid-template-columns: 1fr;
  }

  .tm-per-portrait {
    max-width: 300px;
    aspect-ratio: 1 / 1;
  }
}

/* ── Navbar logo on the About pages ─────────────────────────────────────
   These pages use the all-green logo (TM-Logo-GG-B-about.png, via $navLogoLarge
   in the page). That file is cropped tight, while the default TM-Logo-GB-B.png
   has wide transparent margins, so at navbar.css's 150px the green one would
   show about 146px tall against the default's 82px. The rules below place it
   so its visible logo is the same height and position as the default's.

   This stylesheet only loads on the About pages, so nothing else changes.
   The numbers come from both files' margins: re-measure if either is replaced. */
@media (min-width: 1025px) {
  .tm-nav .tm-nav__logo-img--large {
    top: 19.7px;
    left: 77.5px;
    height: 84.5px;
    transform: none;
  }
}

@media (max-width: 1024px) {
  .tm-nav .tm-nav__logo-img--large {
    left: 43.4px;
    height: 47.4px;
    transform: translateY(calc(-50% + 3.9px));
  }
}