/* Original page colors come from each page's existing stylesheets.
   Keep only the approved project-card treatment in this review layer. */
/* Selected work uses an intentionally quiet neutral surface. */
.project-rail { padding-block:8px 28px; }
.project-link {
  position:relative;
  width:100%;
  aspect-ratio:608 / 343;
  min-height:270px;
  padding:0;
  border-radius:20px;
  background:#f9fafb;
  box-shadow:none;
  overflow:hidden;
  isolation:isolate;
  transition:none;
}
.project-link::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:rgba(30,40,55,.035);
  opacity:0;
  pointer-events:none;
  transition:opacity 160ms ease;
}
.project-link img {
  position:absolute;
  inset:0;
  height:100%;
  object-fit:contain;
  object-position:center top;
  border-radius:0;
  mix-blend-mode:normal;
  transition:none;
}
.project-link:hover,
.project-link:focus-visible {
  transform:none;
  background:#f9fafb;
  box-shadow:none;
}
.project-link:hover img { transform:none; filter:none; }
.project-link:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.project-caption {
  position:absolute;
  inset:auto 0 0;
  min-height:0;
  padding:58px 26px 22px;
  background:linear-gradient(to bottom,rgba(249,250,251,0),rgba(249,250,251,.9) 38%,rgba(249,250,251,.98) 65%,#f9fafb);
}
.project-caption h3 { white-space:normal; overflow:visible; text-overflow:clip; font-size:18px; line-height:1.45; }
.project-caption p { margin-top:6px; font-size:13px; line-height:1.5; }
.project-link:focus-visible::after { opacity:1; transition:none; }
.project-link:active::after { opacity:1; background:rgba(30,40,55,.055); transition:none; }

/* One restrained motion language across the homepage, About and case studies. */
html:has(:focus-visible), .project-rail:has(:focus-visible) { scroll-behavior:auto; }
.rail-hint { transition:opacity 160ms ease; }
.work.has-scrolled .rail-hint { transform:none; }
.back-link svg { transition:transform 160ms cubic-bezier(.23,1,.32,1); }
.back-link:hover svg { transform:none; }
.password-form button { transition:background-color 160ms ease,transform 120ms cubic-bezier(.23,1,.32,1); }
.password-form button:hover { background:var(--ink); }
.password-form button:disabled { cursor:wait; opacity:.65; transform:none; }
.password-form button:focus-visible { outline:2px solid var(--ink); outline-offset:4px; transition:none; }
.back-link:focus-visible svg { transform:none; transition:none; }
@media (hover:hover) and (pointer:fine) {
  .project-link:hover::after { opacity:1; }
  .back-link:hover svg { transform:translateX(-2px); }
  .password-form button:hover:not(:disabled) { background:var(--accent); }
}
@media (max-width:600px) {
  .project-caption { padding:48px 20px 18px; }
  .project-caption h3 { font-size:16px; line-height:1.4; }
}
@media (prefers-reduced-motion:reduce) {
  html, .project-rail { scroll-behavior:auto; }
  .project-link::after, .back-link svg, .password-form button, .rail-hint { transition:none; }
  .back-link:hover svg, .password-form button:active { transform:none; }
  .animate-pulse { animation:none; }
}