/*
  /careers/ · the page's sections (Site · Migrations & careers; Tong's reviews of 15 Oct: 7.1, 7.3, and the second
  pass's 7.2–7.6), on the site's frame (/marketing/shared/site/site.css). .cr-hero: the H1 and the lead left; the Adam House,
  its key and the Join us paragraph right (.cr-side). .cr-roles: the four roles as rows (no section head: the page's
  one content section), each row's hairline drawing pink on hover.
  index.html links this file as careers.css?v=<its hash>, stamped by tools/site/stamp.mjs (as careers.js is): re-run
  it after any change here, so a deploy never pairs new markup with a cached old copy.
*/
/* two columns, an even split at every width down to 768 (Tong's second pass, 7.2, 7.3 and his mockup, 7.6): the H1
   and the lead left, filling their column (7.4); right, from the H1's top line, the house, its key, and the Join us
   paragraph at the body size, the figure's width. Under 768 they stack in that order. */
.cr-hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.cr-copy { grid-column: 1 / span 6; }
.cr-copy .cr-lead { max-width: none; margin: clamp(32px, 3.3vw, 48px) 0 0; }   /* over the hero lead's own 640 px */
/* its top on the H1's top line rather than its line box: the H1's half-leading and cap gap, about .12 of its size */
.cr-side { grid-column: 7 / -1; padding-top: calc(var(--k-h1) * .12); }
.cr-side .cr-p { max-width: none; margin: 28px 0 0; }
/* the house's key (adam-house.js lays it out in five columns for the full width): here two rows the figure's width,
   01–03 in thirds and 04–05 in halves, so no row ends on an empty cell, and no label ever wraps (Tong, 15 Oct,
   evening: "no text wrapping", "two line and same width"). Sized by the key's own width (.cr-side is the container):
   where thirds can't hold "03 The coffee machine" (166 px) only the first row steps down: 01–02 in halves, 03 across,
   and 04–05 keep their halves; where halves can't hold "04 The garden in the back" (197 px), one a row. */
.cr-side { container: cr-side / inline-size; }
.cr-house .bfh-key { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 20px; }
.cr-house .bfh-key li { grid-column: span 6; }
.cr-house .bfh-key .t { white-space: nowrap; }
@container cr-side (424px <= width < 552px) {
  .cr-house .bfh-key li { grid-column: span 3; }
  .cr-house .bfh-key li:nth-child(3) { grid-column: span 6; }
}
@container cr-side (width >= 552px) {
  .cr-house .bfh-key li { grid-column: span 2; }
  .cr-house .bfh-key li:nth-child(n + 4) { grid-column: span 3; }
}
/* the two columns end level (Tong, 15 Oct, evening: "make these two sections height even … make the left text width
   shorter"), from 1024 up: the lead narrows to the line count that brings the left column within a line of the right
   one, and sits at the column's foot, so its last line ends on the Join paragraph's (the slack, under a line at 1280
   and up, goes into the gap under the H1). The right column steps where the key drops to three rows (552 px) and where
   Join drops to three lines (584 px), so the measure steps with it, in ems to hold its line count as the lead scales:
   7 lines, then 6, then 5 at 1440. Under 1024 the right column runs 3–7 lines longer: the lead fills its column, as
   before. The tops stay put: the H1 and, on its top line, the house. */
.cr-copy { container: cr-copy / inline-size; align-self: stretch; display: flex; flex-direction: column; }
@media (min-width: 1024px) {
  .cr-copy .cr-lead { margin-top: auto; padding-top: clamp(32px, 3.3vw, 48px); max-width: 18.6em; }
  @container cr-copy (width >= 552px) { .cr-copy .cr-lead { max-width: 21.5em; } }
  @container cr-copy (width >= 583.5px) { .cr-copy .cr-lead { max-width: 26em; } }
}
@media (max-width: 767px) {
  .cr-copy, .cr-side { grid-column: 1 / -1; }
  .cr-side { padding-top: 0; margin-top: 40px; }
}

/* ---------------------------------------------------------------- the roles */
/* the section opens on one grey hairline, the content's width, then the heading at the site's head-to-body gap (56 px,
   40 on phones), as other sections open, without their index and label, which 7.5 took off (Tong, 15 Oct, evening:
   "one top gray dividing line on top of the current opportunities") */
.cr-roles > .site-grid { border-top: 1px solid var(--line); }
.cr-list { margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.cr-list li { position: relative; border-bottom: 1px solid var(--line); }
/* the hover is the row itself: its hairline draws pink left to right in one short ease and drains back on leave */
.cr-list li::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.cr-list li:has(.cr-row:hover)::after, .cr-list li:has(.cr-row:focus-visible)::after { transform: scaleX(1); }
.cr-row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: baseline; padding: 24px 0 26px;
  color: var(--ink); text-decoration: none;
}
.cr-n { grid-column: 1; font-family: var(--font-mono); font-size: 12px; line-height: 18px; letter-spacing: .04em; color: var(--muted); transition: color .2s ease; }
.cr-title { grid-column: 2 / span 4; font-family: var(--font-display); font-weight: var(--k-weight, 400); font-size: clamp(22px, 1.8vw, 26px); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.cr-meta, .cr-pay { display: grid; gap: 2px; font-family: var(--font-mono); font-size: 12px; line-height: 18px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cr-meta { grid-column: 6 / span 3; }
.cr-pay { grid-column: 9 / span 3; color: var(--ink); }
.cr-eq { color: var(--muted); }
.cr-meta > span, .cr-pay > span { white-space: nowrap; }
.cr-go { grid-column: 12; justify-self: end; align-self: center; width: 16px; height: 16px; transition: transform .25s ease, color .2s ease; }
.cr-go .ic { display: block; width: 16px; height: 16px; }
.cr-row:is(:hover, :focus-visible) :is(.cr-n, .cr-go) { color: var(--accent); }
.cr-row:is(:hover, :focus-visible) .cr-go { transform: translate(2px, -2px); }
/* keyboard focus: the title's own underline, the width of its words, with the row's pink line */
.cr-row:focus-visible { outline: none; }
.cr-row:focus-visible .cr-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
/* tablets: the title across the row, the details under it */
@media (max-width: 1023px) {
  .cr-row { row-gap: 14px; }
  .cr-n { grid-row: 1; }
  .cr-title { grid-column: 2 / span 10; grid-row: 1; }
  .cr-go { grid-row: 1; align-self: start; margin-top: 4px; }
  .cr-meta { grid-column: 2 / span 6; grid-row: 2; }
  .cr-pay { grid-column: 8 / span 4; grid-row: 2; }
}
@media (max-width: 767px) {
  .cr-row { grid-template-columns: 28px minmax(0, 1fr) 16px; column-gap: 12px; row-gap: 10px; padding: 18px 0 20px; }
  .cr-n { grid-column: 1; grid-row: 1; padding-top: 4px; }
  .cr-title { grid-column: 2; grid-row: 1; font-size: 21px; }
  .cr-go { grid-column: 3; grid-row: 1; align-self: start; margin-top: 4px; }
  .cr-meta { grid-column: 2 / -1; grid-row: 2; }
  .cr-pay { grid-column: 2 / -1; grid-row: 3; display: flex; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .cr-list li::after, .cr-go, .cr-n { transition: none; } }

/* "Current Opportunities" is two words, 9.67 em at the H2's tracking: on phones under about 430 px the H2 takes the size
   that holds it on one line, rather than leaving "Opportunities" alone (Tong's no-orphans rule) */
.cr-roles .site-h2 { font-size: min(var(--k-h2), (100vw - 2 * var(--k-pad)) / 9.8); }