/* ==========================================================================
   Вика Кудрякова — портфолио. Главная.
   Все размеры сняты с макета шириной 1920px и заданы в долях ширины
   страницы: var(--u) = 1px макета при ширине 1920px.
   ========================================================================== */

:root {
  --bg: #F7F7F7;
  --text: #000;
  --grey: #969696;
  --rule: #9C9C9C;

  --sans: "Onest", "Helvetica Neue", Arial, system-ui, sans-serif;
  --serif: "EB Garamond", Garamond, "Times New Roman", Georgia, serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, p { margin: 0; font-weight: 400; }

a { color: inherit; text-decoration: none; }

/* Наведение и фокус: тонкая чёрная линия прорисовывается слева направо.
   Линия лежит под выносными элементами: базовая линия Onest — 0.97em от верха текста,
   низ «у» — ещё 0.226em, зазор ≈ 0.07em. Поле снизу нужно, чтобы линия не обрезалась;
   у строчного элемента оно не меняет высоту строки. */
.link-text {
  padding-bottom: .1em;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 1.27em / 0% 1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .25s cubic-bezier(.22, 1, .36, 1);
}
a:hover .link-text,
button:hover .link-text,
a:focus-visible .link-text,
button:focus-visible .link-text,
a[aria-current] .link-text { background-size: 100% 1px; }
/* Названия проектов на главной: при наведении только прокрутка, линия — лишь для фокуса */
.project__link:not(:focus-visible):hover .link-text { background-size: 0% 1px; }

/* «Прокрутка» текста при наведении (js/roll.js). Маска высотой в строку (1lh) с запасом
   по 0.15em сверху и снизу — чтобы не обрезать «у», «р», «д», «Й» и курсив; запас
   компенсирован отрицательными полями, поэтому размер текста и строки не меняется. */
.roll {
  display: inline-block;
  vertical-align: top;
  height: calc(1lh + .3em);
  margin: -.15em -.08em;
  padding: 0 .08em;
  overflow: hidden;
}
.roll__inner { display: block; }
.roll__line {
  display: block;
  padding: .15em 0;
  white-space: nowrap;
}
.roll__line[aria-hidden] { user-select: none; -webkit-user-select: none; }

/* Несколько строк одним блоком: маска по высоте текста, копия — сразу под ним */
.roll--block {
  display: block;
  height: auto;
}
.roll--block .roll__inner { position: relative; }
.roll--block .roll__line { white-space: normal; }
.roll--block .roll__line[aria-hidden] {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}

/* .roll--wide: на узких экранах эффекта нет, текст переносится как обычно */
@media (max-width: 899px) {
  .roll--wide,
  .roll--wide .roll__inner,
  .roll--wide .roll__line {
    display: inline;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    white-space: normal;
  }
  .roll--wide .roll__line[aria-hidden] { display: none; }
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid #000;
  outline-offset: 4px;
}
a:focus-visible,
button:focus-visible { outline: none; }

.serif { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* Контейнер, от ширины которого считаются все размеры */
.page {
  container-type: inline-size;
  min-height: 100vh;
  overflow-x: clip;
}
.page > * { --u: calc(100cqi / 1920); }

.page > *,
.page main > * {
  --margin: calc(50 * var(--u));
  --header-h: calc(78 * var(--u));       /* отступ содержимого страницы от верха */
  --header-bar-h: calc(66 * var(--u));   /* высота самой шапки: отступ сверху + строка ссылок + поле под ними */
}

#projects,
#contacts { scroll-margin-top: var(--header-h); }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-bar-h);
  background: var(--bg);
  padding: calc(var(--header-top, 38) * var(--u)) var(--margin) 0;
  font-size: calc(var(--fs-nav) * var(--u));
  line-height: 1.2;
  --fs-nav: 20;
}
.site-nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.site-nav__group {
  display: flex;
  gap: calc(22 * var(--u));
}
.site-nav__toggle {
  display: none;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: calc(1080 * var(--u));
  padding: calc(var(--name-top) * var(--u)) var(--margin) 0;
}

.hero__name {
  position: relative;
  z-index: 1;
  /* --name-size задаётся из main.js так, чтобы строка точно заполнила ширину */
  font-size: var(--name-size, calc(192.5 * var(--u)));
  line-height: 1;
  white-space: nowrap;
  font-family: var(--sans);
  letter-spacing: 0;
}
/* «вик» и «я» — Onest, «тори» и «кудрякова» — EB Garamond Italic.
   Размеры, трекинг и зазоры подобраны по макету. */
.hero__name-line { display: inline-block; margin-left: -0.054em; }
.hero__name .sans { letter-spacing: -0.052em; }
.hero__name .sans:first-child { margin-right: 0.0208em; }
.hero__name .serif { font-size: 1.2597em; letter-spacing: -0.0227em; }
.hero__name-tori { margin-right: -0.0433em; }
.hero__name-last { margin-left: 0.3031em; }

.hero__labels {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  margin-top: calc(var(--labels-gap) * var(--u));
}

.label {
  font-size: calc(var(--fs-label) * var(--u));
  line-height: 1;
  text-transform: uppercase;
  color: var(--grey);
  letter-spacing: 0;
}

.hero__smiley {
  position: absolute;
  z-index: 2;
  left: calc(963.5 * var(--u));
  top: calc(453 * var(--u));
  /* Холст шире самого смайлика: место под свечение и повороты */
  width: calc(460 * 1.6 * var(--u));
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero__smiley canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
}
.hero__smiley img.smiley-fallback {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 89%;   /* смайлик занимает ~70% картинки, холст в 1.6 раза больше смайлика */
  height: auto;
  mix-blend-mode: multiply;
}

.hero__lead {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--lead-top) * var(--u));
  z-index: 1;
  text-align: center;
  font-size: calc(var(--fs-lead) * var(--u));
  line-height: calc(var(--lh-lead) * var(--u));
}

