/* ============================================================
   AI Studio page — typesafe.ai-adapted redesign (2026-10-13)
   Peter's named design reference:
   https://typesafe.ai/blog/introducing-system-one-models-and-jev
   Language: Swiss-minimal. Muted dusty blue-grey canvas, huge
   tight-tracked headline, black monospace tag chips, borderless
   comparison rhythm, generous single-column whitespace.
   Scope: loaded LAST on /meet-the-team/ only. Overrides
   studio-upgrade.css + alive.css presentation WITHOUT touching
   their files. All data-attribute hooks (data-nexus-root,
   data-alive-roster-root, etc.) are untouched — alive.js runs
   unmodified. JS-emitted classes (.alive-roster-*) restyled here.
   ============================================================ */

body.alive-body {
  --ats-bg: #b3c1cc;          /* dusty blue-grey canvas */
  --ats-bg-deep: #9fb0be;     /* darker band */
  --ats-ink: #16191d;         /* charcoal, never pure black text */
  --ats-chip: #0e1114;       /* black chip */
  --ats-paper: #f4f2ec;       /* warm off-white panel */
  --ats-line: rgba(22, 25, 29, 0.18);
  --ats-hl: #ff7a5a;          /* single peach accent (asbury token) */

  background: var(--ats-bg);
  color: var(--ats-ink);
  font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
}

/* ---------- chrome (header / local nav / footer) ---------- */
body.alive-body .studio-header,
body.alive-body .studio-local { background: var(--ats-bg); border-bottom: 1px solid var(--ats-line); }
body.alive-body .studio-header .studio-brand span,
body.alive-body .studio-local span { font-family: 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: -0.01em; }
body.alive-body .studio-nav a { font-family: 'Space Grotesk', sans-serif; font-weight: 500; color: var(--ats-ink); }
body.alive-body .studio-local a { color: var(--ats-ink); opacity: 0.72; font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
body.alive-body .studio-local a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
body.alive-body .studio-footer { background: var(--ats-bg-deep); border-top: 1px solid var(--ats-line); color: var(--ats-ink); }
body.alive-body .studio-footer a { color: var(--ats-ink); }
body.alive-body .studio-footer .studio-footer-label { color: var(--ats-ink); font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; opacity: 0.75; }

/* ---------- layout ---------- */
body.alive-body .alive-main { max-width: 44rem; margin: 0 auto; padding: 0 1.35rem; }
body.alive-body .wrap { max-width: 44rem; margin: 0 auto; padding: 0 1.35rem; }

/* ---------- disclosure strip (mono microcopy, kept verbatim) ---------- */
body.alive-body .alive-disclose {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  opacity: 0.78;
  border-left: 3px solid var(--ats-chip);
  padding: 0.55rem 0 0.55rem 0.9rem;
  margin: 2.2rem auto 0;
}

/* ---------- hero ---------- */
body.alive-body .alive-hero { background: transparent; padding: 3.2rem 0 1.2rem; }
body.alive-body .alive-hero-grid { display: block; }
body.alive-body .alive-kicker {
  display: inline-block;
  background: var(--ats-chip);
  color: #ffffff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.32rem 0.6rem;
  margin: 0 0 1.4rem;
}
body.alive-body .alive-h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(2.45rem, 7.5vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 1.2rem;
  max-width: 18ch;
}
body.alive-body .alive-sub {
  font-size: 1.08rem;
  line-height: 1.65;
  max-width: 34rem;
  margin: 0 0 0.9rem;
  font-family: 'IBM Plex Sans', sans-serif;
}
body.alive-body .alive-micro,
body.alive-body .alive-note {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.74rem;
  line-height: 1.55;
  opacity: 0.72;
  margin: 0 0 1.6rem;
}
body.alive-body .alive-hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0 0 2.2rem; }

/* buttons — typesafe: solid white, black text; ghost = outlined (forced over alive.css) */
body.alive-body a.alive-cta,
body.alive-body button.alive-cta,
body.alive-body .alive-hero-actions .alive-cta {
  background: #ffffff !important;
  color: var(--ats-chip) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  letter-spacing: -0.01em !important;
  padding: 0.78rem 1.35rem !important;
  border-radius: 0 !important;
  border: 1.5px solid var(--ats-chip) !important;
  box-shadow: none !important;
  min-height: 0 !important;
  text-decoration: none !important;
  transition: transform 0.12s ease;
}
body.alive-body a.alive-cta:active { transform: translateY(1px); }
body.alive-body a.alive-cta:hover,
body.alive-body a.alive-cta:focus-visible { box-shadow: none !important; transform: none; }
body.alive-body a.alive-cta-ghost { background: transparent !important; color: var(--ats-ink) !important; border: 1.5px solid var(--ats-line) !important; }
body.alive-body a.alive-cta-ghost:hover { border-color: var(--ats-chip) !important; background: rgba(255,255,255,0.4) !important; }

