/* =============================================================
   Team — editorial roster page composed on NC tokens
   Loaded after styles.css; reuses :root design tokens.
   Namespace: .tm-
   ============================================================= */
.tm { --tm-max: var(--container-inner); }

.tm-section { padding: var(--space-8) var(--gutter) 0; }
.tm-section--tight { padding-top: var(--space-7); }
.tm-section--last { padding-bottom: var(--space-7); }

/* ---------- Shared heads ---------- */
.tm-h2 {
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 3rem);
  letter-spacing: -0.028em; line-height: 1.06;
  margin: var(--space-3) 0 0;
}

.tm-head { max-width: 820px; }
.tm-head__sub {
  font-size: var(--fs-lead); line-height: 1.6;
  color: var(--color-ink-60); max-width: 620px; margin: var(--space-3) 0 0;
}
#team .tm-head {
  margin-inline: auto;
  text-align: center;
}

/* ---------- Reveal on scroll (progressive enhancement) ---------- */
html.nc-reveal .tm [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
html.nc-reveal .tm [data-reveal].is-in { opacity: 1; transform: none; }

/* =============================================================
   HERO — copy left, portrait constellation right
   ============================================================= */
.tm-hero {
  position: relative; overflow: clip;
  padding: calc(var(--header-height) + var(--space-7)) var(--gutter) var(--space-7);
}
.tm-hero__glow {
  position: absolute; z-index: 0; pointer-events: none;
  top: -48%; right: -26%;
  width: 92vw; height: 92vw; max-width: 1320px; max-height: 1320px;
  background: radial-gradient(50% 50% at 50% 50%,
    oklch(0.9 0.13 152 / 0.5), oklch(0.88 0.12 300 / 0.26) 45%, transparent 70%);
  animation: nc-hue 12s ease-in-out infinite alternate;
}
.tm-hero__edge-orb {
  position: absolute;
  z-index: 1;
  left: -28%;
  bottom: -62%;
  width: min(76vw, 980px);
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%,
    oklch(0.9 0.12 210 / 0.44),
    oklch(0.88 0.12 300 / 0.22) 45%,
    transparent 70%);
  filter: blur(18px);
  animation: nc-hue 14s ease-in-out infinite alternate-reverse;
}
.tm-hero__edge-orb::before,
.tm-hero__edge-orb::after {
  display: none;
}
/* Both washes run past the bottom of the hero, where overflow: clip cuts them
   on a straight line the full width of the page. This dissolves them into the
   paper before they reach that edge. z-index 1 keeps it under the content (2)
   and the portraits (3–4), so only the gradients fade. */
.tm-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto 0 -1px;
  height: clamp(120px, 16vh, 220px);
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--color-paper) 88%);
}
.tm-hero__inner {
  position: relative; z-index: 2;
  max-width: var(--tm-max); margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 5vw, var(--space-8));
  align-items: center;
}
.tm-hero__title {
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(2.5rem, 5.4vw, 4.25rem);
  line-height: 1.02; letter-spacing: -0.035em;
  margin: var(--space-4) 0 0;
}
.tm-hero__title em { font-style: normal; color: var(--color-ink); }
.tm-hero__lead {
  font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.55;
  color: var(--color-ink-70); max-width: 30ch; margin: var(--space-4) 0 0;
}
.tm-hero__cta {
  margin-top: var(--space-6);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}

/* ---------- Portrait constellation + AI agents ---------- */
.tm-constellation {
  position: relative;
  width: 100%; max-width: 520px; aspect-ratio: 1 / 1;
  margin-inline: auto;
}
.tm-cluster {
  position: absolute; inset: 0;
  list-style: none; padding: 0; margin: 0;
  z-index: 4;
}
/* Three widely spaced, oversized 1px orbit lines behind the portraits. */
.tm-cluster::before {
  content: "";
  position: absolute;
  inset: -8%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 20% 20% at 50% 48.3%,
      transparent calc(100% - 1px),
      rgba(10, 10, 8, 0.045) calc(100% - 1px) 100%,
      transparent calc(100% + 1px)),
    radial-gradient(ellipse 34% 34% at 50% 48.3%,
      transparent calc(100% - 1px),
      rgba(10, 10, 8, 0.045) calc(100% - 1px) 100%,
      transparent calc(100% + 1px)),
    radial-gradient(ellipse 48% 48% at 50% 48.3%,
      transparent calc(100% - 1px),
      rgba(10, 10, 8, 0.045) calc(100% - 1px) 100%,
      transparent calc(100% + 1px));
}
.tm-cluster::after { display: none; }

