/* =============================================================
   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: var(--fs-h2);
  letter-spacing: -0.028em; line-height: 0.98;
  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);
}
/* Literal copy of home's hero glow recipe (css/styles.css .hero__glow /
   --lime / --violet), per the "Background glow gradient" rule — position,
   size, timing, keyframe percentage steps, hue-drift deltas, alphas and
   stop percentages are all identical to home's; only the two hues (152deg
   green, 300deg magenta, from docs/_as/colors.html) and the pastel oklch
   register (L 0.9, C ~0.1-0.12) are page-specific — see css/resources.css
   for the confirmed-working reference. */
.tm-hero__glow, .tm-hero__glow--b, .tm-hero__glow--c, .tm-hero__glow--corner {
  position: absolute; z-index: 0; pointer-events: none;
}
.tm-hero__glow {
  top: -24%; right: -42%;
  width: 100vw; height: 100vh;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.9 0.12 var(--g-h1, 152deg) / 0.85),
    oklch(0.9 0.1 var(--g-h2, 300deg) / 0.4) 46%,
    transparent 72%
  );
  animation:
    tm-glow-morph 11s ease-in-out infinite,
    tm-glow-float 17s ease-in-out infinite;
}
@keyframes tm-glow-morph {
  0%, 100% { --g-h1: 152deg; --g-h2: 300deg; --g-w: 44%; --g-h: 54%; --g-x: 46%; --g-y: 54%; }
  30%      { --g-h1: 188deg; --g-h2: 322deg; --g-w: 66%; --g-h: 42%; --g-x: 60%; --g-y: 40%; }
  62%      { --g-h1: 126deg; --g-h2: 274deg; --g-w: 42%; --g-h: 64%; --g-x: 40%; --g-y: 60%; }
}
@keyframes tm-glow-float {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);    filter: hue-rotate(0deg)  saturate(1); }
  50%      { transform: scale(1.22) translate3d(-8%, 6%, 0); filter: hue-rotate(14deg) saturate(1.1); }
}
/* Bottom-left blob: green on its own, home's lime formula and delta shape. */
.tm-hero__glow--b {
  bottom: -20%; left: -22%;
  width: 60vw; height: 60vh;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.9 0.12 var(--g-h1, 152deg) / 0.4),
    transparent 66%
  );
  animation:
    tm-glow-morph-b 14s ease-in-out -5s infinite,
    tm-glow-float-b 21s ease-in-out -9s infinite;
}
@keyframes tm-glow-morph-b {
  0%, 100% { --g-h1: 152deg; --g-w: 46%; --g-h: 46%; --g-x: 50%; --g-y: 50%; }
  40%      { --g-h1: 184deg; --g-w: 68%; --g-h: 56%; --g-x: 60%; --g-y: 42%; }
  72%      { --g-h1: 130deg; --g-w: 42%; --g-h: 66%; --g-x: 40%; --g-y: 58%; }
}
@keyframes tm-glow-float-b {
  0%, 100% { transform: scale(1.06) translate3d(0, 0, 0);    filter: hue-rotate(0deg)   saturate(1); }
  50%      { transform: scale(0.84) translate3d(9%, -7%, 0); filter: hue-rotate(-12deg) saturate(1.12); }
}
/* Top-centre blob: magenta on its own, home's violet slot (position +
   timing) carrying a single-hue fade instead of a blend. */
.tm-hero__glow--c {
  top: -26%; left: 52%;
  width: 44vw; height: 44vh;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.9 0.1 var(--g-h1, 300deg) / 0.28),
    transparent 64%
  );
  animation:
    tm-glow-morph-c 18s ease-in-out -7s infinite,
    tm-glow-float-c 26s ease-in-out -13s infinite;
}
@keyframes tm-glow-morph-c {
  0%, 100% { --g-h1: 300deg; --g-w: 48%; --g-h: 48%; --g-x: 50%; --g-y: 50%; }
  38%      { --g-h1: 276deg; --g-w: 70%; --g-h: 42%; --g-x: 40%; --g-y: 58%; }
  70%      { --g-h1: 320deg; --g-w: 42%; --g-h: 60%; --g-x: 60%; --g-y: 44%; }
}
@keyframes tm-glow-float-c {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);     filter: hue-rotate(0deg)   saturate(1);   opacity: 1; }
  45%      { transform: scale(1.28) translate3d(-9%, 5%, 0);   filter: hue-rotate(-10deg) saturate(1.1); opacity: 0.7; }
}
/* Mandatory corner-seam accent: centred exactly on the hero's bottom-left
   corner (this hero's visual sits at the right, so the seam echo sits
   opposite it), a quiet echo of the green wash. */
.tm-hero__glow--corner {
  bottom: -37vw; left: -37vw; width: 74vw; height: 74vw;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.9 0.12 var(--g-h1, 152deg) / 0.15),
    transparent 60%
  );
  animation:
    tm-glow-morph-corner 8s ease-in-out -4s infinite,
    tm-glow-float-corner 11s ease-in-out -8s infinite;
}
@keyframes tm-glow-morph-corner {
  0%, 100% { --g-h1: 152deg; --g-w: 46%; --g-h: 46%; --g-x: 50%; --g-y: 50%; }
  50%      { --g-h1: 174deg; --g-w: 55%; --g-h: 37%; --g-x: 40%; --g-y: 60%; }
}
@keyframes tm-glow-float-corner {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);    filter: saturate(1); }
  50%      { transform: scale(1.15) translate3d(9%, -6%, 0); filter: saturate(1.05); }
}
/* Mandatory mobile override: desktop's percentage-based blob positions
   clip away on a narrow screen. */
@media (max-width: 900px) {
  .tm-hero {
    background:
      radial-gradient(120% 70% at 85% 0%, oklch(0.9 0.12 152 / 0.28), transparent 62%),
      radial-gradient(90% 55% at 10% 35%, oklch(0.9 0.1 300 / 0.19), transparent 58%),
      radial-gradient(80% 50% at 70% 18%, oklch(0.9 0.12 152 / 0.08), transparent 55%),
      var(--color-paper);
  }
  .tm-hero__glow {
    top: -8%; right: -28%; width: 100vh; height: 100vh; opacity: 1;
    background: radial-gradient(
      var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
      oklch(0.9 0.12 var(--g-h1, 152deg) / 0.45),
      oklch(0.9 0.1 var(--g-h2, 300deg) / 0.22) 42%,
      transparent 70%
    );
  }
  .tm-hero__glow--b {
    bottom: 18%; left: -35%; width: 85vh; height: 85vh;
    background: radial-gradient(
      var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
      oklch(0.9 0.12 var(--g-h1, 152deg) / 0.28),
      transparent 68%
    );
  }
  .tm-hero__glow--c {
    top: 4%; left: 42%; width: 65vh; height: 65vh;
    background: radial-gradient(
      var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
      oklch(0.9 0.1 var(--g-h1, 300deg) / 0.16),
      transparent 66%
    );
  }
}
/* 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: 0.94; 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: var(--fs-label-xs); 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: 0.99; 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: var(--fs-sm); 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: 6px 14px; 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: 0.99; 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-section { padding-top: var(--space-6); }
  .tm-section--tight { padding-top: var(--space-5); }
  .tm-section--last { padding-bottom: var(--space-6); }
  .tm-hero { padding-top: calc(var(--header-height) + var(--space-5)); }
  .tm-hero__cta .btn { width: 100%; }
  .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, .tm-hero__glow--b, .tm-hero__glow--c, .tm-hero__glow--corner { animation: none; }
}