.page {
  width: var(--layout-width);
  margin: 0 auto;
  padding: var(--page-padding-y) 0;
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}

.card {
  background: var(--color-surface);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
}

.layout {
  display: grid;
  grid-template-columns: var(--layout-aside) 1fr;
  column-gap: var(--layout-gutter);
  align-items: start;
}

.profile__avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  background: var(--color-chip-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.profile__photo {
  width: var(--avatar-photo-size);
  height: var(--avatar-photo-size);
  border-radius: 50%;
  object-fit: cover;
}

.profile__name {
  font-size: var(--font-size-name);
  line-height: var(--line-height-name);
  font-weight: var(--font-weight-bold);
  font-variation-settings: "opsz" var(--optical-name);
}

.profile__headline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--layout-gutter);
  margin-top: var(--gap-headline);
}

.profile__position {
  font-size: var(--font-size-headline);
  line-height: var(--line-height-headline);
  font-weight: var(--font-weight-regular);
  font-variation-settings: "opsz" var(--optical-headline);
}

.profile__salary {
  font-size: var(--font-size-salary);
  line-height: var(--line-height-salary);
  font-weight: var(--font-weight-medium);
  font-variation-settings: "opsz" var(--optical-salary);
  white-space: nowrap;
}

.profile__tags {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  margin-top: var(--gap-meta);
}

.field {
  margin-top: var(--gap-field);
}

.field__label {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  color: var(--color-text-muted);
}

.field__value {
  font-size: var(--font-size-body);
  line-height: var(--line-height-value);
  margin-top: var(--gap-label-value);
  font-variation-settings: "opsz" var(--optical-body);
}

.field__value + .field__value {
  margin-top: var(--gap-links);
}

.field__text {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  margin-top: var(--gap-about);
  font-variation-settings: "opsz" var(--optical-body);
}

.section__title {
  font-size: var(--font-size-section);
  line-height: var(--line-height-value);
  font-weight: var(--font-weight-medium);
  font-variation-settings: "opsz" var(--optical-section);
  margin-bottom: var(--gap-section);
}

.entry + .entry {
  margin-top: var(--gap-entry);
}

.entry__duration,
.entry__title {
  font-size: var(--font-size-body);
  line-height: var(--line-height-value);
  font-weight: var(--font-weight-medium);
  font-variation-settings: "opsz" var(--optical-body);
}

.entry__dates,
.entry__meta {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  color: var(--color-text-muted);
  margin-top: var(--gap-label-value);
}

.entry__dates--course {
  margin-top: 2px;
}

.entry__description {
  margin-top: var(--gap-description);
}

.entry__description--course {
  margin-top: var(--gap-course-title);
}

.entry__text {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

.entry__text + .entry__text {
  margin-top: var(--gap-paragraph);
}

.entry__list {
  margin-top: var(--gap-list);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-variation-settings: "opsz" var(--optical-body);
}

.entry__item + .entry__item {
  margin-top: var(--gap-list-item);
}

.skills-row + .skills-row {
  margin-top: var(--gap-skills-row);
}

.langs {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lang);
}

.lang {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-variation-settings: "opsz" var(--optical-body);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--chip-gap);
}

.chip {
  background: var(--color-chip-bg);
  border-radius: var(--chip-radius);
  padding: var(--chip-padding-y) var(--chip-padding-x);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.chip:hover {
  background: var(--color-text);
  color: var(--color-surface);
}

.entry__item::before,
.letter__item::before {
  content: "• ";
  color: var(--color-bullet);
}

.flag {
  display: inline-flex;
  width: 21px;
  height: 15px;
  flex: none;
  margin-right: 8px;
  vertical-align: -0.16em;
}

.flag img {
  display: block;
  width: 100%;
  height: 100%;
}

.ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex: none;
  margin-right: 0.4em;
  vertical-align: -0.14em;
}

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

.contact {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45em;
}

.contacts__dot {
  color: var(--color-text-muted);
}

.marquee {
  overflow: hidden;
  border-radius: var(--marquee-radius);
  background: var(--color-accent);
  color: var(--color-accent-text);
  padding: var(--marquee-padding) 0;
  font-size: var(--marquee-font-size);
  line-height: var(--marquee-line);
  font-variation-settings: "opsz" var(--optical-caption);
}

.marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--marquee-fade),
    #000 calc(100% - var(--marquee-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--marquee-fade),
    #000 calc(100% - var(--marquee-fade)),
    transparent 100%
  );
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll var(--marquee-duration) linear infinite;

  will-change: transform;
  backface-visibility: hidden;
}

.marquee__group {
  display: flex;
  flex: none;
}

.marquee__item {
  white-space: nowrap;
  padding-right: var(--marquee-gap);
}

@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--marquee-shift, -50%), 0, 0); }
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 20px;
  padding: 18px var(--card-padding) 0;
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  color: var(--color-text-muted);
}

.footer__link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer__link:hover {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: var(--link-underline-offset);
  text-decoration-thickness: var(--link-underline-thickness);
}

.footer__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (max-width: 560px) {
  .footer {
    flex-direction: column;
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }

  .chip {
    transition: none;
  }
}

@media (max-width: 880px) {
  .page {
    width: auto;
    max-width: var(--layout-width);
    padding-left: 12px;
    padding-right: 12px;
  }

  .layout {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }

  .profile__headline {
    flex-direction: column;
    gap: var(--chip-gap);
  }
}

@media print {
  body {
    background: var(--color-surface);
  }

  .page {
    width: auto;
    padding: 0;
  }

  .card {
    break-inside: avoid;
  }
}