.site-shell {
  width: 100%;
  min-height: 100vh;
  box-shadow: 0 0 0 1px rgba(193, 138, 61, 0.15) inset;
}

body {
  overflow-x: hidden;
}

.layout-grid {
  width: min(100%, 1600px);
  margin-inline: auto;
  padding-inline: clamp(20px, 3vw, 56px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(12px, 1vw, 20px);
}

.section__grid {
  align-items: start;
}

.content-8 {
  grid-column: 3 / span 8;
}

.content-full {
  grid-column: 2 / span 10;
}

.content-6 {
  grid-column: 4 / span 6;
}

.content-8--wide {
  grid-column: 2 / span 10;
}

.content-8--narrow {
  grid-column: 4 / span 6;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  color: var(--text-light);
  background: var(--bg-dark);
  box-shadow: 0 8px 18px rgba(33, 18, 15, 0.3);
}

.topbar__grid {
  align-items: center;
  min-height: clamp(56px, 3.6vw, 72px);
}

.brand {
  grid-column: 2 / span 2;
  color: var(--text-light);
  font: 700 clamp(22px, 2.1vw, 34px)/1.02 var(--font-display);
}

.nav {
  grid-column: 4 / span 5;
  display: flex;
  justify-content: center;
  gap: clamp(14px, 1.5vw, 28px);
  flex-wrap: wrap;
}

.nav a {
  color: var(--text-light);
  font: 600 clamp(15px, 1.35vw, 26px)/1 var(--font-nav);
  text-decoration: none;
  transition: color var(--transition);
}

.nav a:hover,
.nav a:focus-visible,
.nav a.is-active {
  color: var(--gold-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.topbar-side {
  grid-column: 9 / span 4;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.socials {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lang-switch__button {
  border: 0;
  color: var(--bg-dark);
  background: var(--paper);
  cursor: pointer;
}

.socials a {
  display: inline-flex;
  width: clamp(30px, 1.9vw, 38px);
  height: clamp(30px, 1.9vw, 38px);
  padding: 6px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 5px;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.socials img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.lang-switch__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(30px, 1.9vw, 38px);
  height: clamp(30px, 1.9vw, 38px);
  padding: 6px;
  border-radius: 5px;
  font: 700 clamp(9px, 0.68vw, 11px)/1 var(--font-accent);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.lang-switch__button.is-active {
  color: var(--bg-dark);
  background: var(--paper);
  box-shadow: 0 0 0 2px rgba(17, 20, 23, 0.22), 0 1px 0 rgba(0, 0, 0, 0.15);
}

.section {
  padding-block: clamp(16px, 1.9vw, 28px);
}

.section--light {
  background: var(--bg-light);
}

.section--dark {
  color: var(--text-light);
  background: var(--bg-dark);
}

.skills {
  --skills-section-padding-top: clamp(16px, 1.9vw, 28px);
  --skills-section-padding-bottom: clamp(16px, 1.9vw, 28px);

  padding-top: var(--skills-section-padding-top);
  padding-bottom: var(--skills-section-padding-bottom);
}

.section-title {
  margin: 0 0 clamp(16px, 1.6vw, 24px);
  text-align: center;
  font: 700 clamp(28px, 2.7vw, 42px)/1.03 var(--font-display);
}

.section-title--gold {
  color: var(--gold);
}

.section-title--brown {
  color: var(--brown-strong);
}

.hero {
  padding-top: clamp(10px, 1.3vw, 16px);
  padding-bottom: clamp(10px, 1.3vw, 16px);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 5.15fr) minmax(280px, 4.85fr);
  gap: clamp(16px, 1.8vw, 28px);
  align-items: center;
}

.hero__copy {
  text-align: center;
}

.hero__title {
  margin: 0;
  color: var(--brown-strong);
  font: 700 clamp(30px, 2.8vw, 46px)/1.03 var(--font-display);
}

.hero__role {
  margin: clamp(4px, 0.55vw, 8px) 0 0;
  color: var(--bg-dark);
  font: 700 clamp(28px, 3vw, 54px)/1.14 var(--font-heading);
}

.hero__summary {
  max-width: 38ch;
  margin: clamp(8px, 0.95vw, 12px) auto 0;
  color: var(--text-dark);
  font: 500 clamp(18px, 1.55vw, 30px)/1.13 var(--font-heading);
}

.hero__image-wrap {
  overflow: hidden;
  border-radius: clamp(22px, 2.4vw, 36px);
}

.hero__image {
  width: 100%;
  height: clamp(200px, 20vw, 270px);
  object-fit: cover;
  object-position: 57% 24%;
}

.hero__platforms {
  margin: clamp(8px, 0.9vw, 12px) 0 0;
  text-align: center;
  font: 600 clamp(15px, 1.5vw, 28px)/1.14 var(--font-upright);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.15vw, 20px);
}

.metric {
  padding: clamp(10px, 1.1vw, 16px) clamp(8px, 0.85vw, 12px) clamp(10px, 1vw, 14px);
  border: 1px solid var(--panel-line);
  border-radius: 16px;
  text-align: center;
  background: var(--panel-soft);
}

.metric strong {
  display: block;
  color: var(--gold-soft);
  font: 700 clamp(22px, 2.15vw, 40px)/0.95 var(--font-heading);
}

.metric span {
  display: block;
  margin-top: 6px;
  color: var(--text-light);
  font: 500 clamp(14px, 1.35vw, 24px)/1.08 var(--font-heading);
}

.carousel-block {
  display: grid;
  grid-template-columns: 0.55fr 6.9fr 0.55fr;
  align-items: center;
  gap: clamp(8px, 1vw, 18px);
}

.projects .carousel-block,
.media .carousel-block {
  width: 100%;
}

.projects .content-full {
  grid-column: 2 / span 10;
}

.projects .carousel-block {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: clamp(12px, 1vw, 20px);
  max-width: 100%;
  margin-inline: auto;
}

.projects .arrow--left {
  grid-column: 1 / span 1;
}

.projects .project-card,
.projects .project-card__dots {
  grid-column: 2 / span 8;
}

.projects .project-card__dots {
  grid-row: 2;
}

.projects .arrow--right {
  grid-column: 10 / span 1;
}

.media .media-card,
.media .media-card__dots {
  grid-column: 2;
}

.media .media-card__dots {
  grid-row: 2;
}

.projects .section-title {
  margin-bottom: clamp(22px, 2.7vw, 42px);
  font-size: clamp(28px, 2.7vw, 42px);
  line-height: 1.03;
}

.arrow {
  width: 100%;
  height: clamp(44px, 5.2vw, 88px);
  border: 0;
  color: var(--brown-strong);
  font: 600 clamp(28px, 3.7vw, 62px)/1 var(--font-heading);
  background: transparent;
  cursor: pointer;
  align-self: center;
  justify-self: center;
}

.projects .arrow {
  color: #8b3e2f;
  font-size: clamp(52px, 6.4vw, 112px);
}

.section--dark .arrow {
  color: var(--gold);
}

.arrow:disabled {
  opacity: 0.3;
}

.project-card__item,
.media-card {
  border: 1px solid rgba(139, 62, 47, 0.65);
  border-radius: 18px;
  background: var(--card-tint);
}

.media-card {
  box-shadow: 0 4px 10px rgba(33, 18, 15, 0.08);
}

.project-card {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transition: opacity 260ms ease, transform 260ms ease;
}

.project-card.is-transitioning {
  opacity: 0;
  transform: translateX(28px);
}

.project-card__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1vw, 18px);
}

.project-card__deck {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 32px);
  align-items: stretch;
}

.project-card__item {
  --project-card-pad-x: 20px;
  --project-card-pad-y: 20px;

  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 0 var(--project-card-pad-y);
  text-align: center;
  background: var(--card-tint);
}

.project-card__visual {
  position: relative;
  display: flex;
  align-items: stretch;
  align-self: stretch;
  order: 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-bottom: 2px solid var(--brown);
  border-radius: 18px 18px 20px 20px;
  background: transparent;
}

.project-card__visual::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 36%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(30, 5, 5, 0.9) 100%);
}

