/* Now hiring — compact, single narrow left-aligned column (client 7/14:
   "way too spread vertically, too much info, no max width"). */

.careers.section { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(40px, 6vw, 72px); }
.careers__h { margin-bottom: 0.35em; }
/* NB: the intro paragraph is styled by .pagelede in base.css and nothing here.
   It set color:var(--ink-2) — near-black — which on the dark panel the shared class
   now paints would have rendered this page's blurb as unreadable text on its own
   colour. 13.95:1 becomes about 1.1:1. Nothing but looking at it would have caught
   that, because it is valid CSS doing exactly what it says. */

/* Roles: a tight list — name + meta on one line, Apply on the right. */
.careers__roles { list-style: none; margin: 0 0 clamp(32px, 5vw, 52px); padding: 0; border-top: 1px solid var(--line); }
.careers__role {
  display: flex;
  align-items: baseline;
  gap: 10px 16px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.careers__role-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; }
.careers__role-meta { font-family: var(--font-display); font-style: italic; color: var(--gold-ink); font-size: 0.95rem; }
.careers__apply { margin-left: auto; }

/* Form: same narrow column, snug. */
.careers__form { max-width: 560px; }
.careers__form-h { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 0.7em; }
.careers__form .field { margin-bottom: 14px; }
.careers__form .grid--form { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
.careers__form button[type="submit"] { margin-top: 6px; }

@media (min-width: 561px) {
  .careers__form .grid--form { grid-template-columns: 1fr 1fr; }
}

/* Honeypot: visually hidden but present for bots. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }