:root {
  --portfolio-page-pad: 20px;
  --portfolio-gap: var(--ids__gap-s);
}

.ids-home {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--ids__background);
  color: var(--ids__text);
}

.ids-home * {
  box-sizing: border-box;
}

.ids-home ids-nav-item {
  display: block;
}

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

.portfolio-main {
  min-height: 100vh;
}

.portfolio-split__portrait {
  display: none;
}

.portfolio-hero {
  position: relative;
}

.portfolio-photo {
  position: relative;
  width: 100%;
  height: 91vw;
  margin: 0;
  overflow: hidden;
  background: var(--ids__surface);
}

.portfolio-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 61% 50%;
  filter: grayscale(1) contrast(1.04);
}

.portfolio-endbar {
  position: fixed;
  z-index: 20;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.6rem;
  padding: 0.35rem var(--portfolio-page-pad);
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  pointer-events: none;
}

.is-at-page-end .portfolio-endbar {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.portfolio-language {
  display: inline-flex;
  flex: 0 0 auto;
}

.portfolio-language button {
  width: 34px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--ids__text);
  color: var(--ids__background);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.portfolio-language button:first-child {
  border-radius: 4px 0 0 4px;
}

.portfolio-language button:last-child {
  border-radius: 0 4px 4px 0;
}

.portfolio-language button.is-active {
  background: var(--ids__link);
  color: var(--ids__background);
}

.portfolio-language button:hover {
  background: var(--ids__hover);
  color: var(--ids__background);
}

.portfolio-language button:focus-visible {
  outline: var(--ids__border-width-m) solid var(--ids__text);
  outline-offset: 2px;
}

.portfolio-period {
  margin: 0;
  color: var(--ids__text);
  font-size: 14px;
  line-height: 1.2;
}

.portfolio-copy {
  padding: 24px var(--portfolio-page-pad) 0;
}

.ids-home h1.portfolio-title {
  max-width: 15em;
  margin: 0;
  font-size: 1.34rem;
  line-height: 1.03;
  font-weight: 400;
  letter-spacing: 0;
}

.portfolio-contact {
  margin-top: 3.5rem;
}

.portfolio-contact p {
  margin: 0 0 0.45em;
  font-size: 1.22rem;
  line-height: 1;
  font-weight: 400;
}

.portfolio-socials {
  display: flex;
  gap: 8px;
}

.portfolio-social {
  position: relative;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  flex: 0 0 auto;
  background: var(--ids__text);
  color: var(--ids__background);
  text-decoration: none;
  transition:
    background-color var(--ids__duration-fast) var(--ids__easing-base),
    transform var(--ids__duration-fast) var(--ids__easing-base);
}

.portfolio-social img {
  display: block;
  width: 62%;
  height: 62%;
  object-fit: contain;
}

.portfolio-project-wrapper.ids__wrapper.XL {
  width: 100%;
  padding: 56px var(--portfolio-page-pad) 72px;
}

.portfolio-projects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 12px;
}

.ids-home .portfolio-project {
  position: relative;
  display: block;
  min-width: 0;
  color: var(--ids__text);
}

.ids-home a.portfolio-project,
.ids-home a.portfolio-project:visited,
.ids-home a.portfolio-project:hover,
.ids-home a.portfolio-project:focus-visible {
  color: var(--ids__link);
  text-decoration: none;
  text-decoration-color: transparent;
}

.ids-home a.portfolio-project:hover {
  color: var(--ids__hover);
  text-decoration: none;
}

.ids-home a.portfolio-social,
.ids-home a.portfolio-social:hover {
  text-decoration: none;
}

.portfolio-project--tile {
  grid-column: span 1;
}

.portfolio-project--wide {
  grid-column: 1 / -1;
}

