:root {
  color-scheme: light;
  --white: #fff;
  --ink: #171717;
  --muted: #6d6d6d;
  --line: #e8e8e8;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; background: var(--white); }
body { margin: 0; color: var(--ink); }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
::selection { color: var(--white); background: var(--ink); }

.skip-link {
  position: fixed;
  z-index: 10;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  transform: translateY(-150%);
  border: 1px solid var(--ink);
  background: var(--white);
}
.skip-link:focus { transform: translateY(0); }
.page-shell { width: min(100% - 64px, 1080px); margin: 0 auto; }

.site-header {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
  border-bottom: 1px solid var(--line);
}
.primary-nav { display: flex; align-items: center; gap: 28px; color: #4f4f4f; font-size: 12px; }
.primary-nav a, .github-icon { transition: color .15s ease; }
.primary-nav a:hover, .github-icon:hover { color: #888; }
.language-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
  letter-spacing: .08em;
}
.language-toggle [data-language] { transition: color .15s ease; }
.language-toggle [data-language].is-active { color: var(--ink); font-weight: 700; }

.profile-hero {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 72px);
  padding: 52px 0;
}
.portrait { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 16px; object-fit: cover; object-position: center; }
.profile-copy { min-width: 0; max-width: 620px; }
.eyebrow { margin: 0 0 22px; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
.profile-title-row { display: flex; min-width: 0; align-items: center; gap: 15px; margin-bottom: 14px; }
.profile-copy h1 {
  min-width: 0;
  margin: 0;
  font-size: clamp(48px, 6.2vw, 72px);
  font-weight: 550;
  letter-spacing: -.065em;
  line-height: 1;
  text-wrap: balance;
}
.typing-stack { display: grid; width: max-content; max-width: 100%; }
.typing-measure, .typing-output { grid-area: 1 / 1; }
.typing-measure { visibility: hidden; }
.typing-output { min-width: 0; }
.typing-caret {
  display: inline-block;
  width: .055em;
  height: .78em;
  margin-left: .08em;
  transform: translateY(.04em);
  background: currentColor;
  opacity: 0;
}
.typing-caret.is-typing { opacity: 1; animation: caret-blink .9s steps(1, end) infinite; }
.github-icon {
  display: inline-flex;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  transition: color .15s ease, opacity .28s ease;
}
.github-icon svg { display: block; width: 40px; height: 40px; }
body.is-ready .profile-title-row:not(.is-typed) .github-icon { visibility: hidden; opacity: 0; }
body.is-ready .profile-title-row.is-typed .github-icon { visibility: visible; opacity: 1; }
.profile-role {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #4d4d4d;
  font-size: 15px;
  line-height: 1.5;
}

.timeline-section { margin-top: 36px; text-align: left; }
.timeline-section .section-heading {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
}
.timeline-section .section-heading .eyebrow { margin: 0; }
.timeline-section .section-heading h2 { margin: 0; font-size: 21px; font-weight: 550; letter-spacing: -.04em; }
.timeline { position: relative; --active-progress: 1; }
.timeline-events { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline-track {
  position: absolute;
  z-index: 0;
  top: var(--track-start, 11px);
  left: 6px;
  width: 1px;
  height: var(--track-length, 0px);
  background: var(--line);
}
.timeline-track-fill {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleY(0);
  transform-origin: center top;
  background: var(--ink);
  transition: transform .42s ease;
}
.timeline.is-drawn .timeline-track-fill { animation: none; transform: scaleY(1); }
.timeline[data-interacting="true"] .timeline-track-fill { animation: none; transform: scaleY(var(--active-progress, 1)); }
.timeline-event {
  position: relative;
  display: grid;
  min-height: 72px;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: 10px;
  padding-left: 25px;
  cursor: default;
  outline: none;
}
.timeline-node {
  position: absolute;
  z-index: 1;
  top: 5px;
  left: 0;
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid #aaa;
  border-radius: 50%;
  background: var(--white);
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.timeline-node::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #777;
  content: "";
  transition: background-color .2s ease;
}
.timeline-year {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  display: block;
  margin: 5px 0 0;
  line-height: 12px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s ease;
}
.timeline-link {
  position: relative;
  top: calc(11px - .725em);
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 7px;
  color: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: transform .2s ease;
}
.timeline-title {
  display: inline-block;
  margin: 0;
  color: #4d4d4d;
  font-size: 13px;
  line-height: 1.45;
  transition: color .2s ease;
}
.timeline-link-indicator {
  display: inline-block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  transition: color .2s ease;
}
.timeline-meta {
  grid-column: 2;
  grid-row: 2;
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  transition: color .2s ease;
}
.timeline-event:hover .timeline-node, .timeline-event:focus-within .timeline-node, .timeline-event.is-active .timeline-node {
  transform: scale(1.2);
  border-color: var(--ink);
  background: var(--ink);
  box-shadow: 0 0 0 3px #17171712;
}
.timeline-event:hover .timeline-node, .timeline-event:focus-within .timeline-node, .timeline-event.is-active .timeline-node { outline: 2px solid var(--ink); outline-offset: 3px; }
.timeline-event:hover .timeline-node::after, .timeline-event:focus-within .timeline-node::after, .timeline-event.is-active .timeline-node::after { background: var(--white); }
.timeline-event:hover .timeline-year, .timeline-event:focus-within .timeline-year, .timeline-event.is-active .timeline-year { color: var(--ink); }
.timeline-event:hover .timeline-link, .timeline-event:focus-within .timeline-link, .timeline-event.is-active .timeline-link { transform: translateX(3px); }
.timeline-event:hover .timeline-title, .timeline-event:focus-within .timeline-title, .timeline-event.is-active .timeline-title { color: var(--ink); }
.timeline-event:hover .timeline-meta, .timeline-event:focus-within .timeline-meta, .timeline-event.is-active .timeline-meta { color: #4d4d4d; }
.timeline-event:hover .timeline-link-indicator, .timeline-event:focus-within .timeline-link-indicator, .timeline-event.is-active .timeline-link-indicator { color: var(--ink); }
.timeline-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.timeline-section { transition: opacity .68s cubic-bezier(.2,.7,.25,1), transform .68s cubic-bezier(.2,.7,.25,1); }
.profile-hero.about-transition-active .timeline-section:not(:focus-within) { opacity: 0; transform: translateY(-12px); pointer-events: none; }

.about-section {
  display: grid;
  max-width: 840px;
  min-height: clamp(320px, 46vh, 420px);
  grid-template-columns: 180px minmax(0, 1fr);
  align-content: center;
  padding: 56px 0;
  border-top: 1px solid var(--line);
  transition: opacity .78s cubic-bezier(.2,.7,.25,1), transform .78s cubic-bezier(.2,.7,.25,1);
}
.about-section.is-pending { opacity: 0; transform: translateY(20px); }
.about-section.is-visible { opacity: 1; transform: none; }
.about-copy { grid-column: 2; }
.about-copy h2 { margin: 0; font-size: 21px; font-weight: 550; letter-spacing: -.04em; }
.about-slogan { margin: 16px 0 0; color: var(--muted); font-size: clamp(16px, 1.8vw, 20px); font-style: italic; letter-spacing: -.015em; line-height: 1.45; }

.contact-section {
  display: grid;
  max-width: 840px;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 20px;
  padding: 24px 0 48px;
  border-top: 1px solid var(--line);
}
.section-heading { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: baseline; gap: 20px; margin-bottom: 24px; }
.section-heading .eyebrow { margin: 0; }
.section-heading h2 { margin: 0; font-size: 25px; font-weight: 550; letter-spacing: -.04em; }
.contact-section .section-heading { display: contents; }
.contact-section .section-heading .eyebrow { grid-column: 1; }
.contact-section .section-heading h2 { grid-column: 2; }
.contact-email { grid-column: 2; width: fit-content; padding-bottom: 5px; border-bottom: 1px solid #bdbdbd; font-size: 14px; }
.contact-email span { margin-left: 8px; color: var(--muted); }
.site-footer { display: flex; justify-content: flex-end; padding: 19px 0 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }

body.is-ready .profile-title-row { animation: rise-in .72s .2s cubic-bezier(.2,.7,.25,1) both; }
body.is-ready .profile-role { animation: rise-in .72s .36s cubic-bezier(.2,.7,.25,1) both; }
body.is-ready .timeline-content { animation: rise-in .72s .48s cubic-bezier(.2,.7,.25,1) both; }
body.is-ready .timeline-track-fill { animation: timeline-draw 2.5s 1.05s cubic-bezier(.18,.62,.32,1) both; }
body.is-ready .portrait { animation: portrait-focus 1.1s .12s cubic-bezier(.2,.7,.25,1) both; }

@keyframes rise-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes timeline-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes portrait-focus { from { filter: blur(8px); opacity: .82; transform: scale(1.015); } to { filter: blur(0); opacity: 1; transform: scale(1); } }
@keyframes caret-blink { 50% { opacity: 0; } }

@media (min-width: 761px) and (max-width: 960px) {
  .profile-hero { grid-template-columns: 230px minmax(0, 1fr); gap: clamp(32px, 5vw, 48px); padding: 48px 0; }
  .profile-copy h1 { font-size: clamp(42px, 5.4vw, 60px); }
}

@media (max-width: 760px) {
  .page-shell { width: min(100% - 44px, 580px); }
  .site-header { min-height: 68px; gap: 18px; }
  .primary-nav { gap: 17px; }
  .profile-hero { grid-template-columns: 1fr; gap: 36px; padding: 48px 0; }
  .portrait { width: min(220px, 68vw); justify-self: center; }
  .profile-copy { max-width: none; text-align: center; }
  .profile-title-row { justify-content: center; }
  .profile-copy h1 { font-size: clamp(38px, 10vw, 54px); }
  .profile-role { justify-content: center; }
  .timeline-section { margin-top: 32px; }
  .about-section { min-height: 300px; grid-template-columns: 1fr; padding: 46px 0; }
  .about-copy { grid-column: 1; }
  .contact-section { grid-template-columns: 130px minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .page-shell { width: calc(100% - 36px); }
  .site-header { gap: 13px; }
  .primary-nav { gap: 12px; font-size: 11px; }
  .language-toggle { gap: 5px; font-size: 9px; }
  .profile-hero { padding: 44px 0; }
  .profile-role { font-size: 14px; gap: 8px; }
  .about-section { min-height: 260px; padding: 40px 0; }
  .about-copy h2 { font-size: 20px; }
  .about-slogan { font-size: 16px; }
  .timeline-section .section-heading { gap: 12px; }
  .timeline-section .section-heading h2 { font-size: 20px; }
  .timeline-event { min-height: 76px; grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px; }
  .timeline-link { font-size: 12px; }
  .timeline-title { font-size: 12px; }
  .timeline-meta { font-size: 10px; }
  .contact-section { grid-template-columns: 1fr; gap: 12px; padding-bottom: 40px; }
  .contact-section .section-heading .eyebrow, .contact-section .section-heading h2 { grid-column: 1; }
  .contact-email { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .about-section, .timeline-section { transition: none !important; opacity: 1 !important; transform: none !important; }
  .timeline-section { pointer-events: auto !important; }
  body.is-ready .portrait, body.is-ready .profile-title-row, body.is-ready .profile-role,
  body.is-ready .timeline-content, body.is-ready .timeline-section, body.is-ready .timeline-track-fill { animation: none !important; opacity: 1; transform: none; }
  body.is-ready .portrait { filter: none; }
}