/* PulsarERP — about: why it was built, the principles it is built on, and the people. */

/* ---- 01 · Why: an editorial block, the label on one side and the story on the other ---- */

/* One text size in the story; the opening paragraph is set apart by colour only. */
.story { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr); gap: var(--space-7) var(--space-8); align-items: start; }
.story-body { display: grid; gap: var(--space-5); max-width: 44rem; }
.story-body p { font-size: var(--fs-lead); line-height: 1.75; color: var(--ink-2); text-wrap: pretty; }
.story-body .story-lead { color: var(--ink); }
.story-body strong { color: var(--ink); font-weight: 600; }

/* ---- 02 · Principles: numbered rows between hairlines ---- */

.principles { list-style: none; padding: 0; border-block-start: 1px solid var(--line); }
.principles li {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-3) var(--space-6); align-items: baseline;
  padding-block: var(--space-6); border-block-end: 1px solid var(--line);
}
.pr-num { font-family: var(--font-mono); font-size: var(--fs-lead); color: var(--accent); }
.principles h3 { font-family: var(--font-display); font-size: var(--fs-answer); font-weight: 600; line-height: var(--lh-snug); text-wrap: balance; }
.principles p { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

/* ---- 03 · The people: a card each, the picture and name on top, the background under them ---- */

/* Two rows: the founders, then the team. A small label over each, with a hairline running on. */
.team-group { display: flex; align-items: center; gap: var(--space-4); margin-block: var(--space-7) var(--space-4); font-size: var(--fs-body); font-weight: 500; color: var(--muted); }
.team-group::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.section-head + .team-group { margin-block-start: 0; }
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.team-founders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.team-founders .portrait { width: 5.5rem; height: 5.5rem; font-size: 2.25rem; }
.person { display: grid; align-content: start; gap: var(--space-5); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.person:nth-child(3n+2) { transition-delay: 90ms; }
.person:nth-child(3n+3) { transition-delay: 180ms; }
.person-head { display: flex; align-items: center; gap: var(--space-4); }
/* Until a photo arrives, the frame holds the initial over a faint orbit. */
.portrait {
  position: relative; overflow: hidden; flex: none; display: grid; place-items: center;
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--accent) 14%, var(--bg)), var(--bg) 72%);
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--font-display); font-size: 1.75rem; color: var(--accent);
}
.portrait svg { position: absolute; width: 150%; height: 150%; color: var(--accent); opacity: 0.12; stroke-width: 0.8; }
.person h3 { font-family: var(--font-display); font-size: var(--fs-answer); font-weight: 600; line-height: var(--lh-snug); }
.person-role { margin-block-start: 2px; color: var(--accent); font-weight: 500; }
.person-bio { display: grid; gap: var(--space-3); padding-block-start: var(--space-4); border-block-start: 1px solid var(--line); }
/* Role first, then the strongest credential, then how it meets the product (the usual order of a team bio). */
.person-bio p { color: var(--ink-2); line-height: 1.7; text-wrap: pretty; }

/* ---- Two links on to the rest of the site ---- */

.next-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.next-card {
  display: grid; gap: var(--space-2); padding: var(--space-6);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--dur-fast) linear, background-color var(--dur-fast) linear;
}
.next-card:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.next-card small { font-size: var(--fs-eyebrow); color: var(--muted); }
.next-card b { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-family: var(--font-display); font-size: var(--fs-answer); font-weight: 600; }
.next-card b svg { color: var(--accent); transition: transform var(--dur-fast) var(--ease-out); }
.next-card:hover b svg { transform: translateX(-4px); }
.next-card span { color: var(--ink-2); }

/* ---- Narrow screens ---- */

@media (max-width: 64rem) {
  .story { grid-template-columns: 1fr; }
  .principles li { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .principles p { grid-column: 2; }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .team, .team-founders { grid-template-columns: 1fr; }
  .person { padding: var(--space-5); }
  .principles li { grid-template-columns: 2.5rem minmax(0, 1fr); padding-block: var(--space-5); }
  .next-grid { grid-template-columns: 1fr; }
}