@charset "UTF-8";
/***************/
/* MEYER RESET */
/***************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/**********************/
/* CSS CUSTOM PROPS   */
/**********************/
:root {
  /* Dark theme (default) */
  --color-bg:        #0d1117;
  --color-surface:   #161b22;
  --color-border:    #30363d;
  --color-accent:    #06d6a0;
  --color-purple:    #a78bfa;
  --color-text:      #e6edf3;
  --color-muted:     #8b949e;
  /* Derived / transparent variants */
  --color-nav-bg:           rgba(13, 17, 23, 0.85);
  --color-nav-bg-scrolled:  rgba(13, 17, 23, 0.97);
  --color-hero-overlay:     #0d1117;
  --color-section-alt:      rgba(22, 27, 34, 0.4);
  --color-hero-dots:        rgba(48, 54, 61, 0.8);
  --color-border-60:        rgba(48, 54, 61, 0.6);
  /* Transparent accent/border variants (suffix = opacity %, e.g. -10 = 10% = 0.10) */
  --color-accent-06:        rgba(6, 214, 160, 0.06);
  --color-accent-10:        rgba(6, 214, 160, 0.10);
  --color-accent-12:        rgba(6, 214, 160, 0.12);
  --color-accent-15:        rgba(6, 214, 160, 0.15);
  --color-accent-25:        rgba(6, 214, 160, 0.25);
  --color-accent-30:        rgba(6, 214, 160, 0.30);
  --color-accent-35:        rgba(6, 214, 160, 0.35);
  --color-accent-40:        rgba(6, 214, 160, 0.40);
  --color-accent-50:        rgba(6, 214, 160, 0.50);
  --color-purple-12:        rgba(167, 139, 250, 0.12);
  --color-purple-30:        rgba(167, 139, 250, 0.30);
  --color-btn-primary-text: #0d1117;
  --nav-height:    64px;
  --radius:        8px;
  --radius-lg:     14px;
  --transition:    0.2s ease; }

/* Light theme overrides */
[data-theme="light"] {
  --color-bg:        #f6f8fa;
  --color-surface:   #ffffff;
  --color-border:    #d0d7de;
  --color-accent:    #059669;
  --color-purple:    #7c3aed;
  --color-text:      #1f2328;
  --color-muted:     #57606a;
  --color-nav-bg:           rgba(246, 248, 250, 0.85);
  --color-nav-bg-scrolled:  rgba(246, 248, 250, 0.97);
  --color-hero-overlay:     #f6f8fa;
  --color-section-alt:      rgba(255, 255, 255, 0.7);
  --color-hero-dots:        rgba(208, 215, 222, 0.8);
  --color-border-60:        rgba(208, 215, 222, 0.6);
  --color-accent-06:        rgba(5, 150, 105, 0.06);
  --color-accent-10:        rgba(5, 150, 105, 0.10);
  --color-accent-12:        rgba(5, 150, 105, 0.12);
  --color-accent-15:        rgba(5, 150, 105, 0.15);
  --color-accent-25:        rgba(5, 150, 105, 0.25);
  --color-accent-30:        rgba(5, 150, 105, 0.30);
  --color-accent-35:        rgba(5, 150, 105, 0.35);
  --color-accent-40:        rgba(5, 150, 105, 0.40);
  --color-accent-50:        rgba(5, 150, 105, 0.50);
  --color-purple-12:        rgba(124, 58, 237, 0.12);
  --color-purple-30:        rgba(124, 58, 237, 0.30);
  --color-btn-primary-text: #ffffff; }

/**********************/
/* BASE               */
/**********************/
html {
  font-size: 100%;
  scroll-behavior: smooth;
  box-sizing: border-box; }

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

body {
  background: var(--color-bg);
  color: var(--color-text);
  font: 18px/1.6 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--transition), color var(--transition); }

h1, h2, h3, h4, h5, h6 {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--color-text);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.5em; }

h1 {
  font-size: 2.5rem; }

h2 {
  font-size: 2rem; }

h3 {
  font-size: 1.4rem; }

h4 {
  font-size: 1.15rem; }