/* AI agent nodes — fly the outer ring around the portraits */
.tm-agents {
  position: absolute; inset: 0;
  list-style: none; padding: 0; margin: 0;
  pointer-events: none;
  z-index: 3;
}
.tm-agent {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  pointer-events: auto;
  animation: tm-agent-fly var(--fly, 12s) var(--ease) infinite;
  animation-delay: var(--d, 0ms);
}
.tm-agent:nth-child(1)  { --dx1: 7px; --dy1: -9px; --dx2: -4px; --dy2: -13px; --dx3: -8px; --dy3: 4px; }
.tm-agent:nth-child(2)  { --dx1: -8px; --dy1: 5px; --dx2: 5px; --dy2: -10px; --dx3: 9px; --dy3: 7px; }
.tm-agent:nth-child(3)  { --dx1: 5px; --dy1: -12px; --dx2: 10px; --dy2: 2px; --dx3: -6px; --dy3: 8px; }
.tm-agent:nth-child(4)  { --dx1: -6px; --dy1: -7px; --dx2: -10px; --dy2: 6px; --dx3: 4px; --dy3: 11px; }
.tm-agent:nth-child(5)  { --dx1: 9px; --dy1: 4px; --dx2: -7px; --dy2: 10px; --dx3: -3px; --dy3: -8px; }
.tm-agent:nth-child(6)  { --dx1: -5px; --dy1: 9px; --dx2: 8px; --dy2: 5px; --dx3: 5px; --dy3: -11px; }
.tm-agent__node {
  position: relative;
  display: grid; place-items: center;
  width: clamp(27px, 5.5vw, 36px);
  height: clamp(27px, 5.5vw, 36px);
  border-radius: 50%;
  color: var(--tm-accent, var(--color-secondary-cyan));
  background: var(--color-ink);
  border: 0;
  box-shadow:
    0 10px 22px -12px rgba(10, 10, 8, 0.55),
    0 0 18px -6px color-mix(in srgb, var(--tm-accent) 55%, transparent);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.tm-agent:hover .tm-agent__node,
.tm-agent:focus-within .tm-agent__node {
  transform: scale(1.08);
  box-shadow:
    0 14px 28px -12px rgba(10, 10, 8, 0.58),
    0 0 24px -4px color-mix(in srgb, var(--tm-accent) 70%, transparent);
}
.tm-agent__icon {
  width: 55%; height: 55%;
  position: relative; z-index: 1;
}
.tm-agent__pulse {
  display: none;
}
.tm-agent__name {
  position: absolute; left: 50%; top: calc(100% + 8px);
  transform: translateX(-50%);
  display: block; white-space: nowrap; pointer-events: none;
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-ink);
  background: color-mix(in srgb, var(--tm-accent) 16%, var(--color-paper));
  border: 1px solid color-mix(in srgb, var(--tm-accent) 38%, transparent);
  padding: 3px 8px; border-radius: var(--radius-pill);
  opacity: 0; transition: opacity 0.2s var(--ease);
}
.tm-agent:hover .tm-agent__name,
.tm-agent:focus-within .tm-agent__name { opacity: 1; }

@keyframes tm-agent-fly {
  0%   { translate: 0 0; }
  22%  { translate: var(--dx1) var(--dy1); }
  48%  { translate: var(--dx2) var(--dy2); }
  74%  { translate: var(--dx3) var(--dy3); }
  100% { translate: 0 0; }
}
@keyframes tm-agent-pulse {
  0%   { opacity: 0.55; transform: scale(0.92); }
  70%  { opacity: 0; transform: scale(1.35); }
  100% { opacity: 0; transform: scale(1.35); }
}

.tm-orb {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--s); aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  animation: tm-float 7s var(--ease) infinite alternate;
  animation-delay: var(--d, 0ms);
}
.tm-orb__link {
  display: block; position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  transition: transform 0.28s var(--ease);
}
.tm-orb__link img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover; object-position: 50% 22%;
  background: var(--color-surface-muted);
  box-shadow:
    0 0 0 1px rgba(10, 10, 8, 0.14),
    0 18px 34px -16px rgba(10, 10, 8, 0.42);
  transition: box-shadow 0.28s var(--ease);
}
.tm-orb__link:hover,
.tm-orb__link:focus-visible { transform: scale(1.07); }
.tm-orb__link:hover img,
.tm-orb__link:focus-visible img {
  box-shadow:
    0 0 0 1px rgba(10, 10, 8, 0.14),
    0 24px 44px -16px rgba(10, 10, 8, 0.5);
}
.tm-orb__name {
  position: absolute; left: 50%; top: calc(100% + 10px);
  transform: translateX(-50%);
  display: block; white-space: nowrap; pointer-events: none;
  font-family: var(--font-title); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-on-dark);
  background: var(--color-ink);
  padding: 5px 10px; border-radius: var(--radius-pill);
  opacity: 0; transition: opacity 0.2s var(--ease);
}
.tm-orb__link:hover .tm-orb__name,
.tm-orb__link:focus-visible .tm-orb__name { opacity: 1; }
/* Bottom-row orbs label upward so the tag never leaves the cluster */
.tm-orb--low .tm-orb__name { top: auto; bottom: calc(100% + 10px); }

