/* FIXD — team and tools.
   Two dark rhythm-break sections. The team frame drifts horizontally by a few
   percent while scrolling; the tools frame is a wide band with a label rail. */

.team { background: var(--white); color: var(--black); }

.team__grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }

.team__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.team__media img {
  width: 108%;                     /* the extra width is the parallax travel */
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  transform: translate3d(var(--dx, 0), 0, 0);
}

.team__body { display: grid; gap: 1.15rem; align-content: center; }
.team__title { font-size: var(--t-huge); font-variation-settings: 'wdth' 78; }
.team__copy { color: var(--muted); max-width: 44ch; }

.tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tags li {
  padding: .5rem .8rem;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.tags li::before { content: '—'; color: var(--yellow); margin-right: .5em; }

/* --- tools ------------------------------------------------------------- */
.tools { background: var(--black); color: var(--white); }

.tools__band { position: relative; aspect-ratio: 21 / 9; margin-bottom: clamp(1.5rem, 4vw, 2.75rem); }
.tools__band .frame { width: 100%; height: 100%; }
.tools__band img { object-position: 50% 42%; }

.tools__grid { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
.tools__title { font-size: var(--t-huge); font-variation-settings: 'wdth' 78; }
.tools__copy { color: var(--white-72); max-width: 42ch; margin-top: 1.1rem; }

.tools__facts { display: grid; gap: 0; align-content: start; }
.tools__facts li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  padding-block: .85rem;
  border-top: 1px solid var(--white-16);
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.tools__facts li:last-child { border-bottom: 1px solid var(--white-16); }
.tools__facts b { color: var(--yellow); font-weight: 700; }

.tools__detail { display: none; }

@media (min-width: 860px) {
  .team__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4.5rem); }
  .team__media { aspect-ratio: 5 / 4; }
  .tools__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; gap: clamp(2rem, 5vw, 4.5rem); }
  .tools__detail { display: block; aspect-ratio: 6 / 5; margin-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .team__media img { transform: none !important; width: 100%; }
}