/* Product work leads the portfolio on every viewport. */
.portfolio-project--repair { order: 1; }
.portfolio-project--push { order: 2; }
.portfolio-project--geo { order: 3; }
.portfolio-project--plugin { order: 4; }
.portfolio-project--shurale { order: 5; }
.portfolio-project--mascot { order: 6; }
.portfolio-project--vdpay { order: 7; }
.portfolio-project--posters { order: 8; }
.portfolio-project--carpay { order: 9; }
.portfolio-project--mcore { order: 10; }
.portfolio-project--nft { order: 11; }
.portfolio-project--jealousy { order: 12; }

.ids-home a.portfolio-archive {
  order: 99;
  grid-column: 1 / -1;
  justify-self: start;
  color: var(--ids__link);
  font-size: clamp(14px, 0.85rem, 22px);
  line-height: 1.2;
}

.ids-home a.portfolio-archive:hover {
  color: var(--ids__hover);
}

.ids-home a.portfolio-archive:focus-visible {
  outline: var(--ids__border-width-m) solid currentColor;
  outline-offset: 0.18em;
}

.ids-home .portfolio-project__figure {
  margin: 0;
}

.portfolio-project__visual {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--ids__background);
  transition:
    filter var(--ids__duration-fast) var(--ids__easing-base),
    transform var(--ids__duration-fast) var(--ids__easing-base);
}

.portfolio-project__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-project--tile .portfolio-project__visual {
  aspect-ratio: 0.68 / 1;
}

.portfolio-project--wide .portfolio-project__visual {
  aspect-ratio: 1.46 / 1;
}

.ids-home .portfolio-project__figure figcaption {
  margin-top: calc(var(--ids__density) * 0.25em);
  color: inherit;
  font-size: clamp(14px, 0.85rem, 22px);
  line-height: 1.2;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.portfolio-project__lock {
  display: inline-block;
  width: 0.92em;
  height: 0.92em;
  margin-inline-start: 0.22em;
  object-fit: contain;
  vertical-align: -0.1em;
}

.portfolio-badge {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: inline-flex;
  min-width: 50px;
  height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: var(--ids__radius-pill);
  background: var(--ids__accent);
  color: var(--ids__background);
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
}

.portfolio-project--geo .portfolio-project__visual,
.portfolio-project--push .portfolio-project__visual {
  background: var(--ids__background);
}

.geo-map {
  position: absolute;
  inset: -7%;
  background:
    linear-gradient(42deg, transparent 0 31%, rgba(210, 210, 195, 0.62) 31.4% 34%, transparent 34.4%),
    linear-gradient(104deg, transparent 0 47%, rgba(210, 210, 195, 0.72) 47.4% 51%, transparent 51.4%),
    linear-gradient(178deg, transparent 0 58%, rgba(210, 210, 195, 0.62) 58.3% 61%, transparent 61.3%),
    linear-gradient(15deg, #eef0e7, #fbfaf4);
}

.geo-pin {
  position: absolute;
  top: 58%;
  left: 40%;
  width: 23%;
  height: 17%;
  background: #ffffff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.geo-marker {
  position: absolute;
  top: 61%;
  left: 13%;
  width: 0;
  height: 0;
  border: 7px solid var(--ids__accent);
  border-radius: 50%;
}

.geo-app {
  position: absolute;
  top: 28%;
  left: 35%;
  display: grid;
  width: 40%;
  aspect-ratio: 1 / 1;
  place-items: center;
  border: 8px solid #ffffff;
  border-radius: 28%;
  background: #ff9600;
  color: #ffffff;
  font-size: 56px;
  line-height: 1;
  font-weight: 500;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
}

.push-time,
.push-date,
.push-note {
  position: absolute;
  z-index: 1;
}

.push-time {
  top: 7%;
  left: 31%;
  color: #ffffff;
  font-size: 34px;
  line-height: 1;
  font-weight: 300;
}

.push-date {
  top: 17%;
  left: 30%;
  color: #ffffff;
  font-size: 12px;
  line-height: 1;
}

.push-note {
  left: 9px;
  right: 9px;
  bottom: 43%;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.66);
  color: #111111;
  font-size: 11px;
  line-height: 1.15;
}

.push-note small {
  font-size: 9px;
}

.portfolio-project--push .portfolio-project__visual::before {
  content: none;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.18)),
    radial-gradient(circle at 16% 58%, transparent 0 23%, rgba(60, 60, 60, 0.56) 23.6% 29%, transparent 29.6%),
    linear-gradient(68deg, transparent 0 48%, rgba(80, 80, 80, 0.42) 48.4% 49.2%, transparent 49.6%),
    linear-gradient(180deg, #eeeeee, #c5c5c5);
}

