/* Things we've made, as a stack: each project fills the screen and the next one slides up over it. Classes start pv-. Motion eases in and out and never overshoots. */
.work { --sheet-ink: #141414; --sheet-soft: #5C6461; --sheet-line: rgba(20, 26, 24, .14); --mono: "Geist Mono", ui-monospace, Menlo, monospace; --ease-io: cubic-bezier(.65, 0, .35, 1); --top: 92px; }
.dark-site .pv-sheet { padding-block: clamp(28px, 3vw, 48px) clamp(96px, 9vw, 160px); }

/* the colour each project's pictures sit on */
.pv-field--monpro { background: radial-gradient(110% 140% at 72% 0%, #2B5D57 0%, #133631 46%, #0A1C19 100%); }
.pv-field--visitrove { background: radial-gradient(120% 110% at 85% 0%, #284660 0%, #14232B 52%, #0A1217 100%); }
.pv-field--studio { background: radial-gradient(90% 60% at 30% 100%, #3A2A1E 0%, #1B1410 55%, #120E0B 100%); }

/* screens inside a field */
.pv-shot { position: absolute; overflow: hidden; background: #F4F2EC; box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 40px 70px -36px rgba(0, 0, 0, .75); transition: transform 1s var(--ease-io); }
.pv-shot video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.pv-wide { aspect-ratio: 16 / 10; border-radius: 8px 0 0 8px; }
.pv-phone { aspect-ratio: 390 / 844; border-radius: 14px; z-index: 2; }
.pv-full { inset: 0; border-radius: 0; background: transparent; box-shadow: none; }
.pv-full video { object-position: 8% 50%; }
.pv-full::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 14, 11, .85) 0%, rgba(18, 14, 11, 0) 46%); }

.pv-meta { display: flex; gap: 18px; margin: 0; font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.pv-meta span + span { opacity: .6; }

/* the round pause, one per set of moving pictures (WCAG 2.2.2) */
.pv-toggle { position: absolute; z-index: 6; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .62); color: #EEF0EA; cursor: pointer; backdrop-filter: blur(8px); transition: background-color .4s var(--ease-io); }
.pv-toggle:hover, .pv-toggle:focus-visible { background: rgba(0, 0, 0, .9); }
.pv-toggle svg { width: 12px; height: 12px; }

/* ================= the stack ================= */
.pv-stack { display: grid; padding-top: clamp(12px, 1.4vw, 20px); }
.pv-s { position: sticky; top: var(--top); height: calc(100svh - var(--top) - 24px); min-height: 520px; max-height: 1000px; margin-bottom: 14svh; }
.pv-s:last-child { margin-bottom: 0; }
.pv-s-card { position: relative; display: block; height: 100%; overflow: hidden; isolation: isolate; border-radius: 12px; color: #EFECE5; text-decoration: none; transform-origin: 50% 0; transform: scale(var(--k, 1)); box-shadow: 0 -30px 60px -40px rgba(10, 20, 18, .45), 0 40px 80px -50px rgba(10, 20, 18, .7); will-change: transform; }
.pv-s--studio .pv-full { inset: auto; left: 40%; top: 11%; width: 56%; aspect-ratio: 16 / 10; border-radius: 8px; background: #120E0B; box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 40px 70px -36px rgba(0, 0, 0, .75); }
.pv-s--studio .pv-full::after { content: none; }
/* a soft fall of the card's own dark behind the name, so the name always reads clearly */
.pv-s-card::before { content: ""; position: absolute; inset: 40% 0 0; z-index: 3; background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .32) 45%, rgba(0, 0, 0, 0) 100%); pointer-events: none; }
.pv-s-card::after { content: ""; position: absolute; inset: 0; z-index: 7; background: #000000; opacity: var(--d, 0); pointer-events: none; }
.pv-s .pv-meta { position: absolute; z-index: 4; left: clamp(22px, 2.4vw, 40px); top: clamp(22px, 2.4vw, 36px); color: rgba(239, 236, 229, .8); }
.pv-s--monpro .pv-wide { left: 40%; top: 13%; width: 66%; }
.pv-s--monpro .pv-phone { left: 29%; top: 17%; width: 13%; }
.pv-s--visitrove .pv-wide { left: 34%; top: 11%; width: 58%; border-radius: 8px; }
.pv-s--visitrove .pv-phone { right: 5%; top: 24%; width: 15%; }
.pv-s-cap { position: absolute; z-index: 4; left: clamp(22px, 2.4vw, 40px); bottom: clamp(22px, 2.4vw, 40px); display: grid; gap: clamp(14px, 1.4vw, 22px); max-width: 30%; }
.pv-s--studio .pv-s-cap { max-width: 46%; }
.pv-s-name { font-size: clamp(56px, 7.6vw, 148px); font-weight: 500; line-height: .86; letter-spacing: -0.06em; white-space: nowrap; color: #F4F1EA; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.pv-s-line { max-width: 34ch; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.45; color: rgba(239, 236, 229, .8); }
.pv-s-go { position: absolute; z-index: 4; right: clamp(18px, 2vw, 32px); bottom: clamp(18px, 2vw, 32px); display: inline-flex; align-items: center; gap: 14px; padding: 0 0 0 18px; border-radius: 3px; background: #EFECE5; color: var(--sheet-ink); font-size: 15px; font-weight: 600; line-height: 46px; overflow: hidden; }
.pv-s-go .arrow { display: grid; place-items: center; width: 46px; height: 46px; border-left: 1px solid rgba(0, 0, 0, .14); transition: background-color .4s var(--ease-io), color .4s var(--ease-io); }
.pv-s-card:hover .pv-s-go .arrow, .pv-s-card:focus-visible .pv-s-go .arrow { background: var(--sheet-ink); color: #EFECE5; }
.pv-s .pv-toggle { top: clamp(14px, 1.6vw, 24px); right: clamp(14px, 1.6vw, 24px); }

/* ================= laptops and tablets ================= */
@media (max-width: 1100px) {
  .pv-s-cap { max-width: 44%; }
  .pv-s-name { font-size: clamp(48px, 8vw, 96px); }
}

/* ================= phones ================= */
@media (max-width: 760px) {
  .work { --top: 76px; }
  .pv-s { height: calc(100svh - var(--top) - 92px); min-height: 0; margin-bottom: 10svh; }
  .pv-s--monpro .pv-wide, .pv-s--visitrove .pv-wide { left: 8%; top: 14%; width: 132%; border-radius: 8px 0 0 8px; }
  .pv-s--monpro .pv-phone, .pv-s--visitrove .pv-phone { left: auto; right: 7%; top: 17%; width: 36%; }
  .pv-s--monpro .pv-wide, .pv-s--visitrove .pv-wide { top: 12%; }
  .pv-s-cap, .pv-s--studio .pv-s-cap { left: 18px; right: 18px; bottom: 88px; max-width: none; }
  .pv-s-name { font-size: clamp(44px, 13vw, 60px); white-space: normal; }
  .pv-s-card::before { inset: 45% 0 0; background: linear-gradient(to top, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .7) 40%, rgba(0, 0, 0, 0) 100%); }
  .pv-s-go { left: 18px; right: auto; bottom: 18px; }

  .pv-s--studio .pv-full { inset: 12% 0 auto; left: 0; width: 100%; border-radius: 0; box-shadow: none; height: auto; aspect-ratio: 16 / 10; -webkit-mask: linear-gradient(to bottom, transparent 0, #000 12%, #000 80%, transparent 100%); mask: linear-gradient(to bottom, transparent 0, #000 12%, #000 80%, transparent 100%); }
  .pv-s--studio .pv-full::after { content: none; }
  .dark-site .pv-sheet > .wrap { padding-inline: 12px; }
  /* the phone sheet clips with overflow: hidden, which stops sticky; clip trims the same edges and lets the cards pin */
  .dark-site .work-sheet.pv-sheet { overflow: clip; }
}

/* The card stays fully bright until the next one is half way up over it (it began dimming as soon as the next card
   showed, so a card was rarely seen bright). Where the browser can, the card going under eases back and dims through its own scroll-linked animation, worked out
   alongside the scroll itself, so it stays locked to the page however busy the films keep the rest of the page. The
   script in work-stack.js does the same where this isn't supported. */
@supports (animation-timeline: view()) {
  .pv-stack { timeline-scope: --pv-2, --pv-3; }
  .pv-s:nth-child(2) { view-timeline: --pv-2 block; }
  .pv-s:nth-child(3) { view-timeline: --pv-3 block; }
  .pv-s:nth-child(1) > .pv-s-card, .pv-s:nth-child(1) > .pv-s-card::after { animation-timeline: --pv-2; }
  .pv-s:nth-child(2) > .pv-s-card, .pv-s:nth-child(2) > .pv-s-card::after { animation-timeline: --pv-3; }
  .pv-s:nth-child(-n+2) > .pv-s-card { animation-name: pv-under; }
  .pv-s:nth-child(-n+2) > .pv-s-card::after { animation-name: pv-dim; }
  .pv-s:nth-child(-n+2) > .pv-s-card, .pv-s:nth-child(-n+2) > .pv-s-card::after { animation-duration: auto; animation-fill-mode: both; animation-timing-function: cubic-bezier(.45, 0, .55, 1); animation-range: entry 50% entry 100%; }
  @keyframes pv-under { from { transform: scale(1); } to { transform: scale(.94); } }
  @keyframes pv-dim { from { opacity: 0; } to { opacity: .5; } }
}

/* Laptops: Chrome's hardware playback on some laptops (seen on an AMD graphics chip) draws a row of purple specks along
   the very top edge of these screen films. Each film is lifted a few pixels so that row sits just outside its frame. */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .pv-shot video { height: calc(100% + 6px); margin-top: -6px; }
}