/* 047 v5, Careers and the eight role pages. Built ON theme.css, chrome.css and site.css (untouched here).
   Who thrives: the sort (each "fit" box fills and is ticked in turn; each "won't" line takes its red dash).
   The roles: the roll call (site.css .roll). Network: the gate lights and its light falls through. Veterans: the star is drawn, then lit. */

/* ------------------------------------------------------------------ who thrives here, and who will not */
.thr__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap); row-gap: 48px; align-items: start; }
.thr__head { display: grid; gap: 22px; }
.thr__head .h2 { max-width: 13em; }
.thr__lists { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); row-gap: 44px; padding-top: 6px; }
.thr__k { margin-bottom: 26px; }
.thr__list li { position: relative; padding-left: 36px; font: 500 clamp(1.125rem, 1rem + .4vw, 1.3125rem)/1.42 var(--sans); color: var(--bw-white); text-wrap: pretty; }
.thr__list li + li { margin-top: 20px; }
.thr__col--no li { color: var(--bw-silver); }
/* a fit: a box, filled with light and ticked */
.thr__col--yes li::before { content: ""; position: absolute; left: 0; top: .3em; width: 15px; height: 15px; background: var(--bw-white); }
.thr__col--yes li::after { content: ""; position: absolute; left: 5px; top: calc(.3em + 2px); width: 4px; height: 8px; border: solid var(--bw-ground); border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* a won't: the red dash */
.thr__col--no li::before { content: ""; position: absolute; left: 0; top: calc(.3em + 7px); width: 15px; height: 2px; background: var(--bw-oxblood-lit); transform-origin: left center; }
.thr__i--1 { --i: 1; } .thr__i--2 { --i: 2; } .thr__i--3 { --i: 3.4; } .thr__i--4 { --i: 4.4; }
@media (prefers-reduced-motion: no-preference) {
  .motion .thr__lists:not(.is-on) .thr__list li { opacity: .3; }
  .motion .thr__lists:not(.is-on) .thr__col--yes li::before { background: transparent; box-shadow: inset 0 0 0 1px var(--bw-gun-400); }
  .motion .thr__lists:not(.is-on) .thr__col--yes li::after { opacity: 0; }
  .motion .thr__lists:not(.is-on) .thr__col--no li::before { transform: scaleX(0); }
  .thr__lists.is-on .thr__list li { animation: thr-line .5s var(--ease-light) calc(var(--i, 0) * .2s) both; }
  .thr__lists.is-on .thr__col--yes li::before { animation: thr-box .32s var(--ease-light) calc(var(--i, 0) * .2s + .1s) both; }
  .thr__lists.is-on .thr__col--yes li::after { animation: thr-tick .2s ease-out calc(var(--i, 0) * .2s + .3s) both; }
  .thr__lists.is-on .thr__col--no li::before { animation: thr-dash .34s var(--ease-light) calc(var(--i, 0) * .2s + .1s) both; }
  @keyframes thr-line { from { opacity: .3; } to { opacity: 1; } }
  @keyframes thr-box { from { background: transparent; box-shadow: inset 0 0 0 1px var(--bw-gun-400); } to { background: var(--bw-white); box-shadow: inset 0 0 0 1px var(--bw-white); } }
  @keyframes thr-tick { from { opacity: 0; transform: rotate(45deg) scale(.4); } to { opacity: 1; transform: rotate(45deg); } }
  @keyframes thr-dash { from { transform: scaleX(0); } to { transform: none; } }
}

/* ------------------------------------------------------------------ the roles: three groups, the roll call */
.jobs__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap); row-gap: 40px; align-items: start; }
.jobs__head .h2 { max-width: 10em; }
.jobs__g + .jobs__g { margin-top: 40px; }
.jobs__gname { margin-bottom: 10px; }
.jobs__list li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(254, 254, 253, .2), rgba(254, 254, 253, .06)); }
.job { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 16px; align-items: center; column-gap: 32px; min-height: 76px; padding: 18px 0;
  text-decoration: none; color: inherit; }
.job__name { font: 600 1.1875rem/1.25 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--bw-white); font-feature-settings: "case"; }
.job__what { font: 400 1.0625rem/1.5 var(--sans); color: var(--bw-silver); }
.job svg { width: 16px; height: 10px; fill: none; stroke: var(--bw-gun-300); stroke-width: 1.25; transition: transform .25s var(--ease-light), stroke .25s; }
.job:hover svg, .job:focus-visible svg { transform: translateX(4px); stroke: var(--bw-white); }
.job:hover .job__what { color: var(--bw-white); }

