.portfolio-page { min-height: 100vh; background: #111512; color: #fff; }
.portfolio-deck { display: block; padding: 80px 0 0; background: #111512; }
.portfolio-slide { width: min(100%, 1920px); margin: 0 auto 12px; scroll-margin-top: 80px; background: #fff; box-shadow: 0 20px 55px rgba(0,0,0,.22); }
.portfolio-slide img { width: 100%; height: auto; }
.portfolio-slide:not(:first-child) { opacity: .35; transform: translateY(30px); transition: opacity .65s ease, transform .65s ease; }
.portfolio-slide.is-visible { opacity: 1; transform: none; }
.deck-progress { position: fixed; z-index: 26; right: 18px; top: 50%; transform: translateY(-50%); padding: 14px 10px; color: rgba(255,255,255,.58); background: rgba(7,10,9,.86); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); }
.deck-progress span { display: block; margin-bottom: 12px; font-size: .66rem; }
.deck-progress b { color: #fff; }
.deck-progress div { display: grid; gap: 7px; justify-items: center; }
.deck-progress a { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.28); transition: height .25s, background .25s; }
.deck-progress a.active { height: 16px; border-radius: 5px; background: var(--green); }
@media (max-width: 700px) {
  .portfolio-deck { padding-top: 70px; }
  .portfolio-slide { margin-bottom: 6px; scroll-margin-top: 70px; }
  .deck-progress { top: auto; right: 12px; bottom: 12px; transform: none; display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
  .deck-progress span { margin: 0; }
  .deck-progress div { display: none; }
}