@keyframes tm-float {
  from { translate: 0 0; }
  to   { translate: 0 -9px; }
}

/* =============================================================
   INTRO — one large editorial statement on a dark panel
   ============================================================= */
.tm-intro__inner {
  max-width: var(--tm-max); margin-inline: auto;
  background: var(--color-ink);
  border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 5vw, var(--space-8)) clamp(1.5rem, 4vw, var(--space-7));
}
.tm-intro__text {
  font-family: var(--font-title); font-weight: 400;
  font-size: clamp(1.25rem, 2.1vw, 1.875rem);
  line-height: 1.4; letter-spacing: -0.018em;
  color: #fff;
  max-width: 48ch; margin-inline: auto;
  text-align: center; text-wrap: pretty;
}
/* each highlight takes a different logo accent, in logo order */
.tm-intro__text strong { font-weight: 400; }
.tm-intro__text strong:nth-of-type(1) { color: var(--color-secondary-cyan); }
.tm-intro__text strong:nth-of-type(2) { color: var(--color-secondary-violet); }
.tm-intro__text strong:nth-of-type(3) { color: var(--color-secondary-magenta); }

/* =============================================================
   ROSTER — masthead rows: portrait / name / bio
   ============================================================= */
.tm-roster {
  max-width: var(--tm-max); margin: var(--space-7) auto 0;
  list-style: none; padding: 0;
}

/* Row dividers stay one light grey hairline in every state — no accent line. */
.tm-member {
  --tm-accent: var(--color-secondary-cyan);
  position: relative;
  display: grid;
  grid-template-columns: clamp(200px, 21vw, 304px) minmax(0, 17rem) minmax(0, 1fr);
  column-gap: clamp(1.75rem, 3.2vw, 3.25rem);
  row-gap: var(--space-4);
  align-items: start;
  padding: clamp(2rem, 3.2vw, 3rem) 0;
  border-top: 1px solid var(--border-ink);
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}
.tm-member:last-child { border-bottom: 1px solid var(--border-ink); }

/* --- portrait --- */
.tm-member__media { position: relative; }
.tm-member__halo {
  position: absolute; inset: -14% -12% -10%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb, var(--tm-accent) 42%, transparent), transparent 72%);
  filter: blur(22px);
  opacity: 0.55;
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
}
.tm-member:hover .tm-member__halo { opacity: 1; transform: scale(1.06); }

.tm-member__frame {
  position: relative;
  display: block; overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--color-surface-muted);
  box-shadow:
    0 0 0 1px rgba(10, 10, 8, 0.14),
    0 26px 50px -28px rgba(10, 10, 8, 0.45);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.tm-member:hover .tm-member__frame {
  transform: translateY(-5px);
  box-shadow:
    0 0 0 1px rgba(10, 10, 8, 0.14),
    0 34px 60px -26px rgba(10, 10, 8, 0.5);
}
.tm-member__frame img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  transition: transform 0.6s var(--ease);
}
.tm-member:hover .tm-member__frame img { transform: scale(1.045); }

/* --- name column --- */
.tm-member__ident { padding-top: 0.15rem; }
.tm-member__index {
  display: block;
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--color-ink-25);
  transition: color 0.28s var(--ease);
}
.tm-member:hover .tm-member__index { color: var(--tm-accent); }

.tm-member__name {
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(1.5rem, 2.1vw, 1.9375rem);
  line-height: 1.08; letter-spacing: -0.028em;
  color: var(--color-ink);
  margin: 0.55rem 0 0;
  text-wrap: balance;
}
.tm-member__role {
  display: inline-flex; align-items: center; gap: 0.5em;
  margin: var(--space-2) 0 0;
  font-family: var(--font-title); font-size: 0.8125rem; font-weight: 600;
  line-height: 1.15; letter-spacing: 0.005em;
  color: var(--color-ink-70);
  background: color-mix(in srgb, var(--tm-accent) 13%, var(--color-paper));
  border: 1px solid color-mix(in srgb, var(--tm-accent) 34%, transparent);
  padding: 5px 11px; border-radius: var(--radius-pill);
}
/* --- bio column --- */
.tm-member__bio {
  font-size: var(--fs-md); line-height: 1.65;
  color: var(--color-ink-60);
  max-width: 50ch; margin: 0;
  /* optically align the first bio line with the cap-height of the name */
  padding-top: 1.55rem;
  text-wrap: pretty;
}