.hero__resume {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--resume-top) * var(--u));
  z-index: 1;
  font-size: calc(var(--fs-small) * var(--u));
  line-height: 1;
}

.glint {
  position: absolute;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  margin: calc(-6 * var(--u)) 0 0 calc(-6 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle, #FBFBFB 0 55%, rgba(251, 251, 251, 0) 72%);
  pointer-events: none;
}
.glint--tl { left: calc(86 * var(--u));   top: 27.7%; }
.glint--tr { left: calc(1836 * var(--u)); top: 27.7%; }
.glint--bl { left: calc(86 * var(--u));   top: 91.2%; }
.glint--br { left: calc(1836 * var(--u)); top: 94.2%; }

/* ---------- Появление при загрузке и прокрутке (js/animations.js) ---------- */
/* Прячем только когда скрипт анимаций запущен: без JS текст виден сразу. */
html.js-anim :is(
  .site-nav li, .site-nav__toggle,
  .hero__name-line, .hero__labels .label, .hero__lead, .hero__resume, .hero__smiley,
  .project__media, .project__meta, .project__title,
  .statement__text, .statement__links a,
  .site-footer__label, .next-project__name, .next-project__thumb,
  .contacts__title, .contacts__list li,
  .page-intro__title, .page-intro__text, .work-row, .resume__body,
  .about-photo, .about-label, .about-row, .gallery__item,
  .case-head > *, .case-cover, .case-facts, .case-section > *
):not(.is-shown) { opacity: 0; }

.anim-line { display: block; }
.anim-char { display: inline-block; }

/* ---------- Hairline ---------- */

.rule {
  margin: 0 var(--margin);
  height: 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

/* ---------- Projects ---------- */

.projects {
  padding: calc(63 * var(--u)) var(--margin) calc(var(--projects-bottom) * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--projects-gap) * var(--u));
}
.project { width: calc(1131 * var(--u)); }
.project__link { display: block; }
.project__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #EDEDED;
}
.project__media img,
.project__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project__meta {
  margin-top: calc(var(--meta-gap) * var(--u));
  font-size: calc(var(--fs-meta) * var(--u));
  line-height: 1;
  text-transform: uppercase;
  color: var(--grey);
}
.project__title {
  margin-top: calc(var(--title-gap) * var(--u));
  font-size: calc(var(--fs-title) * var(--u));
  line-height: 1.2;
}

/* ---------- Statement ---------- */

.statement {
  /* последняя строка фразы стоит на одной высоте при любом числе строк */
  padding: calc((var(--statement-top) + var(--lh-statement) * (2 - var(--statement-lines, 2))) * var(--u)) var(--margin) calc(var(--statement-bottom) * var(--u));
  text-align: center;
}
.statement__text {
  font-size: calc(var(--fs-statement) * var(--u));
  line-height: calc(var(--lh-statement) * var(--u));
}
.statement__text .serif { font-size: 1.3438em; line-height: 0; }
.statement__links {
  display: flex;
  justify-content: center;
  gap: calc(27 * var(--u));
  margin-top: calc(var(--statement-links-gap) * var(--u));
  font-size: max(var(--fs-small-caps) * var(--u), 11px);
  line-height: 1;
  text-transform: uppercase;
}

/* ---------- Footer ---------- */

.site-footer {
  display: grid;
  grid-template-columns: 900fr 140fr 784fr;
  padding: 0 var(--margin) calc(var(--footer-bottom) * var(--u));
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}
/* В подвале нет подчёркиваний: наведение и фокус показывают прокрутку, детали и стрелки */
.site-footer .link-text { padding-bottom: 0; background-image: none; }
.site-footer__label {
  font-size: calc(var(--fs-label-sm) * var(--u));
  line-height: 1;
  text-transform: uppercase;
  color: var(--grey);
  padding-bottom: calc(var(--footer-label-gap) * var(--u));
  border-bottom: 1px solid var(--rule);
}

