/* The Thursday Times: Careers (page-templates/careers.php). Builds on about.css. */

/* ---------------------------------------------------------------------- hero */
.cr-hero { padding-block: clamp(80px, 11vw, 160px) clamp(64px, 8vw, 112px); }
.cr-hero__in { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tt-space-6); }
.cr-lockup { width: min(820px, 100%); }
.cr-lockup__svg { display: block; width: 100%; height: auto; overflow: visible; }
.cr-ink { fill: var(--tt-paper); }
.cr-colon { fill: var(--tt-orange); }
.cr-word--times { animation: cr-out 0.6s var(--ab-ease) 1.5s both; }
.cr-word--careers { animation: cr-in 0.6s var(--ab-ease) 1.5s both; }
@keyframes cr-out { from { translate: 0 0; } to { translate: 0 -780px; } }
@keyframes cr-in { from { translate: 0 780px; } to { translate: 0 0; } }
.cr-title { margin: 0; max-width: 12em; font-family: var(--font-display); font-weight: 900; font-size: clamp(42px, 6.4vw, 96px); line-height: 0.98; letter-spacing: -0.03em; text-wrap: balance; }
.cr-hero__deck { margin: 0; max-width: 32em; font-family: var(--font-deck); font-size: clamp(21px, 2.1vw, 28px); line-height: 1.36; }
.cr-hero__actions { display: flex; flex-wrap: wrap; gap: var(--tt-space-4); }
.cr-button { min-height: 52px; font-size: 17px; }
.cr-hero .tt-button--main { background: var(--tt-paper); color: var(--tt-ink); border-color: var(--tt-paper); }
.cr-hero .tt-button--secondary { color: var(--tt-paper); border-color: var(--tt-paper); }
.cr-hero .tt-button--secondary:hover, .cr-hero .tt-button--secondary:focus-visible { background: var(--tt-paper); color: var(--tt-ink); }

/* --------------------------------------------------------------------- offer */
.cr-list { list-style: none; margin: var(--tt-space-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tt-space-5); }
.cr-item { position: relative; padding-top: var(--tt-space-5); }
.cr-item::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--tt-border); transform-origin: 0 50%; }
.cr-item__n { font-family: var(--font-ui); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tt-text-secondary); }
.cr-item__title { margin: var(--tt-space-3) 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.05; letter-spacing: -0.025em; }
.cr-item__line { margin: 0; max-width: 24em; font-family: var(--font-text); font-size: 18px; line-height: 28px; color: var(--tt-text-secondary); }
.ab-ready .cr-item::before { transition: transform 0.8s var(--ab-ease) calc(var(--i) * 0.12s); }
.ab-ready .cr-item > * { transition: opacity 0.6s var(--ab-ease) calc(0.2s + var(--i) * 0.12s), translate 0.6s var(--ab-ease) calc(0.2s + var(--i) * 0.12s); }
.ab-ready .cr-item:not(.is-in)::before { transform: scaleX(0); }
.ab-ready .cr-item:not(.is-in) > * { opacity: 0; translate: 0 20px; }

/* --------------------------------------------------------------- open roles */
/* The roles are the page's own content: each h3 opens a role with a 3 px rule; h4s head its parts. */
.cr-roles { max-width: 52em; margin-top: var(--tt-space-7); font-family: var(--font-text); font-size: 18px; line-height: 29px; color: var(--tt-paper); }
.cr-roles h3 { margin: var(--tt-space-8) 0 var(--tt-space-3); padding-top: var(--tt-space-4); border-top: var(--tt-rule-section-width, 3px) solid var(--tt-paper); font-family: var(--font-display); font-weight: 900; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.04; letter-spacing: -0.025em; }
.cr-roles h3:first-child { margin-top: 0; }
.cr-roles h4 { margin: var(--tt-space-6) 0 var(--tt-space-2); font-family: var(--font-display); font-weight: 900; font-size: 21px; line-height: 26px; letter-spacing: -0.015em; }
.cr-roles p { margin: 0 0 var(--tt-space-4); max-width: 36em; }
.cr-roles .cr-meta { display: flex; flex-wrap: wrap; gap: var(--tt-space-2) var(--tt-space-5); margin-bottom: var(--tt-space-5); font-family: var(--font-ui); font-size: 16px; line-height: 22px; color: var(--tt-text-secondary); }
.cr-roles ul { list-style: none; margin: 0 0 var(--tt-space-4); padding: 0; max-width: 40em; border-bottom: 1px solid var(--tt-border); }
.cr-roles li { position: relative; padding: 12px 0 12px 28px; border-top: 1px solid var(--tt-border); }
.cr-roles li::before { content: ""; position: absolute; left: 0; top: 23px; width: 8px; height: 8px; background: var(--tt-paper); }
.cr-roles a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--tt-orange); }
.cr-roles .cr-updated { font-family: var(--font-ui); font-size: 15px; color: var(--tt-text-secondary); }

/* -------------------------------------------------------------------- apply */
.cr-steps { list-style: none; margin: var(--tt-space-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tt-space-5); position: relative; }
.cr-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 3px; background: var(--tt-text); transform-origin: 0 50%; }
.cr-step { position: relative; }
.cr-step__dot { display: block; width: 28px; height: 28px; background: var(--tt-text); }
.cr-step:last-child .cr-step__dot { background: var(--tt-orange); }
.cr-step__title { margin: var(--tt-space-5) 0 var(--tt-space-2); font-family: var(--font-display); font-weight: 900; font-size: 27px; line-height: 30px; letter-spacing: -0.025em; }
.cr-step__line { margin: 0; max-width: 22em; font-family: var(--font-text); font-size: 17px; line-height: 26px; color: var(--tt-text-secondary); }
.ab-ready .cr-steps::before { transition: transform 1.1s var(--ab-ease); }
.ab-ready .cr-steps:not(.is-in)::before { transform: scaleX(0); }
.ab-ready .cr-steps:not(.is-in) .cr-step__dot { opacity: 0; }
.cr-steps.is-in .cr-step__dot { --ab-drop: 120px; animation: ab-drop 0.75s var(--ab-ease) calc(0.6s + var(--i) * 0.3s) both; }
.ab-ready .cr-steps .cr-step > :not(.cr-step__dot) { transition: opacity 0.6s var(--ab-ease) calc(0.9s + var(--i) * 0.3s); }
.ab-ready .cr-steps:not(.is-in) .cr-step > :not(.cr-step__dot) { opacity: 0; }
.cr-small { margin: var(--tt-space-7) 0 0; max-width: 40em; font-family: var(--font-ui); font-size: 17px; line-height: 26px; color: var(--tt-text-secondary); }
.cr-small a { color: var(--tt-text); text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--tt-orange); }

@media (max-width: 1023px) { .cr-list { grid-template-columns: minmax(0, 1fr); gap: var(--tt-space-6); } }
@media (max-width: 767px) {
	.cr-steps { grid-template-columns: minmax(0, 1fr); gap: var(--tt-space-6); }
	.cr-steps::before { left: 13px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; transform-origin: 50% 0; }
	.ab-ready .cr-steps:not(.is-in)::before { transform: scaleY(0); }
	.cr-step { padding-left: 56px; }
	.cr-step__dot { position: absolute; left: 0; top: 0; }
	.cr-step__title { margin-top: 0; }
	.cr-hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.cr-word--times { display: none; }
	.cr-word--careers { translate: none; }
}