/* ------------------------------------------------------------------ no matching role, and veterans */
.nv__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); row-gap: 56px; align-items: start; }
.nv__b { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 40px; align-items: start; }
.nv__fig { margin: 0; padding-top: 6px; }
.nv__words { display: grid; gap: 20px; justify-items: start; }
.nv__words .btn { margin-top: 6px; }
.nv-gate .nv-beam { opacity: 1; }
.nv-star { width: 76px; height: auto; overflow: visible; margin-left: 60px; margin-top: 8px; }
.nv-star__fill { fill: var(--bw-white); }
.nv-star__line { fill: none; stroke: var(--bw-white); stroke-width: .35; stroke-linejoin: miter; stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .motion .nv__in:not(.is-on) .nv-frame { opacity: .3; }
  .motion .nv__in:not(.is-on) .nv-beam, .motion .nv__in:not(.is-on) .nv-pool, .motion .nv__in:not(.is-on) .nv-star__fill { opacity: 0; }
  .motion .nv__in:not(.is-on) .nv-edge, .motion .nv__in:not(.is-on) .nv-sill, .motion .nv__in:not(.is-on) .nv-star__line { stroke-dashoffset: 1; }
  .motion .nv__in:not(.is-on) .nv__words { opacity: .2; }
  /* the gate lights; its light falls through onto the ground; the sill is lit: the door is open (1.3 s) */
  .nv__in.is-on .nv-frame { animation: nv-on .4s var(--ease-light) both; }
  .nv__in.is-on .nv-edge { animation: ink-draw .5s var(--ease-light) .15s both; }
  .nv__in.is-on .nv-beam { animation: nv-beam .8s var(--ease-light) .4s both; }
  .nv__in.is-on .nv-pool { animation: nv-on .6s var(--ease-light) .75s both; }
  .nv__in.is-on .nv-sill { animation: ink-draw .45s var(--ease-light) .7s both; }
  .nv__in.is-on .nv__b--net .nv__words { animation: nv-words .6s var(--ease-light) .2s both; }
  /* then the star: drawn, then filled with light (from 0.9 s, done by 2.1 s) */
  .nv__in.is-on .nv-star__line { animation: ink-draw .8s cubic-bezier(.42, 0, .22, 1) .9s both; }
  .nv__in.is-on .nv-star__fill { animation: nv-on .45s var(--ease-light) 1.6s both; }
  .nv__in.is-on .nv__b--vet .nv__words { animation: nv-words .6s var(--ease-light) 1s both; }
  @keyframes nv-on { from { opacity: .3; } to { opacity: 1; } }
  @keyframes nv-beam { from { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: none; } }
  @keyframes nv-words { from { opacity: .2; } to { opacity: 1; } }
}
.nv-beam { transform-box: fill-box; transform-origin: 100% 0; }
.motion .nv__in:not(.is-on) .nv-pool { opacity: 0; }

/* ------------------------------------------------------------------ our commitments to applicants (the legal lines: still) */
.com { padding-top: 24px; }
.com__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap); row-gap: 32px; align-items: start; }
.com__h { max-width: 11em; }
.com__body { max-width: 62ch; }

/* ------------------------------------------------------------------ a role page */
.phead--role .hero__words { gap: 18px; }
.phead--role .back { margin-bottom: 6px; }
.role__group { color: var(--bw-gun-300); }
.role { padding-top: 40px; }
.role__in { display: grid; max-width: 1080px; }
.role__row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap); padding: 26px 0; align-items: start; }
.role__k { padding-top: .5em; }
.role__v p, .role__v li { font: 400 clamp(1.0625rem, 1rem + .25vw, 1.1875rem)/1.55 var(--sans); color: var(--bw-silver); }
.role__row--why .role__v p { font: 500 clamp(1.3125rem, 1.1rem + .7vw, 1.75rem)/1.35 var(--sans); color: var(--bw-white); text-wrap: balance; }
.role__list li { position: relative; padding-left: 30px; }
.role__list li + li { margin-top: 10px; }
.role__list li::before { content: ""; position: absolute; left: 0; top: .78em; width: 14px; height: 1px; background: var(--bw-gun-350); }
.role__apply { margin-top: 22px; }

/* ------------------------------------------------------------------ phones and narrow windows */
@media (max-width: 899.98px) {
  .thr__in, .jobs__in, .com__in, .nv__in { grid-template-columns: minmax(0, 1fr); }
  .thr__lists { grid-template-columns: minmax(0, 1fr); }
  .job { grid-template-columns: minmax(0, 1fr) 16px; row-gap: 6px; column-gap: 20px; }
  .job__name { grid-column: 1; }
  .job__what { grid-column: 1; grid-row: 2; }
  .job svg { grid-column: 2; grid-row: 1 / span 2; }
  .nv__b { grid-template-columns: 120px minmax(0, 1fr); column-gap: 20px; }
  .nv-star { width: 52px; margin-left: 34px; }
  .role__row { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding: 20px 0; }
  .role { padding-top: 32px; }
}