/* ============================================================
   Careers — an editorial hiring board for THROME
   ============================================================ */

.careers-page { background: #f7f5f0; }
.careers-page .nav { color: #f9f5ee; }
.careers-page .nav-wordmark i,
.careers-page .nav-links,
.careers-page .nav-links > a,
.careers-page .nav-dropdown-trigger { color: rgba(249,245,238,.67); }
.careers-page .nav-links > a.active,
.careers-page .nav-links > a:hover,
.careers-page .nav-dropdown-trigger:hover,
.careers-page .nav-dropdown.open .nav-dropdown-trigger { color: #fff; }
.careers-page .nav-dropdown-trigger:hover,
.careers-page .nav-dropdown.open .nav-dropdown-trigger { background: rgba(255,255,255,.1); }
.careers-page .nav .btn-primary { background: #e7b45f; color: #1c1711; box-shadow: none; }
.careers-page .nav .btn-primary:hover { background: #f1c879; }
.careers-page .nav.scrolled { background: rgba(247,245,240,.92); color: var(--ink); }
.careers-page .nav.scrolled .nav-wordmark i,
.careers-page .nav.scrolled .nav-links,
.careers-page .nav.scrolled .nav-links > a,
.careers-page .nav.scrolled .nav-dropdown-trigger { color: var(--ink-soft); }
.careers-page .nav.scrolled .nav-links > a.active,
.careers-page .nav.scrolled .nav-links > a:hover,
.careers-page .nav.scrolled .nav-dropdown-trigger:hover,
.careers-page .nav.scrolled .nav-dropdown.open .nav-dropdown-trigger { color: var(--ink); }
.careers-page .nav.scrolled .nav-dropdown-trigger:hover,
.careers-page .nav.scrolled .nav-dropdown.open .nav-dropdown-trigger { background: rgba(23,21,31,.05); }

.careers-kicker { font-size: 10.5px; letter-spacing: .13em; line-height: 1.3; }
.careers-hero { position: relative; overflow: hidden; min-height: 720px; padding: 157px 0 90px; color: #f9f5ee; background: #201b25; }
.careers-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 78% 29%, rgba(126,109,225,.34), transparent 22%), radial-gradient(circle at 72% 78%, rgba(232,177,89,.2), transparent 32%), linear-gradient(114deg, rgba(255,255,255,.02), transparent 44%); }
.careers-hero-grid { position: absolute; inset: 0; opacity: .12; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.27) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.27) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(to bottom, transparent, #000 13%, #000 78%, transparent); }
.careers-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(380px, .96fr); gap: clamp(46px, 8vw, 126px); align-items: end; }
.careers-hero-copy { max-width: 590px; }
.careers-hero .careers-kicker { color: #e8bd70; margin-bottom: 22px; }
.careers-hero h1 { font-size: clamp(41px, 5.2vw, 64px); font-weight: 900; letter-spacing: -.065em; line-height: 1.08; }
.careers-hero h1 span { color: #e8bd70; position: relative; display: inline-block; }
.careers-hero h1 span::after { content: ""; position: absolute; z-index: -1; left: 1%; right: 1%; bottom: 2px; height: 9px; border-radius: 50%; background: rgba(232,189,112,.26); }
.careers-hero-copy > p:not(.careers-kicker) { max-width: 530px; margin-top: 24px; color: rgba(249,245,238,.68); font-size: 15.5px; line-height: 1.9; }
.careers-scroll-link { display: inline-flex; align-items: center; gap: 11px; margin-top: 29px; padding-bottom: 6px; color: #f9f5ee; border-bottom: 1px solid rgba(249,245,238,.52); font-size: 13px; font-weight: 900; transition: color .2s, border-color .2s; }
.careers-scroll-link span { color: #e8bd70; font-size: 19px; line-height: .8; }
.careers-scroll-link:hover { color: #e8bd70; border-color: #e8bd70; }
.careers-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.career-value { min-height: 115px; isolation: isolate; overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 17px 18px; border: 1px solid rgba(249,245,238,.13); border-radius: 14px; background: linear-gradient(138deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); box-shadow: inset 0 1px rgba(255,255,255,.055), 0 14px 24px -22px rgba(0,0,0,.8); transition: background .28s, border-color .28s, color .28s, transform .28s, box-shadow .28s; }
.career-value::before { content: ""; position: absolute; z-index: -1; width: 140px; height: 120px; right: -58px; bottom: -74px; border-radius: 50%; background: radial-gradient(circle, rgba(169,142,235,.22), transparent 68%); }
.career-value::after { content: ""; position: absolute; left: 18px; bottom: 16px; width: 26px; height: 2px; border-radius: 99px; background: rgba(232,189,112,.62); }
.career-value:nth-child(3n)::before { background: radial-gradient(circle, rgba(232,177,89,.2), transparent 68%); }
.career-value:hover { background: linear-gradient(135deg, #efc97e, #e7b45f); border-color: rgba(255,242,211,.7); color: #201b25; transform: translateY(-4px); box-shadow: 0 20px 34px -19px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.52); }
.career-value:hover::before { background: radial-gradient(circle, rgba(255,250,228,.66), transparent 68%); }.career-value:hover::after { background: rgba(32,27,37,.48); }
.career-value i { color: rgba(249,245,238,.55); font-size: 9px; font-style: normal; }.career-value:hover i { color: rgba(32,27,37,.54); }
.career-value b { font-size: 18px; line-height: 1.22; letter-spacing: -.035em; }
.careers-hero-word { position: absolute; right: -16px; bottom: -51px; color: transparent; -webkit-text-stroke: 1px rgba(249,245,238,.1); font: clamp(132px, 19vw, 276px)/1 var(--font-display); letter-spacing: .02em; pointer-events: none; }

.careers-roles { padding: 130px 0 120px; background: #f7f5f0; }
.careers-roles-head { display: grid; grid-template-columns: minmax(0, 1fr) 365px; gap: 70px; align-items: end; margin-bottom: 62px; }
.careers-roles-head .careers-kicker { color: #9a6a19; margin-bottom: 16px; }
.careers-roles-head h2 { font-size: clamp(32px, 4vw, 46px); font-weight: 900; letter-spacing: -.06em; line-height: 1.08; }
.careers-roles-head > p { color: var(--ink-soft); font-size: 14px; line-height: 1.85; }
.careers-role-labels { display: grid; grid-template-columns: 53px minmax(205px, 1.2fr) minmax(160px, .82fr) minmax(260px, 1.15fr) 58px; gap: 18px; padding: 0 18px 13px; color: #958e82; font-size: 12px; letter-spacing: .12em; border-bottom: 1px solid #d8d2c8; }
.careers-role-labels span:nth-child(1) { grid-column: 2; }.careers-role-labels span:nth-child(2) { grid-column: 3; }.careers-role-labels span:nth-child(3) { grid-column: 4; }.careers-role-labels span:nth-child(4) { grid-column: 5; }
.careers-role-list { border-bottom: 1px solid #d8d2c8; }
.careers-role { display: grid; grid-template-columns: 53px minmax(205px, 1.2fr) minmax(160px, .82fr) minmax(260px, 1.15fr) 58px; gap: 18px; align-items: center; min-height: 109px; padding: 18px; border-top: 1px solid #ded8cf; position: relative; transition: color .24s, background .24s, transform .24s; }
.careers-role:has(.careers-role-name:is(:hover, :focus-visible)), .careers-role:has(.careers-role-apply:is(:hover, :focus-visible)) { z-index: 1; color: #1f1922; background: #e9e2f3; transform: translateX(7px); }
.careers-role-number { color: #9b9186; font-size: 10px; }
.careers-role h3 { font-size: clamp(13px, 1.35vw, 18px); font-weight: 900; letter-spacing: -.045em; line-height: 1.12; }
.careers-role-name { display: inline-block; transition: color .2s; }.careers-role-name:hover, .careers-role-name:focus-visible { color: #8d641d; outline: none; }
.careers-role-series { color: #5f5960; font-size: 13px; line-height: 1.55; }
.careers-role-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: #5f5960; font-family: var(--font-mono); font-size: 10px; line-height: 1.7; letter-spacing: .04em; }
.careers-role-meta span + span::before { content: "·"; color: #a59c91; margin-right: 16px; }
.careers-role-apply { justify-self: end; display: inline-flex; align-items: center; gap: 5px; color: #8d641d; font-size: 12px; font-weight: 900; white-space: nowrap; cursor: pointer; }
.careers-role-apply i { font-style: normal; font-size: 17px; transition: transform .2s; }.careers-role:has(.careers-role-apply:is(:hover, :focus-visible)) .careers-role-apply i { transform: translate(3px, -3px); }

.careers-contact { position: relative; overflow: hidden; text-align: center; padding: 122px 0 117px; color: #f9f5ee; background: #17151f; }
.careers-contact::before { content: ""; position: absolute; left: 50%; bottom: -190px; width: 590px; height: 300px; transform: translateX(-50%); border-radius: 50%; filter: blur(72px); background: #6b5ce7; opacity: .47; }
.careers-contact .container { position: relative; z-index: 1; }.careers-contact .careers-kicker { color: #c2b9ff; margin-bottom: 18px; }
.careers-contact h2 { font-size: clamp(42px, 5.2vw, 64px); line-height: 1.13; letter-spacing: -.06em; font-weight: 900; }
.careers-contact p:not(.careers-kicker) { max-width: 510px; margin: 20px auto 28px; color: rgba(249,245,238,.65); font-size: 14.5px; line-height: 1.85; }
.careers-contact-link { display: inline-flex; align-items: center; gap: 13px; padding-bottom: 7px; border-bottom: 1px solid rgba(249,245,238,.52); color: #f9f5ee; font: 500 clamp(16px, 2vw, 21px) var(--font-mono); transition: color .2s, border-color .2s; }
.careers-contact-link span { color: #c2b9ff; font-size: 24px; }.careers-contact-link:hover { color: #c2b9ff; border-color: #c2b9ff; }

@media (max-width: 900px) {
  .careers-hero { min-height: auto; padding: 138px 0 76px; }.careers-hero-inner { grid-template-columns: 1fr; gap: 58px; }.careers-values { max-width: 580px; }.careers-roles { padding: 94px 0 88px; }.careers-roles-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 42px; }.careers-roles-head > p { max-width: 550px; }.careers-role-labels { display: none; }.careers-role { grid-template-columns: 43px minmax(0, 1fr) auto; gap: 10px 18px; min-height: 0; padding: 20px 5px; }.careers-role-number { grid-row: span 2; padding-top: 5px; }.careers-role-title { grid-column: 2; }.careers-role-series { grid-column: 2; }.careers-role-meta { grid-column: 2 / span 2; padding-left: 0; }.careers-role-apply { grid-column: 3; grid-row: 1 / span 2; align-self: center; }.careers-role:has(.careers-role-name:is(:hover, :focus-visible)), .careers-role:has(.careers-role-apply:is(:hover, :focus-visible)) { transform: none; padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 560px) {
  .careers-hero { padding: 119px 0 60px; }.careers-hero .container, .careers-roles .container { padding-left: 20px; padding-right: 20px; }.careers-hero h1 { font-size: 38px; }.careers-hero-copy > p:not(.careers-kicker) { font-size: 14px; }.careers-values { grid-template-columns: 1fr 1fr; }.career-value { min-height: 97px; padding: 14px; gap: 12px; }.career-value b { font-size: 15px; }.careers-hero-word { font-size: 165px; bottom: -28px; }.careers-roles-head h2 { font-size: 34px; }.careers-roles-head > p { font-size: 13.5px; }.careers-role { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px 9px; }.careers-role h3 { font-size: 11px; }.careers-role-series, .careers-role-meta { font-size: 11px; }.careers-role-meta { gap: 2px 9px; }.careers-role-meta span + span::before { margin-right: 9px; }.careers-role-apply { font-size: 0; }.careers-role-apply i { font-size: 19px; }.careers-contact { padding: 85px 20px; }.careers-contact h2 { font-size: 43px; }
}