p {
  margin: 0 0 1rem; }

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition), opacity var(--transition); }
  a:hover {
    opacity: 0.8; }

ul, ol {
  margin: 0 0 1rem;
  padding-left: 1.5rem; }

ul {
  list-style-type: disc; }

ol {
  list-style-type: decimal; }

em, i {
  font-style: italic; }

strong, b {
  font-weight: 700; }

img {
  max-width: 100%;
  display: block; }

code, pre {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.875em; }

code {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.1em 0.4em; }

pre {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  overflow-x: auto; }
  pre code {
    background: none;
    border: none;
    padding: 0; }

::selection {
  background: var(--color-accent-25);
  color: var(--color-text); }

/**********************/
/* LAYOUT / CONTAINER */
/**********************/
.container {
  margin: 0 auto;
  max-width: 1100px;
  padding: 0 24px;
  width: 100%; }

.container--narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px; }

/**********************/
/* NAVIGATION         */
/**********************/
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  background: var(--color-nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), background var(--transition); }
  .site-nav.scrolled {
    border-bottom-color: var(--color-border);
    background: var(--color-nav-bg-scrolled); }

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height); }

.site-nav__logo {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.3px; }
  .site-nav__logo span {
    color: var(--color-accent); }
  .site-nav__logo:hover {
    opacity: 1;
    color: var(--color-text); }

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0; }
  .site-nav__links a {
    color: var(--color-muted);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.2px;
    position: relative;
    padding-bottom: 2px; }
    .site-nav__links a::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--color-accent);
      border-radius: 2px;
      transition: width 0.2s ease; }
    .site-nav__links a:hover {
      color: var(--color-text);
      opacity: 1; }
      .site-nav__links a:hover::after {
        width: 100%; }
  @media screen and (max-width: 640px) {
    .site-nav__links {
      display: none;
      position: absolute;
      top: var(--nav-height);
      left: 0;
      right: 0;
      flex-direction: column;
      background: var(--color-surface);
      border-bottom: 1px solid var(--color-border);
      padding: 1rem 24px;
      gap: 1rem;
      align-items: flex-start; }
      .site-nav__links.open {
        display: flex; } }
.site-nav__hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--color-muted); }
  @media screen and (max-width: 640px) {
    .site-nav__hamburger {
      display: block; } }
  .site-nav__hamburger:hover {
    color: var(--color-text); }
  .site-nav__hamburger svg {
    width: 22px;
    height: 22px;
    display: block; }

/* Theme toggle button */
.theme-toggle {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  cursor: pointer;
  padding: 5px 10px;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
  flex-shrink: 0; }
  .theme-toggle:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-accent-06); }
  .theme-toggle svg {
    width: 15px;
    height: 15px;
    display: block; }
  .theme-toggle .icon-sun {
    display: none; }
  .theme-toggle .icon-moon {
    display: block; }
  @media screen and (max-width: 640px) {
    .theme-toggle {
      margin-right: 4px; } }
[data-theme="light"] .theme-toggle .icon-sun {
  display: block; }

[data-theme="light"] .theme-toggle .icon-moon {
  display: none; }

.site-nav__right {
  display: flex;
  align-items: center;
  gap: 0.75rem; }

/**********************/
/* HERO               */
/**********************/
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: var(--nav-height);
  background-image: radial-gradient(circle, var(--color-hero-dots) 1px, transparent 1px);
  background-size: 28px 28px; }
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 40%, transparent 30%, var(--color-hero-overlay) 80%);
    pointer-events: none; }

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 760px; }

.hero__eyebrow {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.9rem;
  color: var(--color-accent);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: block; }

.hero__name {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1.5px;
  margin-bottom: 0.5rem;
  color: var(--color-text); }

.hero__title {
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 600;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-purple) 60%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 6s ease infinite;
  background-size: 200% 200%; }

.hero__desc {
  font-size: 1.1rem;
  color: var(--color-muted);
  line-height: 1.7;
  max-width: 540px;
  margin-bottom: 2.5rem; }

.hero__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3rem; }

