/* Experience as a dated list (newest first), then education and certificates side by side. */
.career { padding-top: clamp(88px, 9vw, 124px); } /* space after more work */
.career-layout { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; } /* heading column and the list */
.career-aside { position: sticky; top: 40px; align-self: start; } /* the heading stays while the list scrolls */
.career-aside h2 { font: 700 clamp(34px, 4.6vw, 64px)/0.95 var(--display); letter-spacing: -0.03em; } /* section title */
.career-aside p { max-width: 300px; margin: 18px 0 24px; color: var(--paper-soft); font-size: 16px; } /* one line under it */
.job { display: grid; grid-template-columns: 168px 1fr; gap: 24px; padding: 26px 0; border-top: 1px solid var(--ink-line); } /* one role: dates, then details */
.job:first-child { border-top: 0; padding-top: 4px; } /* no line above the first role */
.job-dates { padding-top: 4px; color: var(--paper-faint); font: 500 13px var(--mono); letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } /* month and year, start to end, on one line */
.job-freelance .job-dates::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--live); vertical-align: 1px; } /* green dot: the one role that is still going */
.job h3 { font: 600 19px/1.3 var(--body); } /* role and company */
.job h3 span { color: var(--paper-faint); font-weight: 400; white-space: nowrap; } /* the company, quieter; it never splits from its dot */
.job-promoted { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 99px; background: rgb(242 181 68 / 0.16); font: 500 12px var(--mono); vertical-align: 3px; } /* the promotion marker */
.job h3 .job-promoted { color: var(--amber); font-weight: 500; } /* amber, beating the quiet company colour above */
.job-summary { margin: 8px 0 10px; color: var(--paper-soft); font-size: 16px; } /* what the job was */
.job-results { display: grid; gap: 6px; margin-bottom: 14px; font-size: 15.5px; } /* the results */
.job-results li { position: relative; padding-left: 18px; } /* room for the marker */
.job-results li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 2px; background: var(--amber); } /* short amber dash, 2 px so it never renders grey */
.credentials { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); padding-top: clamp(72px, 7vw, 100px); } /* education beside certificates */
.credentials h2 { margin-bottom: 22px; font: 700 clamp(30px, 3.4vw, 46px)/1 var(--display); letter-spacing: -0.025em; } /* column title */
.degree { padding: 20px 0; border-top: 1px solid var(--ink-line); } /* one degree */
.degree h3 { font: 600 19px/1.3 var(--body); } /* degree name */
.degree-meta { margin: 6px 0 8px; color: var(--paper-faint); font: 500 13px var(--mono); letter-spacing: 0.03em; } /* school, years, grade */
.degree-meta span { white-space: nowrap; } /* wraps between parts, never inside one */
.degree p:last-child { color: var(--paper-soft); font-size: 15.5px; } /* final project line */
.certificate { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; align-items: center; padding: 16px 0; border-top: 1px solid var(--ink-line); } /* one certificate */
.certificate h3 { font: 600 16.5px/1.35 var(--body); } /* course name */
.certificate p { grid-column: 1; color: var(--paper-faint); font: 500 12.5px var(--mono); letter-spacing: 0.03em; } /* issuer and date */
.certificate a { grid-row: 1 / span 2; grid-column: 2; padding: 8px 14px; border: 1px solid var(--ink-line); border-radius: 99px; font: 600 14px var(--body); text-decoration: none; transition: border-color 0.2s; } /* Verify link */
.certificate a:hover { border-color: var(--paper-soft); } /* outline brightens */
.job-products { display: grid; margin: 4px 0 16px; border-top: 1px solid var(--ink-line); } /* the freelance products as a ruled list */
.job-products > li { display: grid; grid-template-columns: 128px 1fr; gap: 2px 20px; padding: 12px 0; border-bottom: 1px solid var(--ink-line); } /* product name, then its line and links */
.job-products h4 { font: 600 16px/1.35 var(--body); } /* product name */
.job-products p { color: var(--paper-soft); font-size: 15.5px; } /* one plain line about it */
.job-product-links { grid-column: 2; display: flex; flex-wrap: wrap; gap: 2px 18px; margin-top: 2px; } /* the product's links under its line */
.job-products .job-product-links a { color: var(--paper); font: 600 14.5px var(--body); text-underline-offset: 4px; } /* link text, in the page paper colour */