@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --paper: #FAFAF7;
  --panel: #EFF0EB;
  --ink: #17231E;
  --ink-soft: #55625B;
  --ink-faint: #6E7A73;
  --rule: #D6DAD2;
  --mark: #1D3FCB;
  --step--1: clamp(0.8125rem, 0.7946rem + 0.0893vw, 0.875rem);
  --step-0: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.1786rem + 0.3571vw, 1.5rem);
  --step-2: clamp(1.625rem, 1.5179rem + 0.5357vw, 2rem);
  --step-3: clamp(2.75rem, 1.7rem + 4.5vw, 5.5rem);
  --s1: 0.5rem;
  --s2: 0.75rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2.5rem;
  --s6: 4rem;
  --s7: 6.5rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--paper);
}

body,
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
}

img,
svg {
  max-width: 100%;
}

body {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: break-word;
}

a {
  color: var(--mark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--mark);
  outline-offset: 3px;
  text-decoration-thickness: 2px;
}

h1,
h2,
h3,
.rail,
.facets dt,
.chips,
.places {
  font-family: 'Archivo', system-ui, sans-serif;
  font-stretch: 100%;
}

h2 {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.2;
}

h3 {
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.25;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.toc {
  display: none;
}

.frames {
  min-width: 0;
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s2);
}

.rail {
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.005em;
}

.rail > * + * {
  margin-top: var(--s1);
}

.rail a:has(.icon) {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
}

.claim {
  min-width: 0;
}

.claim p {
  max-width: 66ch;
}

.frame {
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  align-content: center;
  padding-block: var(--s6);
  padding-inline: clamp(1.25rem, 4vw, 3.5rem);
}

.frame > .inner {
  width: 100%;
  max-width: 60rem;
  margin-inline: auto;
}

.frame h2 {
  margin-bottom: var(--s5);
}

.name {
  font-size: var(--step-3);
  font-stretch: 112%;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 0.96;
}

.mark-rule {
  height: 1px;
  margin-top: var(--s4);
  background: var(--mark);
  transform-origin: left center;
  animation: draw 900ms cubic-bezier(.2, .6, .1, 1) 250ms both;
}

#intro .row {
  margin-top: var(--s5);
}

.lead {
  font-size: var(--step-1);
  line-height: 1.48;
}

.entry + .entry {
  margin-block-start: var(--s5);
  border-block-start: 1px solid var(--rule);
  padding-block-start: var(--s5);
}

.claim h3 {
  margin-bottom: var(--s3);
}

.education {
  margin-top: var(--s5);
}

.sub {
  display: flex;
  align-items: center;
  gap: var(--s2);
  color: var(--ink-soft);
  font-size: var(--step-0);
  font-weight: 600;
}

.degrees {
  margin-top: var(--s2);
  list-style: none;
}

.degrees li + li {
  margin-top: var(--s2);
}

.degrees strong {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--step--1);
  font-weight: 600;
}

.degree-with-mark {
  min-height: 3rem;
  display: grid;
  grid-template-columns: clamp(4rem, 14vw, 5rem) minmax(0, 1fr);
  align-items: center;
  gap: var(--s2);
}

.education-mark {
  width: 100%;
  height: clamp(3rem, 10vw, 3.5rem);
  object-fit: contain;
  mix-blend-mode: multiply;
}

.education-mark-wide {
  height: clamp(2.5rem, 8vw, 3rem);
  object-fit: cover;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
  margin-top: var(--s2);
  list-style: none;
}

.chips + .sub,
.places + .sub {
  margin-top: var(--s4);
}

.chips li,
.places li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--step--1);
  font-weight: 500;
}


.facets {
  display: grid;
  row-gap: var(--s1);
}

.facets dt {
  display: flex;
  align-items: center;
  gap: var(--s2);
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-weight: 600;
}

.facets dt:not(:first-of-type) {
  margin-top: var(--s3);
}

.facets dd {
  max-width: 66ch;
}

.places {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--s2) var(--s4);
  margin-top: var(--s2);
  list-style: none;
}

.places img {
  flex: none;
  border-radius: 50%;
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
  list-style: none;
}

.socials a {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  color: var(--ink-soft);
  text-decoration: none;
}

.socials a:hover,
.socials a:focus-visible {
  color: var(--mark);
}

.contact-inner {
  min-height: calc(100svh - 8rem);
  display: flex;
  flex-direction: column;
}

.footer {
  margin-top: auto;
  border-block-start: 1px solid var(--rule);
  padding-block-start: var(--s4);
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.45;
}

.icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  color: var(--mark);
}

.icon-lg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--mark);
}