.project-card__slides,
.project-card__image,
.project-card__fallback {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  aspect-ratio: var(--project-image-aspect-ratio, 700 / 501);
  height: auto;
  min-height: clamp(220px, 21vw, 340px);
  border-radius: 18px 18px 18px 18px;
}

.project-card__slides {
  position: relative;
  overflow: hidden;
}

.project-card__image {
  display: block;
  object-fit: cover;
  object-position: 39% 50%;
}

.project-card__slides .project-card__image {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
}

.project-card__slides.has-slideshow .project-card__image {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: project-card-slideshow 10s infinite;
  animation-delay: var(--project-slide-delay, 0s);
}

.project-card__slides.has-slideshow .project-card__image:first-child {
  position: absolute;
}

@keyframes project-card-slideshow {
  0%,
  45%,
  100% {
    opacity: 1;
  }

  50%,
  95% {
    opacity: 0;
  }
}

.project-card__fallback {
  display: grid;
  place-items: center;
  padding: 18px;
  color: var(--text-light);
  text-align: center;
  overflow: hidden;
  overflow-wrap: anywhere;
  font: 700 clamp(17px, 1.25vw, 24px)/1.06 var(--font-display);
  background: linear-gradient(135deg, rgba(193, 138, 61, 0.85), rgba(90, 31, 27, 0.9));
}

.project-card__fallback[hidden] {
  display: none;
}

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

.project-card__role {
  position: absolute;
  right: clamp(12px, 1.4vw, 24px);
  bottom: clamp(14px, 1.25vw, 22px);
  left: clamp(12px, 1.4vw, 24px);
  z-index: 2;
  margin: 0;
  color: var(--gold);
  text-align: center;
  overflow-wrap: anywhere;
  font: 700 clamp(22px, 1.75vw, 36px)/1.06 var(--font-display);
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(30, 5, 5, 0.85), 0 0 12px rgba(30, 5, 5, 0.65);
}

.project-card__description {
  order: 5;
  margin: clamp(16px, 1.4vw, 24px) 0 0;
  padding-inline: var(--project-card-pad-x);
  color: var(--text-dark);
  text-align: left;
  font: 500 clamp(16px, 1.05vw, 20px)/1.45 var(--font-heading);
}

.project-card__links {
  order: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: clamp(14px, 1.15vw, 20px);
  padding-inline: var(--project-card-pad-x);
}

.project-card__links[hidden] {
  display: none;
}

