/* «Обо мне» в логике новой главной. Макет Figma: кадр 2422:2 (секция 2420:2), 1440 px шириной.
   Цифры = пиксели макета, умножены на --u (1/1440 экрана, не больше 1.25px). */
:root {
  --bg: #ebebe9;
  --ink: #111;
  --mute: #595957;
  --col: rgba(17, 17, 17, .08);
  --rule: rgba(17, 17, 17, .2);
  --u: min(calc(100vw / 1440), 1.25px);
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
p, h1, h2, dl, dd, figure { margin: 0; }
.mono { font-family: var(--mono); font-weight: 400; }
.light { font-weight: 200; font-size: calc(22 * var(--u)); line-height: calc(28 / 22); }

/* направляющие и шапка — как на главной */
.cols { position: fixed; top: 0; bottom: 0; left: 50%; width: calc(1440 * var(--u)); transform: translateX(-50%); pointer-events: none; z-index: 0; }
.cols i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--col); }
.cols i:nth-child(1) { left: calc(80 * var(--u)); } .cols i:nth-child(2) { left: calc(540 * var(--u)); }
.cols i:nth-child(3) { left: calc(1000 * var(--u)); } .cols i:nth-child(4) { left: calc(1360 * var(--u)); }
.top { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: calc(1440 * var(--u)); height: calc(84 * var(--u)); z-index: 30; }
.top__logo { position: absolute; left: calc(80 * var(--u)); top: calc(34 * var(--u)); font-weight: 500; font-size: calc(26 * var(--u)); letter-spacing: -.02em; line-height: 1; }
.top__nav { position: absolute; right: calc(80 * var(--u)); top: calc(42 * var(--u)); display: flex; gap: calc(32 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1; }
.top__nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.top__nav .lang { display: flex; gap: calc(10 * var(--u)); }

/* ---- шапка: переключатель языка (бегунок едет к выбранному языку) ---- */
.top__nav { top: calc(35 * var(--u)); align-items: center; }
.top__nav .lang { position: relative; display: inline-flex; align-items: stretch; gap: 0; height: calc(26 * var(--u)); margin-left: calc(20 * var(--u)); padding: 2px; border: 1px solid var(--ink); isolation: isolate; }
.top__nav .lang::before { content: ""; position: absolute; z-index: -1; left: 2px; top: 2px; bottom: 2px; width: calc(50% - 2px); background: var(--ink); transition: transform .3s cubic-bezier(.3, .7, .2, 1); }
.top__nav .lang[data-cur="en"]::before { transform: translateX(100%); }
.top__nav .lang a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-width: calc(34 * var(--u)); padding: 0 calc(8 * var(--u)); transition: color .3s, opacity .15s; }
.top__nav .lang a.is-cur { color: var(--bg); }
.top__nav .lang a:hover { text-decoration: none; }
.top__nav .lang a:not(.is-cur):hover { opacity: .55; }

.page { position: relative; z-index: 1; width: calc(1440 * var(--u)); margin: 0 auto; padding: calc(100 * var(--u)) calc(80 * var(--u)) 0; }

.title { font-weight: 500; font-size: calc(96 * var(--u)); line-height: calc(104 / 96); letter-spacing: -.026em; white-space: nowrap; }