svg:has(use[href="#lu-download"]) { color: #E05A33; }
svg:has(use[href="#lu-briefcase"]),
svg:has(use[href="#lu-plane-takeoff"]) { color: #2563B8; }
svg:has(use[href="#lu-graduation-cap"]),
svg:has(use[href="#lu-tv"]),
svg:has(use[href="#lu-sparkles"]) { color: #7257B5; }
svg:has(use[href="#lu-wrench"]),
svg:has(use[href="#lu-cloud"]) { color: #D66B00; }
svg:has(use[href="#lu-globe"]),
svg:has(use[href="#lu-compass"]) { color: #008575; }
svg:has(use[href="#lu-mail"]) { color: #D64545; }
svg:has(use[href="#lu-map-pin"]) { color: #E04F5F; }
svg:has(use[href="#lu-dumbbell"]) { color: #C43D57; }
svg:has(use[href="#lu-film"]),
svg:has(use[href="#lu-chart-spline"]) { color: #E76F51; }
svg:has(use[href="#lu-book-open"]) { color: #228B72; }
svg:has(use[href="#lu-gamepad-2"]),
svg:has(use[href="#lu-database"]) { color: #356AE6; }
svg:has(use[href="#lu-heart"]) { color: #E63972; }
svg:has(use[href="#lu-boxes"]) { color: #8E44AD; }
svg:has(use[href="#lu-infinity"]),
svg:has(use[href="#dv-azuredevops"]) { color: #0078D4; }

svg:has(use[href="#si-python"]) { color: #3776AB; }
svg:has(use[href="#si-c"]) { color: #8592A1; }
svg:has(use[href="#si-cplusplus"]) { color: #00599C; }
svg:has(use[href="#si-javascript"]) { color: #A19113; }
svg:has(use[href="#si-html5"]) { color: #E34F26; }
svg:has(use[href="#si-css"]) { color: #663399; }
svg:has(use[href="#si-pytorch"]) { color: #EE4C2C; }
svg:has(use[href="#si-ultralytics"]) { color: #111F68; }
svg:has(use[href="#si-huggingface"]) { color: #AB8D14; }
svg:has(use[href="#si-langchain"]),
svg:has(use[href="#si-langgraph"]) { color: #5F96BF; }
svg:has(use[href="#si-ollama"]) { color: #000000; }
svg:has(use[href="#si-fastapi"]) { color: #009688; }
svg:has(use[href="#si-flask"]) { color: #369DB3; }
svg:has(use[href="#si-react"]) { color: #459BB2; }
svg:has(use[href="#si-streamlit"]) { color: #FF4B4B; }
svg:has(use[href="#si-numpy"]) { color: #013243; }
svg:has(use[href="#si-pandas"]) { color: #150458; }
svg:has(use[href="#si-pytest"]) { color: #0A9BD8; }
svg:has(use[href="#si-sonarqubeserver"]) { color: #126ED3; }
svg:has(use[href="#si-git"]) { color: #F03C2E; }
svg:has(use[href="#si-linux"]) { color: #B08B19; }
svg:has(use[href="#si-github"]) { color: #181717; }
svg:has(use[href="#si-facebook"]) { color: #0866FF; }
svg:has(use[href="#si-instagram"]) { color: #FF0069; }
svg:has(use[href="#dv-linkedin"]) { color: #0A66C2; }

.socials a:hover svg,
.socials a:focus-visible svg,
.rail a:hover .icon,
.rail a:focus-visible .icon {
  color: var(--mark);
}

.mark {
  display: block;
}

.mark-tall {
  width: auto;
  height: 2.25rem;
}

.mark-asml {
  width: auto;
  height: 1.5rem;
}


.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;
}

@keyframes draw {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@media (min-width: 62rem) {
  body {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
  }

  .toc {
    grid-column: 1;
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    align-content: center;
    padding-inline: var(--s4);
  }

  .toc ol {
    list-style: none;
  }

  .toc a {
    display: block;
    border-inline-start: 2px solid transparent;
    padding-block: 0.45rem;
    padding-inline-start: 0.75rem;
    color: var(--ink-faint);
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: var(--step--1);
    font-weight: 500;
    text-decoration: none;
  }

  .toc a:hover,
  .toc a:focus-visible {
    color: var(--ink);
  }

  .toc a[aria-current] {
    border-inline-start-color: var(--mark);
    color: var(--ink);
  }

  .frames {
    grid-column: 2;
  }

  .row,
  .facets {
    grid-template-columns: 11rem minmax(0, 42rem);
    column-gap: var(--s6);
  }

  .facets {
    row-gap: var(--s3);
  }

  .facets dt:not(:first-of-type) {
    margin-top: 0;
  }

  .rail {
    padding-block-start: 0.32rem;
  }
}

@media (min-width: 62rem) and (max-height: 39.999rem) {
  .frame {
    min-height: auto;
    padding-block: var(--s5);
  }

  .contact-inner {
    min-height: auto;
  }
}

@media (max-width: 61.999rem) {
  .frame {
    min-height: auto;
    padding-block: var(--s5);
  }

  .frame h2 {
    margin-bottom: var(--s4);
  }

  .contact-inner {
    min-height: auto;
  }

  .footer {
    margin-top: var(--s7);
  }
}

@media (min-width: 62rem) and (min-height: 40rem) {
  html {
    scroll-snap-type: y mandatory;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mark-rule {
    animation: none;
    transform: scaleX(1);
  }
}