/* Careers and retained job detail routes (2026-09-28). Source copy stays unchanged; this sheet
   supplies only the directory and entity-page layout on the established marketing grid. */

.careers > .container { display: grid; gap: var(--s-10); }
.careers-hero { min-height: 22rem; display: grid; align-content: end; gap: var(--s-4); padding-block: var(--s-10); }
.careers-hero h1 { max-width: 15ch; }
.careers-openings { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-8); padding-block: var(--s-8); border-top: 1px solid var(--border); }
.careers-openings-head { display: grid; align-content: start; gap: var(--s-4); }
.careers-openings-head h2 { font-size: var(--fs-subhead); }
.careers-openings-head p { max-width: 48ch; color: var(--body); font-size: var(--fs-lead-sm); line-height: var(--lh-sub); }
.careers-list { margin: 0; padding: 0; list-style: none; }
.careers-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3) var(--s-6); padding: var(--s-6); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg); color: var(--ink); text-decoration: none; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.careers-card:hover, .careers-card:focus-visible { border-color: var(--orange-border); transform: translateY(-2px); box-shadow: var(--menu-shadow); }
.careers-department { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-display); letter-spacing: var(--track-eyebrow); text-transform: uppercase; }
.careers-card h3, .careers-summary { grid-column: 1; }
.careers-summary, .careers-location { color: var(--body); }
.careers-location { grid-column: 2; grid-row: 2; align-self: center; font-size: var(--fs-ui); }
.careers-action { grid-column: 1 / -1; display: inline-flex; align-items: center; margin-top: var(--s-2); font-weight: var(--fw-display); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; }

.careers-crumb { padding-block: var(--s-5) 0; color: var(--muted); font-size: var(--fs-small); }
.careers-crumb ol { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.careers-crumb li { display: flex; gap: var(--s-2); }
.careers-crumb li + li::before { content: '\203A'; color: var(--faint); }
.careers-crumb a { color: var(--ink); text-decoration: none; }
.careers-crumb a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }

.job-page { padding-top: var(--s-6); }
.job-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4) var(--s-8); align-items: end; padding-block: var(--s-8) var(--s-10); }
.job-header > :not(.btn) { grid-column: 1; }
.job-header > .btn { grid-column: 2; grid-row: 2 / span 3; align-self: center; }
.job-header h1 { max-width: 22ch; }
.job-summary { max-width: 60ch; color: var(--body); font-size: var(--fs-lead); line-height: var(--lh-sub); }
.job-facts { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); margin: var(--s-2) 0 0; }
.job-facts div { display: grid; gap: 2px; }
.job-facts dt { color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-display); text-transform: uppercase; letter-spacing: var(--track-eyebrow); }
.job-facts dd { margin: 0; color: var(--ink); }
.job-body { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--s-10); padding-block: var(--s-10); border-top: 1px solid var(--border); }
.job-copy { min-width: 0; max-width: 48rem; }
.job-copy > :is(h2, h3) { margin-top: var(--s-9); scroll-margin-top: 96px; font-size: var(--fs-subhead); }
.job-copy > :is(h2, h3):first-child { margin-top: 0; }
.job-copy > p, .job-copy > ul { margin-top: var(--s-4); color: var(--body); font-size: var(--fs-reading); line-height: var(--lh-loose); }
.job-copy > ul { padding-left: 1.25rem; }
.job-copy > ul li + li { margin-top: var(--s-2); }
.job-apply { align-self: start; display: grid; gap: var(--s-4); padding: var(--s-6); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-2); position: sticky; top: 96px; }
.job-apply h2 { font-size: var(--fs-card); }
.job-apply p { color: var(--body); }
.job-apply .btn { justify-self: start; }

@media (max-width: 899px) {
  .careers-openings, .job-body { grid-template-columns: 1fr; }
  .careers-hero { min-height: 15rem; }
  .job-apply { position: static; }
}
@media (max-width: 639px) {
  .careers-card { grid-template-columns: 1fr; }
  .careers-location, .careers-card h3, .careers-summary, .careers-action { grid-column: 1; grid-row: auto; }
  .job-header { grid-template-columns: 1fr; }
  .job-header > .btn { grid-column: 1; grid-row: auto; justify-self: start; }
  .job-facts { display: grid; grid-template-columns: 1fr 1fr; }
}