/* ============================================================
   Diablo Padel — meet the founder.

   The sub-pages hold to one screen. This one scrolls, like the vision page:
   a profile with a portrait, credentials and a track record does not belong
   in a scrolling column with a hidden scrollbar. Tokens, the type roles, the
   button, the footer and the grain all come from styles.css, which loads
   first. This file only adds what the profile layout needs.
   ============================================================ */

/* The sibling pages pin the body to the viewport. This one must scroll. */
html, body { height: auto; }

body { overflow-x: hidden; }

/* ---------- Shell ---------- */

.founder {
  --gutter: clamp(20px, 6vw, 120px);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(40px, 7vh, 88px);
}

.founder-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 2.6vw, 34px) 0;
}

.founder-bar .brand img { width: clamp(132px, 13vw, 176px); }
.founder-bar .back { margin: 0 -8px 0 0; }

/* ---------- Headline ---------- */

.founder-page { padding: clamp(20px, 4vh, 56px) 0 clamp(48px, 8vh, 96px); }

/* MEET THE is 7.48x its height and FOUNDER 7.20x, so a cap of the column
   width over 12 leaves the two lines well inside the page at every width. */
.founder-page .headline {
  --cap: clamp(34px, calc((100vw - 2 * var(--gutter)) / 12), 84px);
  margin: 0 0 clamp(32px, 6vh, 72px);
}

/* ---------- The profile: portrait left, the record right ---------- */

.profile {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

@media (min-width: 861px) {
  .profile {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 96px);
  }

  /* The portrait stays in view while the record scrolls past it. */
  .portrait { position: sticky; top: clamp(20px, 3vw, 40px); }
}

/* The headshot is a studio photo on a blue-grey ground. The same grade the
   sub-page stills wear pulls it into the Shadow Grey world. */
.portrait img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 30%;
  background: #1c191a;
  filter: saturate(0.68) contrast(1.05) brightness(0.9);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

/* Same treatment as the vision page's plate tags. */
.chips li {
  padding: 6px 10px;
  border: 1px solid var(--line-lit);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--dim);
}

/* ---------- The record ---------- */

.bio { max-width: 62ch; min-width: 0; }

.name {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--parchment);
}

.role {
  margin: 0 0 clamp(22px, 3vh, 32px);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--dim);
}

.founder .prose { max-width: none; margin-bottom: clamp(26px, 4vh, 40px); }
.founder .prose p:not(:first-child) { font-size: 15.5px; line-height: 1.7; }

.founder .prose strong,
.facts strong { color: var(--parchment); font-weight: 700; }

.section-head {
  margin: 0 0 12px;
  padding-top: clamp(20px, 3vh, 28px);
  border-top: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--iron);
}

.facts {
  display: grid;
  gap: 10px;
  margin: 0 0 clamp(26px, 4vh, 40px);
  padding: 0;
  list-style: none;
}

.facts li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(242, 242, 242, 0.78);
}

/* An iron dot, the one accent, used as a fill and nothing else. */
.facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--iron);
}

.origin {
  margin: 0 0 clamp(28px, 4vh, 40px);
  font-size: var(--fs-small);
  color: var(--muted);
}

/* ---------- Footer ---------- */

.founder .foot {
  padding-top: clamp(24px, 4vh, 40px);
  border-top: 1px solid var(--line);
}