/* Projects page: same visual language as the main page (glass frames, soft light background), with the reference's
   list rhythm: two columns of cards, a few full-width ones, name + year + type under each card. */
.pl { padding-top: 150px; max-width: 1240px; }
.pl__head { text-align: center; max-width: 720px; margin: 0 auto 70px; }
.pl__kicker { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: #8e8e93; text-transform: uppercase; }
.pl__title { margin: 0; font-size: clamp(34px, 4.6vw, 62px); line-height: 1.02; font-weight: 700; letter-spacing: -.045em; color: #1d1d1f; }
.pl__sub { margin: 16px 0 0; font-size: 17px; font-weight: 500; letter-spacing: -.02em; color: #8e8e93; }

.pl__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 44px; padding: 0 50px; }
.pl__card { display: block; color: inherit; text-decoration: none; }
.pl__card--wide { grid-column: 1 / -1; }
.pl__frame {
  position: relative; padding: 6px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.46));
  -webkit-backdrop-filter: blur(16px) saturate(1.7); backdrop-filter: blur(16px) saturate(1.7);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.5), 0 0 0 .5px rgba(0,0,0,.07), 0 22px 40px -24px rgba(0,0,0,.28);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}
@media (hover: hover) and (pointer: fine) {
.pl__card:hover .pl__frame { transform: translateY(-4px); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.6), 0 0 0 .5px rgba(0,0,0,.09), 0 30px 46px -22px rgba(0,0,0,.34); }
}
.pl__media { position: relative; overflow: hidden; border-radius: 20px; aspect-ratio: 464 / 475; background: #0a0a0a; isolation: isolate; }
.pl__card--wide .pl__media { aspect-ratio: 960 / 571; }
.pl__media video, .pl__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.pl__media .pl__cover { z-index: 2; transition: opacity .45s ease, filter .45s ease, transform .6s cubic-bezier(.2, 0, 0, 1); }
.pl__card.is-live .pl__cover { opacity: 0; filter: blur(14px); transform: scale(1.04); }
@supports (corner-shape: squircle) { .pl__frame { corner-shape: squircle; border-radius: 38px; } .pl__media { corner-shape: squircle; border-radius: 31px; } }
/* placeholder tiles (projects still to come): a light glass surface with "Soon" */
.pl__media--soon { background: linear-gradient(160deg, var(--t1, #f3f3f6), var(--t2, #e2e2e9)); display: grid; place-items: center; }
.pl__media--soon em { font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; padding: 8px 14px 8px calc(14px + .22em); border-radius: 99px; color: rgba(29,29,31,.55);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.45)); box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(0,0,0,.08); animation: al-breathe 3.6s ease-in-out infinite; }
.pl__meta { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 8px 0; }
.pl__name { font-size: 16px; line-height: 19px; font-weight: 600; letter-spacing: -.01em; color: #303030; }
.pl__year { font-size: 16px; line-height: 19px; font-weight: 400; color: #999; text-align: right; }
.pl__type { grid-column: 1; font-size: 16px; line-height: 19px; font-weight: 400; color: #999; }
@media (max-width: 809px) { .pl__grid { grid-template-columns: 1fr; padding: 0 15px; row-gap: 32px; } .pl { padding-top: 120px; } }

/* landscape ratios so the 16:9 covers are not cropped to a square */
.pl__media { aspect-ratio: 16 / 11; }
.pl__card--wide .pl__media { aspect-ratio: 16 / 7.4; }
.pl__grid { row-gap: 40px; }

/* covers shown whole: the card media uses the covers' own 16:9 ratio (nothing is cropped) */
.pl__media { aspect-ratio: 16 / 9; }
.pl__card--wide .pl__media { aspect-ratio: 21 / 9; }
.pl__media img, .pl__media video { object-fit: contain; background: #0a0a0a; }
.pl__media .pl__cover { object-fit: cover; }

/* video slightly oversized so the sub-pixel row left by a fractional card height never shows as a thin dark / coloured line at the bottom edge */
.pl__media video { transform: scale(1.012); }

/* the wide (21:9) card fills its frame: a 16:9 video is cropped a little top and bottom instead of letterboxed with black sides */
.pl__card--wide .pl__media video, .pl__card--wide .pl__media img { object-fit: cover; }