/* SynthTax · «Обо мне». Prefix .ab- */

.section-alt + .section:is(.ab-skills-sec):not(.section-alt) { padding-top: clamp(64px, 9vw, 128px); }

/* Hero ------------------------------------------------------------------- */
.ab-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px 72px; align-items: end; }
.ab-name { margin-top: 18px; font-size: clamp(50px, 7.2vw, 108px); }
.ab-tagline { margin-top: 30px; max-width: 34ch; padding-left: 22px; border-left: 2px solid var(--accent); font-family: var(--font-display); font-style: italic; font-weight: 360; font-size: clamp(21px, 2vw, 27px); line-height: 1.4; color: var(--ink); text-wrap: pretty; font-variation-settings: "opsz" var(--opsz); }
.ab-contacts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; }
.ab-contacts a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 0 4px; border-bottom: 1px solid var(--line-2); font-size: 15px; color: var(--ink-2); transition: color var(--t-fast), border-color var(--t-fast); }
.ab-contacts a:hover { color: var(--ink); border-color: var(--ink); }
.ab-contacts .i { color: var(--ink-3); transition: color var(--t-fast), transform var(--t-fast); }
.ab-contacts a:hover .i { color: var(--accent-text); transform: translateY(-1px); }

/* Seal instead of a portrait: there is no photo yet */
.ab-seal-card { justify-self: end; width: 100%; max-width: 420px; margin: 0; padding: clamp(28px, 3.4vw, 44px); border: var(--bw) solid var(--line-strong); background: var(--raised); box-shadow: inset 0 0 0 6px var(--raised), inset 0 0 0 7px var(--line-2); text-align: center; }
.ab-seal { display: block; width: min(100%, 300px); margin: 0 auto; color: var(--accent); transform: rotate(-9deg); transition: transform 1.2s var(--ease-out); }
.ab-seal-card.is-in .ab-seal { transform: rotate(-3deg); }
.ab-seal-card:hover .ab-seal { transform: rotate(0deg) scale(1.02); }
.ab-seal-ring { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; fill: currentColor; }
.ab-seal-mono { font-family: var(--font-display); font-size: 58px; font-weight: 400; fill: currentColor; }
.ab-seal-card figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 22px; padding-top: 12px; border-top: 1px dashed var(--line-2); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-3); }
@media (max-width: 900px) {
  .ab-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-seal-card { justify-self: start; max-width: 340px; }
}
@media (max-width: 600px) {
  .ab-seal-card { max-width: 260px; padding: 22px; }
  .ab-seal-card figcaption { margin-top: 16px; }
}

/* Idea ------------------------------------------------------------------- */
.ab-story-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.ab-story-side { position: sticky; top: 130px; }
.ab-story-side .h2 { max-width: 14ch; margin-top: 10px; }
.ab-story-body { max-width: 64ch; }
.ab-story-lead { font-family: var(--font-h); font-weight: var(--w-h); font-size: clamp(23px, 2.2vw, 30px); line-height: 1.3; letter-spacing: var(--track-h); color: var(--ink); text-wrap: pretty; font-variation-settings: "opsz" var(--opsz); }
.ab-prose { margin-top: 24px; }
.ab-mods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 34px; border-top: var(--bw) solid var(--line-strong); }
.ab-mods a { position: relative; display: grid; gap: 2px; min-height: 64px; padding: 14px 40px 14px 0; border-bottom: var(--bw) solid var(--line); transition: background-color var(--t-fast); }
.ab-mods li:nth-child(even) a { padding-left: 22px; border-left: var(--bw) solid var(--line); }
.ab-mod-k { font-weight: 500; font-size: 16px; color: var(--ink); transition: color var(--t-fast); }
.ab-mod-d { font-size: 14px; color: var(--ink-3); }
.ab-mods .i { position: absolute; right: 12px; top: 50%; margin-top: -9px; width: 18px; height: 18px; color: var(--ink-3); transition: transform var(--t-fast), color var(--t-fast); }
.ab-mods a:hover .ab-mod-k { color: var(--accent-text); }
.ab-mods a:hover .i { color: var(--accent-text); transform: translate(3px, -3px); }
@media (max-width: 900px) { .ab-story-grid { grid-template-columns: minmax(0, 1fr); } .ab-story-side { position: static; } }
@media (max-width: 520px) {
  .ab-mods { grid-template-columns: minmax(0, 1fr); }
  .ab-mods li:nth-child(even) a { padding-left: 0; border-left: 0; }
}

