/* ============================================================
   INCLINE Ventures — About
   Loaded only on /about.html
   The statement hero is this page's red moment.
   ============================================================ */

/* ---- Statement hero ----------------------------------------- */
.statement { padding-block: clamp(3.5rem, 10vh, 6.5rem) clamp(3rem, 7vh, 5rem); }
.statement__title {
  font-size: clamp(2.5rem, 7vw, 5.75rem);
  max-width: 16ch;
  margin-block: var(--space-m) var(--space-m);
}
/* Black on red at display size — 3.1:1, clears AA for large text. */
.statement__title .em { color: var(--black); }
.statement__body {
  max-width: 52ch;
  color: var(--on-red-muted);
  font-size: var(--step-1);
  line-height: 1.55;
}

/* ============================================================
   ORG STRUCTURE — a drawn diagram, not an ASCII sketch.
   ============================================================ */
.org { display: flex; flex-direction: column; align-items: center; text-align: center; }

.org__parent {
  border: 1.5px solid var(--line-strong);
  padding: var(--space-xs) var(--space-l);
}
.org__parent-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--step-2);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.02em;
}
.org__parent-tag {
  display: block;
  font-size: var(--step--2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: var(--space-3xs);
}

/* Connectors — decorative only, hidden from assistive tech. */
.org__stem { width: 1.5px; height: var(--space-l); background: var(--line-strong); }
.org__bar { width: 50%; height: 1.5px; background: var(--line-strong); }

.org__branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-l);
  width: 100%;
  list-style: none;
  padding: 0;
  margin-top: var(--space-l);
}
.org__branch { position: relative; }
.org__branch::before {
  content: '';
  position: absolute;
  top: calc(var(--space-l) * -1);
  left: 50%;
  width: 1.5px;
  height: var(--space-l);
  background: var(--line-strong);
}

.org__card {
  height: 100%;
  padding: var(--space-m);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
/* The sibling: present, dimmed, dashed. Not this site's subject. */
.org__card--muted {
  border: 1.5px dashed var(--line);
  color: var(--ink-muted);
}
/* You are here — solid red fill, the only filled card. */
.org__card--here {
  border: 1.5px solid var(--accent);
  background: var(--accent);
  color: var(--on-red-ink);
}

.org__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-2);
  text-transform: uppercase;
  line-height: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em;
}
/* Off-white, not black: at this size black on red is only 3.1:1.
   The size and tracking already separate it from the name. */
.org__here {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-red-ink);
}
.org__desc { font-size: var(--step--1); color: var(--ink-muted); }
.org__card--here .org__desc { color: var(--on-red-muted); }

/* ============================================================
   PRINCIPLES — oversized numerals carry the hierarchy.
   ============================================================ */
.principles { list-style: none; padding: 0; }
.principle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-m);
  align-items: start;
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
  border-top: 1.5px solid var(--line);
}
.principles li:last-child .principle { border-bottom: 1.5px solid var(--line); }

.principle__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 0.8;
  color: var(--accent);
}
.principle__lead {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-3);
  text-transform: uppercase;
  line-height: 1.02;
  margin-bottom: var(--space-3xs);
}
.principle__desc { color: var(--ink-muted); font-size: var(--step-0); max-width: 60ch; }

/* ============================================================
   TEAM
   ============================================================ */
.team__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-l);
  list-style: none;
  padding: 0;
  margin-top: var(--space-m);
  max-width: 48rem;   /* two portraits should not span the full shell */
}

.member { display: flex; flex-direction: column; gap: var(--space-s); }

.member__figure {
  margin: 0;
  border: 1.5px solid var(--line);
  overflow: hidden;
  background: rgba(247, 244, 240, 0.03);
}
/* Monochrome by default so the studio white sits inside the palette;
   colour returns on hover — the one moment the person is not a
   graphic element. */
.member__photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1) contrast(1.06);
  transition: filter 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}
@media (hover: hover) {
  .member:hover .member__photo { filter: grayscale(0) contrast(1); transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .member__photo { transition: none; }
  .member:hover .member__photo { transform: none; }
}

.member__body {
  padding-top: var(--space-s);
  border-top: 1.5px solid var(--line-strong);
}
.member__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-2);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.01em;
}
.member__role {
  font-size: var(--step--2);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-top: var(--space-3xs);
}
.member__bio {
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--ink-muted);
  margin-top: var(--space-2xs);
}

/* ---- Responsive --------------------------------------------- */
@media (max-width: 900px) {
  /* Connectors stop making sense in one column — drop them. */
  .org__stem, .org__bar { display: none; }
  .org__branches { grid-template-columns: 1fr; margin-top: var(--space-m); gap: var(--space-s); }
  .org__branch::before { display: none; }
  .org { align-items: stretch; text-align: left; }
  .org__parent { align-self: flex-start; }

  .principle { grid-template-columns: 1fr; gap: var(--space-2xs); }
  .principle__lead { font-size: var(--step-2); }

  .team__grid { max-width: none; gap: var(--space-m); }
}

@media (max-width: 560px) {
  .team__grid { grid-template-columns: 1fr; max-width: 22rem; }
}