/* уголки у фото */
.photo, .fonts__img { position: relative; }
.photo img, .fonts__img video { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo i, .fonts__img i { position: absolute; width: 8px; height: 8px; border: 0 solid var(--ink); }
.c1 { left: -4px; top: -4px; border-width: 1px 0 0 1px !important; }
.c2 { right: -4px; top: -4px; border-width: 1px 1px 0 0 !important; }
.c3 { left: -4px; bottom: -4px; border-width: 0 0 1px 1px !important; }
.c4 { right: -4px; bottom: -4px; border-width: 0 1px 1px 0 !important; }

/* вступление: портрет слева, текст с колонки 540 */
.intro { display: grid; grid-template-columns: calc(460 * var(--u)) 1fr; margin-top: calc(56 * var(--u)); align-items: start; }
.photo { width: calc(380 * var(--u)); height: calc(475 * var(--u)); }
.status { display: inline-flex; align-items: center; gap: calc(12 * var(--u)); height: calc(34 * var(--u)); padding: 0 calc(24 * var(--u)) 0 calc(16 * var(--u));
  background: var(--ink); color: var(--bg); font-size: calc(16 * var(--u)); line-height: 1; white-space: nowrap; }
.lead { margin-top: calc(32 * var(--u)); max-width: calc(820 * var(--u)); font-weight: 200; font-size: calc(40 * var(--u)); line-height: calc(46 / 40); letter-spacing: -.0125em; }
.body { margin-top: calc(32 * var(--u)); max-width: calc(640 * var(--u)); font-weight: 200; font-size: calc(22 * var(--u)); line-height: calc(28 / 22); }
.btns { margin-top: calc(40 * var(--u)); display: flex; gap: calc(16 * var(--u)); }
.btn { display: inline-flex; align-items: center; height: calc(44 * var(--u)); padding: 0 calc(22 * var(--u)); border: 1px solid var(--ink); font-size: calc(16 * var(--u)); line-height: 1; white-space: nowrap; transition: background-color .15s, color .15s; }
@media (hover: hover) { .btn:hover { background: var(--ink); color: var(--bg); } }
.btn--fill { background: var(--ink); color: var(--bg); }
@media (hover: hover) { .btn--fill:hover { background: transparent; color: var(--ink); } }

/* три колонки фактов */
.facts, .job { display: grid; grid-template-columns: calc(460 * var(--u)) calc(460 * var(--u)) calc(360 * var(--u)); }
.facts { margin-top: calc(116 * var(--u)); }
.facts h2, .fonts h2 { font-size: calc(13 * var(--u)); line-height: calc(20 / 13); font-weight: 400; margin-bottom: calc(6 * var(--u)); }
.facts .light { padding-right: calc(24 * var(--u)); }
.edu { margin-bottom: calc(10 * var(--u)); }

/* места работы */
.jobs { margin-top: calc(80 * var(--u)); }
.jobs__title { font-size: calc(13 * var(--u)); line-height: calc(20 / 13); font-weight: 400; margin-bottom: calc(16 * var(--u)); }
.job { align-items: start; min-height: calc(var(--h) * var(--u)); padding-top: calc(28 * var(--u)); border-top: 1px solid var(--rule); }
.jobs .job:last-child { border-bottom: 1px solid var(--rule); }
.job h2 { padding-right: calc(24 * var(--u)); font-weight: 200; font-size: calc(40 * var(--u)); line-height: calc(46 / 40); letter-spacing: -.0125em; }
.job__meta { padding: calc(10 * var(--u)) calc(40 * var(--u)) 0 0; font-size: calc(13 * var(--u)); line-height: calc(20 / 13); }
.job .light { padding-top: calc(6 * var(--u)); }

/* шрифты с Вовой */
.fonts { display: grid; grid-template-columns: calc(461 * var(--u)) calc(819 * var(--u)); margin-top: calc(76 * var(--u)); align-items: start; }
.fonts__text .light { max-width: calc(380 * var(--u)); }
.fonts__text .btn { margin-top: calc(100 * var(--u)); }
.fonts__img { width: calc(819 * var(--u)); height: calc(340 * var(--u)); }

/* конец */
.end { position: relative; margin-top: calc(87 * var(--u)); height: calc(277 * var(--u)); }
.end__big { font-weight: 500; font-size: calc(96 * var(--u)); line-height: calc(90 / 96); letter-spacing: -.026em; white-space: nowrap; }
.end__list { position: absolute; left: calc(920 * var(--u)); top: calc(15 * var(--u)); display: grid; row-gap: 0; }
.end__list dt { font-size: calc(13 * var(--u)); line-height: calc(20 / 13); margin-top: calc(18 * var(--u)); }
.end__list dt:first-child { margin-top: 0; }
.end__list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.copy { position: absolute; left: 0; bottom: calc(30 * var(--u)); font-size: calc(13 * var(--u)); color: var(--mute); }

/* телефон (макет Figma, страница «Мобилка», кадр «A1 · Обо мне») */
@media (max-width: 760px) {
  :root { --u: calc(100vw / 390); }
  .cols i:nth-child(n+3) { display: none; }
  .cols, .top { width: 100%; }
  .cols i:nth-child(1) { left: 20px; } .cols i:nth-child(2) { left: calc(100% - 20px); }
  .top { height: 72px; background: var(--bg); } .top__logo { left: 20px; top: 25px; font-size: 22px; }
  .top__nav { right: 20px; top: 32px; gap: 14px; font-size: 11px; }
  .top__nav { top: 26px; align-items: center; }
  .top__nav .lang { height: 24px; margin-left: 6px; }
  .top__nav .lang a { min-width: 30px; padding: 0 6px; }
  .page { width: 100%; padding: 96px 20px 0; }
  .title { font-size: 22vw; letter-spacing: -.03em; line-height: 1; }
  .end__big { font-size: min(20.5vw, 80px); letter-spacing: -.03em; line-height: .9; }
  .intro { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
  .photo { width: 100%; height: auto; aspect-ratio: 380 / 475; }
  .status { font-size: 14px; height: auto; padding: 9px 16px 9px 14px; gap: 10px; white-space: normal; }
  .lead { font-size: 26px; line-height: 1.2; margin-top: 16px; }
  .body { margin-top: 16px; }
  .body, .light { font-size: 18px; line-height: 1.35; }
  .btns { margin-top: 16px; flex-wrap: wrap; }
  .btn { height: 44px; font-size: 16px; padding: 0 20px; }
  .facts, .job, .fonts { grid-template-columns: 1fr; gap: 32px; }
  .facts { margin-top: 56px; }
  .facts h2, .fonts h2, .job__meta, .end__list dt { font-size: 12px; }
  .facts .light { padding-right: 0; }
  .edu { margin-bottom: 0; }
  .jobs { margin-top: 56px; }
  .job { min-height: 0; padding: 20px 0 28px; gap: 12px; }
  .job h2 { padding-right: 0; font-size: 30px; line-height: 1.15; }
  .job__meta { padding: 0; line-height: 1.5; }
  .job .light { padding-top: 0; }
  .fonts { margin-top: 56px; gap: 16px; }
  .fonts__text .light { max-width: none; }
  .fonts__text .btn { margin-top: 16px; }
  .fonts__img { width: 100%; height: auto; aspect-ratio: 819 / 340; }
  .end { height: auto; margin-top: 64px; padding-bottom: 64px; }
  .end__list { position: static; margin-top: 32px; }
  .end__list dt { margin-top: 0; padding-top: 14px; color: var(--mute); }
  .end__list dt:first-child { margin-top: 0; }
  .end__list dd { padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
  .end__list dd a { display: inline-block; padding: 8px 0 4px; }
  .copy { position: static; margin-top: 40px; display: block; }
}

/* касание */
@media (hover: none) {
  a, button { -webkit-tap-highlight-color: transparent; }
  .btn:active { background: var(--ink); color: var(--bg); transition-duration: .05s; }
  .top__nav a:active, .end__list a:active { opacity: .45; }
}