.next-project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(438 * var(--u));
  column-gap: max(40 * var(--u), 20px);   /* длинное название переносится, не доходя до картинки */
  align-items: start;
  margin-top: calc(25 * var(--u));
}
.next-project__name {
  padding-top: calc(2 * var(--u));
  font-size: calc(var(--fs-footer) * var(--u));
  line-height: 1;
}
/* Поля маски прокрутки не схлопываются с полем описания: при наведении ничего не сдвигается */
.next-project__name .link-text { display: flow-root; }
.next-project__thumb {
  display: block;
  aspect-ratio: 876 / 548;   /* как обложки на странице «Проекты» */
  overflow: hidden;
  background: #EDEDED;
}
.next-project__thumb img { width: 100%; height: 100%; object-fit: cover; }
.next-project__thumb.is-empty { background: #C9C9C9; }   /* у проекта ещё нет миниатюры */
.next-project__text,
.next-project__media { display: block; }

/* Маска для выезжающих деталей: запас по 0.2em, чтобы не резать выносные элементы */
.footer-mask {
  display: block;
  overflow: hidden;
  padding: .2em 0;
  margin: -.2em 0;
}
.footer-reveal {
  display: block;
  translate: 0 calc(100% + .4em);
  opacity: 0;
  transition: translate .6s var(--ease-io), opacity .6s ease;
}
.next-project:is(:hover, :focus-visible) .footer-reveal,
.contacts__list a:is(:hover, :focus-visible) .footer-reveal {
  translate: 0 0;
  opacity: 1;
  transition: translate .45s var(--ease-io) var(--d, 0ms), opacity .3s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms);
}

/* «Парфюмированная косметика» — под названием, тем же размером */
.next-project__desc {
  margin-top: calc(2.3 * var(--u) - .2em);
  font-size: calc(var(--fs-footer) * var(--u));
  line-height: 1.122;
}
/* «БРЕНДИНГ» слева под картинкой и «→» по её правому краю */
.next-project__meta {
  margin-top: calc(13.5 * var(--u) - .2em);
  font-size: calc(16 * var(--u));
  line-height: 1.3;
  text-transform: uppercase;
}
.next-project__meta .footer-reveal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.next-project__meta svg,
.contact-arrow svg {
  display: block;
  width: calc(18 * var(--u));
  height: calc(7 * var(--u));
  overflow: visible;
}
.next-project__meta svg { margin-bottom: calc(1.3 * var(--u)); }

.contacts {
  display: grid;
  grid-template-columns: 1fr calc(385 * var(--u));
  align-items: start;
  margin-top: calc(25 * var(--u));
}
.contacts__title {
  padding-top: calc(2 * var(--u));
  font-size: calc(var(--fs-footer) * var(--u));
  line-height: 1;
}
.contacts__list { margin-top: calc(var(--contact-list-shift) * var(--u)); }
.contacts__list li { position: relative; }

