.portfolio-puzzle {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 5vw, 5rem);
  background:
    linear-gradient(90deg, transparent 0 calc(8.4% - 48px), rgba(167,88,113,.13) calc(8.4% - 48px) calc(8.52% - 48px), transparent calc(8.52% - 48px)),
    repeating-linear-gradient(0deg, transparent 0 33px, rgba(81,105,152,.085) 33px 34px),
    #eee8fb;
  box-shadow: inset 0 -18px 40px rgba(70,57,95,.025);
  animation: none;
}

.portfolio-puzzle::before {
  content: "";
  position: absolute;
  left: clamp(13px, 3.2vw, 46px);
  top: 0;
  bottom: 0;
  width: 18px;
  background: radial-gradient(circle, rgba(255,255,255,.42) 0 5px, rgba(86,77,120,.12) 5.5px 6.5px, transparent 7px) center 14px / 18px 68px repeat-y;
  filter: none;
  opacity: .55;
}

.portfolio-puzzle::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.18'/%3E%3C/svg%3E");
}

.puzzle-heading {
  position: relative;
  z-index: 5;
  max-width: 780px;
  margin: clamp(2.5rem, 5vw, 5rem) auto 1.5rem;
  text-align: center;
}

.puzzle-heading h2 {
  margin: .65rem 0 0;
  color: #071d35;
  font-size: clamp(2.7rem, 6vw, 6.6rem);
  line-height: .9;
  letter-spacing: -.065em;
}

.puzzle-heading h2 em { color: #7255df; font-style: normal; }

.puzzle-board {
  position: relative;
  width: min(690px, 88%);
  margin: 0 auto;
}

.doodle-field {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.doodle {
  position: absolute;
  width: clamp(92px, 9vw, 150px);
  height: auto;
  opacity: .9;
  filter: sepia(.08) saturate(.9) contrast(1.08) drop-shadow(0 4px 5px rgba(32,24,67,.1));
}

.doodle-rocket { left: calc(5% + 48px); bottom: 7%; width: clamp(184px, 18vw, 300px); transform: rotate(-10deg); }
.doodle-bulb { right: 11%; bottom: 7%; width: clamp(138px, 13.5vw, 225px); transform: rotate(-7deg); }
.doodle-laptop { right: 9%; top: 31%; width: clamp(165px, 16vw, 270px); transform: rotate(16deg); }

@media (max-width: 820px) {
  .doodle { width: 76px; opacity: .8; }
  .doodle-rocket { left: calc(2% - 6px); bottom: 5%; width: 152px; }
  .doodle-bulb { right: 4%; bottom: 5%; width: 114px; }
  .doodle-laptop { right: 4%; top: 32%; width: 138px; transform: rotate(16deg); }
}

.puzzle-board::before,
.puzzle-board::after {
  content: "";
  position: absolute;
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #7890a8);
  box-shadow: 14px -7px 0 -6px #7890a8, 28px 7px 0 -6px #7890a8;
  opacity: .42;
}

.puzzle-board::before { top: 12%; left: -3rem; }
.puzzle-board::after { right: -3rem; bottom: 14%; transform: rotate(180deg); }

.portfolio-puzzle-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.puzzle-link {
  --line: #526477;
  --accent: #526477;
  cursor: pointer;
  outline: none;
}

.puzzle-link path,
.puzzle-link text {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), filter .3s ease, fill .3s ease, stroke-width .3s ease;
}

.puzzle-projects text,
.puzzle-research text {
  font-size: 27px;
  font-weight: 700;
}

.puzzle-conferences text,
.puzzle-awards text,
.puzzle-work text { font-size: 20px; }

.puzzle-link path {
  fill: rgba(255, 255, 255, .5);
  stroke: var(--line);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.puzzle-projects { --accent: #397fa5; }
.puzzle-research { --accent: #7358b4; }
.puzzle-conferences { --accent: #b7675c; }
.puzzle-awards { --accent: #a9851f; }
.puzzle-work { --accent: #3f806f; }

.puzzle-link text {
  fill: #071d35;
  font-family: "Manrope", sans-serif;
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -.45px;
  text-anchor: middle;
  pointer-events: none;
}

.puzzle-link:hover path,
.puzzle-link:focus-visible path {
  fill: color-mix(in srgb, var(--accent) 8%, white 92%);
  stroke: var(--accent);
  stroke-width: 5;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 30%, transparent)) drop-shadow(0 10px 10px rgba(20, 28, 55, .1));
  transform: scale(1.035);
}

.puzzle-link:hover text,
.puzzle-link:focus-visible text { fill: var(--accent); transform: scale(1.035); }

.puzzle-hint {
  margin: -1.2rem 0 0;
  color: #53606d;
  font-family: "DM Mono", monospace;
  font-size: .72rem;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 620px) {
  .portfolio-puzzle { padding-inline: .75rem; }
  .puzzle-board { width: 96%; }
  .puzzle-board::before,
  .puzzle-board::after { display: none; }
  .puzzle-link path { stroke-width: 5; }
  .puzzle-link text { font-size: 20px; }
  .puzzle-hint { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-puzzle { animation: none; }
  .puzzle-link path,
  .puzzle-link text { transition: fill .15s ease, stroke-width .15s ease; }
  .puzzle-link:hover path,
  .puzzle-link:focus-visible path,
  .puzzle-link:hover text,
  .puzzle-link:focus-visible text { transform: none; }
}