.project-card__platform {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 6px;
  border: 1px solid rgba(139, 62, 47, 0.55);
  border-radius: 10px;
  color: var(--brown-strong);
  font: 700 clamp(11px, 0.72vw, 13px)/1 var(--font-accent);
  text-decoration: none;
  background: rgba(247, 232, 198, 0.45);
  transition: transform var(--transition), background var(--transition), color var(--transition);
}

.project-card__platform[href]:hover,
.project-card__platform[href]:focus-visible {
  transform: translateY(-1px);
  color: var(--text-light);
  background: var(--brown-strong);
}

.project-card__platform.is-disabled {
  opacity: 0.62;
  cursor: default;
}

.project-card__summary {
  order: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
  margin-top: clamp(18px, 1.4vw, 24px);
  padding-inline: var(--project-card-pad-x);
  color: var(--text-dark);
  text-align: left;
  font: 700 clamp(9px, 0.64vw, 12px)/1.08 var(--font-accent);
}

.project-card__summary span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 6px;
  border: 1px solid rgba(228, 193, 111, 0.45);
  border-radius: 10px;
  color: var(--text-light);
  text-align: center;
  background: rgba(33, 18, 15, 0.48);
}

.carousel-dots,
.project-card__dots,
.media-card__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.project-card__dot,
.media-card__dot {
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brown-strong);
  opacity: 0.85;
}

.project-card__dot.is-active,
.media-card__dot.is-active {
  background: #8b3e2f;
  opacity: 1;
}

.skills-layout {
  display: block;
}

.skills-map {
  position: relative;
  width: min(100%, 1480px);
  min-height: var(--skills-map-height, clamp(420px, 31vw, 520px));
  margin-inline: auto;
  padding: 10px 0;
  overflow: visible;
}

.skills .section-title {
  margin-bottom: clamp(12px, 1vw, 16px);
}

.skills-center,
.skills-node {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(228, 193, 111, 0.55);
  border-radius: 50%;
  text-align: center;
  transform-origin: center center;
}

.skills-center {
  width: clamp(132px, 9.4vw, 158px);
  aspect-ratio: 1;
  margin-inline: auto;
  padding: 10px;
  gap: 4px;
  flex-direction: column;
  color: var(--text-light);
  font: 700 clamp(10px, 0.72vw, 15px)/1.08 var(--font-display);
  background: radial-gradient(circle at 50% 28%, rgba(193, 138, 61, 0.25), rgba(90, 31, 27, 0.95));
  box-shadow: 0 0 0 1px rgba(228, 193, 111, 0.18), 0 10px 24px rgba(0, 0, 0, 0.14);
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.skills-center__icon {
  width: clamp(28px, 2.2vw, 44px);
  height: auto;
}

.skills-center__label {
  display: block;
  max-width: 78%;
  padding-inline: 5px;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.02;
  text-transform: uppercase;
}

.skills-node {
  position: relative;
  width: clamp(92px, 7vw, 112px);
  aspect-ratio: 1;
  padding: 6px;
  gap: 3px;
  flex-direction: column;
  color: var(--text-light);
  font: 700 clamp(7px, 0.56vw, 10px)/1.02 var(--font-display);
  background: radial-gradient(circle at 50% 28%, rgba(193, 138, 61, 0.18), rgba(90, 31, 27, 0.92));
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.skills-node__icon {
  width: clamp(20px, 1.35vw, 26px);
  height: clamp(20px, 1.35vw, 26px);
  object-fit: contain;
}

.skills-node span {
  display: block;
  max-width: 82%;
  max-height: 4.2em;
  padding-inline: 3px;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.14;
  text-transform: uppercase;
}

.skills-node:hover,
.skills-node:focus-visible,
.skills-node.is-active {
  transform: scale(1.03);
  box-shadow: 0 0 0 2px rgba(228, 193, 111, 0.22);
  background: radial-gradient(circle at 50% 28%, rgba(228, 193, 111, 0.25), rgba(139, 62, 47, 0.96));
}

.skills-tree__root {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  transform-origin: center center;
  z-index: 5;
}

.skills-branch > .skills-node {
  z-index: 5;
  margin-inline: auto;
}

.skills-tree__arrows {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: visible;
  pointer-events: none;
}

.skills-tree__arrows line,
.skills-branch__arrows line {
  stroke: rgba(228, 193, 111, 0.78);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  marker-end: url(#skill-arrowhead);
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 620ms ease, opacity 360ms ease;
}

.skills-tree__arrows path {
  fill: rgba(247, 232, 198, 0.95);
}

.skills-tree__branches {
  position: relative;
  z-index: 4;
  min-height: clamp(400px, 29vw, 500px);
}

.skills-branch {
  position: absolute;
  width: clamp(184px, 12.8vw, 214px);
  text-align: center;
  transform: translateX(-50%);
  transform-origin: center center;
}

.skills-branch[data-branch="0"] { left: 2%; top: clamp(80px, 6.5vw, 114px); }
.skills-branch[data-branch="1"] { left: 20%; top: clamp(180px, 10.0vw, 220px); }
.skills-branch[data-branch="2"] { left: 36%; top: clamp(280px, 15.0vw, 330px); }
.skills-branch[data-branch="3"] { left: 64%; top: clamp(280px, 15.0vw, 330px); }
.skills-branch[data-branch="4"] { left: 80%; top: clamp(180px, 10.0vw, 220px); }
.skills-branch[data-branch="5"] { left: 98%; top: clamp(80px, 6.5vw, 114px); }

.skills-branch.is-active { z-index: 30; }

.skills-branch:has(.skills-tree__skills) { z-index: 120; }

.skills-branch[data-branch="3"] { width: clamp(232px, 16.5vw, 276px); }

.skills-branch__arrows {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: clamp(132px, 9.4vw, 158px);
  margin: calc(clamp(92px, 7vw, 112px) / -2.2) auto 0;
  overflow: visible;
  pointer-events: none;
}

.skills-tree__group-column {
  position: relative;
  z-index: 10;
  left: 50%;
  display: flex;
  width: max-content;
  max-width: none;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  justify-items: center;
  align-content: flex-start;
  gap: clamp(4px, 0.3vw, 6px);
  min-height: clamp(132px, 9.5vw, 168px);
  margin-top: calc(clamp(132px, 9.4vw, 158px) / -3.6);
  transform: translateX(-50%);
}

.skills-tree__group-column:has(.skills-tree__skills) { z-index: 110; }

.skills-tree__group-column::before,
.skills-tree__group-column::after { display: none; }

.skills-tree__group-slot {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: center;
  transition: transform 260ms ease;
}

.skills-tree__group-slot::before { display: none; }

.skills-tree__group-slot:has(.skills-tree__skills) {
  z-index: 130;
}

.skills-tree__group-slot:has(.skills-group-node.is-active) {
  transform: none;
}

.skills-group-node {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--skills-group-width, 56px);
  height: clamp(48px, 3.5vw, 58px);
  padding: clamp(3px, 0.25vw, 5px);
  border: 1px solid rgba(228, 193, 111, 0.55);
  border-radius: 999px;
  color: var(--text-light);
  text-align: center;
  background: radial-gradient(circle at 50% 28%, rgba(193, 138, 61, 0.18), rgba(90, 31, 27, 0.92));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  transform-origin: center center;
  transition: width 260ms ease, transform 260ms ease, box-shadow var(--transition), background var(--transition), opacity var(--transition);
}

.skills-group-node::before {
  display: none;
}

.skills-group-node span {
  display: block;
  width: 92%;
  max-height: 4.4em;
  margin: 0;
  color: var(--text-light);
  font: 400 clamp(8px, 0.56vw, 10px)/1.02 var(--font-skill-group);
  letter-spacing: -0.035em;
  overflow: visible;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: manual;
  text-align: center;
  text-transform: uppercase;
}

.skills-group-node:hover,
.skills-group-node:focus-visible {
  transform: scale(1.03);
  box-shadow: 0 0 0 2px rgba(228, 193, 111, 0.22), 0 10px 24px rgba(0, 0, 0, 0.14);
  background: radial-gradient(circle at 50% 28%, rgba(228, 193, 111, 0.25), rgba(139, 62, 47, 0.96));
}

.skills-group-node.is-active {
  box-shadow: 0 0 0 2px rgba(228, 193, 111, 0.22), 0 10px 24px rgba(0, 0, 0, 0.14);
  background: radial-gradient(circle at 50% 28%, rgba(228, 193, 111, 0.25), rgba(139, 62, 47, 0.96));
}

.skills-group-node.is-active span {
  font-size: clamp(8px, 0.56vw, 10px);
}

.skills-tree__skills {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 16px);
  z-index: 140;
  width: min(calc(100vw - 32px), 310px);
  padding: clamp(10px, 0.72vw, 13px);
  border: 1px solid rgba(228, 193, 111, 0.42);
  border-radius: 18px;
  color: var(--text-light);
  background: rgba(33, 18, 15, 0.82);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  transform: translateX(-50%);
  animation: skills-popup-in 160ms ease-out;
}

.skills-branch[data-branch="0"] .skills-tree__skills,
.skills-branch[data-branch="1"] .skills-tree__skills {
  left: 0;
  transform: none;
}

.skills-branch[data-branch="4"] .skills-tree__skills,
.skills-branch[data-branch="5"] .skills-tree__skills {
  right: 0;
  left: auto;
  transform: none;
}

.skills-tree__skills::before {
  display: none;
}

.skills-tree__skills h3 {
  margin: 0 0 8px;
  color: var(--gold-soft);
  text-align: center;
  font: 700 clamp(15px, 1vw, 19px)/1.04 var(--font-accent);
  text-transform: uppercase;
}

.skills-tree__skill-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.skills-tree__skill-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 6px;
  border: 1px solid rgba(228, 193, 111, 0.45);
  border-radius: 10px;
  color: var(--text-light);
  text-align: center;
  font: 400 clamp(9px, 0.64vw, 12px)/1.08 var(--font-skill-group);
  background: rgba(33, 18, 15, 0.48);
}

.skills-map .skills-tree__root,
.skills-map .skills-branch {
  opacity: 0;
  transition: opacity 420ms ease, transform 520ms ease;
}

.skills-map .skills-tree__root {
  transform: translate(-50%, 14px) scale(0.96);
}

.skills-map .skills-branch {
  transform: translate(-50%, 16px) scale(0.96);
}