.hero__socials {
  display: flex;
  align-items: center;
  gap: 1.25rem; }
  .hero__socials a {
    color: var(--color-muted);
    font-family: "JetBrains Mono", "Fira Code", monospace;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    transition: border-color var(--transition), color var(--transition); }
    .hero__socials a:hover {
      border-color: var(--color-accent);
      color: var(--color-accent);
      opacity: 1; }

/**********************/
/* BUTTONS            */
/**********************/
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.5rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  border: none; }
  .btn--primary {
    background: var(--color-accent);
    color: var(--color-btn-primary-text); }
    .btn--primary:hover {
      opacity: 0.9;
      transform: translateY(-1px);
      box-shadow: 0 4px 20px var(--color-accent-35); }
  .btn--outline {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border); }
    .btn--outline:hover {
      border-color: var(--color-accent);
      color: var(--color-accent);
      opacity: 1; }

/**********************/
/* SECTIONS           */
/**********************/
.section {
  padding: 6rem 0; }
  @media screen and (max-width: 640px) {
    .section {
      padding: 4rem 0; } }
.section--alt {
  background: var(--color-section-alt); }

.section__header {
  margin-bottom: 3rem; }

.section__tag {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.8rem;
  color: var(--color-accent);
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.5rem; }

.section__title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.5px;
  position: relative;
  display: inline-block; }
  .section__title::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--color-accent);
    border-radius: 2px; }

.section__subtitle {
  color: var(--color-muted);
  font-size: 1.05rem;
  margin-top: 1.25rem;
  max-width: 600px; }

/**********************/
/* CARDS              */
/**********************/
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
  .card:hover {
    border-color: var(--color-accent-50);
    box-shadow: 0 0 24px var(--color-accent-10);
    transform: translateY(-2px); }

.card__icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: block; }

.card__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem; }

.card__desc {
  color: var(--color-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0; }

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-accent);
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 1.25rem; }
  .card__link::after {
    content: '→'; }
  .card__link:hover {
    opacity: 0.8; }

/**********************/
/* GRIDS              */
/**********************/
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; }
  @media screen and (max-width: 960px) {
    .grid-3 {
      grid-template-columns: repeat(2, 1fr); } }
  @media screen and (max-width: 640px) {
    .grid-3 {
      grid-template-columns: 1fr; } }
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem; }
  @media screen and (max-width: 640px) {
    .grid-2 {
      grid-template-columns: 1fr; } }
/**********************/
/* TAGS / BADGES      */
/**********************/
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem; }

.tag {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.72rem;
  padding: 0.2em 0.7em;
  border-radius: 20px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-decoration: none;
  display: inline-block; }
  .tag:hover {
    opacity: 0.8;
    text-decoration: none; }
  .tag--default {
    background: var(--color-border-60);
    color: var(--color-muted);
    border: 1px solid var(--color-border); }
  .tag--accent {
    background: var(--color-accent-12);
    color: var(--color-accent);
    border: 1px solid var(--color-accent-30); }
  .tag--purple {
    background: var(--color-purple-12);
    color: var(--color-purple);
    border: 1px solid var(--color-purple-30); }
  .tag--active {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3); }
  .tag--wip {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3); }

/**********************/
/* PROJECT CARDS      */
/**********************/
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem; }
  @media screen and (max-width: 640px) {
    .project-grid {
      grid-template-columns: 1fr; } }
.project-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
  .project-card:hover {
    border-color: var(--color-accent-50);
    box-shadow: 0 0 20px var(--color-accent-10);
    transform: translateY(-2px); }

.project-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem; }

.project-card__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
  font-family: "JetBrains Mono", "Fira Code", monospace; }

.project-card__desc {
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  flex: 1;
  margin-bottom: 1rem; }

.project-card__footer {
  margin-top: auto; }

.project-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-muted);
  font-family: "JetBrains Mono", "Fira Code", monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 0.5rem; }
  .project-section-title:first-child {
    margin-top: 0; }

