/* Work C · Tilt — each project is a wide media card that swings in tilted and set back in
   depth, levels out and widens to full bleed as it crosses the middle of the screen, then
   tilts the other way as it leaves. All motion is scroll-scrubbed (demos/work-tilt.js). */
.wt-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); font: 500 14px Inter, sans-serif; }
.wt-bar .l { display: inline-flex; align-items: center; gap: 10px; }
.wt-bar .l::before { content: "+"; color: var(--accent); font-size: 18px; line-height: 1; }
.wt-bar .c { color: var(--muted); }
.wt-bar .r { justify-self: end; height: 40px; padding: 0 20px; text-transform: none; letter-spacing: normal; }   /* the standard Sweep button (.roll) */
.wt-title { margin: 28px 0 var(--head-gap); font-size: clamp(72px, 12.5vw, 220px); line-height: .82; display: flex; align-items: flex-start; gap: .08em; }
.wt-title sup { font: 500 clamp(14px, 1.4vw, 22px) Inter, sans-serif; letter-spacing: .04em; color: var(--accent); margin-top: .4em; }
.wt-list { display: flex; flex-direction: column;
  /* cancel the section's side padding so a level card runs edge to edge
     (100vw would also include the scrollbar and cause a sideways scroll) */
  margin-inline: calc(var(--gutter) * -1); overflow-x: clip; }
.wt-card { position: relative; will-change: transform;
  /* a full screen tall when level; the fixed header sits on top of it, like the reference */
  height: 100svh; }
/* 14vh between cards + a 20% trailing drift (JS) lets a leaving card and the next arriving one
   close to within ~20–60px on one side without touching (modelled at 985×489 → 1905×1000). */
.wt-card:nth-child(n+2) { margin-top: 14vh; }
.wt-link { position: absolute; inset: 0; display: block; border-radius: 32px; overflow: hidden; background: var(--surface); color: #fff;
  transform-origin: 50% 50%; will-change: transform; isolation: isolate; }
.wt-media { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.wt-media { background: #0a0a0a; }
.wt-media .wt-fill { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(38px) brightness(.45) saturate(1.1); }
.wt-media .wt-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4% 8% 12%; }
.wt-media .wt-shot--photo { object-fit: cover; object-position: 50% 50%; padding: 0; }   /* widened 2:1 scene: fills the card, the device stays whole in the middle */

.wt-link::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 28%, transparent 55%, rgba(0,0,0,.75) 100%); pointer-events: none; }
.wt-meta { position: absolute; left: clamp(20px, 3vw, 44px); right: clamp(20px, 3vw, 44px); bottom: clamp(18px, 3vw, 40px); z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.wt-meta h3 { font-size: clamp(36px, 5vw, 88px); line-height: .9; display: flex; align-items: flex-start; gap: .12em; }
.wt-meta h3 sup { font: 500 clamp(12px, 1.1vw, 16px) Inter, sans-serif; color: var(--brand); margin-top: .3em; }
.wt-meta p { max-width: 36ch; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.8); text-align: right; }
.wt-chip { position: absolute; top: calc(var(--nav-h, 80px) + clamp(14px, 1.6vw, 24px));  /* clear the header */ left: clamp(20px, 3vw, 44px); z-index: 2; padding: 7px 12px; border-radius: 999px; font: 500 11px Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  background: rgba(10,10,10,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.wt-chip::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-right: 8px; vertical-align: 1px; }

@media (max-width: 900px) {
  .wt-bar { grid-template-columns: 1fr auto; }
  .wt-bar .c { display: none; }
  .wt-link { border-radius: 20px; }
  .wt-meta { flex-direction: column; align-items: flex-start; }
  .wt-meta p { text-align: left; }
}

/* Tall screens (phones, portrait tablets): a full-screen card left a thin 2:1 strip with empty bands above and below.
   Instead the card is a 4:3 photo with the words underneath. A centred 4:3 crop of each widened scene only trims its
   extended backdrop; every device stays whole at about 55–65% of the frame. */
@media (max-aspect-ratio: 1/1) {
  .wt-card { height: auto; }
  .wt-card:nth-child(n+2) { margin-top: 12vh; }
  .wt-link { position: relative; inset: auto; display: flex; flex-direction: column; }
  .wt-link::after { display: none; }
  .wt-media { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .wt-chip { top: 16px; left: 16px; }
  .wt-meta { position: relative; left: auto; right: auto; bottom: auto; gap: 12px; padding: 22px 20px 26px; background: var(--surface); }   /* above the photo while it's zoomed in */
}