.skills-map.is-visible .skills-tree__root {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.skills-map.is-visible .skills-branch {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.skills-map.is-visible .skills-tree__arrows line,
.skills-map.is-visible .skills-branch__arrows line {
  stroke-dashoffset: 0;
}

.skills-map.is-visible .skills-branch[data-branch="0"] { transition-delay: 180ms; }
.skills-map.is-visible .skills-branch[data-branch="5"] { transition-delay: 260ms; }
.skills-map.is-visible .skills-branch[data-branch="1"] { transition-delay: 340ms; }
.skills-map.is-visible .skills-branch[data-branch="4"] { transition-delay: 420ms; }
.skills-map.is-visible .skills-branch[data-branch="2"] { transition-delay: 500ms; }
.skills-map.is-visible .skills-branch[data-branch="3"] { transition-delay: 580ms; }

.skills-map.is-visible .skills-tree__arrows line { transition-delay: 160ms; }
.skills-map.is-visible .skills-branch__arrows line { transition-delay: 640ms; }

@keyframes skills-popup-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.skills-panel {
  display: none;
  height: clamp(320px, 24vw, 390px);
  padding: clamp(14px, 1vw, 18px) 18px;
  border: 1px solid #d7c8b4;
  border-radius: 10px;
  color: var(--brown);
  background: var(--paper);
  box-shadow: none;
  overflow: auto;
}

.skills-panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  justify-content: flex-start;
}

.skills-panel__icon {
  width: 38px;
  height: 30px;
  object-fit: contain;
  flex: 0 0 auto;
}

.skills-panel__title {
  flex: 0 1 auto;
  margin: 0;
  color: var(--brown-strong);
  text-align: left;
  font: 700 clamp(17px, 1.25vw, 28px)/1.1 var(--font-heading);
}

.skills-panel__group + .skills-panel__group {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(90, 31, 27, 0.35);
}

.skills-panel__subtitle {
  margin: 0 0 8px;
  color: var(--brown-strong);
  font: 700 clamp(13px, 0.92vw, 19px)/1.1 var(--font-heading);
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 6px;
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-chip);
  color: var(--text-light);
  font: 700 clamp(7px, 0.52vw, 10px)/1.15 var(--font-display);
  background: var(--brown);
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
}

.media-card {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  transition: opacity 240ms ease, transform 240ms ease;
}

.media-card.is-transitioning {
  opacity: 0;
  transform: translateX(22px);
}

.media-card__title {
  margin: 0 0 12px;
  color: var(--brown-strong);
  text-align: center;
  font: 700 clamp(22px, 1.95vw, 36px)/1.2 var(--font-heading);
}

.media-card__video-wrap {
  overflow: hidden;
  border-radius: 16px;
  background: #000;
  aspect-ratio: 16 / 9;
}

.media-card__video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.media-card__footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin-top: 12px;
  align-items: end;
}

.media-card__description,
.media-card__meta {
  margin: 0;
  color: var(--text-dark);
  font: 600 clamp(14px, 1.35vw, 24px)/1.12 var(--font-heading);
}

.media-card__lang {
  margin-top: 6px;
  color: var(--text-dark);
  font-size: clamp(14px, 1.35vw, 24px);
}

.media-card__meta {
  color: var(--text-dark);
  font-size: clamp(14px, 1.35vw, 24px);
  line-height: 1;
  text-align: right;
}

.media-card__dots {
  margin-top: 14px;
}

.career-grid {
  display: flex;
  flex-direction: column;
  width: min(100%, 1320px);
  margin-inline: auto;
  gap: clamp(4px, 0.45vw, 8px);
}

.career-stage {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(6px, 0.6vw, 10px);
  justify-items: center;
}

.career-stage--top {
  padding-inline: 0;
}

.career-stage--bottom {
  padding-inline: 0;
}

.career-stage--top .career-item:nth-child(1) { grid-column: 1; }
.career-stage--top .career-item:nth-child(2) { grid-column: 3; }
.career-stage--top .career-item:nth-child(3) { grid-column: 5; }

.career-stage--bottom .career-item:nth-child(1) { grid-column: 2; }
.career-stage--bottom .career-item:nth-child(2) { grid-column: 4; }
.career-stage--bottom .career-item:nth-child(3) { grid-column: 6; }

.career-timeline {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(6px, 0.55vw, 10px);
  align-items: center;
  padding-inline: clamp(8px, 0.55vw, 14px);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 760ms ease;
}

.career-item {
  --career-card-background: var(--panel-soft);
  --career-card-border: var(--panel-line);

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: clamp(220px, 16.8vw, 286px);
  gap: 8px;
  min-height: clamp(128px, 10vw, 160px);
  padding: clamp(10px, 0.72vw, 12px) clamp(10px, 0.72vw, 12px);
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 420ms ease, transform 520ms ease;
}

.career-item::before,
.career-item::after {
  content: "";
  position: absolute;
  pointer-events: none;
  clip-path: inherit;
}

.career-item::before {
  inset: 0;
  z-index: -2;
  background: var(--career-card-border);
}

.career-item::after {
  inset: 1px;
  z-index: -1;
  background: var(--career-card-background);
}

.career-item--top {
  clip-path: polygon(0 0, 100% 0, 100% 91.5%, 50% 100%, 0 91.5%);
  padding-bottom: clamp(12px, 0.8vw, 14px);
}

.career-item--bottom {
  clip-path: polygon(0 8.5%, 50% 0, 100% 8.5%, 100% 100%, 0 100%);
  justify-content: flex-end;
  padding-top: clamp(12px, 0.8vw, 14px);
}

