/* luzanov.dev — LinkedIn cover system */
@font-face {
  font-family: "Inter Tight Local";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("inter-tight-900-cyrillic.7bb6ca08.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter Tight Local";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("inter-tight-900-latin.e22ad554.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  color-scheme: light;
  --paper: #f1efe7;
  --paper-raised: #f7f5ee;
  --ink: #07120e;
  --muted: #59615c;
  --lime: #b8ff00;
  --line: rgba(7, 18, 14, .2);
  --display: "Inter Tight Local", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #e5e3da;
  background-image:
    repeating-linear-gradient(90deg, rgba(7, 18, 14, .018) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 28% 12%, rgba(255, 255, 255, .8), transparent 45%);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
mark { color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--lime); color: var(--ink); }
:where(a, [tabindex]):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

.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;
}

.skip {
  position: fixed;
  z-index: 100;
  top: 1rem;
  left: 1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: .75rem 1rem;
  border: 2px solid var(--ink);
  background: var(--lime);
  font-family: var(--mono);
  font-weight: 700;
  transform: translateY(-200%);
}
.skip:focus { transform: translateY(0); }

.site {
  width: min(1560px, calc(100% - 48px));
  margin: 24px auto;
  overflow: hidden;
  border: 2px solid var(--ink);
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(90deg, rgba(7, 18, 14, .022) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + .5px), transparent calc(50% + .5px));
  box-shadow: 0 18px 48px rgba(7, 18, 14, .08);
}

.masthead {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 clamp(1.25rem, 3vw, 2.8rem);
  border-bottom: 1px solid var(--ink);
}
.brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 900;
  letter-spacing: -.055em;
  text-decoration: none;
  text-transform: uppercase;
}
.mast-links { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.5rem); }
.mast-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 700;
  text-underline-offset: .3em;
  text-decoration-thickness: 1px;
}
.mast-links .language {
  min-width: 44px;
  justify-content: center;
  padding-inline: .55rem;
  border: 1px solid var(--ink);
  text-decoration: none;
}

main:focus { outline: none; }
main:focus-visible { outline: 3px solid var(--ink); outline-offset: -5px; }

.hero {
  min-height: min(760px, calc(100vh - 118px));
  min-height: min(760px, calc(100dvh - 118px));
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
}
.hero-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 5.4rem) clamp(1.75rem, 4vw, 4.3rem);
}
h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.3rem, 7.6vw, 8.85rem);
  font-weight: 950;
  line-height: .765;
  letter-spacing: -.078em;
  text-transform: uppercase;
}
h1 > span { display: block; white-space: nowrap; }
h1 mark {
  position: relative;
  z-index: 0;
  display: inline-block;
  margin-left: .04em;
  padding: .02em .1em .06em .035em;
  background: var(--lime);
  box-shadow: .07em .07em 0 var(--ink);
}
html[lang="ru"] h1 {
  font-size: clamp(3.4rem, 6vw, 7rem);
  line-height: .82;
  letter-spacing: -.065em;
}

.role-line {
  margin-top: clamp(2.6rem, 5vw, 4.8rem);
  padding-top: clamp(1rem, 2vw, 1.5rem);
  border-top: 2px solid var(--ink);
}
.role-line p { margin: 0; font-size: clamp(1rem, 1.8vw, 1.55rem); line-height: 1.35; }
.role-line p + p { color: var(--muted); }
.role-line strong { font-weight: 800; }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: clamp(1.7rem, 3vw, 2.4rem) 0 0;
  padding: 0;
  list-style: none;
}
.tags li {
  padding: .65rem .9rem;
  border: 1px solid var(--ink);
  background: rgba(247, 245, 238, .42);
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.portrait {
  position: relative;
  min-width: 0;
  min-height: 600px;
  margin: 0;
  padding: 1rem 1rem 1rem 0;
}
.portrait-frame {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #d5d0d2;
  clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%);
}
.portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 53% 46%;
  filter: saturate(.84) contrast(1.05);
}
.portrait figcaption {
  position: absolute;
  z-index: 2;
  top: 2.2rem;
  right: 2.45rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  max-width: calc(100% - 4rem);
  padding: .75rem 1rem;
  border: 2px solid var(--ink);
  background: var(--lime);
  box-shadow: 7px 7px 0 var(--ink);
  font-family: var(--mono);
  font-size: clamp(.7rem, 1vw, .84rem);
  font-weight: 850;
  letter-spacing: .05em;
  line-height: 1.25;
  text-transform: uppercase;
  transform: rotate(1.8deg);
}
.portrait figcaption span {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink);
}