/* Video slot ------------------------------------------------------------- */
.ab-video-sec { padding-top: 0; }
.ab-video-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 28px clamp(32px, 6vw, 96px); align-items: end; padding-top: clamp(32px, 4vw, 48px); border-top: var(--bw) solid var(--line); }
.ab-video-copy { display: grid; gap: 14px; justify-items: start; padding-bottom: 6px; }
.ab-video-copy .body { max-width: 30ch; color: var(--ink-2); }
.ab-video-btn { margin-top: 10px; }
.ab-video-btn .i { fill: currentColor; stroke-width: 1; }
.ab-video { display: block; width: 100%; cursor: pointer; }
.ab-video-poster { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.ab-video-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), filter .4s; filter: saturate(.85); }
.ab-video-poster::after { content: ""; position: absolute; inset: 0; background: rgba(27, 26, 23, .16); transition: background-color .4s; }
.ab-video-play { position: absolute; z-index: 1; left: 50%; top: 50%; display: grid; place-items: center; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; background: var(--bg); color: var(--ink); transition: transform .4s var(--ease-spring); }
.ab-video-play .i { width: 28px; height: 28px; margin-left: 5px; fill: currentColor; stroke-width: 1; }
.ab-video:hover .ab-video-play { transform: scale(1.08); }
.ab-video:hover .ab-video-poster img { transform: scale(1.025); filter: none; }
.ab-video:hover .ab-video-poster::after { background: rgba(27, 26, 23, .04); }
.ab-video:active .ab-video-play { transform: scale(.96); }
@media (max-width: 900px) {
  .ab-video-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-video-btn { display: none; }
  .ab-video-copy { padding-bottom: 0; }
}
@media (max-width: 760px) {
  .ab-video-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .ab-video-play .i { width: 22px; height: 22px; margin-left: 4px; }
}

/* Video modal ------------------------------------------------------------ */
.ab-vcard { width: min(960px, 100%); }
.ab-player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.ab-player video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--ink); }
.ab-player-wait { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--bg) 30%, transparent); border-top-color: var(--bg); opacity: 0; pointer-events: none; transition: opacity .25s; animation: spin .8s linear infinite; }
.ab-player.is-wait .ab-player-wait { opacity: 1; }
.ab-player-err { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; background: color-mix(in srgb, var(--ink) 92%, transparent); color: var(--bg); text-align: center; animation: fade-in .3s var(--ease-out) both; }
.ab-player-err[hidden] { display: none; }
.ab-player-err .i { color: var(--warn-soft); }
.ab-player-err p { max-width: 36ch; font-size: 16px; line-height: 1.5; }
.ab-retry { --_fg: var(--bg); --_bd: color-mix(in srgb, var(--bg) 40%, transparent); }
.ab-retry:hover { --_bd: var(--bg); }
@media (max-width: 760px) { .ab-vmodal { padding: 12px; } .ab-vcard .modal-body { padding: 14px; } }