.career-item__title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--gold-soft);
  font: 700 clamp(18px, 1.55vw, 28px)/1.05 var(--font-nav);
}

.career-item__copy {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--text-light);
  font: 400 clamp(14px, 0.95vw, 18px)/1.18 var(--font-heading);
}

.career-item--bottom .career-item__copy {
  margin-top: 0;
}

.career-item--bottom .career-item__title {
  margin-top: 0;
  padding-top: 0;
}

.career-pill {
  display: inline-flex;
  min-height: clamp(44px, 2.6vw, 54px);
  align-items: center;
  justify-content: center;
  padding: 5px clamp(14px, 0.95vw, 18px);
  position: relative;
  color: var(--text-dark);
  text-align: center;
  font: 600 clamp(14px, 1.3vw, 26px)/1 var(--font-upright);
  background: #f7e8c6;
  clip-path: polygon(0 0, calc(100% - 21px) 0, 100% 50%, calc(100% - 21px) 100%, 0 100%, 21px 50%);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 280ms ease, transform 360ms ease;
}

.career-mobile {
  display: none;
}

.career-mobile__row {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 420ms ease, transform 520ms ease;
}

.career-mobile__period {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dark);
  text-align: center;
  font: 600 clamp(17px, 5.2vw, 24px)/0.95 var(--font-upright);
  background: #f7e8c6;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 10px 50%);
  box-shadow: 0 4px 10px rgba(17, 20, 23, 0.24);
}

.career-mobile__card {
  --career-card-background: var(--panel-soft);
  --career-card-border: var(--panel-line);

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 0;
  border-radius: 5px;
  color: var(--text-light);
  background: transparent;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), 50% 100%, 0 calc(100% - 32px));
}

.career-mobile__card::before,
.career-mobile__card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  clip-path: inherit;
}

.career-mobile__card::before {
  inset: 0;
  z-index: -2;
  background: var(--career-card-border);
}

.career-mobile__card::after {
  inset: 1px;
  z-index: -1;
  background: var(--career-card-background);
}

.career-grid.is-visible .career-timeline {
  clip-path: inset(0 0 0 0);
}

.career-grid.is-visible .career-pill {
  opacity: 1;
  transform: none;
}

.career-grid.is-visible .career-item {
  opacity: 1;
  transform: none;
}

.career-grid.is-visible .career-mobile__row {
  opacity: 1;
  transform: none;
}

.career-grid.is-visible .career-pill:nth-child(1) { transition-delay: 80ms; }
.career-grid.is-visible .career-pill:nth-child(2) { transition-delay: 150ms; }
.career-grid.is-visible .career-pill:nth-child(3) { transition-delay: 220ms; }
.career-grid.is-visible .career-pill:nth-child(4) { transition-delay: 290ms; }
.career-grid.is-visible .career-pill:nth-child(5) { transition-delay: 360ms; }
.career-grid.is-visible .career-pill:nth-child(6) { transition-delay: 430ms; }

.career-grid.is-visible .career-stage--top .career-item:nth-child(1) { transition-delay: 660ms; }
.career-grid.is-visible .career-stage--bottom .career-item:nth-child(1) { transition-delay: 730ms; }
.career-grid.is-visible .career-stage--top .career-item:nth-child(2) { transition-delay: 800ms; }
.career-grid.is-visible .career-stage--bottom .career-item:nth-child(2) { transition-delay: 870ms; }
.career-grid.is-visible .career-stage--top .career-item:nth-child(3) { transition-delay: 940ms; }
.career-grid.is-visible .career-stage--bottom .career-item:nth-child(3) { transition-delay: 1010ms; }

.career-grid.is-visible .career-mobile__row:nth-child(1) { transition-delay: 80ms; }
.career-grid.is-visible .career-mobile__row:nth-child(2) { transition-delay: 150ms; }
.career-grid.is-visible .career-mobile__row:nth-child(3) { transition-delay: 220ms; }
.career-grid.is-visible .career-mobile__row:nth-child(4) { transition-delay: 290ms; }
.career-grid.is-visible .career-mobile__row:nth-child(5) { transition-delay: 360ms; }
.career-grid.is-visible .career-mobile__row:nth-child(6) { transition-delay: 430ms; }

.contact-actions {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 1.2vw, 20px);
  flex-wrap: wrap;
}

.contact-button {
  display: inline-flex;
  min-width: 280px;
  min-height: 80px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  border: 1px solid var(--panel-line);
  border-radius: 18px;
  color: var(--gold-soft);
  font: 700 clamp(20px, 1.75vw, 34px)/1 var(--font-heading);
  text-decoration: none;
  background: var(--panel-soft);
}

.contact-button__icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex: 0 0 auto;
}

.contact-button__icon--email {
  width: 50px;
  height: 50px;
}

.contact-button span {
  line-height: 1;
}

.contact-extra {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 1.8vw, 24px);
  flex-wrap: wrap;
  margin-top: 22px;
}

.contact-extra:empty {
  display: none;
}

.contact-extra a {
  color: var(--text-light);
  font: 500 clamp(14px, 1.05vw, 17px)/1.1 var(--font-heading);
  text-decoration: none;
}

.socials a:hover,
.socials a:focus-visible,
.lang-switch__button:hover,
.lang-switch__button:focus-visible,
.contact-button:hover,
.contact-button:focus-visible,
.contact-extra a:hover,
.contact-extra a:focus-visible {
  opacity: 0.85;
}

:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 2px;
}

@media (max-width: 1199px) {
  .content-8,
  .content-full,
  .content-6,
  .content-8--wide {
    grid-column: 2 / span 10;
  }

  .content-8--narrow {
    grid-column: 3 / span 8;
  }

  .topbar__grid {
    min-height: 74px;
  }

  .brand {
    grid-column: 1 / span 3;
  }

  .nav {
    grid-column: 4 / span 5;
  }

  .topbar-side {
    grid-column: 8 / span 5;
  }

  .skills-layout {
    grid-template-columns: 1fr;
  }

  .skills-layout {
    gap: 22px;
  }

  .skills-map {
    max-width: 100%;
    margin-inline: auto;
  }

  .skills-panel__head {
    justify-content: flex-start;
  }

  .skills-panel__title {
    text-align: left;
  }

  .project-card__deck {
    gap: clamp(14px, 1.7vw, 22px);
  }

  .project-card__item {
    --project-card-pad-x: 20px;

    padding: 0 0 var(--project-card-pad-y);
  }

  .carousel-block {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
  }

  .arrow {
    font-size: 62px;
  }

  .skills-panel {
    height: auto;
    min-height: auto;
    overflow: visible;
  }

  .career-stage,
  .career-timeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .career-stage .career-item {
    grid-column: auto;
    width: 100%;
    max-width: none;
  }

  .career-stage--bottom {
    padding-inline: 0;
  }

  .skills-map {
    min-height: 0;
  }

  .skills-tree__root {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin-inline: auto;
  }

  .skills-map .skills-tree__root,
  .skills-map.is-visible .skills-tree__root,
  .skills-map .skills-branch,
  .skills-map.is-visible .skills-branch {
    transform: none;
  }

  .skills-tree__arrows,
  .skills-branch__arrows {
    display: none;
  }

  .skills-tree__branches {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    gap: 24px 14px;
    min-height: 0;
    margin-top: 24px;
  }

  .skills-branch {
    position: relative;
    left: auto !important;
    top: auto !important;
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    transform: none;
  }

  .skills-tree__group-column {
    left: auto;
    display: flex;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    justify-items: center;
    gap: 12px 10px;
    min-height: auto;
    margin-top: 14px;
    transform: none;
  }

  .skills-tree__group-slot {
    flex: 0 1 auto;
  }
}

