/* careers.css — careers index + role pages. Uses tokens from styles.css. */
.role-tags{ display:flex; flex-wrap:wrap; gap:6px 14px; margin:0; padding:0; list-style:none; }
.role-tags li{ font-family:var(--mono); font-size:12.5px; color:var(--soft); }
.role-tags li::before{ content:"["; color:var(--blue); margin-right:2px; }
.role-tags li::after{ content:"]"; color:var(--blue); margin-left:2px; }

/* Index */
.role-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.role-list > li{ border-bottom:1px solid var(--line); }
.role-row{ display:grid; grid-template-columns:1fr auto; gap:14px 40px; align-items:center; padding:30px 4px; }
.role-row h2{ font-size:clamp(20px,2.2vw,24px); line-height:1.25; margin-bottom:8px; transition:color .15s ease; }
.role-row p{ margin:0 0 14px; color:var(--soft); font-size:16px; line-height:1.6; max-width:64ch; }
.role-row:hover h2{ color:var(--blue); }
.role-row .btn-text{ white-space:nowrap; }
.careers-empty{ color:var(--soft); }

/* Role page */
.jd-back{ display:block; width:max-content; font-family:var(--mono); font-size:12.5px; color:var(--softer); margin-bottom:22px; }
.jd-back:hover{ color:var(--white); }
.jd-hero h1{ font-size:clamp(30px,4vw,46px); line-height:1.12; max-width:24ch; margin-bottom:18px; }
.jd-hero .role-tags{ margin-bottom:26px; }
.jd-auth{ margin:26px 0 0; padding:14px 18px; max-width:720px; border-left:3px solid var(--blue); background:var(--blue-soft); border-radius:0 var(--radius-s) var(--radius-s) 0; font-size:15.5px; line-height:1.6; color:var(--white); }

.jd-grid{ display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:72px; padding:64px 0 110px; }
.jd-body{ max-width:720px; }
.jd-body h2{ font-size:clamp(21px,2.2vw,24px); line-height:1.25; margin:48px 0 16px; }
.jd-body h2:first-child{ margin-top:0; }
.jd-body p{ font-size:16.5px; line-height:1.7; color:var(--soft); margin:0 0 16px; }
.jd-body ul{ margin:0 0 8px; padding-left:20px; }
.jd-body li{ font-size:16.5px; line-height:1.65; color:var(--soft); margin:0 0 12px; }
.jd-body li::marker{ color:var(--blue); }
.jd-body li strong, .jd-body .jd-strong{ color:var(--white); font-weight:600; }
.jd-bottom-apply{ margin-top:36px !important; }
.jd-fine{ font-size:13.5px !important; color:var(--softer) !important; margin-top:48px !important; padding-top:24px; border-top:1px solid var(--line); }

.jd-aside{ position:sticky; top:100px; align-self:start; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius-m); padding:24px; }
.jd-aside h2{ font-size:16px; line-height:1.35; margin-bottom:16px; }
.jd-aside dl{ display:grid; grid-template-columns:auto 1fr; gap:9px 16px; margin:0 0 22px; font-size:14px; }
.jd-aside dt{ font-family:var(--mono); font-size:12px; color:var(--softer); padding-top:2px; }
.jd-aside dd{ margin:0; color:var(--white); }
.jd-aside .btn{ width:100%; justify-content:center; }

@media (max-width:900px){
  .jd-grid{ grid-template-columns:1fr; gap:36px; padding-top:40px; }
  .jd-aside{ display:none; }
  .role-row{ grid-template-columns:1fr; }
}