/* ARMY RECRUITMENT — vertical candidate journey */

.rc-hero { background: var(--bone); padding-block: clamp(2rem, 4vw, 3.2rem) 0; }
.rc-hero .crumbs { margin-bottom: clamp(2.2rem, 5vw, 4rem); }
.rc-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.6rem 4.5rem; }
.rc-hero h1 { max-width: 16ch; }
.rc-hero .lead { max-width: 52ch; }
.rc-hero__fig { max-width: 706px; }
@media (min-width: 1000px) { .rc-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; } }
.rc-facts { margin: clamp(2.6rem, 5vw, 4rem) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.rc-facts div { padding: 20px 16px 26px 0; border-bottom: 1px solid var(--rule-2); }
.rc-facts div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--rule-2); }
.rc-facts dt { font: 400 .66rem/1.5 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
.rc-facts dd { margin: 0; font: 700 clamp(1.15rem, .95rem + .7vw, 1.55rem)/1.1 var(--f-display); font-stretch: 112%; text-transform: uppercase; }
@media (min-width: 900px) {
  .rc-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rc-facts div + div { padding-left: 20px; border-left: 1px solid var(--rule-2); }
}

@media (max-width: 420px) {
  .rc-facts { grid-template-columns: minmax(0, 1fr); }
  .rc-facts div:nth-child(even) { padding-left: 0; border-left: 0; }
}

/* Journey */
.journey { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.6rem 5rem; --p: 0; }
.journey__count { margin-top: 2rem; display: flex; align-items: baseline; gap: 10px; font: 700 clamp(3.4rem, 2rem + 4vw, 6.4rem)/1 var(--f-display); font-stretch: 120%; color: var(--ink); }
.journey__count span:last-child { font: 400 1rem/1 var(--f-mono); color: var(--fg-3); }
@media (min-width: 1000px) {
  .journey { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .journey__sticky { position: sticky; top: calc(var(--hdr-h) + 40px); }
}
@media (max-width: 999px) { .journey__count { display: none; } }
.journey__steps { position: relative; padding-left: 0; }
.journey__steps::before, .journey__steps::after { content: ""; position: absolute; left: 23px; top: 8px; bottom: 8px; width: 1px; }
.journey__steps::before { background: var(--rule-2); }
.journey__steps::after { background: var(--copper); transform-origin: top; transform: scaleY(var(--p)); }
html:not(.js) .journey__steps::after { transform: none; }
.journey__steps li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 22px; padding-bottom: 2.6rem; }
.journey__steps li:last-child { padding-bottom: 0; }
.journey__n { position: relative; z-index: 1; width: 48px; height: 48px; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--rule-2); font: 500 .8rem/1 var(--f-mono); color: var(--fg-3); transition: background-color .4s, color .4s, border-color .4s; }
.journey__steps li.is-past .journey__n, html:not(.js) .journey__n { background: var(--ink); border-color: var(--ink); color: var(--copper-lt); }
.journey__steps h3 { margin: 10px 0 .5rem; }
.journey__steps p { color: var(--fg-2); max-width: 60ch; margin-bottom: .9rem; }

/* Safeguards */
.never { border-top: 1px solid var(--ink); }
.never li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--rule-2); }
.never h3 { margin: 0 0 .3rem; }
.never p { margin: 0; color: var(--fg-2); font-size: .96rem; }
.never__x { width: 30px; height: 30px; border: 1px solid var(--signal); position: relative; margin-top: 2px; }
.never__x::before, .never__x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--signal); transform: translate(-50%, -50%) rotate(45deg); }
.never__x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.safeguards .note { margin-top: 1.8rem; }

/* Categories */
.cats__list { border-top: 1px solid var(--rule-2); }
.cat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 32px; padding: 28px 0; border-bottom: 1px solid var(--rule); transition: background-color .3s; }
.cat__code { font: 700 1.5rem/1 var(--f-display); font-stretch: 120%; color: transparent; -webkit-text-stroke: 1px var(--copper-lt); }
@supports not (-webkit-text-stroke: 1px black) { .cat__code { color: var(--copper-lt); } }
.cat__t { margin: 0 0 .4rem; font: 650 clamp(1.3rem, 1rem + 1vw, 1.9rem)/1.1 var(--f-display); font-stretch: 108%; text-transform: uppercase; }
.cat__body p { margin: 0; color: var(--fg-2); max-width: 52ch; }
.cat__roles { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
.cat__roles li { padding: 7px 11px; border: 1px solid var(--rule-2); font: 400 .7rem/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.cat:hover { background: rgba(238, 233, 223, .025); }
@media (min-width: 960px) {
  .cat { grid-template-columns: 110px minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; padding: 34px 0; }
  .cat__code { font-size: 2.2rem; }
  .cat__roles { justify-content: flex-end; }
}