html { scroll-snap-type: none; background: #101110; }
body.profile-page { background: #101110; color: #eceae3; --profile-accent: #c1cdad; }
.profile-container { width: min(1240px, 86%); margin-inline: auto; }
.profile-page a:focus-visible { outline: 2px solid var(--profile-accent); outline-offset: 7px; }
.profile-skip { position: absolute; top: 12px; left: 12px; z-index: 20; padding: 12px 18px; transform: translateY(-180%); background: #eceae3; color: #101110; }
.profile-skip:focus { transform: translateY(0); }
.profile-header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid #2d302b; }
.profile-home { font-size: 13px; font-weight: 600; letter-spacing: .1em; }
.profile-home > span { color: var(--profile-accent); }
.profile-nav { display: flex; align-items: center; gap: 36px; }
.profile-nav .profile-manage { padding: 9px 14px; border: 1px solid #617450; border-radius: 5px; color: #d7e8c6; font-size: 12px; letter-spacing: 0; }
.profile-nav [hidden] { display: none; }
.profile-nav a { padding-block: 12px; color: #93968f; font-size: 10px; font-weight: 500; letter-spacing: .12em; transition: color 180ms ease; }
.profile-nav a:hover, .profile-nav a[aria-current="page"] { color: #eceae3; }
.profile-nav a[aria-current="page"] { position: relative; }
.profile-nav a[aria-current="page"]::after { content: ''; position: absolute; right: 0; bottom: 3px; left: 0; height: 1px; background: var(--profile-accent); }
.profile-intro { padding: clamp(54px, 6vw, 88px) 0 54px; }
.profile-eyebrow { margin: 0; color: #a0a59a; font-size: 10px; letter-spacing: .18em; font-weight: 400; }
.profile-index { color: #70766b; margin-right: 20px; }
.profile-intro h1 { margin: 24px 0 28px; font-family: var(--serif); font-size: clamp(64px, 9.5vw, 140px); font-weight: 400; line-height: .98; letter-spacing: -.035em; }
.profile-intro__bottom { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 20px 36px; }
.profile-software { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin: 0; padding: 0; list-style: none; }
.profile-software li { display: flex; align-items: center; }
.profile-software img { display: block; width: 40px; height: 40px; object-fit: contain; }
.profile-software__unreal { filter: brightness(0) invert(1); }
.profile-specialty { margin: 0; font-size: clamp(19px, 2vw, 27px); font-weight: 400; letter-spacing: -.035em; line-height: 1.5; }
.profile-specialty > span { color: #858d7b; }
.profile-summary { margin: 0; color: #b0b3aa; font-size: 13px; line-height: 1.9; word-break: keep-all; }
.profile-experience { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: 52px 64px; border-top: 1px solid #44483f; scroll-margin-top: 32px; }
.career-list { grid-column: 1; list-style: none; padding: 0 0 0 30px; margin: 0; border-left: 1px solid #363b31; }
.career-entry { position: relative; padding-top: 34px; }
.career-entry:first-child { padding-top: 0; }
.career-entry:not(:last-child) { padding-bottom: 34px; border-bottom: 1px solid #2d302b; }
.career-entry::before { content: ''; position: absolute; top: 48px; left: -35px; width: 9px; height: 9px; border: 1px solid #747d69; border-radius: 50%; background: #101110; }
.career-entry:first-child::before { top: 14px; }
.career-entry--current::before { border-color: var(--profile-accent); background: var(--profile-accent); box-shadow: 0 0 0 5px #1c2018; }
.career-entry__top { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.career-entry h2 { margin: 0; font-size: clamp(26px, 2.4vw, 34px); font-weight: 500; line-height: 1.25; letter-spacing: -.04em; }
.career-entry h2 > span { font-weight: 400; }
.career-location { display: inline-block; margin-left: 12px; color: #a0a69a; font-size: 12px; letter-spacing: 0; vertical-align: middle; white-space: nowrap; }
.career-current { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #46503b; border-radius: 999px; padding: 6px 10px; color: var(--profile-accent); font-size: 10px; white-space: nowrap; }
.career-current > span { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.career-team { margin: 9px 0 0; color: #c4c6bd; font-size: 14px; line-height: 1.5; }
.career-date { display: flex; flex-wrap: wrap; gap: 10px; margin: 15px 0 20px; color: #949b8d; font-size: 11px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.career-date > span[aria-hidden] { color: #616b57; }
.career-role { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; color: #dedfd8; font-size: 14px; line-height: 1.6; }
.career-role > span { color: #a0a69a; font-size: 12px; align-self: center; }
.career-projects { display: grid; gap: 10px; margin: 13px 0 0; padding: 0; list-style: none; }
.career-projects li { position: relative; padding-left: 15px; color: #b4b9ad; font-size: 13px; line-height: 1.7; word-break: keep-all; }
.career-projects li::before { content: ''; position: absolute; top: .78em; left: 0; width: 5px; height: 1px; background: #a4b393; }
.career-gallery { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; margin: 28px 0 8px; }
.career-poster { position: relative; z-index: 0; flex: 0 1 108.8px; min-width: 0; max-width: 100%; margin: 0; background: #080908; transform-origin: center; transition: transform 300ms ease, box-shadow 300ms ease; }
/* Match the existing 643 × 847 poster height while preserving the landscape artwork. */
.career-poster--landscape { flex-basis: calc(108.8px * 847 / 643 * 910 / 512); }
.career-poster--work { flex-basis: calc(108.8px * 847 / 643 * var(--poster-ratio)); }
.career-poster img { display: block; width: 100%; height: auto; }
.career-poster__caption { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 8px; background: rgba(3, 10, 10, .76); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.45; text-align: center; word-break: keep-all; overflow-wrap: anywhere; opacity: 0; pointer-events: none; transition: opacity 240ms ease; }
.career-poster:focus-visible .career-poster__caption { opacity: 1; }
/* Keep video thumbnails aligned without cropping their titles or logos. */
.career-gallery--video { display: grid; grid-template-columns: repeat(auto-fill, min(100%, 256px)); }
.career-gallery--video .career-poster { width: 100%; }
.career-gallery--video .career-poster img { aspect-ratio: 16 / 9; object-fit: contain; }
.career-gallery--video .career-poster__caption { padding: 18px; font-size: 15px; }
.career-poster:focus-visible { z-index: 1; outline: 2px solid var(--profile-accent); outline-offset: 5px; transform: translateY(-3px) scale(1.06); box-shadow: 0 16px 36px rgba(0,0,0,.4); }
@media (hover: hover) and (pointer: fine) {
  .career-poster:hover { z-index: 1; transform: translateY(-3px) scale(1.06); box-shadow: 0 16px 36px rgba(0,0,0,.4); }
  .career-poster:hover .career-poster__caption { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .career-poster, .career-poster__caption { transition: none; }
  .career-poster:hover, .career-poster:focus-visible { transform: none; }
}
.profile-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #2d302b; padding-block: 28px 36px; font-size: 9px; letter-spacing: .12em; color: #949b8d; }
.profile-footer__separator { padding-inline: 10px; color: #4e5746; }
.profile-footer a { color: #dce3d2; display: inline-flex; align-items: center; gap: 12px; padding-block: 8px; }
.profile-footer a > span { font-size: 18px; }
@media (max-width: 800px) {
  .profile-container { width: 88%; }
  .profile-intro { padding-top: 56px; }
  .profile-intro h1 { font-size: clamp(50px, 10.5vw, 88px); }
  .profile-intro__bottom { gap: 20px 28px; }
  .profile-experience { grid-template-columns: 1fr; gap: 36px; padding-block: 36px 48px; }
  .career-list { grid-column: 1; }
}
@media (max-width: 480px) {
  .profile-header { min-height: 74px; gap: 14px; }
  .profile-home { font-size: 11px; }
  .profile-nav { gap: 16px; }
  .profile-nav a { font-size: 8px; letter-spacing: .06em; }
  .profile-intro { padding-block: 48px 38px; }
  .profile-intro h1 { font-size: clamp(40px, 10.5vw, 52px); margin-block: 26px 22px; }
  .profile-specialty { font-size: 21px; }
  .profile-software { gap: 20px; }
  .profile-software img { width: 32px; height: 32px; }
  .profile-summary { font-size: 12px; }
  .career-list { padding-left: 23px; }
  .career-entry::before { left: -28px; }
  .career-entry h2 { font-size: 26px; }
  .career-current { padding: 5px 7px; font-size: 9px; }
  .career-entry__top { flex-wrap: wrap; gap: 12px; }
  .career-team { font-size: 12px; }
  .career-role { font-size: 13px; }
  .career-projects li { font-size: 12px; }
  .profile-footer { font-size: 8px; letter-spacing: .06em; }
}