.explorer {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
  border-top: 2px solid var(--ink);
}
.profile { min-width: 0; border-right: 2px solid var(--ink); }
.commands {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--ink);
}
.commands [role="tab"] {
  min-width: 0;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .75rem .65rem;
  border-right: 1px solid rgba(241, 239, 231, .22);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: clamp(.69rem, .9vw, .8rem);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.commands [role="tab"]:last-child { border-right: 0; }
.commands [role="tab"][aria-selected="true"] { background: var(--lime); color: var(--ink); }
.commands [role="tab"]:focus-visible { position: relative; z-index: 2; outline-color: var(--lime); outline-offset: -6px; }

.output {
  min-height: 320px;
  padding: clamp(1.7rem, 3.7vw, 3.5rem);
  background: rgba(247, 245, 238, .44);
}
.view { scroll-margin-top: 1rem; }
.view + .view {
  margin-top: 2.2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ink);
}
.view.active {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  animation: reveal 170ms ease-out;
}
@keyframes reveal { from { opacity: 0; transform: translateY(4px); } }
.view h2 {
  margin: 0 0 1.2rem;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .03em;
}
.view p { max-width: 69ch; margin: 0 0 1rem; font-size: clamp(.94rem, 1.25vw, 1.08rem); line-height: 1.65; }
.view p:last-child { margin-bottom: 0; }
.view a { font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: .27em; }
.view dl { display: grid; grid-template-columns: 120px 1fr; gap: .9rem 1.4rem; margin: 0; }
.view dt { color: var(--muted); font-family: var(--mono); font-size: .8rem; }
.view dd { margin: 0; line-height: 1.5; }

aside {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1.7rem, 3vw, 3rem);
  background: var(--ink);
  color: var(--paper);
}
.current h2 {
  margin: 0 0 1rem;
  color: var(--lime);
  font-family: var(--display);
  font-size: clamp(2rem, 3.4vw, 3.5rem);
  letter-spacing: -.065em;
  line-height: .9;
}
.current p { max-width: 46ch; margin: 0; color: #c3c7c2; font-size: .93rem; line-height: 1.6; }
.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 2rem 0 0;
  padding: 0;
  border-top: 1px solid rgba(241, 239, 231, .28);
  border-left: 1px solid rgba(241, 239, 231, .28);
  list-style: none;
}
.metrics li { min-width: 0; padding: .85rem; border-right: 1px solid rgba(241, 239, 231, .28); border-bottom: 1px solid rgba(241, 239, 231, .28); }
.metrics strong { display: block; color: var(--lime); font-family: var(--mono); font-size: 1.1rem; }
.metrics span { display: block; margin-top: .3rem; overflow-wrap: anywhere; color: #a9afa9; font-size: .72rem; line-height: 1.35; }

.env { margin: auto 0 1.4rem; padding-top: 2rem; }
.env div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 1rem; padding: .75rem 0; border-bottom: 1px solid rgba(241, 239, 231, .25); font-family: var(--mono); font-size: .72rem; }
.env div:first-child { border-top: 1px solid rgba(241, 239, 231, .25); }
.env dt { color: #929a94; }
.env dd { margin: 0; overflow-wrap: anywhere; }
.channel {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--lime);
  color: var(--lime);
  font-family: var(--mono);
  font-size: .75rem;
  text-decoration: none;
}

