/* Wrap theme, jobs: a board of roles on one sheet; a role page opens on its benefits. */
main.jobs-wrap {padding:20px clamp(20px, 5vw, 80px) 72px;}
/* The breadcrumbs arrive with inline spacing from the archive builder. */
.jobs-wrap .archive-breadcrumbs {max-width:none !important; margin:0 0 8px !important; padding:0 !important; font-size:.875rem !important;}
.jobs-wrap .archive-breadcrumbs a {display:inline-flex; align-items:center; min-height:44px;}

/* Page name: light, a long cord above. */
main.jobs-wrap .jobs-title {position:relative; margin:0; padding-top:30px; font-size:clamp(2rem,4.4vw,3rem); font-weight:300; letter-spacing:.16em; line-height:1.35; color:var(--ink);}
main.jobs-wrap .jobs-title::before {content:""; position:absolute; top:0; left:0; width:72px; height:7px; background:var(--cord-lines);}
.role-tag {display:inline-flex; align-items:center; margin:0; padding:3px 12px 4px; border:1px solid var(--cord); border-radius:2px; background:var(--paper); color:var(--cyan-ink); font-size:.875rem; letter-spacing:.16em; line-height:1.6;}

/* ---------- The board ---------- */
.jobs-head {padding:20px 0 0;}
.jobs-wrap-list > * {max-width:1040px; margin-inline:auto;}
.jobs-wrap-list > .archive-breadcrumbs {max-width:1040px !important; margin-inline:auto !important;}
.role-ledger {display:grid; gap:30px; margin:28px auto 0; padding:0; list-style:none;}
.role-row {display:flex; flex-direction:column; align-items:flex-start; gap:10px;}
.role-who {display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;}
main.jobs-wrap .role-name {margin:0; font-size:clamp(1.5rem,2.6vw,2rem); font-weight:400; letter-spacing:.12em; line-height:1.4;}
.role-name a {display:inline-flex; align-items:center; min-height:44px; color:var(--ink); text-decoration:none; transition:color 200ms var(--ease-out);}
.role-name a:hover {color:var(--cyan-ink);}
main.jobs-wrap .role-need {margin:0; max-width:32em; font-size:1rem; color:var(--ink); letter-spacing:0; line-height:1.75;}
.role-actions {display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; margin-top:8px;}
.role-actions .button {min-height:44px; padding:8px 24px 9px;}
.role-more {display:inline-flex; align-items:center; min-height:44px; font-size:1rem; color:var(--ink); letter-spacing:.06em; text-decoration:underline; text-underline-offset:.32em;}
.role-more:hover {color:var(--coral-ink);}

@media (min-width:900px) {
  .role-ledger {grid-template-columns:repeat(2, minmax(0,1fr)); gap:56px 72px;}
}

/* ---------- A role ---------- */
/* The floating register tag would cover the role's own apply button. */
body:has(main.jobs-wrap-role) .floating-register {display:none !important;}
.role-page {display:flex; flex-direction:column; gap:32px; margin-top:20px;}
.role-header {margin:0;}
.role-apply {order:0;}
.role-name-block {display:flex; flex-direction:column; align-items:flex-start; gap:14px;}
main.jobs-wrap .role-name-block .jobs-title {font-size:clamp(2rem,6vw,2.75rem);}
.role-apply .button {min-width:180px;}
.role-terms {display:grid; gap:32px; margin:0;}
.role-pair {display:grid; gap:32px;}
main.jobs-wrap .role-section h2 {position:relative; margin:0 0 16px; padding-top:26px; font-size:clamp(1.25rem,2.2vw,1.5rem); font-weight:400; letter-spacing:.2em; line-height:1.5; color:var(--cyan-ink);}
main.jobs-wrap .role-section h2::before {content:""; position:absolute; top:0; left:0; width:52px; height:7px; background:var(--cord-lines);}
.role-list {margin:0; padding:0 0 0 1.1em; list-style:disc; max-width:38em;}
.role-list li::marker {color:var(--cord);}
main.jobs-wrap .role-list li {font-size:1rem; padding:0 0 0 4px; margin:0 0 10px; line-height:1.75; letter-spacing:0; color:var(--ink); break-inside:avoid;}

@media (min-width:700px) {
  .role-page {gap:28px;}
  .role-terms {margin-top:28px; gap:48px;}
  .role-pair {gap:48px;}
}
@media (min-width:900px) {
  .role-ledger {gap:56px 72px;}
}
@media (min-width:1000px) {
  .role-perks .role-list {max-width:none; columns:2; column-gap:72px;}
  .role-pair {grid-template-columns:repeat(2, minmax(0,1fr)); gap:72px;}
  .role-pair .role-list {max-width:none;}
}
@media (max-width:420px) {
  .role-apply, .role-apply .button {width:100%;}
}