/* ============================================================
   ABOUT PAGE — /about
   Register 2 (editorial dark). Replaces the legacy /studio
   Practice page. All sizes, colours, and spacings come from
   the brief (Pasted-TASK-Build-the-About-page-...txt) plus
   the Apr 2026 reorder + tightened-people-cards revision.

   Section order:
     1. Opening
     2. Agency reel
     3. Numbers band
     4. Team (unified — Task #536)
     5. Six Disciplines
     6. Be entry point
   ============================================================ */

.screen--about { display: none; }
/* Reserve --footer-h at the bottom so the final about block (founder
   bios + numbers band) never tucks under the persistent .footer-bar
   strip — a thin chrome line on top of editorial copy reads as a
   duplicated footer (Task #488 Phase 1). */
.screen--about.active {
  display: block;
  padding-bottom: var(--footer-h, 40px);
}

.about-scroll {
  height: calc(100vh - var(--nav-h, 56px));
  overflow-y: auto;
  background: var(--ink);
  color: var(--text);
}

.about-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 48px 0;
}

/* ---------- SECTION 1 — OPENING ---------- */
.about-opening {
  max-width: 1280px;
  margin: 0 0 80px;
}
/* .about-eyebrow is aliased onto the .eyebrow--rule primitive in
   main.css (Task #424). No page-local override needed. */
.about-headline {
  font-family: var(--serif);
  font-weight: var(--fw-light);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-headline);
  max-width: var(--measure-meta);
  margin: 0 0 40px;
  color: var(--text);
}
.about-headline em {
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--be-yellow);
}
.about-sublede {
  font-family: var(--sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sublede);
  line-height: var(--lh-base);
  color: var(--text-mute);
  max-width: var(--measure-lede);
  margin: 0 0 80px;
}

/* ---------- SECTION 2 — AGENCY REEL ----------
   16:9 frame inside the standard 1280px content wrap. Hidden
   by default — about.js drops the `hidden` attribute once the
   admin-configured reel URL resolves, so an empty / failed
   fetch leaves no visual gap between the opening and the
   numbers band. Dark-register frame (ink-2 + ink-line) keeps
   it visually consistent with the surrounding sections. */
.about-reel {
  margin: 0 0 96px;
}
.about-reel-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  overflow: hidden;
}
.about-reel-video,
.about-reel-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}
.about-reel-sound {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 2;
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.55);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--r-full);
  padding: 6px 12px;
  cursor: pointer;
  transition: background .2s var(--ease, ease),
              border-color .2s var(--ease, ease),
              color .2s var(--ease, ease);
}
.about-reel-sound:hover,
.about-reel-sound:focus-visible {
  background: rgba(0, 0, 0, 0.75);
  border-color: var(--be-yellow);
  color: var(--be-yellow);
  outline: none;
}

/* ---------- SHARED SECTION SCAFFOLD ---------- */
.about-section {
  margin-bottom: 96px;
}
/* .about-section-label is aliased onto the .eyebrow--faint primitive
   in main.css (Task #424). No page-local override needed. */

/* ---------- SECTION 4 — TEAM ----------
   One unified grid for every active member, regardless of the
   `isFounder` flag (Task #536). Desktop renders three cards on
   the top row and two centered on the bottom row when there are
   five members; the auto-fit/centering keeps 4- and 6-member
   line-ups looking balanced too. Cards share a single internal
   layout (portrait left, text right) and a single portrait size
   on every viewport. */
.about-people-grid {
  /* Six-column track so a row can hold three cards (span 2 each)
     or be re-centered as two cards offset by one column. */
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 64px 48px;
}
.about-person {
  grid-column: span 2;
}
/* When the last row would otherwise hold exactly two orphan cards
   (i.e. the second-to-last card is the first card of a new 3-up
   row), shift that card to start at column 2 so the trailing pair
   sits centered under the row of three above it. */
.about-people-grid > .about-person:nth-last-child(2):nth-child(3n + 1) {
  grid-column: 2 / span 2;
}
/* Portrait stacks above the bio so the bio body uses the full card
   width — the previous side-by-side layout left only ~150px for the
   bio at desktop, which read as a narrow squeeze (Task #551). */
.about-person {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
  min-width: 0;
}
.about-person-portrait {
  width: 200px;
  aspect-ratio: 3 / 4;
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.about-person-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-monogram {
  font-family: var(--display);
  font-weight: var(--fw-display);
  font-size: var(--fs-display);
  color: var(--be-yellow);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}
.about-person-portrait[data-no-photo]::after {
  content: 'AWAITING PORTRAIT';
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-nav);
  color: var(--text-faint);
}
.about-person-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.about-person-name {
  font-family: var(--serif);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-headline);
  line-height: var(--lh-tight);
  color: var(--text);
  margin: 0 0 12px;
}
.about-person-name { font-size: var(--fs-h1); }
.about-person-role {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--be-yellow);
  margin-bottom: 8px;
}
.about-person-scope {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-nav);
  color: var(--text-mute);
  margin-bottom: 28px;
}
.about-person-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: var(--fs-h3);
  line-height: var(--lh-base);
  color: var(--text-mute);
  border-left: 2px solid var(--be-yellow);
  padding-left: 20px;
  margin: 0 0 28px;
  max-width: var(--measure-prose);
}
/* Reel stage CSS guard — Task #488 Phase 1. about.js already sets the
   wrapping section[hidden] until a media URL resolves; this :has()
   fallback collapses the stage if for any reason no <video>/<iframe>
   was inserted (e.g. a future render path mounts the section without
   media). Belt-and-braces against empty black rectangles. */