.portfolio-project--repair .portfolio-project__visual {
  aspect-ratio: 1.38 / 1;
  background: var(--ids__background);
}

.repair-phone {
  position: absolute;
  left: 8%;
  top: 5%;
  display: flex;
  width: 47%;
  height: 82%;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background: #ffffff;
  box-shadow: inset 0 0 0 4px #000000;
}

.repair-phone span {
  display: block;
  margin: 0 9px;
  padding: 8px 0;
  border-bottom: 1px solid #e5e5e5;
  color: #111111;
  font-size: 14px;
  line-height: 1;
}

.repair-phone span:first-child {
  margin: 0 0 8px;
  padding: 16px 0 13px;
  background: #d86a00;
  color: #ffffff;
  text-align: center;
}

.repair-scooter {
  position: absolute;
  right: 6%;
  bottom: 18%;
  width: 34%;
  height: 49%;
}

.repair-scooter::before {
  content: "";
  position: absolute;
  right: 27%;
  bottom: 19%;
  width: 13%;
  height: 78%;
  border-radius: 999px;
  background: #ffc400;
  transform: rotate(-20deg);
  transform-origin: bottom center;
}

.repair-scooter::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 34%;
  aspect-ratio: 1 / 1;
  border: 7px solid #191919;
  border-radius: 50%;
  box-shadow:
    -48px -9px 0 -13px #ffc400,
    -43px -8px 0 -18px #191919;
}

.portfolio-project--plugin .portfolio-project__visual,
.portfolio-project--vdpay .portfolio-project__visual,
.portfolio-project--mcore .portfolio-project__visual,
.portfolio-project--nft .portfolio-project__visual {
  background: var(--ids__background);
}

.portfolio-project--plugin img,
.portfolio-project--vdpay img,
.portfolio-project--mcore img,
.portfolio-project--nft img {
  object-fit: cover;
  padding: 0;
}

.portfolio-project--shurale .portfolio-project__visual {
  display: grid;
  place-items: center;
  background: var(--ids__background);
}

.portfolio-project--shurale .portfolio-project__visual > span {
  display: block;
  color: var(--ids__text);
  font-size: 2rem;
  line-height: 0.82;
  font-weight: 500;
  transform: rotate(8deg);
}

.portfolio-project--mascot img {
  object-position: center;
}

.portfolio-project--mascot .portfolio-project__visual {
  aspect-ratio: 1.38 / 1;
}

.portfolio-project--posters .portfolio-project__visual {
  background: var(--ids__background);
}

