/* Страница «Обо мне» */
.about-page {
  --about-ink: var(--color-ink);
  --about-muted: var(--color-body);
  --about-line: rgba(64, 74, 79, .16);
  color: var(--about-ink);
  background: var(--color-canvas);
  font-family: var(--font-body);
  overflow-x: clip;
}
.about-wrap { width: var(--layout-content-width); margin-inline: auto; }
.about-intro {
  position: relative;
  overflow: hidden;
  background: linear-gradient(125deg, #e9eceb, #f0f1ef 65%, #e7ebeb);
  padding: clamp(124px, 10.5vw, 151px) 0 clamp(55px, 6vw, 80px);
}
.about-intro__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(38px, 7vw, 95px);
  align-items: center;
}
.about-intro__layout > div:first-child { min-width: 0; }
.about-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 17px;
  color: #687784;
  font: 600 var(--text-kicker)/1.5 var(--font-body);
}
.about-kicker::before {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #83939e;
  content: '';
}
.about-intro h1 {
  margin: 0 0 23px;
  color: #30363a;
  font: 400 clamp(38px, 3.7vw, 52px)/1.16 var(--font-display);
  letter-spacing: -.025em;
}
.about-intro__lead {
  max-width: 540px;
  margin: 0;
  color: #5d6b72;
  font: 400 var(--text-lead)/1.75 var(--font-body);
}
.about-intro__portrait {
  width: min(100%, 425px);
  height: clamp(370px, 37vw, 460px);
  margin: 0;
  justify-self: end;
  overflow: hidden;
  border-radius: 15px;
  background: #d9dddc;
}
.about-intro__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.about-section { padding: clamp(65px, 6.5vw, 93px) 0; scroll-margin-top: 95px; }
.about-section--tint { background: #eaecea; }
.about-section h2 {
  max-width: 800px;
  margin: 0 0 23px;
  color: var(--about-ink);
  font: 400 var(--text-heading-compact)/1.19 var(--font-display);
  letter-spacing: -.02em;
  text-wrap: balance;
}
.about-section p { color: var(--about-muted); font: 400 var(--text-body)/1.76 var(--font-body); }
.about-profile {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: clamp(39px, 7vw, 100px);
  align-items: start;
}
.about-profile__aside { min-width: 0; margin: 0; }
.about-profile__details {
  padding: 23px 25px;
  border: 1px solid rgba(64, 74, 79, .06);
  border-radius: 15px;
  background: #e9ecea;
}
.about-profile__details > p {
  margin: 0 0 20px;
  color: #48575d;
  font: 400 clamp(19px, 1.7vw, 23px)/1.4 var(--font-display);
}
.about-profile__details dl { margin: 0; }
.about-profile__details dl div { padding: 14px 0; border-top: 1px solid var(--about-line); }
.about-profile__details dt { color: #77848c; font: 500 12px/1.5 var(--font-body); }
.about-profile__details dd { margin: 5px 0 0; color: #47555d; font: 400 14px/1.6 var(--font-body); overflow-wrap: anywhere; }
.about-profile__details a { color: inherit; text-underline-offset: 4px; }
.about-profile__body { min-width: 0; }
.about-section .about-profile__statement {
  max-width: 750px;
  margin: 24px 0 21px;
  color: #48565d;
  font: 400 clamp(18px, 1.65vw, 22px)/1.65 var(--font-display);
}
.about-profile blockquote {
  max-width: 760px;
  margin: 28px 0 38px;
  padding: 22px 25px;
  border: 0;
  border-radius: 14px;
  background: #e9ecea;
  color: #53636c;
  font: italic 400 clamp(17px, 1.5vw, 20px)/1.65 var(--font-display);
}
.about-experience { margin-top: 30px; }
.about-experience h3 {
  margin: 0 0 23px;
  color: #39474d;
  font: 400 var(--text-subheading)/1.22 var(--font-display);
}
.about-experience h4 {
  margin: 23px 0 9px;
  color: #425159;
  font: 600 14px/1.5 var(--font-body);
}
.about-experience p { max-width: 690px; margin: 0 0 12px; }
.about-skills {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 7vw, 90px);
  align-items: start;
}
.about-skills > div:first-child > p:last-child { max-width: 430px; margin: 0; }
.about-skills__list { min-width: 0; }
.about-skills__list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 20px;
  padding: 13px 0 17px;
  border-bottom: 1px solid var(--about-line);
  color: #42515a;
  font: 500 14px/1.6 var(--font-body);
}
.about-skills__list > div:first-child { padding-top: 0; }
.about-skills__list span[data-percent-target] { color: #657580; font-variant-numeric: tabular-nums; }
.about-skills__list meter {
  display: block;
  width: 100%;
  height: 5px;
  grid-column: 1 / -1;
  border-radius: 5px;
  overflow: hidden;
  background: #d4dadb;
  appearance: none;
}
.about-skills__list meter::-webkit-meter-bar { border: none; border-radius: 5px; background: #d4dadb; }
.about-skills__list meter::-webkit-meter-optimum-value { border-radius: 5px; background: #788b95; }
.about-skills__list meter::-moz-meter-bar { border-radius: 5px; background: #788b95; }
.about-benefits__heading { max-width: 870px; }
.about-benefits__heading > p:last-child { max-width: 740px; margin: 0; }
.about-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}
.about-benefits article {
  display: flex;
  min-height: 130px;
  align-items: center;
  padding: 27px 30px;
  border-radius: 15px;
  background: #e8ebed;
}
.about-benefits article:nth-child(2),
.about-benefits article:nth-child(3) { background: #eeece9; }
.about-benefits article > span { display: none; }
.about-benefits h3 {
  margin: 0;
  max-width: 400px;
  color: #3e4c53;
  font: 400 clamp(21px, 2vw, 27px)/1.32 var(--font-display);
  text-wrap: balance;
}
.about-page a:focus-visible { outline: 2px solid #72868e; outline-offset: 4px; }
html.intro-pending .about-page { visibility: hidden; }
html.page-reveal-ready .about-page [data-page-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .9s ease, transform 1s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--page-reveal-delay, 0ms);
}
html.page-reveal-ready .about-page [data-page-reveal="right"] { transform: translate3d(19px, 5px, 0); }
html.page-reveal-ready .about-page [data-page-reveal].is-visible { opacity: 1; transform: none; }
@media (max-width: 850px) {
  .about-profile, .about-skills { grid-template-columns: minmax(0, 1fr); gap: 27px; }
  .about-profile__aside { order: 2; }
  .about-profile__body { order: 1; }
  .about-profile__details { display: flex; align-items: flex-start; gap: 28px; }
  .about-profile__details > p { max-width: 270px; margin: 0; }
  .about-profile__details dl { flex: 1; }
}
@media (max-width: 700px) {
  .about-intro { padding: 113px 0 52px; }
  .about-intro__layout { grid-template-columns: 1fr; gap: 26px; }
  .about-intro h1 { font-size: clamp(36px, 8vw, 43px); margin-bottom: 17px; }
  .about-intro__portrait { justify-self: stretch; width: 100%; height: 340px; max-width: 575px; }
  .about-section { padding: 60px 0 67px; }
  .about-section h2 { font-size: var(--text-heading-compact); }
  .about-profile__details { display: block; }
  .about-profile__details > p { max-width: none; margin-bottom: 18px; }
}
@media (max-width: 580px) {
  .about-intro { padding: 105px 0 45px; }
  .about-kicker { margin-bottom: 13px; }
  .about-intro h1 { font-size: clamp(34px, 8.4vw, 40px); }
  .about-intro__portrait { height: clamp(295px, 85vw, 360px); border-radius: 13px; }
  .about-section { padding: 53px 0 61px; }
  .about-section h2 { font-size: clamp(30px, 7.8vw, 36px); }
  .about-section .about-profile__statement { font-size: 18px; }
  .about-profile blockquote { padding: 20px; margin: 22px 0 30px; }
  .about-profile__details { padding: 20px; }
  .about-skills { gap: 29px; }
  .about-benefits { grid-template-columns: 1fr; gap: 10px; margin-top: 26px; }
  .about-benefits article { min-height: 86px; padding: 20px; }
  .about-benefits h3 { font-size: clamp(21px, 5.8vw, 25px); }
}
@media (prefers-reduced-motion: reduce) {
  html.intro-pending .about-page { visibility: visible; }
  html.page-reveal-ready .about-page [data-page-reveal] { opacity: 1; transform: none; transition: none; }
}