/*
 * Yandex Browser can restore focus to a header identity link after reload and
 * render its own double focus ring. The companion script distinguishes a real
 * Tab navigation from restored or pointer focus, so keyboard users still get a
 * visible, design-consistent focus indicator.
 */
html.brand-focus-ready
  :where(a.brand, a.mt-logo, a.portfolio-link, a.back-link):focus {
  outline: none;
}

html.brand-focus-ready.is-keyboard-navigation
  :where(a.brand, a.mt-logo, a.portfolio-link, a.back-link):focus-visible {
  outline: none;
  box-shadow: 0 2px 0 var(--brand-focus-color, currentColor);
}

@media (forced-colors: active) {
  html.brand-focus-ready.is-keyboard-navigation
    :where(a.brand, a.mt-logo, a.portfolio-link, a.back-link):focus-visible {
    outline: 2px solid CanvasText;
    outline-offset: 3px;
    box-shadow: none;
  }
}

/*
 * Shared lower navigation for Sergey-owned pages. The middle column is
 * deliberately reserved for the return-to-top action, leaving the lower-right
 * corner clear for the persistent Avatar.
 */
.portfolio-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  min-height: 96px;
  padding-block: 24px;
  border-top: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 22%, transparent);
  color: inherit;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.portfolio-footer__identity {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.portfolio-footer__signature {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.portfolio-footer__signature strong {
  color: inherit;
  font-size: inherit;
  font-weight: 850;
}

.portfolio-footer__divider {
  opacity: .55;
  font-style: normal;
}

.portfolio-footer__context {
  color: inherit;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .08em;
  opacity: .62;
}

.portfolio-footer__top {
  display: inline-flex;
  grid-column: 2;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 0;
  border-bottom: 1px solid currentColor;
  color: inherit;
  font: inherit;
  font-weight: 850;
  letter-spacing: .12em;
  text-decoration: none;
  transition: transform .2s ease, color .2s ease;
}

.portfolio-footer__top:hover {
  transform: translateY(-2px);
}

.portfolio-footer__top:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

.portfolio-footer__links {
  display: flex;
  grid-column: 3;
  justify-self: end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px 18px;
  min-width: 0;
  text-align: right;
}

.portfolio-footer__links a {
  color: inherit;
  text-decoration: none;
  opacity: .72;
  transition: opacity .2s ease;
}

.portfolio-footer__links a:hover,
.portfolio-footer__links a:focus-visible {
  opacity: 1;
}

.portfolio-footer__spacer {
  grid-column: 3;
}

.portfolio-footer--edge {
  position: relative;
  z-index: 12;
  pointer-events: auto;
  padding-inline: clamp(18px, 4.3vw, 72px);
}

/* The hybrid Telegram page reserves 150px on the right for the Avatar.
 * Keep its secondary footer link in that safe zone, while compensating the
 * middle action so it remains visually centred in the viewport. */
@media (min-width: 981px) {
  .hybrid-page .site-footer.portfolio-footer .portfolio-footer__top {
    position: relative;
    left: 75px;
  }
}

@media (max-width: 700px) {
  .portfolio-footer {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 14px;
    min-height: 0;
    text-align: center;
  }

  .portfolio-footer__identity,
  .portfolio-footer__top,
  .portfolio-footer__links,
  .portfolio-footer__spacer {
    grid-column: 1;
    justify-self: center;
  }

  .portfolio-footer__signature,
  .portfolio-footer__links {
    justify-content: center;
  }

  .portfolio-footer__context {
    text-align: center;
  }

  .portfolio-footer__spacer {
    display: none;
  }
}