/* «Адрес скопирован» — рядом с «Почта», на той же базовой линии, место не занимает */
.copy-note {
  position: absolute;
  top: calc((var(--contact-pad-top) + 0.835 * (var(--fs-contact) - var(--fs-label-sm))) * var(--u));
  margin-left: calc(14 * var(--u));
  font-size: calc(var(--fs-label-sm) * var(--u));
  line-height: 1;
  color: var(--grey);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.copy-note.is-visible { opacity: 1; }
.contacts__list a {
  position: relative;
  display: block;
  padding: calc(var(--contact-pad-top) * var(--u)) 0 calc(var(--contact-pad-bottom) * var(--u));
  border-bottom: 1px solid var(--rule);
  font-size: calc(var(--fs-contact) * var(--u));
  line-height: 1;
  transition: border-color .3s ease;
}
.contacts__list a:is(:hover, :focus-visible) { border-bottom-color: #000; }
/* «→» в конце строки, на 5.5 единицы выше базовой линии текста */
.contact-arrow {
  position: absolute;
  right: 0;
  top: calc((var(--contact-pad-top) + 0.835 * var(--fs-contact) - 12.5) * var(--u));
}

/* Тач-экраны и узкие окна: детали и стрелки видны сразу */
@media (hover: none), (max-width: 899px) {
  .footer-reveal { translate: none; opacity: 1; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-reveal,
  .contacts__list a { transition: none !important; }
}

/* ---------- Типографские значения (калибровка по макету) ---------- */

.page {
  --header-top: 27;
  --name-top: 56;
  --labels-gap: 16.5;
  --fs-label: 20;
  --lead-top: 722.2;
  --fs-lead: 40;
  --lh-lead: 48.5;
  --resume-top: 932.5;
  --fs-small: 20;
  --projects-gap: 94.3;
  --projects-bottom: 66.6;
  --meta-gap: 24;
  --fs-meta: 17;
  --title-gap: 6.7;
  --fs-title: 28;
  --statement-top: 197.4;
  --statement-bottom: 191.4;
  --fs-statement: 56;
  --lh-statement: 67.4;
  --statement-links-gap: 47.1;
  --fs-small-caps: 16;
  --fs-label-sm: 16;
  --footer-label-gap: 19.6;
  --fs-footer: 36;
  --fs-contact: 20;
  --contact-pad-top: 23.2;
  --contact-pad-bottom: 16.8;
  --contact-list-shift: -27.6;
  --footer-bottom: 151.5;
}

/* ==========================================================================
   Планшет и телефон
   ========================================================================== */

@media (max-width: 1023px) {
  .page > *,
  .page main > * { --margin: 24px; --header-h: 53px; --header-bar-h: 44px; }

  .site-header {
    padding-top: 15px;
    font-size: 15px;
  }
  .site-nav__group { gap: 14px; }

  .hero {
    height: auto;
    padding-top: 96px;
    padding-bottom: 72px;
  }
  .hero__labels { margin-top: 14px; }
  .label { font-size: 12px; }

  .hero__smiley {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: min(100%, 61vw * 1.6);
    margin: -16vw auto -15vw;
  }

  .hero__lead,
  .hero__resume {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }
  .hero__lead {
    font-size: 28px;
    line-height: 1.22;
  }
  .hero__resume {
    display: table;
    margin: 32px auto 0;
    font-size: 15px;
  }

  .projects {
    padding: 48px var(--margin) 56px;
    gap: 56px;
  }
  .project { width: 100%; }
  .project__meta { margin-top: 16px; font-size: 12px; line-height: 1.4; }
  .project__title { margin-top: 6px; font-size: 20px; line-height: 1.25; }

  .statement { padding: 96px var(--margin) 104px; }
  .statement__text { font-size: 32px; line-height: 1.25; }
  .statement__links { gap: 20px; margin-top: 28px; font-size: 11px; }

  .site-footer {
    grid-template-columns: 1fr;
    row-gap: 56px;
    padding-bottom: 64px;
  }
  .site-footer__gap { display: none; }
  .site-footer__label { font-size: 12px; padding-bottom: 12px; }
  .next-project,
  .contacts {
    grid-template-columns: minmax(0, 1fr) 52%;
    column-gap: 12px;
    margin-top: 16px;
  }
  .next-project__name,
  .contacts__title { font-size: 26px; padding-top: 0; }
  .next-project__desc { margin-top: calc(4px - .2em); font-size: 26px; }
  .next-project__meta { margin-top: calc(10px - .2em); font-size: 12px; }
  .next-project__meta svg,
  .contact-arrow svg { width: 18px; height: 7px; }
  .next-project__meta svg { margin-bottom: 1px; }
  .contacts__list { margin-top: -10px; }
  .contacts__list a { padding: 10px 0 12px; font-size: 15px; }
  .contact-arrow { top: 10.5px; }
  .copy-note { top: 12.5px; margin-left: 10px; font-size: 12px; }
}

@media (max-width: 599px) {
  .page > *,
  .page main > * { --margin: 16px; --header-h: 47.6px; --header-bar-h: 39px; }

  .site-header { padding-top: 12px; font-size: 14px; }
  .site-nav { position: relative; }
  .site-nav__group { gap: 12px; }
  .site-nav__toggle { display: block; }
  .js .site-nav__group--right {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    padding: 24px 0 14px 32px;
    white-space: nowrap;
    background: var(--bg);
  }
  .js .site-nav__group--right.is-open { display: flex; }
  /* без JS меню просто остаётся строкой справа, а кнопка не нужна */
  html:not(.js) .site-nav__toggle { display: none; }
  html:not(.js) .site-nav__group--right { gap: 12px; }

  .hero { padding-top: 76px; padding-bottom: 56px; }
  .hero__labels { margin-top: 10px; }
  .label { font-size: 10px; }
  .hero__smiley { margin: -12vw auto -11vw; }
  .hero__lead { font-size: 20px; line-height: 1.25; }
  .hero__resume { margin-top: 24px; font-size: 14px; }

  .projects { padding: 32px var(--margin) 40px; gap: 40px; }
  .project__meta { margin-top: 12px; font-size: 10px; }
  .project__title { font-size: 16px; }

  .statement { padding: 72px var(--margin) 80px; }
  .statement__text { font-size: 22px; }
  .statement__links { margin-top: 20px; font-size: 11px; }

  .site-footer { row-gap: 48px; padding-bottom: 48px; }
  .site-footer__label { font-size: 10px; padding-bottom: 10px; }
  .next-project__name,
  .contacts__title { font-size: 20px; }
  .next-project__desc { font-size: 16px; }
  .next-project__meta { font-size: 10px; }
  .contacts__list a { font-size: 14px; }
  .contact-arrow { top: 9.7px; }
  .copy-note { top: 13.3px; font-size: 10px; }
}

/* ==========================================================================
   Страница «Проекты»
   ========================================================================== */

.page-intro {
  padding: calc(198.5 * var(--u)) var(--margin) 0;
  text-align: center;
}
.page-intro__title {
  font-size: calc(var(--fs-statement) * var(--u));
  line-height: calc(var(--lh-statement) * var(--u));
}
.page-intro__title .serif { font-size: 1.3438em; line-height: 0; }
.page-intro__text {
  margin-top: calc(47.5 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: calc(22.2 * var(--u));
  color: var(--grey);
}

.work {
  position: relative;
  padding: calc(106.1 * var(--u)) var(--margin) 0;   /* снизу — заключительный блок */
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}
.work-list { list-style: none; margin: 0; padding: 0; }

/* Строка: номер, название, описание, категория, стрелка. Базовая линия текста —
   40 единиц от верха строки; ячейки сдвинуты так, чтобы на неё встать. */
.work-row__link {
  position: relative;
  display: grid;
  grid-template-columns:
    calc(229.2 * var(--u)) calc(346.8 * var(--u)) calc(923.5 * var(--u)) minmax(0, 1fr) auto;
  align-items: start;
  height: calc(66 * var(--u));
  border-bottom: 1px solid var(--grey);
  transition: border-color .3s ease;
}
.work-row__num {
  margin: calc(24.73 * var(--u)) 0 0 calc(-1.9 * var(--u));
  font-size: calc(15.5 * var(--u));
  line-height: 1.3;
  color: var(--grey);
  transition: color .3s ease;
}
.work-row__mask {
  display: block;
  overflow: hidden;
  line-height: 1.3;
}
.work-row__name,
.work-row__desc {
  margin-top: calc(20.3 * var(--u));
  font-size: calc(20 * var(--u));
}
.work-row__name { display: block; line-height: 1.3; white-space: nowrap; }
.work-row__cat {
  margin-top: calc(24.24 * var(--u));
  font-size: calc(16 * var(--u));
  text-transform: uppercase;
}
.work-row__arrow {
  margin-top: calc(29.5 * var(--u));
  line-height: 0;
}
.work-row__arrow svg {
  display: block;
  width: calc(18 * var(--u));
  height: calc(7 * var(--u));
  overflow: visible;
}


/* Описание, категория и стрелка: в покое спрятаны под маской */
.work-row__reveal {
  display: block;
  white-space: nowrap;
  translate: 0 100%;
  opacity: 0;
  transition: translate .6s var(--ease-io), opacity .6s ease;
}

/* Превью: фиксированная колонка (x 1088 при ширине 1920), по центру строки по вертикали */
.work-preview {
  position: absolute;
  z-index: 2;
  left: calc(1038 * var(--u));
  top: calc(50% - 136.875 * var(--u));
  width: calc(438 * var(--u));
  aspect-ratio: 1.6;
  overflow: hidden;
  background: #EDEDED;
  pointer-events: none;
  opacity: 0;
  scale: 1.04;
  transition: opacity .6s ease, scale .6s ease;
}
.work-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Активная строка (наведение или фокус с клавиатуры) */
.work-row__link.is-active { border-bottom-color: #000; }
.is-active .work-row__num { color: #000; }
.is-active .work-row__reveal {
  translate: 0 0;
  opacity: 1;
  /* прозрачность набирается быстро, чтобы при быстром проходе по списку оставался шлейф */
  transition: translate .45s var(--ease-io) var(--d, 0ms), opacity .3s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms);
}
.is-active .work-preview {
  z-index: 3;
  opacity: 1;
  scale: 1;
  transition: opacity .3s ease, scale .3s ease;
}
/* текст активной строки — над превью, остальные строки — под ним */
.is-active .work-row__num,
.is-active .work-row__name,
.is-active .work-row__mask { position: relative; z-index: 4; }

@media (prefers-reduced-motion: reduce) {
  .work-row__link,
  .work-row__num,
  .work-row__reveal,
  .work-preview { transition: none !important; }
}

/* Тач-экраны и узкие окна: наведения нет — всё видно сразу, без превью */
@media (hover: none), (max-width: 899px) {
  .work-row__reveal { translate: none; opacity: 1; transition: none; }
  .work-preview { display: none; }
}

@media (max-width: 899px) {
  .page-intro { padding-top: 120px; }
  .page-intro__title { font-size: 32px; line-height: 1.25; }
  .page-intro__text { margin-top: 24px; font-size: 15px; line-height: 1.35; }

  .work { padding: 56px var(--margin) 0; }
  .work-row__link {
    grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1.3fr) 112px 28px;
    column-gap: 16px;
    align-items: baseline;
    height: auto;
    padding: 18px 0;
  }
  .work-row__num,
  .work-row__name,
  .work-row__desc,
  .work-row__cat,
  .work-row__arrow { margin: 0; }
  .work-row__mask { overflow: visible; }
  .work-row__num { font-size: 12px; }
  .work-row__name,
  .work-row__desc { font-size: 16px; }
  .work-row__name { white-space: normal; }
  .work-row__reveal { white-space: normal; }
  .work-row__cat { font-size: 12px; }
  .work-row__arrow { justify-self: end; align-self: center; }
  .work-row__arrow svg { width: 18px; height: 7px; }
}

@media (max-width: 599px) {
  .page-intro { padding-top: 96px; }
  .page-intro__title { font-size: 24px; }
  .page-intro__text { font-size: 13px; }

  .work { padding: 40px var(--margin) 0; }
  .work-row__link {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    grid-template-areas:
      "num name cat"
      ".   desc arrow";
    column-gap: 10px;
    row-gap: 6px;
    padding: 16px 0 14px;
  }
  .work-row__num { grid-area: num; font-size: 11px; }
  .work-row__name { grid-area: name; font-size: 17px; }
  .work-row__desc { grid-area: desc; font-size: 14px; color: var(--grey); }
  .work-row__cat { grid-area: cat; font-size: 11px; text-align: right; }
  .work-row__arrow { grid-area: arrow; }
}

/* ==========================================================================
   Страница «Резюме» (PDF.js)
   ========================================================================== */

.resume {
  padding: calc(140 * var(--u)) var(--margin) calc(190 * var(--u));
}
.resume__status {
  text-align: center;
  font-size: calc(var(--fs-label-sm) * var(--u));
  line-height: 1;
  color: var(--grey);
}
.resume__status:empty { display: none; }
.resume__status a { color: var(--text); }
.resume__pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(24 * var(--u));
}
.resume__page {
  position: relative;
  width: min(100%, 1100px);
  --scale-factor: 1;
}
.resume__page canvas {
  display: block;
  width: 100%;
  height: auto;
}
.resume__download {
  display: table;
  margin: calc(40 * var(--u)) auto 0;
  font-size: calc(var(--fs-small) * var(--u));
  line-height: 1;
}

/* Текстовый слой PDF.js: невидимый текст поверх страницы, чтобы его можно было выделить.
   Правила взяты из pdfjs-dist 4.10.38, web/pdf_viewer.css. */
.textLayer {
  position: absolute;
  text-align: initial;
  inset: 0;
  overflow: clip;
  opacity: 1;
  line-height: 1;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  caret-color: CanvasText;
  z-index: 0;
}
.textLayer :is(span, br) {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}
.textLayer > :not(.markedContent),
.textLayer .markedContent span:not(.markedContent) { z-index: 1; }
.textLayer span.markedContent { top: 0; height: 0; }
.textLayer ::selection { background: rgba(0, 0, 255, .25); }
.textLayer br::selection { background: transparent; }
.textLayer .endOfContent {
  display: block;
  position: absolute;
  inset: 100% 0 0;
  z-index: 0;
  cursor: default;
  user-select: none;
}
.textLayer.selecting .endOfContent { top: 0; }

@media (max-width: 1023px) {
  .resume { padding: 96px var(--margin) 96px; }
  .resume__status { font-size: 12px; }
  .resume__pages { gap: 12px; }
  .resume__download { margin-top: 28px; font-size: 15px; }
}
@media (max-width: 599px) {
  .resume { padding-top: 76px; }
  .resume__download { font-size: 14px; }
}

/* ==========================================================================
   Страница «Обо мне»
   ========================================================================== */

/* Поля этой страницы — 48 единиц (фото и линии от x 48 до 1872) */
.page .about > * { --margin: calc(48 * var(--u)); }

.about-intro .page-intro__text { margin-top: calc(46.5 * var(--u)); }

.about-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(24 * var(--u));
  margin-top: calc(150.4 * var(--u));
  padding: 0 var(--margin);
}
.about-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.about-section {
  padding: calc(123.4 * var(--u)) var(--margin) 0;
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}
.about-section + .about-section { padding-top: calc(121.4 * var(--u)); }
.about-section:last-child { padding-bottom: calc(190 * var(--u)); }
.about-section--half > * { max-width: calc(900 * var(--u)); }
/* линия над заключительным блоком — с прежним отступом от галереи */
.about > .rule { margin-top: max(190 * var(--u), 72px); }

.about-label {
  font-size: calc(16 * var(--u));
  line-height: 1;
  text-transform: uppercase;
  color: var(--grey);
  padding-bottom: calc(21.6 * var(--u));
  border-bottom: 1px solid var(--grey);
}

.skills,
.teaching { list-style: none; margin: 0; padding: 0; }

/* Строка: номер (или год), название, описание. Номер и название стоят внизу строки,
   описание — сверху. */
.about-row {
  position: relative;
  display: grid;
  grid-template-columns: calc(231 * var(--u)) calc(692 * var(--u)) minmax(0, 1fr);
  align-items: start;
  height: calc(102 * var(--u));
  border-bottom: 1px solid var(--grey);
  transition: border-color .3s ease;
}
.about-row:focus-visible { outline: none; }
.about-row__num {
  margin-top: calc(61.33 * var(--u));
  font-size: calc(15.5 * var(--u));
  line-height: 1.3;
  color: var(--grey);
  transition: color .3s ease;
}
.skill-row__name {
  display: block;
  margin-top: calc(39.2 * var(--u));
  font-size: calc(40 * var(--u));
  line-height: 1.2;
  white-space: nowrap;
}
.about-row__mask {
  display: block;
  overflow: hidden;
  padding: .2em 0;
  margin: -.2em 0;
}
.skill-row__desc {
  margin-top: calc(19.9 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: calc(22 * var(--u));
  color: var(--grey);
}

.teach-row {
  grid-template-columns: calc(231 * var(--u)) minmax(0, 1fr) auto;
  height: calc(103 * var(--u));
}
.teach-row .about-row__num { margin-top: calc(65.2 * var(--u)); }
.teach-row__title {
  display: block;
  margin-top: calc(18.8 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: calc(22 * var(--u));
}
.teach-row__more {
  margin-top: calc(65.24 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}
.teach-row__more svg {
  display: inline-block;
  width: calc(18 * var(--u));
  height: calc(7 * var(--u));
  margin-left: calc(15.5 * var(--u));
  vertical-align: calc(4 * var(--u));
  overflow: visible;
}

/* Описание и «Статья →»: в покое спрятаны под маской */
.about-row__reveal {
  display: block;
  translate: 0 calc(100% + .4em);
  opacity: 0;
  transition: translate .6s var(--ease-io), opacity .6s ease;
}
.about-row.is-active { border-bottom-color: #000; }
.about-row.is-active .about-row__num { color: #000; }
.about-row.is-active .about-row__reveal {
  translate: 0 0;
  opacity: 1;
  transition: translate .45s var(--ease-io), opacity .3s cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .about-row,
  .about-row__num,
  .about-row__reveal { transition: none !important; }
}

/* Галерея: ряды по высоте выравниваются сами — ширина картины пропорциональна её
   соотношению сторон (--ar), поэтому ряд всегда ровно заполняет ширину. */
.gallery {
  display: flex;
  flex-direction: column;
  gap: calc(19 * var(--u));
  margin-top: calc(39 * var(--u));
}
.gallery__row {
  display: flex;
  gap: calc(20.5 * var(--u));
}
.gallery__item {
  flex: var(--ar) 1 0;
  min-width: 0;
  aspect-ratio: var(--ar);
  margin: 0;
}
.gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Тач-экраны и узкие окна: описания и «Статья →» видны сразу */
@media (hover: none), (max-width: 899px) {
  .about-row__reveal { translate: none; opacity: 1; transition: none; }
}

@media (max-width: 1023px) {
  .page .about > * { --margin: 24px; }
}

@media (max-width: 899px) {
  .about-intro .page-intro__text { margin-top: 24px; }
  .about-photos { margin-top: 48px; gap: 12px; }
  .about-section,
  .about-section + .about-section { padding-top: 72px; }
  .about-section:last-child { padding-bottom: 96px; }
  .about-section--half > * { max-width: none; }
  .about-label { font-size: 12px; padding-bottom: 12px; }

  .about-row {
    grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.3fr);
    column-gap: 16px;
    align-items: baseline;
    height: auto;
    padding: 20px 0;
  }
  .teach-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .about-row__num,
  .skill-row__name,
  .skill-row__desc,
  .teach-row__title,
  .teach-row__more { margin-top: 0; }
  .about-row__num,
  .teach-row .about-row__num { margin-top: 0; font-size: 12px; }
  .skill-row__name { font-size: 24px; white-space: normal; }
  .skill-row__desc { font-size: 15px; line-height: 1.35; }
  .skill-row__desc br,
  .teach-row__title br { display: none; }
  .teach-row__title { font-size: 16px; line-height: 1.3; }
  .teach-row__more { font-size: 12px; }
  .teach-row__more svg { width: 18px; height: 7px; margin-left: 10px; vertical-align: 2px; }

  .gallery { margin-top: 24px; gap: 10px; }
  .gallery__row { gap: 10px; }
}

@media (max-width: 599px) {
  .page .about > * { --margin: 16px; }
  .about-photos { margin-top: 40px; gap: 8px; }
  .about-section,
  .about-section + .about-section { padding-top: 56px; }
  .about-section:last-child { padding-bottom: 72px; }
  .about-label { font-size: 10px; padding-bottom: 10px; }

  /* описание — под названием, номер слева */
  .about-row {
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 8px;
    padding: 16px 0;
  }
  .skill-row__desc { grid-column: 2; }
  .teach-row { grid-template-columns: 28px minmax(0, 1fr); }
  .teach-row__more { grid-column: 2; }
  .about-row__num,
  .teach-row .about-row__num { font-size: 11px; }
  .skill-row__name { font-size: 20px; }
  .skill-row__desc { font-size: 14px; }
  .teach-row__title { font-size: 15px; }
  .teach-row__more { font-size: 11px; }

  .gallery { gap: 8px; }
  .gallery__row { gap: 8px; }
}

/* ==========================================================================
   Страница проекта (кейс): projects/*.html
   Общая колонка 1130 единиц по центру (x 395–1525 при ширине 1920),
   на узких экранах — вся ширина с обычными полями.
   ========================================================================== */

/* Название проекта в шапке: на той же строке, что ссылки, над левым краем колонки */
.site-nav { position: relative; }
.site-nav__project {
  position: absolute;
  top: 0;
  left: calc(395 * var(--u) - var(--margin));
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
}
@media (max-width: 899px) {
  .site-nav__project { display: none; }
}

.case {
  padding: calc(var(--header-h) + 16.3 * var(--u)) 0 max(190 * var(--u), 72px);
}
.case > * {
  width: calc(1130 * var(--u));
  margin-inline: auto;
}

/* Мета и заголовок — как у карточек проектов на главной */
.case-meta {
  font-size: max(17 * var(--u), 12px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--grey);
}
.case-title {
  margin-top: max(7.8 * var(--u), 6px);
  font-size: max(28 * var(--u), 20px);
  line-height: 1.2;
}
/* Факты под обложкой: роль, срок, команда… В ряд, на телефоне друг под другом */
.case-facts {
  display: flex;
  gap: max(40 * var(--u), 24px);
  margin-top: max(56 * var(--u), 28px);
  margin-bottom: 0;
}
.case-facts__item { flex: 1 1 0; min-width: 0; }
.case-facts dd {
  margin: max(12 * var(--u), 8px) 0 0;
  font-size: max(16 * var(--u), 15px);
  line-height: 1.4;
}
.case-cover { margin-top: max(46.3 * var(--u), 24px); }

/* Плейсхолдер картинки/видео: серый блок 16:9 с подписью, что здесь будет */
.case-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--ar, 16 / 9);   /* --ar ставит js/case.js из data-width / data-height */
  overflow: hidden;
  background: #C9C9C9;
}
.case-media__label {
  max-width: 80%;
  padding: 1em;
  text-align: center;
  font-size: max(20 * var(--u), 14px);
  line-height: 1.3;
}
/* Картинка или видео лежит поверх серого блока: если файл не загрузится, остаётся подпись */
.case-media img,
.case-media video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: max(20 * var(--u), 12px);
}
.case-pair--3 { grid-template-columns: repeat(3, 1fr); }   /* три в ряд; четыре (--4) — сеткой 2×2 */
.case-pair:not(.case-pair--fit) > .case-media { aspect-ratio: 16 / 9; }

/* Пара разных пропорций одной высоты: ширина каждого блока пропорциональна его --ar,
   ряд ровно заполняет колонку, ничего не обрезается */
.case-pair--fit {
  display: flex;
}
.case-pair--fit > .case-media {
  flex: var(--ar, 1.7778) 1 0;
  min-width: 0;
}

/* Разделы: серая подпись, линия, текст */
.case-section { padding-top: max(120 * var(--u), 64px); }
.case-facts + .case-section { padding-top: max(56 * var(--u), 28px); }

.case-label {
  font-size: max(16 * var(--u), 11px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--grey);
}
.case-rule {
  height: 0;
  margin: max(21.6 * var(--u), 12px) 0 0;
  border: 0;
  border-top: 1px solid var(--grey);
}

.case-section > p {
  max-width: max(720 * var(--u), 576px);   /* строки остаются удобными для чтения */
  font-size: max(16 * var(--u), 15px);
  line-height: 1.4;
}
/* Тезис: крупная ключевая мысль в начале раздела или перед подзаголовком */
.case-section > .case-thesis {
  font-size: max(24 * var(--u), 20px);
  line-height: 1.3;
}
/* Подзаголовок выглядит как подпись раздела, но без линии */
.case-subhead {
  font-size: max(16 * var(--u), 11px);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: var(--grey);
}
.case-rule + * { margin-top: max(18.9 * var(--u), 14px); }
.case-section > p + p { margin-top: .8em; }
.case-section > .case-thesis + p { margin-top: max(16 * var(--u), 12px); }
.case-section > p + .case-thesis,
.case-section > * + .case-subhead { margin-top: max(32 * var(--u), 24px); }
.case-section > .case-subhead + p { margin-top: max(18.9 * var(--u), 14px); }
.case-section > * + :is(.case-media, .case-pair),
.case-section > :is(.case-media, .case-pair) + * { margin-top: max(56 * var(--u), 28px); }

@media (max-width: 1199px) {
  .case { padding-top: calc(var(--header-h) + 24px); }
  .case > * {
    width: auto;
    margin-inline: var(--margin);
  }
}
@media (max-width: 599px) {
  .case-pair,
  .case-pair--3 { grid-template-columns: 1fr; }
  .case-pair--fit { flex-direction: column; }
  .case-pair--fit > .case-media { flex: none; width: 100%; }
  .case-section > p { max-width: none; }
  .case-facts { flex-direction: column; gap: 16px; }
}

/* ==========================================================================
   Страница 404. Размеры сняты с макета design/404-mockup.png: --s — единица макета,
   на телефоне цифры и смайлик вписываются в ширину с полями.
   ========================================================================== */
.not-found {
  --s: var(--u);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding-top: calc(30.8 * var(--u));   /* на макете блок чуть ниже центра экрана */
  text-align: center;
}
/* Сцена — от левого края левой четвёрки до правого края правой */
.not-found__code {
  position: relative;
  left: calc(1.5 * var(--s));
  flex: none;
  width: calc(851 * var(--s));
  height: calc(344.5 * var(--s));
  font-size: calc(392.5 * var(--s));
  line-height: 1;
}
.not-found__digit {
  position: absolute;
  left: calc(-16.5 * var(--s));
  top: calc(-15.3 * var(--s));
}
.not-found__digit--right { left: calc(617 * var(--s)); }
/* В файле вокруг смайлика запас для бликов */
.not-found__smile {
  position: absolute;
  left: calc(234.1 * var(--s));
  top: calc(-50.9 * var(--s));
  width: calc(374.1 * var(--s));
  height: auto;
  max-width: none;
  pointer-events: none;
}
.not-found__text {
  margin-top: calc(107.2 * var(--u));
  font-size: calc(var(--fs-lead) * var(--u));
  line-height: 1.2;
  text-wrap: balance;
}
.not-found__link {
  margin-top: calc(45 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: 1.2;
}
@media (max-width: 1023px) {
  .not-found { --s: .6px; padding: 53px var(--margin) 0; }
  .not-found__text { margin-top: 56px; font-size: 28px; line-height: 1.22; }
  .not-found__link { margin-top: 24px; font-size: 15px; }
}
@media (max-width: 599px) {
  .not-found { --s: calc((100cqi - 32px) / 851); padding-top: 47.6px; }
  .not-found__code { left: 0; }
  .not-found__text { margin-top: 40px; font-size: 20px; line-height: 1.25; }
  .not-found__link { margin-top: 20px; font-size: 14px; }
}