/* ---------- the floor window (panel, mono header) ---------- */
body.alive-body .alive-window {
  background: #ffffff;
  border: 1px solid var(--ats-line);
  border-radius: 0;
  box-shadow: none;
  margin: 0 0 3rem;
}
body.alive-body .alive-window-head {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--ats-line);
  background: transparent;
}
body.alive-body .alive-floor-feed li { border-bottom: 1px solid var(--ats-line); font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; background: transparent; }
body.alive-body .alive-proof-line { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; }
body.alive-body .alive-seat-strip .alive-mark { border-radius: 0; }

/* ---------- roster section ---------- */
body.alive-body .alive-section { background: transparent; padding: 1.6rem 0 2.4rem; }
body.alive-body .alive-h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 1rem;
}
body.alive-body .alive-counts { font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; }

/* JS-emitted roster rows: near-borderless ledger, mono roles (forced) */
body.alive-body .alive-roster { list-style: none; padding: 0; margin: 1.2rem 0; border: none !important; }
body.alive-body .alive-roster li.alive-roster-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 14px;
  align-items: baseline;
  border: none !important;
  border-bottom: 1px solid var(--ats-line) !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0.85rem 0.2rem !important;
}
body.alive-body .alive-roster li.alive-roster-row:last-child { border-bottom: 1px solid var(--ats-line) !important; }
body.alive-body .alive-roster li.alive-roster-row:hover { background: rgba(255,255,255,0.35) !important; }
body.alive-body .alive-roster .alive-roster-seat,
body.alive-body .alive-roster .alive-roster-role,
body.alive-body .alive-roster .alive-roster-nums,
body.alive-body .alive-roster .alive-roster-status,
body.alive-body .alive-roster .alive-roster-meta {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.76rem !important;
  opacity: 0.85;
  background: transparent !important;
  border: none !important;
}
body.alive-body .alive-roster .alive-roster-name { font-family: 'Space Grotesk', sans-serif !important; font-weight: 600 !important; letter-spacing: -0.01em; color: var(--ats-ink); }
body.alive-body .alive-roster .alive-role-top,
body.alive-body .alive-roster .alive-role-does { background: transparent !important; border: none !important; box-shadow: none !important; }
body.alive-body .alive-roster .alive-roster-status { display: inline-flex; align-items: center; gap: 0.4rem; }
/* desktop roster: flat ledger row, no card boxes */
@media (min-width: 761px) {
  body.alive-body .alive-roster li.alive-roster-row {
    grid-template-columns: 7.5rem 6.5rem minmax(0, 1fr) 7.5rem auto;
    align-items: center;
    padding: 0.55rem 0.2rem !important;
  }
}

/* roster expansion control — mono, quiet */
body.alive-body details[data-roster-expansion] summary {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em;
  cursor: pointer; margin-top: 0.8rem; color: var(--ats-chip);
}

/* status dots keep their live --hg-* state colors (truth in status) */

/* ---------- oversight section (typesafe "receipts" rhythm) ---------- */
.ats-oversight { border-top: 1px solid var(--ats-line); padding: 2rem 0 0.6rem; margin-top: 1rem; }
.ats-oversight h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.5rem; letter-spacing: -0.025em; margin: 0 0 1rem; }
.ats-oversight .ats-rows { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.ats-oversight .ats-rows th { text-align: left; font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.5rem 0.4rem 0.5rem 0; border-bottom: 1px solid var(--ats-chip); opacity: 0.8; font-weight: 600; }
.ats-oversight .ats-rows td { padding: 0.55rem 0.4rem 0.55rem 0; border-bottom: 1px solid var(--ats-line); vertical-align: top; font-family: 'IBM Plex Sans', sans-serif; line-height: 1.5; }
.ats-oversight .ats-rows td:first-child { font-family: 'IBM Plex Mono', monospace; font-size: 0.76rem; white-space: nowrap; opacity: 0.85; }

/* ---------- final CTA band ---------- */
.ats-cta { border-top: 1px solid var(--ats-chip); margin: 2.6rem 0 3.2rem; padding-top: 2.2rem; }
.ats-cta h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(1.9rem, 5.5vw, 2.8rem); letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 0.9rem; }
.ats-cta p { max-width: 34rem; line-height: 1.6; margin: 0 0 1.4rem; font-family: 'IBM Plex Sans', sans-serif; }

@media (prefers-reduced-motion: reduce) {
  body.alive-body * { transition: none !important; animation: none !important; }
}