:root {
    /* gray */
    --W: #ffffff;
    --B: #000000;
    --G100: #f3f3f4;
    --G200: #e7e7e8;
    --G300: #cfcfd1;
    --G400: #b6b8ba;
    --G500: #9ea0a3;
    --G600: #868b8c;
    --G700: #6b6d70;
    --G800: #505254;
    --G900: #36363b;
    --G1000: #1b1b1c;

    --primary: #ff6b09;

    /* fonts */
  --playfair: 'Playfair Display', serif;

  /* layout */
  /* mobile */
  --container-mobile-min: 328px;
  --container-mobile-max: 396px;

  /* tablet */
  --container-tablet-min: 469px;
  --container-tablet-max: 736px;

  /* desktop */
  --container-desktop-min: 936px;
  --container-desktop-max: 1224px;

  /* container */
  --container-mobile: calc(100% - 16px);
  --container-tablet: calc(100% - 32px);
  --container-desktop: calc(100% - 48px);

  /* spacing */
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;

  /* border radius */
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;

  /* font size */
  --font-size-10: 10px;
  --font-size-11: 11px;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-30: 30px;
  --font-size-32: 32px;

  /* box shadow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  --shadow-1: 0px 1px 3px rgba(231, 231, 232);
  --shadow-2: 0px 2px 4px rgba(231, 231, 232);

  /* transitions */
  --transition-fast: 150ms;
  --transition-base: 250ms;
  --transition-slow: 350ms;
  --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-tooltip: 1070;

  /* breakpoints */
  --breakpoint-mobile: 375px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;

  /* opacity */
  --opacity-disabled: 0.4;
  --opacity-hover: 0.8;
}

.lang_toggle {
    position: fixed;
    top: var(--spacing-24);
    right: var(--spacing-24);
    z-index: var(--z-fixed);
    display: flex;
    padding: var(--spacing-8) var(--spacing-12);
    font-size: var(--font-size-13);
    color: var(--primary);
    background: var(--W);
    border: 1px solid var(--G200);
    border-radius: var(--radius-20);
    cursor: pointer;
    transition: opacity var(--transition-fast) var(--transition-ease);
}

.lang_toggle:hover {
    opacity: var(--opacity-hover);
}

.container {
    max-width: var(--container-tablet-max);
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--spacing-32);
    margin-bottom: var(--spacing-32);
    padding-left: 24px;
    padding-right: 24px;
}

.header_title {
    font-size: 48px;
    font-weight: 400;
    margin-bottom: var(--spacing-16);
}

.header_title span {
    color: var(--primary);
}

.header_subtitle {
    font-size: 18px;
    font-weight: 400;
    color: var(--G600);
    margin-bottom: var(--spacing-16);
}

.header_links {
    display: flex;
    gap: var(--spacing-16);
}

.header_links a {
    font-size: var(--font-size-13);
    color: var(--primary);
    text-decoration: none;
}

.header_links a:hover {
    text-decoration: underline;
}

.about_container {
    margin-top: var(--spacing-64);
}

.about_title {
    font-size: var(--font-size-32);
    font-weight: 400;
    margin-bottom: var(--spacing-32);
    color: var(--primary);
}

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-32);
    border-left: 2px solid var(--G100);
}

.timeline_item {
    position: relative;
    padding-left: var(--spacing-24);
}

.timeline_item::before {
    content: "";
    position: absolute;
    left: -5px;
    top: var(--spacing-4);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--G200);
}

.timeline_date {
    display: block;
    font-size: var(--font-size-13);
    font-weight: 400;
    color: var(--G600);
    margin-bottom: var(--spacing-4);
}

.timeline_role {
    font-size: var(--font-size-20);
    color: var(--G1000);
    font-weight: 500;
    margin: 0 0 var(--spacing-4);
}

.timeline_subtitle {
    font-size: var(--font-size-16);
    font-weight: 400;
    color: var(--G600);
    margin: 0;
}

.timeline_list {
    font-size: var(--font-size-16);
    font-weight: 400;
    color: var(--G600);
    margin: var(--spacing-4) 0 0;
    padding-left: var(--spacing-24);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    list-style: circle;
}

.projects_container {
    margin-top: var(--spacing-64);
}

.projects_title {
    font-size: var(--font-size-32);
    font-weight: 400;
    margin-bottom: var(--spacing-32);
    color: var(--primary);
}

.projects_grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-32);
}

.project_image {
    padding: var(--spacing-16);
    background: var(--G100);
    border-radius: var(--radius-8);
}

.project_image img {
    display: block;
    width: 100%;
    border-radius: var(--radius-4);
}

.project_description {
    font-size: var(--font-size-14);
    font-weight: 400;
    color: var(--G600);
    margin: var(--spacing-16) 0 var(--spacing-8);
}

.project_links {
    display: flex;
    gap: var(--spacing-16);
}

.project_links a {
    font-size: var(--font-size-13);
    color: var(--primary);
    text-decoration: none;
}

.project_links a:hover {
    text-decoration: underline;
}