/* Work overview: VHS introduction, predictable media frames and quiet motion. */
.portfolio-overview .portfolio-intro {
  position:relative; isolation:isolate; overflow:hidden; border-radius:16px;
  padding:clamp(36px,5vw,72px); margin:clamp(24px,3vw,44px) 0 clamp(32px,4vw,56px);
  color:var(--frost); background:var(--contact-surface);
}
.portfolio-overview .portfolio-intro::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 24%,transparent),transparent 85%),
    image-set(url('work-intro-vhs51-1600.webp') 1x,url('work-intro-vhs51-2172.webp') 2x) center/cover;
}
.portfolio-overview .portfolio-intro h1 { max-width:20ch; text-wrap:balance; }
.portfolio-overview .portfolio-intro > p { color:var(--text-muted-dark); max-width:62ch; }
.portfolio-overview .portfolio-jumps.content-link-menu { padding-inline:0; gap:12px 24px; margin-top:28px; }
.portfolio-overview .portfolio-jumps .content-link--menu { color:var(--frost); }
.portfolio-overview .portfolio-jumps .content-link--menu:is(:hover,:focus-visible) { color:var(--frost); }
.portfolio-overview .portfolio-intro a:focus-visible { outline-color:var(--mist); }
/* A fixed, non-shrinking crop frame prevents intrinsic image dimensions from
   leaking into the copy area. Website navigation always stays at the top. */
.portfolio-overview .portfolio-cover {
  position:relative; flex:none; min-width:0; isolation:isolate;
  overflow:hidden; contain:paint; background:var(--frost);
}
.portfolio-overview .portfolio-cover img {
  position:absolute; inset:0; width:100%; height:100%; max-width:100%;
  object-fit:cover; object-position:50% 0; border-radius:0;
  transition:filter 650ms cubic-bezier(.22,.61,.36,1);
}
/* Fill the shared image window, retaining the original proportions. */
.portfolio-overview #primus .portfolio-cover img { object-fit:cover; object-position:center; }
.portfolio-overview .portfolio-intro__contact { margin-top:28px; max-width:100%; }
.portfolio-overview .portfolio-card__link { position:relative; isolation:isolate; }
.portfolio-overview .portfolio-card__link::after {
  content:''; position:absolute; inset:0; pointer-events:none; border:2px solid var(--card-hover-ring);
  border-radius:inherit; opacity:0; transition:opacity 320ms ease;
}
.portfolio-overview .portfolio-card__link:is(:hover,:focus-visible) { outline:none; }
.portfolio-overview .portfolio-card__link:is(:hover,:focus-visible)::after { opacity:1; }
/* Blend the accent layer with opacity, keeping the footer geometry unchanged. */
.portfolio-overview .portfolio-card__action {
  position:relative; isolation:isolate; overflow:hidden; flex:none;
  background:var(--ink); color:var(--frost); transition:color 380ms ease;
}
.portfolio-overview .portfolio-card__action::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--coral); opacity:0; transition:opacity 380ms cubic-bezier(.22,.61,.36,1);
}
.portfolio-overview .portfolio-card__link:is(:hover,:focus-visible) .portfolio-card__action {
  background:var(--ink); color:var(--ink);
}
.portfolio-overview .portfolio-card__link:is(:hover,:focus-visible) .portfolio-card__action::before { opacity:1; }
.portfolio-overview .portfolio-card__action .link-play { transition:opacity 380ms ease,transform 380ms cubic-bezier(.22,.61,.36,1); }
@media(max-width:600px) {
  .portfolio-overview .portfolio-intro { padding:32px 24px; margin-block:24px 32px; }
  .portfolio-overview .portfolio-intro::before { background-image:linear-gradient(90deg,#101a223d,transparent),url('work-intro-vhs51-800.webp'); }
  .portfolio-overview .portfolio-intro h1 { font-size:clamp(34px,8.5vw,48px); }
  .portfolio-overview .portfolio-intro > p { font-size:18px; }
  .portfolio-overview .portfolio-jumps.content-link-menu { gap:8px; margin-top:24px; }
  .portfolio-overview .portfolio-cover img { object-fit:cover; }
}
@media(prefers-reduced-motion:reduce) {
  .portfolio-overview .portfolio-cover img,
  .portfolio-overview .portfolio-card__link::after,
  .portfolio-overview .portfolio-card__action,
  .portfolio-overview .portfolio-card__action::before,
  .portfolio-overview .portfolio-card__action .link-play { transition:none; }
}