/* ============================================================
   /jobs board page — supplements home.css (dark + lime brand).
   home.css already styles the navbar, buttons, .job-card*, and footer;
   this file only adds the page-specific wrapper, CTA box and pagination.
   ============================================================ */

.jobs-page{max-width:880px;margin:0 auto;padding:104px 28px 64px}
.jobs-page-title{font-family:"Fraunces",serif;font-weight:600;font-size:clamp(30px,4vw,46px);letter-spacing:-.02em;text-align:center;margin-bottom:30px}

/* CTA box */
.cta-box{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:18px;padding:28px;text-align:center;margin-bottom:38px}
.cta-box h3{font-family:"Fraunces",serif;font-weight:600;font-size:22px;line-height:1.25;margin-bottom:8px}
.cta-box p{color:var(--muted-2);font-size:15.5px;line-height:1.5;margin-bottom:18px;max-width:520px;margin-left:auto;margin-right:auto}

/* job list */
.jobs-list{margin-bottom:36px}

/* pagination */
.pagination{list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;padding:0;margin:0}
.pagination li a,.pagination li span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:10px;color:var(--muted-2);font-size:14px;font-family:"JetBrains Mono",monospace;transition:.15s}
.pagination li a:hover{border-color:var(--signal);color:var(--signal)}
.pagination li.active a{background:var(--signal);border-color:var(--signal);color:var(--ink);font-weight:700}
.pagination li span{border-color:transparent;color:var(--muted)}

@media(max-width:880px){
  .jobs-page{padding-top:92px}
  .navbar-nav{gap:14px}
}