/* =========================================================
   PROJECTS
   ========================================================= */
.page-projects main { background: var(--ink); }
.work { padding-bottom: clamp(96px, 12vw, 180px); }

/* ---------- editorial grid: a 4-slot rhythm of sizes and offsets ---------- */
.pgrid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2vw, 32px); row-gap: clamp(64px, 9vw, 140px);
  padding-top: clamp(40px, 5vw, 72px);
}
.pgrid[hidden], .plist[hidden] { display: none; }
.pcard { display: block; }
.pcard.is-hidden { display: none; }
.pcard[data-slot='0'] { grid-column: 1 / span 7; }
.pcard[data-slot='1'] { grid-column: 9 / span 4; margin-top: 16vh; }
.pcard[data-slot='2'] { grid-column: 2 / span 5; }
.pcard[data-slot='3'] { grid-column: 8 / span 5; margin-top: 22vh; }
.pcard__media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--ink-2); aspect-ratio: 4 / 3; }
.pcard[data-slot='1'] .pcard__media, .pcard[data-slot='2'] .pcard__media { aspect-ratio: 4 / 5; }
.pcard[data-slot='3'] .pcard__media { aspect-ratio: 1 / 1; }
.pcard__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease-out), opacity 0.8s;
}
.pcard__b { opacity: 0; }
.pcard:hover .pcard__media img { transform: scale(1.05); }
.pcard:hover .pcard__b, .pcard.is-live .pcard__b { opacity: 1; }
.pcard__info { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 16px; margin-top: 18px; }
.pcard__num { font-family: var(--f-ui); font-size: 13px; opacity: 0.5; }
.pcard__name { font-size: clamp(26px, 2.6vw, 44px); font-weight: 300; letter-spacing: -0.015em; line-height: 1.1; }
.pcard__meta { font-family: var(--f-ui); font-size: 13px; opacity: 0.6; text-align: right; }
.pcard__tag { margin-top: 8px; padding-left: calc(2ch + 16px); font-size: 15px; opacity: 0.6; max-width: 46ch; }

/* ---------- list view ---------- */
.plist { padding-top: clamp(24px, 3vw, 48px); }
.plist .row { grid-template-columns: 70px 1fr 150px 200px auto 30px; }

@media (max-width: 767px) {
  .pgrid { grid-template-columns: 1fr; row-gap: 56px; }
  .pcard[data-slot] { grid-column: 1; margin-top: 0; }
  .pcard[data-slot] .pcard__media { aspect-ratio: 4 / 3; }
  .pcard__tag { padding-left: 0; }
  .plist .row { grid-template-columns: 1fr 24px; }
}