/* Isolated résumé styles: screen and PDF share the same editable content. */
.resume-page { max-width: 1200px; margin: 0 auto; padding: 140px 32px 70px; color: #141821; }
.resume-sheet { padding: 48px 52px; background: #fff; border: 1px solid #edeef0; border-radius: 4px; box-shadow: 0 15px 65px rgb(38 31 58 / 4%); }
.resume-intro { display: grid; grid-template-columns: 1fr 235px; align-items: center; gap: 20px; min-height: 205px; }
.resume-identity h1 { margin: 0 0 5px; font-size: clamp(40px, 5vw, 66px); letter-spacing: -.035em; line-height: 1.05; font-weight: 750; }
.resume-identity h1 > span:first-child { color: var(--orange); }
.resume-identity h1 .resume-period { color: #5d874a; }
.resume-role { margin: 12px 0 13px; color: #595781; font-weight: 600; font-size: 25px; letter-spacing: -.025em; }
.resume-summary { margin: 0; max-width: 530px; font-size: 17px; line-height: 1.55; color: #646b7e; }
.resume-summary em { font-style: normal; text-decoration: underline; text-decoration-color: #b9a6ef; text-underline-offset: 5px; }
.resume-portrait { position: relative; height: 205px; }
.resume-portrait img { position: absolute; width: 174px; height: 174px; object-fit: contain; left: 4px; bottom: 0; }
.resume-orbit { position: absolute; width: 160px; height: 160px; border: 1px solid #f1edf8; border-radius: 50%; left: 10px; top: 15px; background: radial-gradient(circle, #f5f0fe 0, transparent 70%); }
.resume-orbit::before { content: ''; position: absolute; inset: 16px; border: 1px solid #f1edf8; border-radius: 50%; }
.resume-orbit-dot { position: absolute; left: 9px; top: 48px; width: 7px; height: 7px; background: #8d6bd1; border-radius: 50%; box-shadow: 147px 76px 0 -1px #8d6bd1; }
.resume-scribble { position: absolute; right: -7px; top: 6px; color: #7959ad; font-family: 'Bradley Hand', 'Segoe Print', 'Comic Sans MS', cursive; font-size: 12px; line-height: 1.5; transform: rotate(-9deg); }
.resume-contact { display: flex; flex-wrap: wrap; column-gap: 32px; row-gap: 12px; padding: 22px 0 28px; margin-bottom: 8px; font-size: 13px; color: #626b80; }
.resume-contact > * { display: inline-flex; align-items: center; gap: 8px; }
.resume-contact a:hover { color: var(--orange); }
.resume-contact svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.resume-columns { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 32px; }
.resume-sheet h2 { font-size: 20px; letter-spacing: -.025em; line-height: 1.2; font-weight: 650; margin: 0 0 22px; }
.resume-experience > h2 { padding-top: 20px; border-top: 1px solid #ececf1; }
.resume-career { border-left: 1px solid transparent; margin-left: 4px; padding-left: 22px; }
.resume-job { position: relative; --job-gap: 26px; --dot-left: -27px; --dot-size: 9px; margin-bottom: var(--job-gap); --job-color: #ef6437; break-inside: avoid; }
.resume-job:last-child { margin-bottom: 0; }
.resume-job::before { content: ''; position: absolute; z-index: 1; left: var(--dot-left); top: 10px; width: var(--dot-size); height: var(--dot-size); border-radius: 50%; background: var(--job-color); box-shadow: 0 0 0 4px #fff; }
/* Join dot centres only; no line above the first or after the last dot. */
.resume-job:not(:last-child)::after { content: ''; position: absolute; left: calc(var(--dot-left) + var(--dot-size) / 2 - .5px); top: calc(10px + var(--dot-size) / 2); width: 1px; height: calc(100% + var(--job-gap)); background: #e6e2f0; }
.resume-job--licious { --job-color: #c50044; }
.resume-job--games { --job-color: #ff5a0f; }
.resume-job--moneytap { --job-color: #f48131; }
.resume-job--mpl { --job-color: #ff002a; }
.resume-job--mech { --job-color: #2e205d; }
.resume-company { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.resume-company img { width: 30px; height: 30px; object-fit: contain; }
.resume-job--licious .resume-company img { transform: scale(1.4); }
.resume-job--games .resume-company img { transform: scale(.95); }
.resume-job--moneytap .resume-company img { transform: scale(1.48); }
.resume-job--mpl .resume-company img { transform: scale(1.42); }
.resume-job--mech .resume-company img { transform: scale(1); }
.resume-company h3 { font-size: 19px; font-weight: 650; letter-spacing: -.025em; margin: 0; }
.resume-job-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.resume-job-heading p { margin: 0; font-size: 13px; line-height: 1.45; font-weight: 600; }
.resume-job-heading time { color: #72798b; font-size: 11px; white-space: nowrap; }
.resume-job ul { margin: 10px 0 0; padding-left: 15px; font-size: 12.5px; line-height: 1.55; color: #626b80; }
.resume-job li { padding-left: 2px; margin: 5px 0 0; }
.resume-job li::marker { color: #8c79b4; font-size: .8em; }
.resume-aside { border-left: 1px solid #ececf1; padding-left: 26px; min-width: 0; display: flex; flex-direction: column; justify-content: center; text-align: left; }
.resume-aside > section { flex: 0 0 auto; }
.resume-aside .resume-tags { justify-content: flex-start; }
.resume-portfolio a { font-size: 15px; color: #626b80; text-decoration: underline; text-decoration-color: #b9a6ef; text-underline-offset: 4px; }
.resume-portfolio a:hover { color: var(--orange); }
@media print { .resume-portfolio a { font-size: 10px; } }
.resume-aside > section + section { margin-top: 27px; padding-top: 20px; border-top: 1px solid #ececf1; }
.resume-aside h2 { font-size: 18px; margin-bottom: 17px; }
.resume-stat { display: flex; align-items: flex-start; gap: 13px; margin: 0 0 23px; }
.resume-stat:last-child { margin-bottom: 0; }
.resume-stat svg { flex: 0 0 23px; width: 23px; height: 23px; margin-top: 3px; fill: none; stroke: #8661d2; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.resume-stat strong { font-size: 18px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.resume-stat p, .resume-stat small { margin: 5px 0 0; display: block; font-size: 12px; line-height: 1.35; color: #626b80; }
.resume-stat small { font-size: 10.5px; color: #8990a0; }
.resume-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.resume-tags li { font-size: 11px; line-height: 1.5; padding: 4px 7px; color: #666c81; background: #f6f5f9; border-radius: 4px; }
.resume-education p, .resume-recognition p { font-size: 12px; line-height: 1.7; margin: 0 0 10px; color: #72798b; }
.resume-education strong, .resume-recognition strong { color: #353a4b; font-weight: 500; }
.resume-download { text-align: center; padding: 34px 0 0; }
.resume-download-link { display: inline-flex; align-items: center; gap: 20px; padding: 16px 25px; border-radius: 999px; background: #121722; color: #fff; font-size: 16px; font-weight: 600; transition: transform .2s, background .2s; }
.resume-download-link svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.resume-download-link:hover { background: #303747; transform: translateY(-2px); }
.resume-download-link:active { transform: translateY(0); }
.resume-download p { margin: 11px 0 0; font-size: 12px; color: #7c8390; }
@media (max-width: 900px) {
  .resume-page { padding: 115px 24px 40px; }.resume-sheet { padding: 30px; }
  .resume-intro { grid-template-columns: 1fr 150px; gap: 12px; }
  .resume-portrait img { width: 145px; height: 145px; }.resume-scribble { right: 0; }
  .resume-orbit { width: 130px; height: 130px; top: 45px; }.resume-orbit-dot { top: 80px; box-shadow: 123px 60px 0 -1px #8d6bd1; }
  .resume-columns { gap: 22px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }.resume-aside { padding-left: 20px; }
}
@media (max-width: 620px) {
  .resume-page { padding: 140px 20px 35px; }.resume-sheet { padding: 0; border: 0; box-shadow: none; background: transparent; }
  .resume-intro { display: block; position: relative; min-height: 0; }.resume-identity { padding-top: 5px; }
  .resume-identity h1 { font-size: 44px; max-width: 210px; line-height: 1.05; }
  .resume-role { font-size: 19px; margin-top: 20px; }.resume-summary { font-size: 15px; max-width: 300px; }
  .resume-portrait { position: absolute; right: 0; top: 16px; width: 105px; height: 105px; }
  .resume-portrait img { width: 104px; height: 104px; left: 0; }.resume-orbit { width: 94px; height: 94px; top: 4px; left: 3px; }
  .resume-orbit-dot, .resume-scribble { display: none; }
  .resume-contact { padding: 23px 0 30px; gap: 13px; font-size: 13px; flex-direction: column; }
  .resume-columns { display: block; }.resume-sheet h2 { font-size: 23px; }
  .resume-company h3 { font-size: 20px; }.resume-job-heading { display: block; }
  .resume-job-heading p { font-size: 14px; }.resume-job-heading time { display: block; margin-top: 5px; font-size: 12px; }
  .resume-job ul { font-size: 14px; line-height: 1.65; }.resume-job { --job-gap: 30px; }
  .resume-aside { border-left: 0; padding: 32px 0 0; margin-top: 30px; border-top: 1px solid #ececf1; }
  .resume-stat strong { font-size: 21px; }.resume-stat p { font-size: 14px; }.resume-stat small { font-size: 12px; }
  .resume-tags li { font-size: 13px; padding: 6px 9px; }.resume-education p, .resume-recognition p { font-size: 14px; }
  .resume-download { padding-top: 32px; }.resume-download-link { min-height: 52px; }
}
@media (max-width: 350px) { .resume-identity h1 { font-size: 38px; max-width: 165px; }.resume-portrait { top: 14px; width: 90px; }.resume-portrait img { width: 90px; height: 90px; } }
@media (prefers-reduced-motion: reduce) { .resume-download-link { transition: none; } }
/* Readable screen typography without changing the established title scale. */
@media screen {
  .resume-contact { font-size: 15px; }
  .resume-job-heading p { font-size: 16px; }
  .resume-job-heading time { font-size: 14px; }
  .resume-job ul { font-size: 16px; line-height: 1.6; }
  .resume-stat p { font-size: 15px; line-height: 1.5; }
  .resume-stat small { font-size: 13px; }
  .resume-tags li { font-size: 14px; }
  .resume-education p, .resume-recognition p { font-size: 15px; }
}
@page { size: A4; margin: 10mm; }
@media print {
  html, body { margin: 0; padding: 0; background: #fff; min-width: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .site-header, .portfolio-footer, .skip-link, .resume-download, .hello-dialog, .hello-backdrop { display: none !important; }
  .resume-page { padding: 0; max-width: none; margin: 0; }
  .resume-sheet { padding: 0; border: 0; box-shadow: none; }
  .resume-intro { display: grid; grid-template-columns: 1fr 160px; min-height: 133px; gap: 12px; }
  .resume-identity { padding: 0; }.resume-identity h1 { font-size: 49px; max-width: none; }
  .resume-role { font-size: 20px; margin: 7px 0 10px; }.resume-summary { font-size: 12px; max-width: 425px; }
  .resume-portrait { position: relative; inset: auto; width: auto; height: 135px; }.resume-portrait img { width: 127px; height: 127px; left: 0; }
  .resume-orbit { width: 120px; height: 120px; top: 0; left: 0; }.resume-scribble { display: block; right: -2px; top: 0; font-size: 9px; }
  .resume-orbit-dot { display: block; top: 32px; width: 5px; height: 5px; left: 0; box-shadow: 117px 56px 0 -1px #8d6bd1; }
  .resume-contact { flex-direction: row; gap: 23px; font-size: 10px; padding: 15px 0 22px; margin: 0; }.resume-contact svg { width: 12px; height: 12px; flex-basis: 12px; }
  .resume-columns { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 23px; }
  .resume-sheet h2 { font-size: 16px; margin-bottom: 15px; }.resume-experience > h2 { padding-top: 15px; }
  .resume-career { padding-left: 16px; }.resume-job { --job-gap: 20px; --dot-left: -20px; --dot-size: 7px; }
  .resume-company { gap: 7px; margin-bottom: 5px; }.resume-company img { width: 24px; height: 24px; }.resume-company h3 { font-size: 15px; }
  .resume-job-heading { display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; }
  .resume-job-heading p { font-size: 11px; white-space: nowrap; }
  .resume-job-heading time { display: block; flex: none; margin-top: 0; font-size: 10px; text-align: right; }
  .resume-job ul { font-size: 10.5px; line-height: 1.5; margin-top: 6px; padding-left: 12px; }.resume-job li { margin-top: 4px; }
  .resume-aside { padding: 0 0 0 20px; margin: 0; border-top: 0; border-left: 1px solid #ececf1; }
  .resume-aside > section + section { margin-top: 20px; padding-top: 15px; }.resume-aside h2 { font-size: 15px; margin-bottom: 15px; }
  .resume-stat { gap: 9px; margin-bottom: 20px; }.resume-stat svg { flex-basis: 18px; width: 18px; height: 18px; }.resume-stat strong { font-size: 14px; }
  .resume-stat p { font-size: 10px; margin-top: 4px; }.resume-stat small { font-size: 9.5px; }
  .resume-tags { gap: 4px; }.resume-tags li { font-size: 9px; padding: 3px 5px; }
  .resume-education p, .resume-recognition p { font-size: 10px; line-height: 1.6; margin-bottom: 8px; }
}

/* Non-destructive head-and-shoulders crop of the supplied portrait. */
.resume-photo { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 174px; height: 174px; overflow: hidden; border-radius: 20px; background: #e6edf0; }
.resume-photo img { position: absolute; width: 400%; max-width: none; height: auto; left: -225%; top: -195%; bottom: auto; object-fit: initial; }
@media screen and (max-width: 900px) { .resume-photo { width: 145px; height: 145px; border-radius: 16px; } }
@media screen and (max-width: 620px) {
  .resume-portrait { top: 0; width: 90px; height: 90px; }
  .resume-photo { width: 90px; height: 90px; border-radius: 12px; }
}
@media screen and (max-width: 350px) { .resume-photo { width: 90px; height: 90px; } }
@media print { .resume-photo { width: 127px; height: 127px; border-radius: 14px; } }

/* One spacing rhythm for every section; print uses a proportional A4 scale. */
.resume-sheet { --resume-section-gap: 32px; --resume-heading-gap: 16px; }
.resume-job { --job-gap: var(--resume-section-gap); }
.resume-sheet h2 { margin-bottom: var(--resume-heading-gap); }
.resume-aside > section + section {
  margin-top: calc(var(--resume-section-gap) / 2);
  padding-top: calc(var(--resume-section-gap) / 2);
}
.resume-aside > section > :last-child { margin-bottom: 0; }
@media print {
  .resume-sheet { --resume-section-gap: 24px; --resume-heading-gap: 12px; }
}