/* =============================================================
   OPEN ROLE — row 09 of the roster
   ============================================================= */
.tm-open {
  max-width: var(--tm-max); margin: var(--space-6) auto 0;
}
.tm-open__row {
  --tm-accent: var(--color-secondary-green);
  position: relative;
  display: grid;
  grid-template-columns: clamp(200px, 21vw, 304px) minmax(0, 17rem) minmax(0, 1fr);
  column-gap: clamp(1.75rem, 3.2vw, 3.25rem);
  row-gap: var(--space-4);
  align-items: start;
  padding: clamp(2rem, 3.2vw, 3rem) 0;
  border-top: 1px solid var(--border-ink);
  border-bottom: 1px solid var(--border-ink);
  color: var(--color-ink);
}
.tm-open__row:hover { color: var(--color-ink); }
.tm-open__row:hover .tm-member__index { color: var(--tm-accent); }

.tm-open__media,
.tm-open__ident,
.tm-open__body { display: block; }
/* match the roster: body text starts on the role's cap-height */
.tm-open__body { padding-top: 1.55rem; }

.tm-open__frame {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 2px dashed var(--border-ink-strong);
  background:
    radial-gradient(62% 62% at 50% 46%,
      color-mix(in srgb, var(--tm-accent) 26%, transparent), transparent 74%),
    var(--color-surface-light);
  transition: transform 0.45s var(--ease), border-color 0.28s var(--ease);
}
.tm-open__row:hover .tm-open__frame {
  transform: translateY(-5px);
  border-color: var(--tm-accent);
}
.tm-open__mark {
  font-family: var(--font-title); font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 700; line-height: 1;
  color: var(--color-ink-35);
  transition: color 0.28s var(--ease);
}
.tm-open__row:hover .tm-open__mark { color: var(--tm-accent); }

.tm-open__role {
  display: block;
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(1.5rem, 2.1vw, 1.9375rem);
  line-height: 1.08; letter-spacing: -0.028em;
  margin: 0.55rem 0 0;
  text-wrap: balance;
}
.tm-open__oneliner {
  display: block;
  font-size: var(--fs-md); line-height: 1.65;
  color: var(--color-ink-60);
  max-width: 46ch; margin: 0 0 var(--space-3);
}
.tm-open__row .link-arrow { display: inline-block; }

/* Keep the shared closing CTA on the same measure as the roster */
.tm .cta__panel { max-width: var(--tm-max); margin-inline: auto; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
/* Two columns: the portrait spans both text rows so name and bio stack
   tightly instead of being pushed apart by the portrait's height. */
@media (max-width: 1080px) {
  .tm-member,
  .tm-open__row {
    grid-template-columns: clamp(160px, 24vw, 260px) minmax(0, 1fr);
    row-gap: 0;
  }
  .tm-member__media,
  .tm-open__media { grid-row: 1 / span 2; }
  .tm-member__ident,
  .tm-open__ident { grid-column: 2; grid-row: 1; }
  .tm-member__bio,
  .tm-open__body {
    grid-column: 2; grid-row: 2;
    max-width: none; padding-top: 0; margin-top: var(--space-4);
  }
}

@media (max-width: 900px) {
  .tm-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .tm-hero__lead { max-width: 46ch; }
  .tm-constellation {
    max-width: 440px;
    margin-top: var(--space-5);
    margin-bottom: 0;
  }
  .tm-intro__text { max-width: 42ch; }
}

@media (max-width: 640px) {
  .tm-hero { padding-top: calc(var(--header-height) + var(--space-5)); }
  .tm-member,
  .tm-open__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-4);
  }
  .tm-member__media,
  .tm-open__media {
    grid-row: auto;
    width: 100%;
    max-width: 240px;
    margin-inline: auto;
  }
  .tm-member__ident,
  .tm-open__ident {
    grid-column: 1;
    grid-row: auto;
    text-align: center;
  }
  .tm-member__bio,
  .tm-open__body {
    grid-column: 1;
    grid-row: auto;
    margin: 0 auto;
    text-align: center;
  }
  .tm-member__bio { text-align: left; }
  .tm-member__frame,
  .tm-open__frame { transform: none; }
  /* The orbit rings sit ~11% wider than the box, so cap on the percentage too
     or the outer ring runs into the screen edge on a phone. */
  .tm-constellation { max-width: min(340px, 88%); }
  .tm-orb__name,
  .tm-agent__name { display: none; }
  .tm-agent__node {
    width: 27px; height: 27px; border-radius: 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tm-orb,
  .tm-agent,
  .tm-agent__pulse { animation: none; }
  .tm-hero__glow { animation: none; }
}