@media (max-width: 1199px) and (max-aspect-ratio: 11/10) {
  .career-stage,
  .career-timeline {
    display: none;
  }

  .career-mobile {
    display: grid;
    width: min(100%, 560px);
    margin-inline: auto;
    gap: 18px;
  }

  .career-mobile__row {
    display: grid;
    grid-template-columns: clamp(88px, 24vw, 112px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(10px, 3vw, 16px);
  }

  .career-mobile__period {
    min-height: clamp(70px, 18vw, 86px);
    padding: 8px 16px 8px 10px;
    margin-top: 0;
  }

  .career-mobile__card {
    min-height: clamp(250px, 68vw, 350px);
    padding: clamp(18px, 5vw, 26px) clamp(14px, 4.5vw, 22px) 46px;
  }

  .career-mobile__card .career-item__title {
    font-size: clamp(24px, 7vw, 34px);
  }

  .career-mobile__card .career-item__copy {
    font-size: clamp(18px, 5.6vw, 26px);
    line-height: 1.18;
  }
}

@media (max-width: 899px) {
  .layout-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 12px;
    padding-inline: 16px;
  }

  .topbar__grid {
    min-height: auto;
    row-gap: 10px;
    padding-block: 12px;
  }

  .brand,
  .nav,
  .topbar-side,
  .content-full,
  .content-6,
  .content-8,
  .content-8--wide,
  .content-8--narrow,
  .projects .content-full {
    grid-column: 1 / -1;
  }

  .brand {
    text-align: center;
  }

  .nav,
  .topbar-side {
    justify-content: center;
  }

  .hero__inner,
  .metrics,
  .media-card__footer {
    grid-template-columns: 1fr;
  }

  .career-stage,
  .career-timeline {
    grid-template-columns: 1fr;
  }

  .career-stage,
  .career-timeline {
    display: none;
  }

  .career-mobile {
    display: grid;
    width: min(100%, 560px);
    margin-inline: auto;
    gap: 18px;
  }

  .career-mobile__row {
    display: grid;
    grid-template-columns: clamp(88px, 24vw, 112px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(10px, 3vw, 16px);
  }

  .career-mobile__period {
    min-height: clamp(70px, 18vw, 86px);
    padding: 8px 16px 8px 10px;
    margin-top: 0;
  }

  .career-mobile__card {
    min-height: clamp(250px, 68vw, 350px);
    padding: clamp(18px, 5vw, 26px) clamp(14px, 4.5vw, 22px) 46px;
  }

  .career-mobile__card .career-item__title {
    font-size: clamp(24px, 7vw, 34px);
  }

  .career-mobile__card .career-item__copy {
    font-size: clamp(18px, 5.6vw, 26px);
    line-height: 1.18;
  }

  .career-stage .career-item {
    width: 100%;
  }

  .hero__copy {
    order: 2;
  }

  .hero__image-wrap {
    order: 1;
  }

  .hero__summary {
    max-width: 40ch;
  }

  .carousel-block {
    grid-template-columns: 1fr;
  }

  .projects .carousel-block,
  .media .carousel-block {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }

  .projects .project-card,
  .projects .project-card__dots,
  .media .media-card,
  .media .media-card__dots {
    grid-column: 1 / -1;
  }

  .projects .project-card,
  .media .media-card {
    grid-row: 1;
    justify-self: center;
    width: min(100%, 560px);
  }

  .projects .arrow--left,
  .media .arrow--left {
    grid-column: 1;
    grid-row: 2;
  }

  .projects .project-card__dots,
  .media .media-card__dots {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }

  .projects .arrow--right,
  .media .arrow--right {
    grid-column: 3;
    grid-row: 2;
  }

  .project-card__deck {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .project-card__item:nth-child(2) {
    display: none;
  }

  .project-card__item {
    width: min(100%, 560px);
    height: auto;
    min-height: 0;
  }

  .arrow {
    width: auto;
    height: auto;
    padding: 0;
  }

  .arrow--left,
  .arrow--right {
    justify-self: center;
    margin-top: 0;
  }

  .skills-layout {
    grid-template-columns: 1fr;
  }

  .skills-map {
    min-height: 0;
  }

  .skills-tree__root {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin-inline: auto;
  }

  .skills-map .skills-tree__root,
  .skills-map.is-visible .skills-tree__root {
    transform: none;
  }

  .skills-map .skills-branch,
  .skills-map.is-visible .skills-branch {
    transform: none;
  }

  .skills-tree__arrows,
  .skills-branch__arrows {
    display: none;
  }

  .skills-tree__branches {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    gap: 24px 14px;
    min-height: 0;
    margin-top: 24px;
  }

  .skills-branch {
    position: relative;
    left: auto !important;
    top: auto !important;
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    transform: none;
  }

  .skills-panel {
    height: auto;
    min-height: auto;
    overflow: visible;
  }

  .contact-button {
    min-width: min(100%, 320px);
    min-height: 76px;
    font-size: clamp(22px, 6vw, 32px);
  }

  .skills-center {
    font-size: clamp(11px, 2.7vw, 16px);
  }

  .skills-tree__subbranches,
  .skills-group-node::before {
    display: none;
  }

  .skills-tree__group-column {
    left: auto;
    display: flex;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    justify-items: center;
    gap: 12px 10px;
    min-height: auto;
    margin-top: 14px;
    transform: none;
  }

  .skills-tree__group-slot {
    flex: 0 1 auto;
  }

  .skills-tree__skills {
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(100% + 10px);
    width: min(calc(100vw - 32px), 360px);
    transform: translateX(-50%);
  }

  .skills-branch[data-branch] .skills-tree__skills {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .skills-tree__skills::before {
    display: none;
  }

  .skills-node {
    width: min(25vw, 112px);
  }

  .skills-group-node {
    width: max(var(--skills-group-width, 60px), clamp(60px, 17vw, 72px));
    height: clamp(52px, 16vw, 64px);
    border-radius: 50%;
  }

  .skills-group-node.is-active {
    width: max(var(--skills-group-width, 60px), clamp(60px, 17vw, 72px));
    height: clamp(52px, 16vw, 64px);
    transform: none;
  }

  .skills-group-node span,
  .skills-group-node.is-active span {
    width: 90%;
    font-size: clamp(7px, 1.8vw, 9px);
    line-height: 1.05;
    letter-spacing: -0.02em;
  }

  .skills-node {
    font-size: clamp(7px, 1.65vw, 11px);
  }

  .skills-node__icon {
    width: clamp(14px, 3.2vw, 22px);
    height: clamp(14px, 3.2vw, 22px);
  }

  .skills-center__icon {
    width: clamp(28px, 7vw, 42px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .skills-map .skills-tree__root,
  .skills-map .skills-branch,
  .skills-tree__arrows line,
  .skills-branch__arrows line,
  .career-timeline,
  .career-pill,
  .career-item {
    transition: none;
  }

  .project-card__slides.has-slideshow .project-card__image {
    animation: none;
  }

  .project-card__slides.has-slideshow .project-card__image:first-child {
    opacity: 1;
  }
}

@media (max-width: 599px) {
  .section {
    padding-block: 20px 24px;
  }

  .nav {
    gap: 14px;
  }

  .socials {
    gap: 8px;
  }

  .hero__platforms {
    font-size: 14px;
  }

  .project-card__image,
  .project-card__fallback {
    min-height: 200px;
  }

  .contact-actions {
    flex-direction: column;
  }

  .career-mobile {
    gap: 16px;
  }

  .career-mobile__row {
    grid-template-columns: clamp(82px, 24vw, 96px) minmax(0, 1fr);
    gap: 10px;
  }

  .career-mobile__period {
    min-height: 74px;
    font-size: clamp(18px, 6vw, 22px);
  }

  .career-mobile__card {
    min-height: 330px;
  }

  .skills-tree__branches {
    grid-template-columns: 1fr;
  }

  .skills-branch {
    max-width: 520px;
  }

  .skills-node {
    width: min(34vw, 118px);
  }

  .skills-group-node,
  .skills-group-node.is-active {
    width: max(var(--skills-group-width, 64px), clamp(64px, 20vw, 78px));
    height: clamp(56px, 18vw, 66px);
  }
}