/* Portfolio-only navy theme. Project artwork keeps its own palette. */
.selected-work--dark {
  --portfolio-navy: #101c30;
  --portfolio-blue: #223b58;
  --portfolio-text: #f7f8fb;
  --portfolio-muted: #c5d2e2;
  --portfolio-ice: #b7d9f4;
  --portfolio-accent: #ffb088;
  --portfolio-line: #bbd6ed40;
  color: var(--portfolio-text);
  background: radial-gradient(ellipse at 93% 8%, #294967 0%, transparent 53%),
    linear-gradient(145deg, var(--portfolio-navy) 8%, var(--portfolio-blue) 59%, #14263e 100%);
  padding-bottom: var(--space-5);
}
.portfolio-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.portfolio-backdrop__photo {
  position: absolute;
  inset: -4%;
  background: url('architecture.webp') center 35% / cover no-repeat;
  filter: grayscale(1);
  opacity: .24;
  mask-image: linear-gradient(90deg, #000b, #0002 35%, #0005 65%, #000),
    linear-gradient(#000, #000);
  mask-composite: intersect;
  animation: portfolio-photo-drift 32s ease-in-out infinite alternate;
  animation-play-state: var(--portfolio-play);
}
.portfolio-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #101c3080, #101c3073 28%, #101c3080 76%, #14263e);
}
.selected-work--dark .portfolio-pattern__grid {
  background-image: radial-gradient(#c8e5ff7a .8px, transparent .8px);
}
.selected-work--dark .portfolio-pattern__guides { stroke: #badcff33; }
.selected-work--dark .portfolio-pattern__contours { stroke: #b7d9f452; }
.selected-work--dark .portfolio-pattern__traces { stroke: #c8eaff; stroke-width: 1.8; }
.selected-work--dark .portfolio-pattern__traces>path { animation-duration: 13s; }
.selected-work--dark .portfolio-pattern__traces>path:nth-child(2) { stroke: var(--portfolio-accent); }
.selected-work--dark .portfolio-pattern__cross { color: #c9e3f77a; }
.selected-work--dark .eyebrow { color: var(--portfolio-ice); }
.selected-work--dark .eyebrow__line,
.selected-work--dark .selected-work__heading::after { background: var(--portfolio-accent); }
.selected-work--dark h2>span { color: var(--portfolio-ice); }
.selected-work--dark .selected-work__intro>p,
.selected-work--dark .work-item__caption>p { color: var(--portfolio-muted); }
.selected-work--dark .selected-work__explore { color: var(--portfolio-text); border-color: #b7d9f480; }
.selected-work--dark .selected-work__explore:hover,
.selected-work--dark .work-item h3 button:hover { color: var(--portfolio-accent); }
.selected-work--dark .selected-work__explore:hover { border-color: var(--portfolio-accent); }
.selected-work--dark .work-item__visual { color: var(--color-navy); box-shadow: 0 22px 50px -26px #091526b3; }
.selected-work--dark .work-item__visual:hover { box-shadow: 0 24px 55px -25px #091526, 0 0 0 1px #c8e5ff40; }
.selected-work--dark .work-item__index { -webkit-text-stroke-color: #afc6df; }
.selected-work--dark .work-item:hover .work-item__index {
  color: var(--portfolio-accent);
  -webkit-text-stroke-color: var(--portfolio-accent);
}
.selected-work--dark .work-item__tags>li { color: var(--portfolio-muted); border-color: var(--portfolio-line); }
.selected-work--dark .work-item:hover .work-item__tags>li { color: var(--portfolio-ice); border-color: #b7d9f480; }
.selected-work--dark .selected-work__footnote { color: var(--portfolio-muted); border-color: var(--portfolio-line); }
.selected-work--dark .portfolio-motion-control { width: 38px; height: 38px; color: var(--portfolio-text); border-color: #b7d9f480; background: #14263e99; }
.selected-work--dark .portfolio-motion-control:hover { color: var(--portfolio-accent); border-color: var(--portfolio-accent); }
.selected-work--dark :is(a, button):focus-visible { outline-color: var(--portfolio-accent); }
.selected-work--dark ::selection { background: #b7d9f4; color: #101c30; }
@keyframes portfolio-photo-drift {
  from { transform: scale(1) translate3d(-1%, 0, 0); }
  to { transform: scale(1.045) translate3d(1%, -1%, 0); }
}
@media (max-width: 767px) {
  .portfolio-backdrop__photo { background-position: 62% center; opacity: .2; }
  .selected-work--dark .portfolio-pattern__drawing { opacity: .8; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-backdrop__photo { animation: none; }
}