/* Digital Media Design — career deep-dive pages (site/careers/*.html).
   Shared by all twelve career-path pages so each one only needs a tiny bit
   of page-specific accent color (--cp-color / --cp-deep / --cp-bg, set in a
   short inline <style> block per page), not its own copy of this whole
   stylesheet.

   Two different accent tokens are used on purpose:
   - --cp-color mode-swaps (dark in light mode, light in dark mode) — it's
     for TEXT that sits directly on the page/card surface, e.g. headings.
   - --cp-deep never swaps — it's a fixed, dark, saturated shade of the same
     hue used ONLY as a solid fill behind white text (buttons, pills,
     badges, the header gradient), so that fill always has enough contrast
     for white text in both light and dark mode. Every accent color used on
     this page was picked so --cp-deep clears 4.5:1 against white text. */

.cp-header{
  background:linear-gradient(160deg, var(--cp-deep, var(--primary)), var(--cp-deep-2, var(--primary-dark)));
  border-top:none;
}
.cp-header h1{font-size:40px; letter-spacing:-.02em}
@media (max-width:700px){ .cp-header h1{font-size:28px} }
.cp-eyebrow{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.cp-icon-chip{
  display:flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:16px;
  font-size:28px; flex:none; background:rgba(255,255,255,.92); box-shadow:var(--shadow-sm);
}
.cp-blurb{font-size:16.5px; color:var(--muted); max-width:760px}
.cp-back{font-size:13px; font-weight:700; text-decoration:none; color:var(--muted)}
.cp-back:hover{color:var(--primary)}

.cp-section h2{color:var(--cp-color, var(--primary-dark)); font-size:24px}

/* ---- entry requirements ---- */
.req-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; margin-top:12px}
.req-card{
  background:var(--bg); border:1px solid var(--border); border-left:4px solid var(--cp-deep, var(--primary));
  border-radius:var(--radius-sm); padding:14px 16px;
}
.req-card h3{margin:0 0 6px; font-size:14px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted)}
.req-card p, .req-card ul{font-size:14.5px; margin:0}
.req-card ul{padding-left:18px}
.req-card li{margin:3px 0}
.req-titles{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.req-titles span{
  font-size:12.5px; font-weight:700; background:var(--cp-deep, var(--primary)); color:#fff;
  padding:4px 10px; border-radius:999px;
}

/* ---- income table ---- */
.income-table{width:100%; border-collapse:collapse; margin-top:14px; font-size:15px}
.income-table th, .income-table td{border:1px solid var(--border); padding:12px 14px; text-align:left}
.income-table th{background:var(--cp-deep, var(--primary)); color:#fff; font-weight:700}
.income-table td.figure{font-size:20px; font-weight:800; color:var(--ink)}
.income-table tr:nth-child(even) td{background:var(--bg)}
.income-source{font-size:13px; color:var(--muted); margin-top:10px}
.income-source a{color:var(--cp-color, var(--primary)); font-weight:600}

/* ---- portfolio roadmap ---- */
.roadmap{list-style:none; padding:0; margin:14px 0 0; counter-reset:cp-step}
.roadmap li{
  position:relative; padding:4px 0 20px 34px; border-left:2px solid var(--cp-bg, var(--border)); margin-left:14px;
}
.roadmap li:last-child{border-left-color:transparent; padding-bottom:0}
.roadmap li::before{
  counter-increment:cp-step; content:counter(cp-step); position:absolute; left:-15px; top:0;
  width:28px; height:28px; border-radius:50%; background:var(--cp-deep, var(--primary)); color:#fff;
  font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.roadmap h3{margin:0 0 4px; font-size:15.5px; color:var(--cp-color, var(--ink))}
.roadmap p{margin:0; font-size:14.5px; color:var(--muted)}

/* ---- project cards ---- */
.project-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; margin-top:14px}
.project-card{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 18px;
  border-top:4px solid var(--cp-deep, var(--primary));
}
.project-num{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:var(--cp-color, var(--primary)); margin-bottom:4px;
}
.project-card h3{margin:0 0 6px; font-size:16.5px}
.project-card p{font-size:14.5px; margin:0 0 10px}
.project-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto}
.project-tags a{
  font-size:12.5px; font-weight:700; text-decoration:none; color:#fff; background:var(--cp-deep, var(--primary));
  padding:4px 10px; border-radius:999px;
}
.project-tags a.book-pill{background:var(--muted)}
.project-tags a:hover{opacity:.85}
.project-outcome{font-size:13px; font-style:italic; color:var(--muted); margin-top:8px; padding-top:8px; border-top:1px dashed var(--border)}

.cp-nav-strip{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:24px 0 4px}
.cp-nav-strip a{
  font-size:13.5px; font-weight:700; text-decoration:none; color:var(--ink); background:var(--surface);
  border:1.5px solid var(--border); padding:8px 14px; border-radius:999px;
}
.cp-nav-strip a:hover{border-color:var(--cp-color, var(--primary)); color:var(--cp-color, var(--primary))}
.cp-nav-strip a.is-current{background:var(--cp-deep, var(--primary)); color:#fff; border-color:transparent}