.engineer-profile {
  --profile-accent: var(--ew-accent);
  --profile-ink: var(--ew-ink);
  --profile-copy: var(--ew-copy);
  --profile-radius: 18px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 72px;
  color: var(--profile-ink);
}

[data-theme="light"] .engineer-profile {
  --profile-accent: #006f85;
  --profile-ink: #111c20;
  --profile-copy: #52636c;
}

.engineer-profile::before,
.engineer-profile::after {
  position: absolute;
  z-index: -1;
  width: min(28%, 380px);
  aspect-ratio: 520 / 302;
  background: var(--ew-accent);
  mask: url("./assets/platforms/profile-traces.svg") center / contain no-repeat;
  opacity: .14;
  pointer-events: none;
  content: "";
}

.engineer-profile::before { top: 24px; left: 0; }
.engineer-profile::after { bottom: 16px; right: 0; width: min(17%, 220px); transform: rotate(180deg); }

.engineer-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(38px, 6vw, 84px);
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.engineer-portrait {
  position: relative;
  isolation: isolate;
  width: min(100% - 24px, 380px);
  aspect-ratio: 4 / 5;
  margin: 0 auto;
}

.engineer-portrait::after {
  position: absolute;
  z-index: -1;
  inset: 12px 10px -10px -10px;
  border: 1px solid color-mix(in srgb, var(--ew-accent) 36%, transparent);
  border-radius: var(--profile-radius);
  background: var(--ew-accent-soft);
  content: "";
}

.engineer-photo {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--ew-line);
  border-radius: var(--profile-radius);
  background: var(--ew-surface-soft);
  color: var(--ew-copy);
  font-size: 28px;
  font-weight: 700;
}

.engineer-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 47% center; }

.engineer-identity {
  position: absolute;
  left: -18px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 10px 15px 10px 11px;
  border: 1px solid var(--ew-line);
  border-radius: 8px;
  background: var(--ew-surface);
  box-shadow: 0 4px 16px #07090b14;
  overflow-wrap: anywhere;
}

.engineer-identity img { width: 34px; height: 34px; flex: 0 0 34px; object-fit: contain; }
.engineer-identity strong { display: block; font-size: 14px; line-height: 1.25; }
.engineer-identity span { display: block; margin-top: 3px; font-size: 12px; color: var(--profile-copy); }

.engineer-profile-copy .engineer-profile-kicker {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 16px;
  color: var(--profile-accent);
  font: 500 11px/1.5 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0;
  text-transform: uppercase;
}

.engineer-profile-kicker::after { width: 36px; height: 1px; background: currentColor; content: ""; }

.engineer-profile-copy h2 {
  max-width: 100%;
  margin: 0;
  color: var(--profile-ink);
  font-size: 36px;
  line-height: 1.16;
  font-weight: var(--site-heading-weight, 700);
  letter-spacing: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.engineer-profile-copy h2 span { color: var(--profile-accent); }
.engineer-bio { margin: 20px 0 22px; }
.engineer-bio p { margin: 0; color: var(--profile-copy); font-size: 17px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.engineer-bio p + p { margin-top: 13px; }

.engineer-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-width: 490px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.engineer-skills li {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid var(--ew-line);
  border-radius: 999px;
  background: var(--ew-surface);
  color: var(--profile-copy);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.engineer-skills li::before {
  width: var(--skill-width, 16px);
  height: 16px;
  flex: 0 0 var(--skill-width, 16px);
  background: var(--skill-image, url("./assets/platforms/profile-system.svg")) center / contain no-repeat;
  filter: var(--skill-filter, none);
  content: "";
}

.engineer-skills :is([data-skill^="pcb "], [data-skill*="jlcpcb"], [data-skill*="nextpcb"], [data-skill="esp32 & stm32"]) { --skill-image: url("./assets/platforms/profile-pcb.svg"); }
.engineer-skills [data-skill*="firmware"] { --skill-image: url("./assets/platforms/profile-code.svg"); }
.engineer-skills [data-skill*="embedded ui"] { --skill-image: url("./assets/platforms/profile-display.svg"); }
.engineer-skills [data-skill*="power electronics"] { --skill-image: url("./assets/platforms/profile-power.svg"); }
.engineer-skills [data-skill*="sourcing"] { --skill-image: url("./assets/platforms/profile-package.svg"); }
.engineer-skills [data-skill*="cable"] { --skill-image: url("./assets/platforms/profile-cable.svg"); }
.engineer-skills [data-skill="arduino"] { --skill-width: 22px; --skill-image: url("./assets/platforms/arduino.svg"); }
.engineer-skills [data-skill="esp32"] { --skill-image: url("./assets/platforms/espressif-symbol.svg"); --skill-filter: invert(25%) sepia(75%) saturate(3200%) hue-rotate(346deg) brightness(97%); }
.engineer-skills [data-skill="stm32"] { --skill-width: 22px; --skill-image: url("./assets/platforms/stmicroelectronics.svg"); --skill-filter: invert(20%) sepia(78%) saturate(958%) hue-rotate(180deg); }
.engineer-skills [data-skill="raspberry pi"] { --skill-image: url("./assets/platforms/raspberrypi.svg"); --skill-filter: invert(24%) sepia(78%) saturate(2319%) hue-rotate(311deg); }
.engineer-skills [data-skill="uav / drones"] { --skill-width: 22px; --skill-image: url("./assets/platforms/drone.svg"); }
.engineer-skills [data-skill="lvgl"] { --skill-image: url("./assets/platforms/lvgl.png"); }
.engineer-skills [data-skill="lvgl"]::before { background-position: left center; background-size: 44px auto; }

[data-theme="dark"] .engineer-skills :is([data-skill="stm32"], [data-skill="uav / drones"]) { --skill-filter: invert(85%); }

@media (max-width: 760px) {
  .engineer-profile { padding-block: 36px 48px; }
  .engineer-profile-layout { width: min(540px, calc(100% - 40px)); grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .engineer-portrait { width: min(86%, 330px); }
  .engineer-identity { left: -12px; bottom: 16px; }
  .engineer-profile-copy .engineer-profile-kicker { margin-bottom: 12px; }
  .engineer-profile-copy h2 { font-size: 30px; }
  .engineer-bio { margin: 16px 0 20px; }
  .engineer-bio p { font-size: 16px; }
  .engineer-profile::before { width: 50%; }
  .engineer-profile::after { display: none; }
}