/* Career gantt ----------------------------------------------------------- */
.ab-gantt { --y0: 2008; --y1: 2027; display: grid; }
.ab-g-axis, .ab-g-row { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 0 36px; align-items: stretch; }
.ab-g-years { position: relative; height: 30px; }
.ab-g-years i { position: absolute; top: 4px; left: calc((var(--y) - var(--y0)) / (var(--y1) - var(--y0)) * 100%); transform: translateX(-50%); font-style: normal; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.ab-g-years i:first-child { transform: none; }
.ab-g-row { border-top: var(--bw) solid var(--line); transition: background-color var(--t-fast); }
.ab-g-row:last-child { border-bottom: var(--bw) solid var(--line); }
.ab-g-row:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.ab-g-k { display: flex; flex-direction: column; gap: 4px; padding: 18px 0 20px 4px; }
.ab-g-k b { font-weight: 500; font-size: 17px; line-height: 1.3; }
.ab-g-sub { font-size: 13.5px; color: var(--ink-3); }
.ab-g-k p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.ab-g-track { position: relative; min-height: 64px; background: linear-gradient(to right, var(--line) 1px, transparent 1px) 0 0 / calc(100% / 19) 100% repeat-x; }
.ab-g-bar {
  position: absolute; top: 30px; height: 22px;
  left: calc((var(--s) - var(--y0)) / (var(--y1) - var(--y0)) * 100%); width: calc((var(--e) - var(--s)) / (var(--y1) - var(--y0)) * 100%);
  background: var(--ink); border-radius: var(--r-1); transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease-out) calc(.2s + var(--i) * .2s), background-color .25s;
}
.ab-gantt.is-in .ab-g-bar { transform: none; }
.ab-g-row:hover .ab-g-bar { background: var(--accent); }
.ab-g-row.is-now .ab-g-bar { background: var(--accent); }
.ab-g-row.is-now .ab-g-bar::after { content: ""; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--bg-alt); animation: pulse 1.8s ease-in-out infinite; }
@media (max-width: 760px) {
  .ab-g-axis { grid-template-columns: minmax(0, 1fr); }
  .ab-g-axis > span:first-child { display: none; }
  .ab-g-years i:nth-child(even) { display: none; }
  .ab-g-row { grid-template-columns: minmax(0, 1fr); }
  .ab-g-k { padding: 16px 0 6px; }
  .ab-g-track { min-height: 36px; }
  .ab-g-bar { top: 6px; height: 16px; }
}

/* Education -------------------------------------------------------------- */
.ab-edu { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 16px 36px; align-items: start; margin-top: clamp(40px, 5vw, 64px); }
.ab-edu-h { padding-top: 16px; }
.ab-edu-list { border-top: var(--bw) solid var(--line-strong); }
.ab-edu-list > li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: var(--bw) solid var(--line); }
.ab-edu-y { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); }
.ab-edu-t { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
.ab-edu-t b { font-weight: 500; }
.ab-edu-t span { font-size: 14px; color: var(--ink-3); }
.ab-cv { grid-column: 2; justify-self: start; padding-block: 8px; }
.ab-cv:hover { color: var(--accent-text); }
@media (max-width: 760px) {
  .ab-edu { grid-template-columns: minmax(0, 1fr); }
  .ab-edu-h { padding-top: 0; }
  .ab-cv { grid-column: 1; }
  .ab-edu-list > li { grid-template-columns: 56px minmax(0, 1fr); }
}

/* Competencies ----------------------------------------------------------- */
.ab-skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--bw) solid var(--line-strong); }
.ab-skill { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 28px 0; border-bottom: var(--bw) solid var(--line); min-width: 0; transition: background-color var(--t-fast); }
.ab-skill:not(:nth-child(3n + 1)) { padding-left: 28px; border-left: var(--bw) solid var(--line); }
.ab-skill-n { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); transition: color var(--t-fast); }
.ab-skill:hover .ab-skill-n { color: var(--accent-text); }
.ab-skill p { font-size: 15px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.ab-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.ab-skill .h4 { font-family: var(--font-h); font-weight: 450; font-size: 22px; letter-spacing: -.005em; }
@media (max-width: 960px) {
  .ab-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-skill:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .ab-skill:nth-child(even) { padding-left: 28px; border-left: var(--bw) solid var(--line); }
}
@media (max-width: 600px) {
  .ab-skills { grid-template-columns: minmax(0, 1fr); }
  .ab-skill:nth-child(even) { padding-left: 0; border-left: 0; }
  .ab-skill { padding-right: 0; }
}

/* Larger tap area for breadcrumbs without moving the layout */
.crumbs a { padding-block: 10px; margin-block: -10px; }