/* =============================================================
   Team — editorial roster page composed on NC tokens
   Loaded after styles.css; reuses :root design tokens.
   Namespace: .tm-
   ============================================================= */

.tm { --tm-max: 1240px; }
.tm-wrap { max-width: var(--tm-max); margin-inline: auto; }

.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-eyebrow {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--font-title); font-size: var(--fs-eyebrow);
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-ink-70); margin: 0;
}
.tm-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-secondary-cyan);
}
.tm-eyebrow--green::before { background: var(--color-secondary-green); }

.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;
}

/* ---------- 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: -34%; right: -14%;
  width: 74vw; height: 74vw; max-width: 1020px; max-height: 1020px;
  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__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-secondary-magenta); }
.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 ---------- */
.tm-cluster {
  position: relative;
  width: 100%; max-width: 520px; aspect-ratio: 1 / 1;
  margin-inline: auto;
  list-style: none; padding: 0;
}
/* Faint orbit rings to give the cluster structure */
.tm-cluster::before,
.tm-cluster::after {
  content: ""; position: absolute; border-radius: 50%;
  border: 1px dashed rgba(10, 10, 8, 0.09);
}
.tm-cluster::before { inset: 4%; }
.tm-cluster::after { inset: 24%; }

.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 3px var(--color-paper),
    0 0 0 4px color-mix(in srgb, var(--tm-accent, var(--color-secondary-cyan)) 34%, transparent),
    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 3px var(--color-paper),
    0 0 0 5px var(--tm-accent, var(--color-secondary-cyan)),
    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
   ============================================================= */
/* The gradient rule hangs into the gutter so the paragraph itself stays on
   the same left edge as the section heads and the roster below. */
.tm-intro__inner {
  max-width: var(--tm-max); margin-inline: auto;
  position: relative;
}
.tm-intro__inner::before {
  content: ""; position: absolute; left: -1.25rem; top: 0.4rem; bottom: 0.4rem;
  width: 3px; border-radius: var(--radius-pill);
  background: linear-gradient(to bottom,
    var(--color-secondary-cyan),
    var(--color-secondary-violet) 48%,
    var(--color-secondary-magenta));
}
.tm-intro__text {
  font-family: var(--font-title); font-weight: 500;
  font-size: clamp(1.25rem, 2.1vw, 1.875rem);
  line-height: 1.4; letter-spacing: -0.018em;
  color: var(--color-ink-60); max-width: 44ch;
  text-wrap: pretty;
}
.tm-intro__text strong { font-weight: 700; color: var(--color-ink); }

/* =============================================================
   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(172px, 16vw, 248px) minmax(0, 18rem) 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 rgba(10, 10, 8, 0.08);
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}
.tm-member:last-child { border-bottom: 1px solid rgba(10, 10, 8, 0.08); }

/* --- 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: var(--radius-lg);
  background: var(--color-surface-muted);
  box-shadow: 0 26px 50px -28px rgba(10, 10, 8, 0.45);
  transform: rotate(var(--tilt, -1.4deg));
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.tm-member:nth-child(even) .tm-member__frame { --tilt: 1.4deg; }
.tm-member:hover .tm-member__frame {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 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;
  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);
}
.tm-member__role::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--tm-accent); flex: 0 0 auto;
}

/* --- 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(172px, 16vw, 248px) minmax(0, 18rem) 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 rgba(10, 10, 8, 0.08);
  border-bottom: 1px solid rgba(10, 10, 8, 0.08);
  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: var(--radius-lg);
  border: 2px dashed var(--border-ink-strong);
  background:
    radial-gradient(62% 62% at 50% 42%,
      color-mix(in srgb, var(--tm-accent) 26%, transparent), transparent 74%),
    var(--color-surface-light);
  transform: rotate(-1.4deg);
  transition: transform 0.45s var(--ease), border-color 0.28s var(--ease);
}
.tm-open__row:hover .tm-open__frame {
  transform: rotate(0deg) translateY(-4px);
  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(150px, 22vw, 216px) 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-cluster { max-width: 440px; margin-top: var(--space-5); }
  .tm-intro__text { max-width: 40ch; }
}

@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; max-width: 240px; }
  .tm-member__ident,
  .tm-open__ident { grid-column: 1; grid-row: auto; }
  .tm-member__bio,
  .tm-open__body { grid-column: 1; grid-row: auto; margin-top: 0; }
  .tm-member__frame,
  .tm-open__frame { transform: none; }
  .tm-cluster { max-width: 340px; }
  .tm-orb__name { display: none; }
}

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