:root {
  --black: #000;
  --gray: #888;
  --grid: url("../assets/images/about-grid.svg");
}

@font-face {
  font-family: "Helvetica Neue Portfolio";
  src: local("Helvetica Neue"), local("HelveticaNeue");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

html,
body {
  background: #fff;
  color: var(--black);
  font-family: "Helvetica Neue Portfolio", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body { overflow-x: clip; }
button { border: 0; background: none; padding: 0; }
[data-lang="en"] { display: none; }
html[lang="en"] [data-lang="ru"] { display: none !important; }
html[lang="en"] [data-lang="en"] { display: inline; }

.page-shell { position: relative; width: 100%; }
.home-page-shell { height: 1105px; }
.about-page-shell { height: 2857px; }
.canvas {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1440px;
  overflow: hidden;
  background: #fff var(--grid) repeat-y top left / 1440px 1024px;
  transform: translateX(-50%);
  transform-origin: top center;
}
.home-canvas { height: 1105px; }
.about-canvas { height: 2857px; }
.mobile-canvas { display: none; }

.site-header { position: absolute; inset: 0 0 auto; height: 64px; z-index: 10; font-size: 16px; line-height: 24px; }
.site-header > * { position: absolute; top: 20px; white-space: nowrap; }
.site-header .site-name { left: 29px; }
.site-header .site-role { left: 240px; }
.site-header .site-nav-link { left: 720px; }
.site-header .site-resume { left: 864px; }
.site-header .language-switch { right: 29px; }

.home-arrow-link { display: inline-flex; align-items: center; gap: 8px; }
.home-arrow-link[data-lang="en"] { display: none; }
html[lang="en"] .home-arrow-link[data-lang="en"] { display: inline-flex; }
.home-link-arrow { flex: none; width: 18px; height: 18px; opacity: 0; transform: translateX(-5px) rotate(45deg); filter: invert(1); transition: opacity 160ms ease-out, transform 160ms ease-out; }
.home-arrow-link:is(:hover, :focus-visible) .home-link-arrow { opacity: 1; transform: translateX(0) rotate(45deg); }

.site-nav-link,
.site-resume,
.menu-about,
.menu-resume { text-decoration: none; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.site-nav-link.is-current { text-decoration: underline; }
@media (hover: hover) and (pointer: fine) {
  .site-nav-link:hover,
  .site-resume:hover,
  .menu-about:hover,
  .menu-resume:hover { text-decoration: underline; }
}
.site-nav-link:focus-visible,
.site-resume:focus-visible,
.menu-about:focus-visible,
.menu-resume:focus-visible { text-decoration: underline; outline: none; }

.language-switch { display: flex; align-items: center; gap: 4px; font-size: 16px; line-height: 24px; }
.language-switch button { position: relative; min-width: 19px; height: 24px; cursor: pointer; font: inherit; text-transform: uppercase; }
.language-switch button::after { content: ""; position: absolute; right: 0; bottom: 6px; left: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 160ms ease; }
.language-switch button[aria-pressed="true"]::after { transform: scaleX(1); }
.site-header .language-switch button::after { bottom: 4px; }

.home-greeting { position: absolute; top: 394px; left: 30px; font-size: 60px; font-weight: 400; line-height: 64px; letter-spacing: -1.2px; text-transform: lowercase; }
.home-experience { position: absolute; top: 412px; left: 720px; width: 690px; }
.home-experience-row { position: relative; height: 42px; font-size: 16px; line-height: 24px; letter-spacing: -.02em; white-space: nowrap; }
.home-experience-row .year { position: absolute; left: 0; color: var(--gray); }
.home-experience-row .org { position: absolute; left: 144px; }
.home-experience-row .role { position: absolute; left: 432px; color: var(--gray); }

.project-card { position: absolute; top: 581px; width: 684px; height: 568px; font-size: 16px; line-height: 24px; }
.project-roads { left: 30px; }
.project-midis { left: 726px; }
.project-media { position: relative; display: block; width: 684px; aspect-ratio: 16 / 9; overflow: hidden; background: #c0c0c0; }
.project-roads .project-media, .project-midis .project-media { display: flex; align-items: center; justify-content: center; background: #e5e5e7; }
.project-roads-video, .project-midis-video { position: relative; display: block; width: 71%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 0; background: transparent; box-shadow: none; }
.project-media img,
.project-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-media video { pointer-events: none; }
.project-media .project-card-overlay {
  position:absolute;
  inset:0;
  object-fit:contain;
  pointer-events:none;
}
.project-media:hover { cursor: none; }
.project-title { position: absolute; top: 399.75px; left: 0; white-space: nowrap; }
.project-meta { position: absolute; top: 399.75px; right: 0; color: var(--gray); white-space: nowrap; }
.project-title { letter-spacing: -.32px; }
.project-midis .project-title { left: -2px; }
.project-meta u { text-underline-offset: 2px; text-decoration-thickness: 1px; }

.project-caption { position: relative; margin-top: 15px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.project-card .project-caption .project-title,
.project-card .project-caption .project-meta { position: static; width: auto; white-space: normal; }

.project-cursor { position: fixed; z-index: 100; display: none; width: 195px; height: 49px; pointer-events: none; transform: translate(-50%, -50%); }
.project-cursor__inner { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; gap: 10px; padding: 12px 24px; background: #fff; font-size: 16px; line-height: 24px; white-space: nowrap; }
.project-cursor img { width: 14.16px; height: 13px; transform: rotate(90deg); }
.project-cursor.is-visible { display: block; }

/* About — desktop */
.about-statement { position: absolute; top: 130px; left: 360px; width: 1050px; font-size: 40px; line-height: 40px; letter-spacing: -.16px; text-align: left; text-transform: lowercase; }
.about-statement-line { display: block; white-space: nowrap; }
.about-statement-line:first-child { letter-spacing: -.32px; text-align: right; }
.about-statement-line:nth-child(3) { letter-spacing: -.32px; }
.about-history { position: absolute; top: 509px; left: 29px; width: 304px; font-size: 20px; line-height: 22px; letter-spacing: -.4px; text-align: right; text-transform: lowercase; }
.about-statement > span,
.about-history > span { white-space: nowrap; }
.about-intro-image { position: absolute; top: 512px; left: 360px; width: 360px; height: 257px; object-fit: fill; }
.principles { position: absolute; top: 947px; left: 30px; width: 507px; height: 390px; text-transform: lowercase; }
.principles h1 { font-size: 40px; font-weight: 400; line-height: 40px; letter-spacing: -1.2px; }
.principle-row { position: absolute; left: 0; display: grid; width: 507px; grid-template-columns: 56px 1fr; font-size: 20px; line-height: 22px; letter-spacing: -.4px; }
.principle-row:nth-of-type(1) { top: 137px; }
.principle-row:nth-of-type(2) { top: 222px; }
.principle-row:nth-of-type(3) { top: 307px; }
.principle-row p { white-space: nowrap; }
.principle-row small { display: block; margin-top: 7px; color: var(--gray); font: inherit; }
.about-principles-image { position: absolute; top: 960px; left: 576px; width: 834px; height: 616px; object-fit: cover; }

.about-list { position: absolute; left: 0; width: 1440px; }
.about-list h2 { position: absolute; left: 30px; top: 0; font-size: 40px; font-weight: 400; line-height: 40px; letter-spacing: -1.2px; text-transform: lowercase; }
.about-list-row { position: absolute; left: 576px; display: grid; width: 834px; grid-template-columns: 288px 1fr; font-size: 20px; line-height: 22px; letter-spacing: -.4px; }
.about-list-row small { display: block; margin-top: 8px; color: var(--gray); font: inherit; }
.experience-list { top: 1699px; height: 250px; }
.experience-list .about-list-row:nth-of-type(1) { top: 6px; }
.experience-list .about-list-row:nth-of-type(2) { top: 96px; }
.experience-list .about-list-row:nth-of-type(3) { top: 183px; }
.education-list { top: 2038px; height: 210px; }
.education-list .about-list-row:nth-of-type(1) { top: 10px; }
.education-list .about-list-row:nth-of-type(2) { top: 97px; }
.mentoring-list { top: 2348px; height: 480px; }
.about-mentoring-image { position: absolute; top: 95px; left: 30px; width: 509px; height: 380px; object-fit: cover; }
.mentoring-list .about-list-row.row-1 { top: 95px; }
.mentoring-list .about-list-row.row-2 { top: 184px; }
.mentoring-list .about-list-row.row-3 { top: 296px; }

/* Gentle entrance/reveal without changing layout. */
.reveal-enabled [data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity 480ms cubic-bezier(.22,1,.36,1), transform 480ms cubic-bezier(.22,1,.36,1); }
.reveal-enabled [data-reveal].is-visible { opacity: 1; transform: none; }
html.is-language-changing body { opacity: .88; }
body { transition: opacity 120ms ease; }

@media (min-width: 768px) and (max-width: 1439px) {
  .desktop-canvas { transform: translateX(-50%) scale(calc(100vw / 1440px)); }
  .home-page-shell { height: calc(1105 / 1440 * 100vw); }
  .about-page-shell { height: calc(2857 / 1440 * 100vw); }
}

@media (max-width: 767px) {
  .desktop-canvas { display: none; }
  .mobile-canvas { display: block; width: 390px; left: 50%; transform: translateX(-50%); background-size: 390px auto; }
  .home-page-shell { height: 1120px; }
  .about-page-shell { height: 3072px; }
  .home-mobile { height: 1120px; }
  html[lang="en"] .home-page-shell,
  html[lang="en"] .home-mobile { height: 1098px; }
  .about-mobile { height: 3072px; }
  .project-cursor { display: none !important; }

  .mobile-header { position: absolute; inset: 0 0 auto; height: 63px; z-index: 60; background: #fff var(--grid) repeat-y top left / 390px auto; font-size: 12px; line-height: 26px; }
  .mobile-header .site-name { position: absolute; top: 17px; left: 12px; }
  .mobile-header .site-role { position: absolute; top: 17px; left: 178px; }
  .menu-toggle { position: absolute; top: 19px; left: 357px; z-index: 2; width: 24px; height: 24px; cursor: pointer; }
  .menu-toggle img { position: absolute; display: block; }
  .menu-toggle .menu-icon-open { top: 7px; left: 2px; width: 20px; height: 8px; }
  .menu-toggle .menu-icon-close { top: 0; left: 0; display: none; width: 24px; height: 24px; }
  .menu-open .menu-toggle .menu-icon-open { display: none; }
  .menu-open .menu-toggle .menu-icon-close { display: block; }

  .mobile-menu { position: absolute; top: 63px; left: 0; z-index: 50; visibility: hidden; width: 390px; height: 141px; background: #fff var(--grid) repeat-y 0 -63px / 390px auto; font-size: 12px; line-height: 26px; transform: translateY(-101%); transition: transform 300ms cubic-bezier(.22,1,.36,1), visibility 0s linear 300ms; }
  .mobile-menu.is-open { visibility: visible; transform: translateY(0); transition-delay: 0s; }
  .mobile-menu .menu-about { position: absolute; top: 14px; left: 12px; }
  .mobile-menu .menu-resume { position: absolute; top: 49px; left: 12px; }
  .mobile-menu .language-switch { position: absolute; top: 16px; left: 180px; }
  .mobile-menu .is-current { text-decoration: none; }
  .language-switch { gap: 3px; font-size: 12px; line-height: 24px; }
  .language-switch button { min-width: 16px; height: 24px; }

  .home-greeting { top: 144px; left: 12px; font-size: 31px; line-height: 33px; letter-spacing: -.62px; }
  .home-experience { top: 249px; left: 11px; width: 368px; }
  .home-experience-row { height: 63px; font-size: 12px; line-height: 24px; letter-spacing: -.02em; }
  .home-experience-row .year { left: 0; }
  .home-experience-row .org { left: 149px; }
  .home-experience-row .role { top: 21px; left: 149px; }

  .project-card { width: 368px; height: auto; font-size: 12px; line-height: 20px; }
  .project-roads { top: 441px; left: 11px; }
  .project-midis { top: 740px; left: 11px; }
  .project-media { width: 368px; aspect-ratio: 16 / 9; }
  .project-caption { margin-top: 9px; }
  .project-roads-video, .project-midis-video { width: 82%; }
  .project-title { position: absolute; top: 216px; left: 0; width: 368px; white-space: normal; }
  .project-meta { position: absolute; top: 238px; right: auto; left: 0; }
  .project-midis .project-title { top: 216px; }
  .project-midis .project-meta { top: 260px; }
  html[lang="en"] .project-midis .project-meta { top: 238px; }

  /* About — mobile */
  .about-statement { top: 139px; left: 11px; width: 371px; font-size: 24px; line-height: 24px; letter-spacing: -.96px; text-align: left; }
  .about-intro-image { top: 387px; left: 11px; width: 367px; height: 279px; }
  .about-history { top: 681px; left: 11px; width: 370px; font-size: 16px; line-height: 20px; letter-spacing: -.48px; text-align: left; }
  .principles { top: 810px; left: 11px; width: 368px; height: 370px; }
  .principles h1 { font-size: 24px; line-height: 24px; letter-spacing: -.96px; }
  .principle-row { width: 368px; grid-template-columns: 79px 1fr; font-size: 16px; line-height: 18px; letter-spacing: -.32px; }
  .principle-row:nth-of-type(1) { top: 87px; }
  .principle-row:nth-of-type(2) { top: 192px; }
  .principle-row:nth-of-type(3) { top: 287px; }
  .principle-row p { white-space: normal; }
  .principle-row small { margin-top: 7px; }
  .about-principles-image { top: 1213px; left: 14px; width: 361px; height: 289px; }

  .about-list { width: 390px; }
  .about-list h2 { left: 11px; font-size: 24px; line-height: 24px; letter-spacing: -.96px; }
  .about-list-row { left: 11px; width: 379px; grid-template-columns: 142px 237px; font-size: 16px; line-height: 18px; letter-spacing: -.32px; }
  .about-list-row small { margin-top: 7px; }
  .experience-list { top: 1544px; height: 330px; }
  .experience-list .about-list-row:nth-of-type(1) { top: 77px; }
  .experience-list .about-list-row:nth-of-type(2) { top: 155px; }
  .experience-list .about-list-row:nth-of-type(3) { top: 269px; }
  .education-list { top: 1961px; height: 260px; }
  .education-list .about-list-row:nth-of-type(1) { top: 87px; }
  .education-list .about-list-row:nth-of-type(2) { top: 190px; }
  .mentoring-list { top: 2292px; height: 760px; }
  .about-mentoring-image { top: 59px; left: 14px; width: 362px; height: 283px; }
  .mentoring-list .about-list-row.row-1 { top: 391px; }
  .mentoring-list .about-list-row.row-2 { top: 500px; }
  .mentoring-list .about-list-row.row-3 { top: 615px; }
}

@media (max-width: 389px) {
  .mobile-canvas { transform: translateX(-50%) scale(calc(100vw / 390px)); }
  .home-page-shell { height: calc(1120 / 390 * 100vw); }
  html[lang="en"] .home-page-shell { height: calc(1098 / 390 * 100vw); }
  .about-page-shell { height: calc(3072 / 390 * 100vw); }
  html[lang="en"] .about-page-shell { height: calc(3073 / 390 * 100vw); }
}

@media (max-width: 767px) {
  html[lang="en"] .about-mobile { height: 3073px; }
}

@media (min-width: 390px) and (max-width: 767px) {
  html[lang="en"] .about-page-shell { height: 3073px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}