/* ──────────────────────────────────────────────────────────
   Phenova Bio — styles.css
   Climate palette + Lab typography (Space Grotesk),
   mirroring the pitch deck's print-ready system.
   ────────────────────────────────────────────────────────── */

:root {
  /* Climate palette */
  --paper:        #F5EFDF;   /* cream background */
  --paper-2:      #EEE5D0;   /* slightly deeper cream for alt sections */
  --paper-3:      #E7DCC2;   /* card / surface */
  --ink:          #1F2A1F;   /* deep botanical near-black */
  --ink-2:        #4A574A;   /* secondary body text */
  --ink-3:        #8A8775;   /* tertiary / captions */
  --accent:       #D9892A;   /* honey amber — Climate accent */
  --accent-2:     #B5621E;   /* terra cotta — sub-accent */
  --rule:         rgba(31, 42, 31, 0.12);
  --hairline:     rgba(31, 42, 31, 0.20);

  /* Type system */
  --font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-body:    "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "Menlo", monospace;

  /* Spacing rhythm */
  --gap:          clamp(64px, 8vw, 120px);
  --gap-small:    clamp(28px, 4vw, 48px);
  --pad-x:        clamp(20px, 5vw, 72px);
  --max-w:        1280px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-2); }

::selection { background: var(--accent); color: var(--paper); }

/* ─── NAV ─── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--pad-x);
  background: rgba(245, 239, 223, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand-mark { width: 64px; height: 64px; color: var(--accent); flex-shrink: 0; }
.foot-mark { width: 28px; height: 28px; color: var(--accent); flex-shrink: 0; }
.brand-name { color: var(--ink); }
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
}
.nav-links a { color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }
.nav-cta {
  padding: 9px 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink) !important;
  transition: background 0.15s ease;
}
.nav-cta:hover { background: var(--ink); color: var(--paper) !important; }

/* Hide secondary nav items on small screens; keep brand + Contact */
@media (max-width: 720px) {
  .nav-links a:not(.nav-cta) { display: none; }
}

/* ─── Eyebrow + headings ─── */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
}

.display, .title, .body, .lede, .lede-2 {
  margin: 0;
  text-wrap: balance;
}

.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 36px;
}

.lede {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: none;
  margin-top: 28px;
}

.lede-2 {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 64ch;
  margin-bottom: 48px;
}

.body {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 64ch;
}

.accent { color: var(--accent); }

/* ─── HERO ─── */
.hero {
  padding: clamp(72px, 12vw, 144px) var(--pad-x) clamp(64px, 10vw, 120px);
  max-width: var(--max-w);
  margin: 0 auto;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}
.btn {
  display: inline-block;
  padding: 14px 28px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  border-radius: 999px;
  transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--paper); }
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hairline);
}
.btn.ghost:hover { border-color: var(--ink); color: var(--ink); }

/* ─── Generic section ─── */
.section {
  padding: var(--gap) var(--pad-x);
  max-width: var(--max-w);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}
.section-platform { background: var(--paper-2); border-top: 1px solid var(--rule); max-width: none; }
.section-platform > * { max-width: var(--max-w); margin-left: auto; margin-right: auto; }
.section-apishield { background: var(--ink); color: var(--paper); border-top: none; max-width: none; }
.section-apishield > * { max-width: var(--max-w); margin-left: auto; margin-right: auto; }
.section-apishield .title { color: var(--paper); }
.section-apishield .eyebrow { color: rgba(245, 239, 223, 0.55); }
.section-apishield .eyebrow .dot { background: var(--accent); }
.section-apishield .lede-2 { color: rgba(245, 239, 223, 0.78); }
.section-apishield .footnote { color: rgba(245, 239, 223, 0.55); }
.section-apishield .card {
  background: rgba(245, 239, 223, 0.04);
  border: 1px solid rgba(245, 239, 223, 0.18);
}
.section-apishield .card-body { color: rgba(245, 239, 223, 0.78); }
.section-apishield .platform-grid { margin-top: 0; }
.section-contact { background: var(--paper-2); max-width: none; }
.section-contact > * { max-width: var(--max-w); margin-left: auto; margin-right: auto; }

/* ─── Stat grid (Problem) ─── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}
.stat {
  padding: 32px 0;
  border-top: 1px solid var(--hairline);
}
.stat-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(56px, 7vw, 92px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.stat-unit {
  font-size: 0.55em;
  color: var(--ink-3);
  margin-left: 2px;
}
.stat-cap {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stat-note {
  margin-top: 10px;
  font-size: 15px;
  color: var(--ink-2);
  max-width: none;
  line-height: 1.5;
  text-wrap: balance;        /* prevents orphan lines on short notes */
}
/* Problem section body paragraphs: full content width so the two prose
   lines don't break to a second row at desktop. Slightly smaller font
   keeps the lines from straining. */
#problem .body {
  margin-top: 14px;
  max-width: none;
  font-size: clamp(15px, 1.15vw, 17px);
  text-wrap: pretty;
}
#problem .body:first-of-type { margin-top: 0; }
#problem .body-emphasis { color: var(--ink); font-size: clamp(18px, 1.4vw, 22px); }
@media (max-width: 880px) {
  .stat-grid { grid-template-columns: 1fr; gap: 0; }
}

/* ─── Platform grid ─── */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 32px;
}
.card-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.card-body { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.chip-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.chip-list li {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 24px);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.chip-list-solid li { color: var(--accent-2); font-weight: 600; }
@media (max-width: 880px) {
  .platform-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ─── ApiShield grid ─── */
.apishield-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin: 48px 0;
}
.ax {
  padding-top: 24px;
  border-top: 1px solid rgba(245, 239, 223, 0.20);
}
.ax-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(48px, 5vw, 76px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--accent);
}
.ax-unit { font-size: 0.55em; color: rgba(245, 239, 223, 0.55); margin-left: 1px; }
.ax-label {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 239, 223, 0.65);
  line-height: 1.45;
}
@media (max-width: 880px) {
  .apishield-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

.endorsed {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(245, 239, 223, 0.20);
}
.endorsed-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 239, 223, 0.55);
  margin-right: 8px;
}
.chip {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid rgba(245, 239, 223, 0.30);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--paper);
  background: transparent;
}

.footnote {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* ─── Team grid ─── */
.team-group { margin-top: 56px; }
.team-group:first-of-type { margin-top: 0; }
.team-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
}
/* Researcher row also uses 5 cols so each cell is the same width as
   the management row — photos render at the same size on both rows
   instead of being ~30% bigger when only 4 photos share a row. */
.team-group:nth-of-type(2) .team-grid { grid-template-columns: repeat(5, 1fr); }
.person { margin: 0; }
.person img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;   /* anchor at top — preserves top of head on all portrait headshots */
  border-radius: 12px;
  background: var(--paper-3);
}
.person figcaption { margin-top: 14px; }
.person-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.person-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  color: var(--ink);
}
.person-bio { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 1024px) {
  .team-grid, .team-group:nth-of-type(2) .team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .team-grid, .team-group:nth-of-type(2) .team-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* Optional placeholder spacer to balance the 4-photo researcher row in the
   5-column grid — currently absent so photos left-align under management. */

/* ─── Contact ─── */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 36px;
}
.contact-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 28px;
}
.contact-role {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.contact-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 10px;
}
.contact-email {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.contact-email:hover { color: var(--accent-2); text-decoration-color: var(--accent-2); }
.catchall {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink-2);
}
.catchall a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.catchall a:hover { color: var(--ink); }
@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ─── Footer ─── */
.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 28px var(--pad-x);
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.foot-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.foot-copy {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-3);
}