.portfolio-project--posters .portfolio-project__visual > span {
  position: absolute;
  display: block;
  width: 43%;
  aspect-ratio: 0.72 / 1;
  background:
    linear-gradient(90deg, transparent 0 42%, #111111 42% 47%, transparent 47%),
    linear-gradient(12deg, #ffffff 0 55%, #f4d5ef 55% 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.portfolio-project--posters .portfolio-project__visual > span:nth-child(1) {
  top: 13%;
  left: 12%;
}

.portfolio-project--posters .portfolio-project__visual > span:nth-child(2) {
  top: 29%;
  left: 29%;
  background:
    linear-gradient(180deg, transparent 0 42%, #ff4aaa 42% 58%, transparent 58%),
    linear-gradient(#eadcff, #f4e9ff);
}

.portfolio-project--posters .portfolio-project__visual > span:nth-child(3) {
  top: 47%;
  left: 46%;
  background:
    linear-gradient(90deg, transparent 0 42%, #ffffff 42% 48%, transparent 48%),
    linear-gradient(135deg, #86a640 0 60%, #f7e7f7 60% 100%);
}

.portfolio-project--carpay .portfolio-project__visual {
  aspect-ratio: 1.6 / 1;
}

.portfolio-project--jealousy img {
  object-position: center;
}

.portfolio-project--jealousy .portfolio-project__visual {
  aspect-ratio: 1.6 / 1;
}

.portfolio-blog {
  min-height: 1px;
}

@media (hover: hover) and (pointer: fine) {
  .portfolio-social:hover {
    transform: translateY(-3px);
    background: var(--ids__hover);
  }

  a.portfolio-project:hover {
    color: var(--ids__hover);
  }

  a.portfolio-project:hover .portfolio-project__visual {
    transform: translateY(-4px);
    filter: contrast(1.03) brightness(1.02);
  }

}

.portfolio-nav.ids__navbar ul li a:focus-visible,
.portfolio-social:focus-visible,
.portfolio-project:focus-visible {
  outline: var(--ids__border-width-m) solid currentColor;
  outline-offset: 0.18em;
}

@media (width < 768px) {
  .portfolio-nav.ids__navbar {
    position: absolute;
    z-index: 5;
    top: calc(var(--ids__density) * 0.6rem);
    left: calc(var(--ids__density) * 0.6rem);
    margin: 0;
  }

  .portfolio-nav.ids__navbar ul li a {
    padding: 0.2em 0.5em 0.2em 0.3em;
  }

  .portfolio-nav.ids__navbar .current a {
    background-color: color-mix(in srgb, var(--ids__link) 10%, transparent);
  }

  .portfolio-nav.ids__navbar .current a:hover {
    background-color: color-mix(in srgb, var(--ids__hover) 10%, transparent);
  }
}

@media (width >= 768px) {
  :root {
    --portfolio-page-pad: calc(var(--ids__density) * 1rem);
    --portfolio-gap: var(--ids__gap-l);
  }

  .portfolio-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .portfolio-nav.ids__navbar ul li {
    font-size: max(14px, 0.8em);
  }

  .portfolio-split__portrait {
    position: sticky;
    top: 0;
    display: block;
    height: 100vh;
    overflow: hidden;
    background: var(--ids__surface);
  }

  .portfolio-split__portrait img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 120%;
    object-fit: cover;
    object-position: 56% 50%;
    filter: grayscale(1) contrast(1.04);
    transform: translate3d(0, var(--portrait-shift, 0px), 0);
    transform-origin: center top;
    will-change: transform;
  }

  .portfolio-endbar {
    right: 50%;
    padding-right: calc(var(--portfolio-page-pad) + 0.5rem);
    padding-left: var(--portfolio-page-pad);
  }

  .portfolio-period {
    font-size: 14px;
  }

  .portfolio-split__content {
    min-width: 0;
  }

  .portfolio-hero {
    min-height: 42rem;
  }

  .portfolio-photo {
    display: none;
  }

  .portfolio-copy {
    position: absolute;
    top: 7.8rem;
    right: var(--portfolio-page-pad);
    left: var(--portfolio-page-pad);
    padding: 0;
  }

  .ids-home h1.portfolio-title {
    max-width: 10em;
    font-size: 3.35rem;
    line-height: 1.09;
    font-weight: 400;
  }

  .portfolio-contact {
    margin-top: 2.3rem;
  }

  .portfolio-contact p {
    margin-bottom: 0.65em;
    font-size: 1.75rem;
  }

  .portfolio-socials {
    gap: 10px;
  }

  .portfolio-social {
    width: 4.9rem;
    height: 4.9rem;
  }

  .portfolio-project-wrapper.ids__wrapper.XL {
    padding: 0 var(--portfolio-page-pad) 5rem;
  }

  .portfolio-projects {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: var(--portfolio-gap);
  }

  .portfolio-project__visual {
    background: var(--ids__background);
  }

  .portfolio-badge {
    top: 1rem;
    right: 1rem;
    min-width: 3.7rem;
    height: 2.35rem;
    padding: 0 1rem;
    font-size: 1rem;
  }

  .portfolio-project--repair {
    grid-column: span 8;
  }

  .portfolio-project--push {
    grid-column: span 4;
  }

  .portfolio-project--geo {
    grid-column: span 3;
  }

  .portfolio-project--mascot {
    grid-column: span 6;
  }

  .portfolio-project--plugin {
    grid-column: span 3;
  }

  .portfolio-project--vdpay {
    grid-column: span 3;
  }

  .portfolio-project--posters {
    grid-column: span 3;
  }

  .portfolio-project--carpay {
    grid-column: span 6;
  }

  .portfolio-project--shurale {
    grid-column: span 3;
  }

  .portfolio-project--mcore {
    grid-column: span 3;
  }

  .portfolio-project--nft {
    grid-column: span 3;
  }

  .portfolio-project--jealousy {
    grid-column: span 6;
  }

  .portfolio-project--repair .portfolio-project__visual {
    aspect-ratio: 1.38 / 1;
  }

  .repair-phone {
    left: 6.1%;
    top: 9.2%;
    width: 47%;
    height: 100%;
    border-radius: 2rem 2rem 0 0;
    box-shadow: inset 0 0 0 6px #000000;
  }

  .repair-phone span {
    margin: 0 1rem;
    padding: 0.65rem 0;
    font-size: 1.05rem;
    line-height: 1.05;
  }

  .repair-phone span:first-child {
    margin: 0 0 0.55rem;
    padding: 1.25rem 0 1rem;
  }

  .repair-scooter {
    right: 5.8%;
    bottom: 3.8%;
    width: 43%;
    height: 68%;
  }

  .repair-scooter::before {
    right: 16%;
    bottom: 17%;
    width: 11%;
    height: 83%;
  }

  .repair-scooter::after {
    right: 0;
    width: 35%;
    border-width: 0.55rem;
    box-shadow:
      -4.6rem -0.82rem 0 -1.05rem #ffc400,
      -4.2rem -0.75rem 0 -1.36rem #191919;
  }

  .push-time {
    top: 4.7%;
    left: 30%;
    font-size: 3.6rem;
  }

  .push-date {
    top: 14.6%;
    left: 30%;
    font-size: 1.15rem;
  }

  .push-note {
    left: 7%;
    right: 5%;
    bottom: 43%;
    padding: 0.8rem 1rem;
    border-radius: 0.9rem;
    font-size: 0.82rem;
  }

  .push-note small {
    font-size: 0.72rem;
  }

  .geo-app {
    top: 28%;
    left: 34%;
    width: 39%;
    font-size: 4rem;
  }

  .geo-pin {
    top: 59%;
  }

  .geo-marker {
    top: 62%;
    border-width: 0.55rem;
  }

  .portfolio-project--carpay .portfolio-project__visual {
    aspect-ratio: 1.6 / 1;
  }

  .portfolio-projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-project--tile {
    grid-column: span 1;
  }

  .portfolio-project--wide {
    grid-column: 1 / -1;
  }
}

@media (width >= 1600px) {
  .portfolio-projects {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .portfolio-project--repair {
    grid-column: span 6;
  }

  .portfolio-project--push {
    grid-column: span 3;
  }

  .portfolio-project--geo,
  .portfolio-project--plugin,
  .portfolio-project--vdpay,
  .portfolio-project--posters,
  .portfolio-project--shurale,
  .portfolio-project--mcore,
  .portfolio-project--nft {
    grid-column: span 3;
  }

  .portfolio-project--mascot,
  .portfolio-project--carpay {
    grid-column: span 6;
  }

  .portfolio-project--jealousy {
    grid-column: span 6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-endbar {
    transition: none;
  }
}

@media (width >= 2200px) {
  :root {
    --portfolio-page-pad: calc(var(--ids__density) * 1.5rem);
  }

  .portfolio-hero {
    min-height: 48rem;
  }

  .ids-home h1.portfolio-title {
    font-size: 4.4rem;
    line-height: 1.14;
  }

  .portfolio-project-wrapper.ids__wrapper.XL {
    max-width: none;
  }
}