.about-reel-stage:not(:has(.about-reel-video, .about-reel-iframe)) {
  display: none;
}

/* Bio body renders in DM Sans (Task #551) — the editorial serif body
   was hard to read in the squeezed column the previous layout produced.
   Names and roles keep their existing serif/mono tokens. */
.about-person-bio {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-article);
  color: var(--text-mute);
  max-width: 48ch;
  margin: 0;
}
.about-person-bio p {
  margin: 0 0 1em;
}
.about-person-bio p:last-child {
  margin-bottom: 0;
}
.about-person-bio--long {
  margin-top: 1em;
}
.about-person-readmore {
  display: inline-block;
  margin-top: 16px;
  padding: 0;
  background: transparent;
  border: 0;
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--be-yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.about-person-readmore:hover,
.about-person-readmore:focus-visible {
  color: var(--be-yellow);
  outline: none;
  text-decoration-thickness: 2px;
}

/* SECTION 3 — NUMBERS BAND now uses the shared .stats-band-section
   wrapper from main.css (Task #537). The full-bleed dark strip that
   used to live here was retired in favour of the bordered strip that
   /home and /ai-ops also share, so the band reads as the same
   component on every page. */

/* ---------- SECTION 6 — SIX DISCIPLINES ---------- */
.about-disciplines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 48px;
}
.about-discipline {
  padding: 24px 0;
  border-bottom: 1px solid var(--ink-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.about-discipline-num {
  font-family: var(--display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h1);
  color: var(--be-yellow);
  letter-spacing: var(--ls-headline);
  line-height: var(--lh-tight);
  margin-bottom: 8px;
}
.about-discipline-name {
  font-family: var(--serif);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sublede);
  color: var(--text);
  line-height: var(--lh-snug);
}
/* Discipline descriptors render in DM Sans at --fs-sm — the locked
   off-scale resolution from docs/TYPOGRAPHY.md (Task #527). */
.about-discipline-descriptor {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--text-mute);
  margin-top: 8px;
  max-width: 36ch;
}

/* ---------- SECTION 7 — BE ENTRY POINT ----------
   Uses the shared `.element-entry` primitive (see main.css).
   The wrapper just sets the section width / vertical rhythm. */
.about-be-entry {
  max-width: 520px;
  margin: 80px auto 120px;
}

/* ---------- TABLET (≤ 1024px) ----------
   Team grid steps down to 2-up at the same breakpoint the /work
   featured grid uses (Task #551). */
@media (max-width: 1024px) {
  .about-people-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 32px;
  }
  /* Reset the desktop 6-col `span 2` and the orphan-centering shift
     so every card occupies one of the two tablet columns. */
  .about-people-grid > .about-person,
  .about-people-grid > .about-person:nth-last-child(2):nth-child(3n + 1) {
    grid-column: auto;
  }
}

@media (max-width: 899px) {
  .about-disciplines {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- MOBILE (≤ 640px) ----------
   Single-column team layout, matching the /work featured grid's
   mobile breakpoint (Task #551). */
@media (max-width: 640px) {
  .about-people-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-people-grid > .about-person,
  .about-people-grid > .about-person:nth-last-child(2):nth-child(3n + 1) {
    grid-column: 1 / -1;
  }
  .about-person-portrait {
    width: 160px;
  }
}

/* ---------- MOBILE (< 768px) ---------- */
@media (max-width: 767px) {
  .about-wrap {
    padding: 56px 20px 0;
  }
  .about-opening {
    margin-bottom: 56px;
  }
  .about-sublede {
    margin-bottom: 56px;
  }
  .about-reel {
    margin-bottom: 64px;
  }
  .about-section {
    margin-bottom: 64px;
  }

  /* Team grid layout for mobile is handled by the (≤ 640px) block
     above. Here we only tighten typography that's shared with the
     other sections of the page. */
  .about-monogram { font-size: var(--fs-h1); }
  .about-person-portrait[data-no-photo]::after {
    /* Hide the AWAITING label at the smaller mobile portrait
       sizes — it can't render legibly inside ~160px boxes. */
    content: none;
  }

  .about-person-name { font-size: var(--fs-h2); }

  .about-disciplines {
    grid-template-columns: 1fr;
  }
  .about-be-entry {
    margin: 56px auto 96px;
  }
}