/**********************/
/* BIO SECTION        */
/**********************/
.bio-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: center; }
  @media screen and (max-width: 960px) {
    .bio-grid {
      grid-template-columns: 1fr;
      gap: 2rem; } }
.bio-avatar img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-border);
  box-shadow: 0 0 40px var(--color-accent-15); }
  @media screen and (max-width: 960px) {
    .bio-avatar img {
      width: 140px;
      height: 140px; } }
.bio-text p {
  color: var(--color-muted);
  line-height: 1.8; }

.bio-text .orcid-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-muted);
  font-size: 0.9rem;
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  margin-top: 1rem; }
  .bio-text .orcid-link img {
    display: inline;
    width: 16px;
    height: 16px; }
  .bio-text .orcid-link:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    opacity: 1; }

/**********************/
/* CONNECT SECTION    */
/**********************/
.connect-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem; }

.connect-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-muted);
  font-size: 0.95rem;
  font-weight: 500;
  transition: all var(--transition); }
  .connect-link:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    opacity: 1;
    background: var(--color-accent-06); }
  .connect-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0; }

/**********************/
/* ABOUT/PROJECT PAGE */
/**********************/
.page-wrapper {
  padding-top: calc(var(--nav-height) + 3rem);
  padding-bottom: 6rem; }

.page-header {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-border); }
  .page-header h1 {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    position: relative;
    display: inline-block; }
    .page-header h1::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 0;
      width: 50px;
      height: 3px;
      background: var(--color-accent);
      border-radius: 2px; }

.page-content h2 {
  font-size: 1.5rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: var(--color-text);
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border); }
  .page-content h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none; }

.page-content h3 {
  font-size: 1.15rem;
  color: var(--color-muted);
  font-weight: 600;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem; }

.page-content p {
  color: var(--color-muted);
  line-height: 1.8; }

.page-content ul li, .page-content ol li {
  color: var(--color-muted);
  margin-bottom: 0.3rem; }

.page-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-40);
  text-underline-offset: 2px; }
  .page-content a:hover {
    text-decoration-color: var(--color-accent);
    opacity: 1; }

.page-content strong {
  color: var(--color-text); }

/**********************/
/* SKILLS TAGS        */
/**********************/
.skills-section {
  margin: 2rem 0; }

.skills-group {
  margin-bottom: 1.5rem; }

.skills-label {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.75rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.6rem;
  display: block; }

.skills-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; }

/**********************/
/* TIMELINE           */
/**********************/
.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative; }
  .timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 8px;
    bottom: 0;
    width: 2px;
    background: var(--color-border); }

.timeline__item {
  position: relative;
  padding-left: 2.5rem;
  padding-bottom: 2rem; }
  .timeline__item::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid var(--color-bg);
    box-shadow: 0 0 0 2px var(--color-accent); }
  .timeline__item:last-child {
    padding-bottom: 0; }

.timeline__date {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.8rem;
  color: var(--color-accent);
  margin-bottom: 0.2rem; }

.timeline__role {
  font-weight: 700;
  color: var(--color-text);
  font-size: 1rem;
  margin-bottom: 0.1rem; }

.timeline__org {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin-bottom: 0.4rem; }

.timeline__desc {
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0; }

/**********************/
/* FOOTER             */
/**********************/
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 2.5rem 0;
  text-align: center; }

.site-footer__socials {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.25rem; }
  .site-footer__socials a {
    color: var(--color-muted); }
    .site-footer__socials a:hover {
      color: var(--color-accent);
      opacity: 1; }
    .site-footer__socials a svg {
      width: 20px;
      height: 20px;
      display: block; }

.site-footer__copy {
  font-size: 0.85rem;
  color: var(--color-muted); }
  .site-footer__copy a {
    color: var(--color-muted); }
    .site-footer__copy a:hover {
      color: var(--color-accent);
      opacity: 1; }

/**********************/
/* ANIMATIONS         */
/**********************/
@keyframes gradientShift {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }

.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease; }
  .fade-in.visible {
    opacity: 1;
    transform: translateY(0); }

/**********************/
/* BLOG               */
/**********************/
.page-header__desc {
  color: var(--color-muted);
  font-size: 1.05rem;
  margin-top: 0.75rem;
  margin-bottom: 0; }