.footer {
  min-height: 90px;
  display: grid;
  grid-template-columns: 1fr 1.1fr auto;
  align-items: stretch;
  background: var(--ink);
  color: var(--paper);
}
.footer > * { min-width: 0; display: flex; align-items: center; padding: 1.2rem clamp(1.4rem, 3vw, 2.8rem); }
.footer strong {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.7vw, 1.55rem);
  letter-spacing: -.055em;
  text-transform: uppercase;
}
.history {
  justify-content: center;
  gap: .85rem;
  border-left: 1px solid rgba(241, 239, 231, .22);
  font-family: var(--mono);
  font-size: .77rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.history i { color: var(--lime); font-style: normal; }
.footer a {
  min-width: 260px;
  justify-content: center;
  background: var(--lime);
  color: var(--ink);
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 800;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}

@media (hover: hover) {
  .mast-links a:hover, .view a:hover { text-decoration-thickness: 3px; }
  .commands [role="tab"]:hover { background: #1f2924; }
  .commands [role="tab"][aria-selected="true"]:hover { background: var(--lime); }
  .channel:hover { background: var(--lime); color: var(--ink); }
  .footer a:hover { background: var(--paper); }
}

@media (max-width: 1100px) {
  .hero { min-height: 640px; grid-template-columns: minmax(0, 1fr) minmax(360px, .84fr); }
  h1 { font-size: clamp(4.1rem, 7.7vw, 6.25rem); }
  .explorer { grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr); }
}

@media (max-width: 860px) {
  .site { width: min(100% - 24px, 1560px); margin: 12px auto; }
  .hero { min-height: 0; grid-template-columns: 1fr; }
  .hero-copy { min-height: 610px; }
  h1 { font-size: clamp(4.3rem, 13.5vw, 7.2rem); }
  html[lang="ru"] h1 { font-size: clamp(3.6rem, 11vw, 6rem); }
  .portrait { min-height: 660px; padding: 0 1rem 1rem; }
  .portrait-frame { clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%); }
  .portrait img { object-position: 50% 42%; }
  .explorer { grid-template-columns: 1fr; }
  .profile { border-right: 0; border-bottom: 2px solid var(--ink); }
  aside { min-height: 520px; }
  .footer { grid-template-columns: 1fr 1fr; }
  .history { border-left: 1px solid rgba(241, 239, 231, .22); }
  .footer a { min-width: 0; grid-column: 1 / -1; min-height: 64px; }
}

@media (max-width: 560px) {
  .site { width: 100%; margin: 0; border-inline: 0; }
  .masthead { min-height: 60px; padding-inline: 1rem; }
  .mast-links a:first-child { display: none; }
  .hero-copy { min-height: 500px; padding: 2.8rem 1rem 2.4rem; }
  h1 { font-size: clamp(2.82rem, 14.2vw, 5rem); line-height: .79; letter-spacing: -.083em; }
  h1 > span:last-child { font-size: .95em; }
  html[lang="ru"] h1 { font-size: clamp(2.35rem, 11.3vw, 4rem); line-height: .82; letter-spacing: -.072em; }
  html[lang="ru"] h1 > span:last-child { font-size: 1em; }
  .role-line { margin-top: 2.6rem; }
  .role-line p { font-size: 1rem; }
  .tags { gap: .45rem; margin-top: 1.5rem; }
  .tags li { padding: .55rem .65rem; font-size: .66rem; }
  .portrait { min-height: 520px; padding: 0; }
  .portrait-frame { clip-path: none; }
  .portrait img { object-position: 50% 42%; }
  .portrait figcaption { top: 1rem; right: 1rem; max-width: calc(100% - 2rem); box-shadow: 5px 5px 0 var(--ink); font-size: .65rem; }
  .commands { grid-template-columns: 1fr 1fr; }
  .commands [role="tab"] { justify-content: flex-start; padding-inline: 1rem; border-bottom: 1px solid rgba(241, 239, 231, .22); }
  .commands [role="tab"]:nth-child(2) { border-right: 0; }
  .commands [role="tab"]:nth-child(n + 3) { border-bottom: 0; }
  .output { min-height: 360px; padding: 1.6rem 1rem; }
  .view dl { grid-template-columns: 78px minmax(0, 1fr); gap: .85rem .7rem; }
  .view dd { overflow-wrap: anywhere; }
  aside { min-height: 560px; padding: 1.7rem 1rem; }
  .metrics { grid-template-columns: 1fr; }
  .metrics li { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: baseline; gap: .8rem; }
  .metrics span { margin-top: 0; }
  .footer { grid-template-columns: 1fr; }
  .footer > * { min-height: 62px; padding-inline: 1rem; }
  .history { justify-content: flex-start; border-top: 1px solid rgba(241, 239, 231, .22); border-left: 0; }
  .footer a { grid-column: auto; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (forced-colors: active) {
  .site, .masthead, .portrait figcaption, .tags li, .explorer, .profile { border-color: CanvasText; }
  h1 mark, .portrait figcaption, .commands [role="tab"][aria-selected="true"], .footer a { background: Highlight; color: HighlightText; }
  .commands [role="tab"] { border-color: CanvasText; }
  .channel { border-color: LinkText; color: LinkText; }
}