/* Build: principles, the person, and one form whose first field is the path */

/* principles use the shared .trio (base.css) */
.principles { margin-top: clamp(64px, 10vh, 112px); }
.principles .trio { margin-top: 24px; }

/* the person */
.founder {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 72px;
  margin-top: clamp(72px, 11vh, 120px);
  padding-top: 40px; border-top: 1px solid var(--line);
}
.founder-name { font: 600 clamp(28px, 3vw, 40px)/1 var(--display); letter-spacing: -0.03em; margin: 20px 0 8px; }
.founder-role { margin: 0; color: var(--brand); font-size: 15px; }
/* two quiet icon links; the circles are 40px, the hit areas 44px */
.founder-links { display: flex; gap: 4px; list-style: none; margin: 16px 0 0 -2px; padding: 0; }
.founder-links a {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px;
  color: var(--fg-muted); border-radius: 50%;
  transition: color .2s var(--ease);
}
.founder-links a::before {
  content: ''; position: absolute; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-2); transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.founder-links svg { position: relative; width: 18px; height: 18px; }
.founder-links a:hover { color: var(--brand); }
.founder-links a:hover::before { border-color: var(--brand); background: var(--brand-tint); }
.founder-note p { margin: 0; color: var(--fg-muted); font-size: 17px; line-height: 1.65; max-width: 60ch; }
.founder-note p + p { margin-top: 18px; color: var(--fg); }

/* the form */
.involve {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 72px;
  margin-top: clamp(72px, 11vh, 120px);
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--line-2); border-radius: 20px;
  background:
    radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, var(--brand) 6%, transparent), transparent 60%),
    var(--canvas-2);
}

.paths { border: 0; margin: 0; padding: 0; min-width: 0; }
.paths legend { padding: 0; margin-bottom: 16px; }
.path {
  position: relative; display: block;
  padding: 18px 0 18px 20px;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.path:last-of-type { border-bottom: 1px solid var(--line); }
.path::before {
  content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; border-radius: 2px;
  background: var(--line-2); transition: background-color .25s var(--ease);
}
.path input { position: absolute; opacity: 0; pointer-events: none; }
.path-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.path-head b { font: 600 22px/1.1 var(--display); letter-spacing: -0.02em; color: var(--fg-muted); transition: color .25s; }
.path-head span { font-size: 14px; color: var(--fg-faint); transition: color .25s; }
.path-desc {
  display: block; max-height: 0; opacity: 0; overflow: hidden;
  color: var(--fg-muted); font-size: 14px; line-height: 1.55;
  transition: max-height .4s var(--ease), opacity .3s var(--ease), margin .4s var(--ease);
}
.path:hover .path-head b { color: var(--fg); }
.path:has(input:checked)::before { background: var(--brand); }
.path:has(input:checked) .path-head b { color: var(--fg); }
.path:has(input:checked) .path-head span { color: var(--brand); }
.path:has(input:checked) .path-desc { max-height: 8em; opacity: 1; margin-top: 10px; }
.path:has(input:focus-visible) { box-shadow: var(--ring); border-radius: 6px; }
/* browsers without :has() — show every description */
@supports not selector(:has(*)) {
  .path-desc { max-height: none; opacity: 1; margin-top: 10px; }
}

.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; align-content: start; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label, .field-label { font-size: 13px; color: var(--fg-muted); }

/* the path picker: three segments, synced with the path list */
.pick {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  padding: 4px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--field);
}
.field .pick label { position: relative; display: block; cursor: pointer; font-size: 15px; color: var(--fg-muted); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span {
  display: block; padding: 10px 8px; text-align: center; border-radius: calc(var(--r-sm) - 3px);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.pick label:hover span { color: var(--fg); }
.pick input:checked + span { background: var(--brand-tint); color: var(--brand); font-weight: 600; }
.pick input:focus-visible + span { box-shadow: var(--ring); }
.field .opt { color: var(--fg-faint); font-size: 12px; margin-left: 4px; }
.field input, .field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--field);
  color: var(--fg); font-size: 15px;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
/* iOS zooms the page into any field under 16px; keep them at 16 on touch */
@media (hover: none) and (pointer: coarse) {
  .field input, .field textarea { font-size: 16px; }
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-faint); }
.field input:hover, .field textarea:hover { border-color: var(--fg-faint); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.field [aria-invalid='true'] { border-color: var(--warn); }

.field-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; }
.form-status { margin: 0; font-size: 14px; color: var(--fg-muted); }
.form-status.is-error { color: var(--warn); }
.form-status.is-ok { color: var(--brand); }
.involve.is-sent .fields > :not(.form-foot) { opacity: .4; pointer-events: none; }

/* ── tablet ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .involve { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 1fr; gap: 24px; }
}

/* ── phone ────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .fields { grid-template-columns: 1fr; }
  .involve { padding: 24px 16px; margin-left: calc(var(--gutter) * -0.5); margin-right: calc(var(--gutter) * -0.5); border-radius: 16px; }
  .form-foot { flex-direction: column-reverse; align-items: stretch; }
  .form-foot .btn { width: 100%; }
  .path-head { flex-direction: column; gap: 4px; }
}