.blog-list {
  display: flex;
  flex-direction: column;
  gap: 0; }

.blog-card {
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-border); }
  .blog-card:first-child {
    padding-top: 0; }
  .blog-card:last-child {
    border-bottom: none; }

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem; }

.blog-card__date {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.8rem;
  color: var(--color-accent);
  letter-spacing: 0.3px; }

.blog-card__tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap; }

.blog-card__title {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.6rem; }
  .blog-card__title a {
    color: var(--color-text);
    text-decoration: none; }
    .blog-card__title a:hover {
      color: var(--color-accent);
      opacity: 1; }

.blog-card__desc {
  color: var(--color-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 1rem; }

.blog-card__read-more {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent); }
  .blog-card__read-more::after {
    content: ' →'; }
  .blog-card__read-more:hover {
    opacity: 0.8; }

.blog-empty {
  color: var(--color-muted);
  font-size: 1rem;
  padding: 3rem 0;
  text-align: center; }

.post-header {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-border); }

.post-back {
  display: inline-block;
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-bottom: 1.25rem;
  font-weight: 500; }
  .post-back:hover {
    color: var(--color-accent);
    opacity: 1; }

.post-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem; }
  .post-meta time {
    font-family: "JetBrains Mono", "Fira Code", monospace;
    font-size: 0.8rem;
    color: var(--color-accent); }

.post-desc {
  color: var(--color-muted);
  font-size: 1.1rem;
  line-height: 1.7;
  margin-top: 0.75rem;
  margin-bottom: 0; }

.post-content {
  margin-bottom: 3rem; }

.post-footer {
  padding-top: 2rem;
  border-top: 1px solid var(--color-border); }

/**********************/
/* SYNTAX HIGHLIGHTING*/
/**********************/
.highlight {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 1.25rem;
  margin: 1.25rem 0;
  overflow-x: auto; }

.highlight .c {
  color: #586E75; }

/* Comment */
.highlight .err {
  color: #93A1A1; }

/* Error */
.highlight .k {
  color: #859900; }

/* Keyword */
.highlight .o {
  color: #859900; }

/* Operator */
.highlight .p {
  color: #93A1A1; }

/* Punctuation */
.highlight .cm {
  color: #586E75; }

/* Comment.Multiline */
.highlight .c1 {
  color: #586E75; }

/* Comment.Single */
.highlight .cs {
  color: #859900; }

/* Comment.Special */
.highlight .gd {
  color: #2AA198; }

/* Generic.Deleted */
.highlight .gi {
  color: #859900; }

/* Generic.Inserted */
.highlight .kc {
  color: #CB4B16; }

/* Keyword.Constant */
.highlight .kd {
  color: #268BD2; }

/* Keyword.Declaration */
.highlight .kn {
  color: #859900; }

/* Keyword.Namespace */
.highlight .kr {
  color: #268BD2; }

/* Keyword.Reserved */
.highlight .kt {
  color: #DC322F; }

/* Keyword.Type */
.highlight .m {
  color: #2AA198; }

/* Literal.Number */
.highlight .s {
  color: #2AA198; }

/* Literal.String */
.highlight .nb {
  color: #B58900; }

/* Name.Builtin */
.highlight .nc {
  color: #268BD2; }

/* Name.Class */
.highlight .no {
  color: #CB4B16; }

/* Name.Constant */
.highlight .nf {
  color: #268BD2; }

/* Name.Function */
.highlight .nt {
  color: #268BD2; }

/* Name.Tag */
.highlight .nv {
  color: #268BD2; }

/* Name.Variable */
.highlight .ow {
  color: #859900; }

/* Operator.Word */
.highlight .s2 {
  color: #2AA198; }

/* Literal.String.Double */
.highlight .s1 {
  color: #2AA198; }

/* Literal.String.Single */
.highlight .mf {
  color: #2AA198; }

/* Literal.Number.Float */
.highlight .mi {
  color: #2AA198; }

/* Literal.Number.Integer */