/*
 * NEXONOMY · CAREERS
 * Roles as native <details> accordions in the quiet register (about.css chassis).
 * No JS, no integrations: the postings live on the page; Apply routes to /contact.
 */

.careers { max-width: 760px; margin: 0 auto; padding: 150px var(--section-px) 80px; }

.roles { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }
.role {
  border: 1px solid var(--color-border); border-radius: 12px;
  background: var(--color-surface-0); overflow: hidden;
}
.role[open] { border-color: var(--color-border-accent); }

.role__summary {
  list-style: none; cursor: pointer; padding: 18px 22px;
  display: flex; align-items: baseline; gap: 14px;
}
.role__summary::-webkit-details-marker { display: none; }
.role__title {
  flex: 1; font-family: var(--font-display); font-size: 18px; letter-spacing: -0.3px;
  font-weight: var(--weight-medium); color: var(--color-text-primary);
}
.role__meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--color-text-muted); white-space: nowrap;
}
.role__chev {
  flex: none; width: 16px; height: 16px; color: var(--color-text-muted);
  transition: transform var(--duration-fast) var(--ease-out);
}
.role[open] .role__chev { transform: rotate(180deg); }

.role__body { padding: 2px 22px 24px; }
.role__intro { font-size: 15px; line-height: 24px; color: var(--color-text-secondary); }
.role__sub {
  margin: 20px 0 9px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted);
}
.role__list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.role__list li { font-size: 14px; line-height: 21px; color: var(--color-text-secondary); }
.role__apply {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 24px;
  font-size: 14px; color: var(--color-text-primary); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.22); padding-bottom: 2px;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.role__apply:hover { border-color: var(--color-text-primary); }
.role__apply svg { width: 15px; height: 15px; flex: none; }

.careers__foot { margin-top: 34px; font-size: 14px; line-height: 22px; color: var(--color-text-secondary); }
.careers__foot a { color: var(--color-text-primary); text-decoration: underline; text-underline-offset: 3px; }