:root {
  color-scheme: dark;
  --background: #151719;
  --text: #e1e3e4;
  --secondary: #a4a8ae;
  --muted: #858b93;
  --accent: #a3bcb2;
  --line: #ffffff12;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 124px; }
body { margin: 0; background: var(--background); color: var(--text); }
/* Protect the pinned name where there is not enough room for a separate column. */
body::after { content: ''; position: fixed; inset: 0 0 auto; height: 104px; background: linear-gradient(to bottom, var(--background) 0 76px, transparent 104px); opacity: var(--name-dock, 0); pointer-events: none; z-index: 2; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 7px; border-radius: 3px; }
::selection { background: #a3bcb233; color: #fff; }
h1, h2, h3, p { margin: 0; }
.skip-link { position: fixed; top: -100px; left: 24px; padding: 12px 18px; background: #30383a; z-index: 50; }
.skip-link:focus { top: 24px; }
/* A slow, diffuse pool of light supplies the background motion. */
.ambience { position: absolute; inset: 0 0 auto; height: 1100px; overflow: hidden; z-index: -1; pointer-events: none; }
.ambient-light { position: absolute; width: 850px; height: 650px; left: 50%; top: -320px; background: radial-gradient(ellipse, #6d82952a 0%, #5d76841a 28%, transparent 68%); filter: blur(40px); transform: translateX(-38%); animation: ambient-drift 24s ease-in-out infinite alternate; }
@keyframes ambient-drift { to { transform: translateX(-52%) translateY(70px); opacity: .65; } }
.language-switch { position: fixed; top: 36px; right: max(32px, calc((100vw - 1180px) / 2)); display: flex; align-items: center; gap: 9px; z-index: 5; color: #525961; isolation: isolate; }
.language-switch::before { content: ''; position: absolute; inset: -5px -10px; background: var(--background); border-radius: 8px; opacity: var(--name-dock, 0); z-index: -1; pointer-events: none; }
.language-switch button { cursor: pointer; border: 0; background: transparent; padding: 8px 3px; font-size: 13px; font-weight: 500; color: var(--muted); transition: color .2s; }
.language-switch button[aria-pressed="true"], .language-switch button:hover { color: var(--text); }
.language-switch > span { font-size: 12px; }
.intro { position: relative; display: flex; justify-content: center; align-items: center; padding: 140px 32px 100px; }
.identity { width: 100%; text-align: center; }
.name-position { width: max-content; max-width: 100%; margin-inline: auto; }
h1 { position: relative; width: max-content; max-width: 100%; font-size: clamp(72px, 10.6vw, 152px); line-height: 1.14; letter-spacing: -.067em; font-weight: 500; white-space: nowrap; transform-origin: top left; z-index: 3; }
h1.floating { position: fixed; top: 0; left: 0; max-width: none; will-change: transform; pointer-events: none; text-shadow: 0 2px 14px var(--background), 0 0 6px var(--background); }
.name-last { color: #aab7b5; }
.name-first, .name-last { display: inline-block; }
.enter .name-first { animation: name-enter 1.25s cubic-bezier(.16,1,.3,1) both; }
.enter .name-last { animation: name-enter 1.4s .1s cubic-bezier(.16,1,.3,1) both; }
@keyframes name-enter { from { opacity: 0; transform: translateY(36px); filter: blur(9px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.identity-details { margin-top: 28px; will-change: opacity, transform; }
.role { font-size: 21px; color: var(--secondary); font-weight: 400; letter-spacing: -.3px; }
.socials { display: flex; justify-content: center; align-items: center; gap: 23px; margin-top: 28px; }
.social-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 30px; color: #9da5aa; transition: color .25s, transform .25s; }
.social-icon svg { width: 21px; height: 21px; }
.social-icon:hover { color: #e8eeeb; transform: translateY(-3px); }
.email { color: #aeb6b9; font-size: 15px; transition: color .2s; margin-left: 4px; text-underline-offset: 5px; }
.email:hover { color: #dce9e3; text-decoration: underline; }
.scroll-cue { position: absolute; bottom: 27px; left: calc(50% - 20px); width: 40px; height: 40px; display: grid; place-items: center; color: #7b858b; transition: color .2s, transform .2s; }
.scroll-cue svg { width: 23px; height: 23px; }
.scroll-cue:hover { color: var(--text); transform: translateY(4px); }
.content { width: min(760px, calc(100% - 64px)); margin-inline: auto; padding-bottom: 112px; }
.section + .section { margin-top: 100px; }
h2 { font-size: 23px; font-weight: 550; letter-spacing: -.7px; line-height: 1.5; }
.about-copy { margin-top: 28px; }
.about-copy p { color: var(--secondary); font-size: 17px; font-weight: 400; line-height: 1.95; letter-spacing: -.15px; }
.about-copy p + p { margin-top: 24px; }
.about-copy .about-opening { color: #c6cbce; font-size: 19px; line-height: 1.85; }
.experience-list { margin-top: 29px; }
.experience-item { padding-top: 26px; border-top: 1px solid var(--line); }
.experience-item + .experience-item { margin-top: 32px; }
.job-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
h3 { font-size: 18px; font-weight: 550; letter-spacing: -.35px; line-height: 1.5; }
.date { font-size: 13px; color: var(--muted); white-space: nowrap; }
.company { color: #a8bcb5; font-size: 15px; margin-top: 6px; }
.job-description { color: var(--secondary); font-size: 16px; line-height: 1.9; margin-top: 16px; max-width: 650px; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; margin-top: 30px; }
.project { min-width: 0; padding-top: 22px; border-top: 1px solid var(--line); }
.project > p { margin-top: 12px; color: var(--secondary); font-size: 15px; line-height: 1.85; }
.project-link { display: inline-block; margin-top: 15px; padding-block: 5px; color: var(--accent); font-size: 14px; text-underline-offset: 5px; }
.project-link:hover { text-decoration: underline; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (min-width: 1450px) { .content { width: 800px; } }
@media (min-width: 1100px) {
  html { scroll-padding-top: 60px; }
  .content { width: min(760px, calc(100% - 340px)); margin-left: max(280px, calc((100% - 1180px) / 2 + 240px)); margin-right: auto; }
  body::after { display: none; }
}
@media (max-width: 700px) {
  .intro { padding: 120px 24px 88px; }
  h1 { font-size: clamp(49px, 11.7vw, 82px); letter-spacing: -.065em; }
  .role { font-size: 18px; }
  .identity-details { margin-top: 23px; }
  .socials { margin-top: 25px; gap: 20px; }
  .social-icon svg { width: 20px; height: 20px; }
  .email { font-size: 13px; margin-left: 0; }
  .language-switch { top: 22px; right: 23px; }
  .language-switch button { font-size: 12px; }
  .content { width: calc(100% - 48px); padding-bottom: 72px; }
  .section + .section { margin-top: 72px; }
  h2 { font-size: 21px; }
  .about-copy { margin-top: 23px; }
  .about-copy p { font-size: 16px; line-height: 1.9; }
  .about-copy .about-opening { font-size: 17px; line-height: 1.9; }
  .job-heading { gap: 12px; }
  h3 { font-size: 17px; }
  .date { font-size: 11px; }
  .company { font-size: 14px; }
  .job-description { font-size: 15px; }
  .project-grid { gap: 28px; grid-template-columns: 1fr; }
  .scroll-cue { bottom: 22px; }
}
@media (max-width: 370px) {
  h1 { font-size: 45px; }
  .socials { gap: 16px; }
  .email { font-size: 12px; }
  .job-heading { flex-wrap: wrap; gap: 6px; }
}
html.motion-reduced { scroll-behavior: auto; }
.motion-reduced *, .motion-reduced *::before, .motion-reduced *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-enabled) { scroll-behavior: auto; }
  html:not(.motion-enabled) *, html:not(.motion-enabled) *::before, html:not(.motion-enabled) *::after { animation: none !important; transition: none !important; }
}