/* The projects: one screen, a collage of every project, all the same size.
   Graded like the city scene before it: blue-hour navy, cream type, film grain. */
.plist { --gap: 0px; --cream: #ecdcbc;
  position: relative; display: flex; flex-direction: column; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden;
  padding: var(--gap); color: #f4eedd;
  background:
    radial-gradient(80% 60% at 50% 115%, rgba(229, 148, 102, .22), transparent 70%),
    linear-gradient(#0d1229, #161b3d 60%, #221d3f); }
/* the same grain as the city, over everything */
.plist::after { content: ""; position: absolute; inset: -60px; z-index: 4; pointer-events: none;
  background-image: var(--grain); background-size: 220px 220px; mix-blend-mode: soft-light; opacity: .38;
  animation: pl-grain .5s steps(1) infinite; }
@keyframes pl-grain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-43px, 31px); } 33% { transform: translate(29px, -52px); }
  50% { transform: translate(-17px, -23px); } 67% { transform: translate(51px, 13px); } 83% { transform: translate(-31px, 47px); }
}

/* projects.html only: a way home, over the first picture */
.pl-back { position: absolute; z-index: 3; left: 24px; top: 22px; padding: 9px 14px; border-radius: 999px; background: rgba(9, 10, 26, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 500 14px/1 "Inter Tight", system-ui, sans-serif; display: inline-flex; align-items: center; gap: 8px; color: #f4eedd; text-decoration: none; font-weight: 500; }
.pl-back svg { width: 13px; height: 13px; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine) { .pl-back:hover svg { transform: translate(-2px, -2px); } }

.pl-grid { flex: 1; min-height: 0; display: grid; gap: var(--gap);
  grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.pl-item { position: relative; overflow: hidden; background: #14172a;
  opacity: 0; translate: 0 18px; transition: opacity .7s ease calc(var(--i) * 80ms), translate .9s cubic-bezier(.22, 1, .36, 1) calc(var(--i) * 80ms), filter .4s ease; }
.plist.in .pl-item { opacity: 1; translate: 0 0; }
.pl-link { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; }
.pl-media { position: absolute; inset: 0; }
/* screenshots are graded toward the dusk until you point at them */
.pl-media img, .pl-media svg { display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--p, 50% 0); filter: saturate(.82) sepia(.1) brightness(.9); transition: scale .9s cubic-bezier(.22, 1, .36, 1), filter .5s ease; }
.pl-media:has(.pl-fit) { background: #000; }
.pl-media img.pl-fit { object-fit: contain; object-position: 50% 50%; scale: var(--z);
  --edge: linear-gradient(transparent, #000 22%, #000 78%, transparent), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: var(--edge); -webkit-mask-composite: source-in; mask-image: var(--edge); mask-composite: intersect; }
.pl-link::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(9, 10, 26, .9), rgba(9, 10, 26, .5) 32%, rgba(9, 10, 26, 0) 62%); }
.pl-text { position: absolute; z-index: 1; left: clamp(16px, 1.7vw, 28px); right: clamp(16px, 1.7vw, 28px); bottom: clamp(14px, 1.7vw, 26px); }
/* set the way ramp.design sets Lausanne: regular weight, tracked in tight, no bold */
.pl-name { margin: 0; font: 500 clamp(22px, 2.2vw, 36px)/1.05 "Inter Tight", Inter, system-ui, sans-serif; letter-spacing: -.03em; color: #f4eedd; text-wrap: balance; }
.pl-name svg { display: inline-block; vertical-align: .1em; width: .5em; height: .5em; margin-left: .25em; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.pl-tags { margin: 8px 0 0; font: 400 13px/1.5 "Inter Tight", system-ui, sans-serif; color: rgba(244, 238, 221, .72); }
@media (hover: hover) and (pointer: fine) {
  .pl-grid:has(.pl-item:hover) .pl-item:not(:hover) { filter: brightness(.55) saturate(.7); }
  .pl-link:hover .pl-media img, .pl-link:hover .pl-media svg { scale: 1.05; filter: none; }
  .pl-link:hover .pl-media img.pl-fit { scale: calc(var(--z) * 1.04); }
  .pl-link:hover .pl-name svg { transform: translate(3px, -3px); }
}
.pl-link:focus-visible { outline: 2px solid #f4eedd; outline-offset: -6px; }

/* a phone: one full-width card each, scrolled through */
@media (max-width: 700px) {
  .plist { height: auto; min-height: 0; }
  .pl-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: 72vw; }
  .pl-media img.pl-fit { object-position: 50% 50%; scale: var(--zm); }
  .pl-name { font-size: 26px; }
  .pl-tags { font-size: 13px; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .pl-item { transition: none; } .plist::after { animation: none; } }