/* NUCRW — site styles. Tokens, reset, and shared labels. */
:root {
  --bg: #ffffff;
  --fg: #121212;
  --dim: #a5a5a5;
  --line: #ebeaef;
  --gutter: clamp(16px, 2.4vw, 36px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --features: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.45s; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; width: 0; height: 0; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: var(--features);
}
html.home, html.home body { background: #000; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
::selection { background: var(--fg); color: var(--bg); }

/* Small caps-style labels, as on the Framer site: Switzer, uppercase */
.label {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---------- Header ---------- */
/* Fixed over the home slides. On info it sits at the top of the page and scrolls away.
   On a project it stays pinned to the film, then leaves once the write-up covers it. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--gutter);
  color: #fff;
  pointer-events: none;
}
html.page .site-header { position: absolute; }
html.project .site-header {
  position: fixed;
  transition: opacity 0.35s var(--ease), visibility 0s linear;
}
html.project.header-away .site-header {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
}
.site-header a, .site-header button { pointer-events: auto; }
html.project.header-away .site-header a,
html.project.header-away .site-header button { pointer-events: none; }
/* Over the white write-up the film header stays away, but the hamburger comes back in black. */
html.project.header-away.on-panel:not(.work-open) .site-header {
  opacity: 1;
  visibility: visible;
  color: var(--fg);
  transition: opacity 0.35s var(--ease), visibility 0s linear;
}
html.project.header-away.on-panel:not(.work-open) .menu-toggle { pointer-events: auto; }
html.project.header-away.on-panel:not(.work-open) .wordmark { visibility: hidden; }
.wordmark { display: block; line-height: 0; -webkit-user-drag: none; user-select: none; }
.wordmark img { width: clamp(46px, 4.14vw, 64px); height: auto; -webkit-user-drag: none; user-select: none; pointer-events: none; }
html.on-light .wordmark img { filter: invert(1); }
html.on-light .site-header { color: var(--fg); }

/* Hamburger: two flat lines */
.menu-toggle {
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-right: -6px;
  cursor: pointer;
  position: relative;
}
.menu-toggle span {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: currentColor;
  transition: transform 0.4s var(--ease), top 0.4s var(--ease);
}
.menu-toggle span:first-child { top: 17px; }
.menu-toggle span:last-child { top: 25px; }
html.menu-open .menu-toggle span:first-child { top: 21px; transform: rotate(45deg); }
html.menu-open .menu-toggle span:last-child { top: 21px; transform: rotate(-45deg); }
.menu-toggle:focus { outline: none; }
.menu-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

/* Compact menu, anchored to the toggle. Not a full-screen takeover. */
.site-menu {
  position: fixed;
  z-index: 80;
  top: calc(var(--gutter) + clamp(46px, 4.14vw, 64px) + 10px);
  right: var(--gutter);
  width: min(240px, calc(100vw - 32px));
  padding: 14px 16px 12px;
  background: #141414;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  transform-origin: top right;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(0.96);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0s linear 0.18s;
}
html.menu-open .site-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 0.32s var(--ease), transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
html.on-light .site-menu {
  background: #fff;
  color: var(--fg);
  border: 0;
  box-shadow: 0 18px 40px rgba(18, 18, 18, 0.14);
}
.site-menu ul { list-style: none; margin: 0; padding: 0; }
.site-menu li a,
.site-menu li button {
  display: block;
  width: 100%;
  padding: 7px 2px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-align: left;
  text-decoration: none;
}
.site-menu li a:hover,
.site-menu li button:hover,
.site-menu li a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
.site-menu li a:focus,
.site-menu li button:focus { outline: none; }
.site-menu li a:focus-visible,
.site-menu li button:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.site-menu-foot {
  display: flex;
  gap: 2px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
html.on-light .site-menu-foot { border-top-color: var(--line); }
.site-menu-foot a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: inherit;
  border-radius: 8px;
}
.site-menu-foot a:hover { background: rgba(255, 255, 255, 0.08); }
html.on-light .site-menu-foot a:hover { background: rgba(18, 18, 18, 0.06); }
.site-menu-foot a:focus { outline: none; }
.site-menu-foot a:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.site-menu-foot svg { width: 18px; height: 18px; display: block; }

/* ---------- Work menu: a glass overlay listing the projects ---------- */
/* Rolling over a name plays a small clip that follows the cursor. Clicking goes to that project. */
.work-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  padding: calc(var(--gutter) * 3) 0;
  color: #fff;
  background: rgba(10, 10, 10, 0.34);
  -webkit-backdrop-filter: blur(30px) saturate(1.35);
  backdrop-filter: blur(30px) saturate(1.35);
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s var(--ease), visibility 0s linear 0.28s;
}
html.work-open .work-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.5s var(--ease);
}
html.work-open .site-header { opacity: 0; visibility: hidden; pointer-events: none; }

.work-close {
  appearance: none;
  position: absolute;
  top: calc(var(--gutter) + (clamp(46px, 4.14vw, 64px) - 44px) / 2);
  right: calc(var(--gutter) - 6px);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.work-close span {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 21px;
  height: 2px;
  background: currentColor;
}
.work-close span:first-child { transform: rotate(45deg); }
.work-close span:last-child { transform: rotate(-45deg); }
.work-close:focus { outline: none; }
.work-close:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

.work-list { list-style: none; margin: 0; padding: 0; width: 100%; }
.work-row {
  display: grid;
  grid-template-columns: clamp(34px, 4vw, 64px) 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 0 var(--gutter);
  color: inherit;
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease);
}
.work-row:focus { outline: none; }
.work-row:focus-visible .work-title { text-decoration: underline; text-underline-offset: 0.12em; text-decoration-thickness: 2px; }
.work-num, .work-meta {
  font-size: 13px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}
.work-title {
  /* Pink fills in from the left when the row is rolled over. */
  background: linear-gradient(90deg, #ffcbcb 50%, #fff 50%) 100% 0 / 200% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background-position 0.6s var(--ease);
  font-size: clamp(34px, min(7vw, 11vh), 120px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  /* The text is painted through the background, so keep the last glyph inside the box despite the tight tracking. */
  padding: 0 0.1em 0.06em 0.04em;
  margin: 0 -0.1em 0 -0.04em;
}
.work-row:hover .work-title,
.work-row.is-on .work-title,
.work-row:focus-visible .work-title { background-position: 0 0; }
html.work-open .work-list.is-peeking .work-row { opacity: 0.3; }
html.work-open .work-list.is-peeking .work-row.is-on { opacity: 1; transform: translateX(10px); }

@keyframes work-rise {
  from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
html.work-open .work-row { animation: work-rise 0.8s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 45ms + 60ms); }

/* The clip. The outer box follows the cursor, the frame scales and fades in. */
.work-peek {
  --pw: clamp(240px, 23vw, 380px);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  width: var(--pw);
  height: calc(var(--pw) * 9 / 16);
  pointer-events: none;
  will-change: transform;
}
.work-peek-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #111;
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s var(--ease), transform 0.45s var(--ease);
}
.work-peek.is-live .work-peek-frame { opacity: 1; transform: none; }
.work-peek video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s linear;
}
.work-peek video.is-on { opacity: 1; }

@media (hover: none) { .work-peek { display: none; } }
@media (max-width: 600px) {
  .work-row { grid-template-columns: 1fr auto; }
  .work-num { display: none; }
}
/* ---------- Home: full-screen slides ---------- */
html.home { overscroll-behavior: none; }
html.home.is-motion { touch-action: none; }
.slide {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: block;
  color: #fff;
}
.slide video, .slide .poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
html.home.is-motion .slide video {
  transform: scale(calc(1.055 - var(--settle, 1) * 0.055));
}
.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 45%),
    linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 22%);
  pointer-events: none;
}
.slide-meta {
  pointer-events: none;
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.slide-title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(56px, 11vw, 200px);
  line-height: 0.88;
  letter-spacing: -0.045em;
}
.slide-title .num {
  display: block;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 16px;
}
.slide-sub { text-align: right; font-size: 13px; text-transform: uppercase; color: rgba(255,255,255,0.7); white-space: nowrap; }
.slide-sub strong { display: block; color: #fff; font-weight: 400; }

.slide-copy { pointer-events: none; min-width: 0; }
.slide-title a { pointer-events: auto; color: inherit; }
/* The project title fills with pink when rolled over, as on the project pages and in the Work menu. */
.slide-title a {
  background: linear-gradient(90deg, #ffcbcb 50%, #fff 50%) 100% 0 / 200% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.1em 0 0.04em;
  margin: 0 -0.1em 0 -0.04em;
  transition: background-position 0.6s var(--ease);
}
.slide-title a:hover,
.slide-title a:focus-visible { background-position: 0 0; }
.slide-title a:focus { outline: none; }
.slide-title a:focus-visible { outline: 1px solid currentColor; outline-offset: 8px; }
.slide-line {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
}
html.home .slide-line { font-size: clamp(36.4px, 4.42vw, 62.4px); }
.slide-line a { pointer-events: auto; color: inherit; }
.slide-line a:focus { outline: none; }
.slide-line a:focus-visible { outline: 1px solid currentColor; outline-offset: 8px; }
html.home.is-motion .slide .slide-title,
html.home.is-motion .slide .slide-line {
  opacity: var(--settle, 1);
  transform: translateY(calc((1 - var(--settle, 1)) * 28px));
}
@media (max-width: 600px) { .slide-meta { flex-direction: column; align-items: flex-start; } }

/* Next-project arrow on the first slide: a glass key with a down arrow, fully opaque once shown.
   It dissolves up into place as the visitor moves down and away as they move back up. */
.slide-next {
  appearance: none;
  position: absolute;
  z-index: 3;
  left: calc(50% - 26px);
  top: calc(88% - 26px);
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
/* The key grows out of the film: three feathered round panes of glass, widest and lightest outside, tightest and most blurred
   at the key, so the blur falls away as it spreads. None has an edge. Each carries its own dissolve because an
   ancestor with opacity or a filter would stop the glass from seeing the film behind it. */
.next-halo, .next-ring, .next-core, .next-disc {
  position: absolute;
  opacity: 0;
  transform: translateY(22px);
  filter: blur(8px);
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), filter 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.next-halo, .next-ring, .next-core {
  pointer-events: none;
  -webkit-backdrop-filter: blur(var(--b)) saturate(1.1);
  backdrop-filter: blur(var(--b)) saturate(1.1);
  -webkit-mask: radial-gradient(closest-side, #000 calc(100% - var(--f)), rgba(0, 0, 0, 0.75) calc(100% - var(--f) * 0.75), rgba(0, 0, 0, 0.2) calc(100% - var(--f) * 0.4), transparent);
  mask: radial-gradient(closest-side, #000 calc(100% - var(--f)), rgba(0, 0, 0, 0.75) calc(100% - var(--f) * 0.75), rgba(0, 0, 0, 0.2) calc(100% - var(--f) * 0.4), transparent);
}
.next-halo { inset: -22px; border-radius: 50%; --f: 32px; --b: 2.5px; }
.next-ring { inset: -10px; border-radius: 50%; --f: 20px; --b: 4px; }
.next-core {
  inset: 0;
  border-radius: 50%;
  --f: 9px;
  --b: 4.5px;
  -webkit-backdrop-filter: blur(var(--b)) saturate(1.15) brightness(0.97);
  backdrop-filter: blur(var(--b)) saturate(1.15) brightness(0.97);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.01) 55%, rgba(255, 255, 255, 0.04)), rgba(10, 10, 10, 0.07);
}
.next-disc {
  inset: 7px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 0 8px rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 5px 10px -3px rgba(0, 0, 0, 0.28);
}
.next-disc::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, #111 0%, #737373 14%, #fafafa 26%, #525252 38%, #0a0a0a 50%, #a3a3a3 64%, #fff 75%, #404040 87%, #111 100%);
  background-size: 300% 100%;
  opacity: 0.06;
  animation: chrome-drift 8s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.next-disc svg {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
html.has-nudged .slide-next { pointer-events: auto; }
html.has-nudged .next-halo,
html.has-nudged .next-ring,
html.has-nudged .next-core,
html.has-nudged .next-disc {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.3s cubic-bezier(0.22, 1, 0.36, 1), filter 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.slide-next:focus { outline: none; }
.slide-next:focus-visible { outline: 1px solid #fff; outline-offset: 4px; border-radius: 50%; }
@media (hover: hover) and (pointer: fine) {
  .slide-next:hover { transform: scale(1.06); }
  .slide-next:hover .next-disc svg { transform: translateY(2px); }
}
.slide-next:active { transform: scale(0.94); transition-duration: 0.08s; }
html.home.is-motion .slide .slide-next { opacity: var(--settle, 1); }


.scroll-hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: var(--gutter);
  transform: translateX(-50%);
  color: var(--dim);
}

/* ---------- Project page ---------- */
.p-hero {
  position: relative;
  color: #fff;
  background: #000;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.p-hero video, .p-hero .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0) 50%);
}
.p-hero .slide-meta { animation: rise 1s var(--ease) both 0.1s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

.p-intro {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  padding: clamp(72px, 10vw, 160px) var(--gutter);
}
.p-text { grid-column: 1 / span 7; }
.p-text p {
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.2;
  font-weight: 400;
  color: var(--fg);
  margin: 0 0 20px;
}
.p-text a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.p-facts {
  grid-column: 9 / span 4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 24px;
  align-content: start;
  margin: 0;
  padding-top: 0.5em;
}
.p-facts .wide { grid-column: 1 / -1; }
.p-facts dt { margin-bottom: 10px; }
.p-facts dd { margin: 0; font-size: 13px; line-height: 1.75; text-transform: uppercase; letter-spacing: 0.01em; }
.p-facts dt {
  display: inline-block;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size 0.45s var(--ease);
}
.p-facts > div:hover dt { background-size: 100% 1px; }
.p-facts dd span {
  display: block;
  transition: transform 0.45s var(--ease);
}
.p-facts > div:hover dd span { transform: translateX(8px); }
.p-facts > div:hover dd span:nth-child(2) { transition-delay: 0.05s; }
.p-facts > div:hover dd span:nth-child(3) { transition-delay: 0.1s; }
@media (max-width: 820px) {
  .p-text, .p-facts { grid-column: 1 / -1; }
}

.p-film { padding: 0 var(--gutter) clamp(48px, 8vw, 120px); }
/* Link back to the previous project, right under the next-project panel. Quiet grey, black on rollover. */
.p-prev-row { display: flex; justify-content: flex-end; padding: 22px var(--gutter) 0; }
.p-prev {
  color: #ccc;
  text-underline-offset: 4px;
  transition: color 0.3s var(--ease);
}
.p-prev:hover, .p-prev:focus-visible { color: #000; }
.p-prev:focus { outline: none; }
.p-prev:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* A set of vertical films sits side by side in place of the one wide film. */
.p-film-set {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  /* No film taller than half the screen is wide: three 9:16 columns of about 50vh, plus gutters. */
  max-width: calc(150vh + 4 * var(--gutter));
  margin-inline: auto;
}
.p-film-set .film video { aspect-ratio: 9 / 16; }
.p-film-set .film-controls { gap: 8px; padding: 0 8px; }
@media (max-width: 720px) {
  .p-film-set { grid-template-columns: minmax(0, 360px); justify-content: center; }
}
@media (min-width: 721px) and (max-width: 1000px) {
  .p-film-set .film-time { display: none; }
}

/* Film stays in the page. The scrubber thumb is a dot. */
.film { position: relative; background: #000; color: #fff; }
.film video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; cursor: pointer; }
/* The controls float over the bottom of the film on a clear, blurred strip. While it plays they fade away
   once the pointer leaves or rests (the film gets .is-active from film-player.js), and come back on movement. */
.film-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 56px;
  padding: 0 14px;
  background: rgba(10, 10, 10, 0.07);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.film.is-playing:not(.is-active):not(:has(:focus-visible)) .film-controls {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.film-play, .film-mute {
  appearance: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: none;
  border: 0;
  background: transparent;
  color: #fff;
  padding: 0;
}
.film-play svg, .film-mute svg { grid-area: 1 / 1; width: 16px; height: 16px; }
.film.is-playing .icon-play,
.film:not(.is-playing) .icon-pause,
.film.is-muted .icon-vol,
.film:not(.is-muted) .icon-muted { opacity: 0; }
.film-play:focus, .film-mute:focus, .film-range:focus { outline: none; }
.film-play:focus-visible, .film-mute:focus-visible, .film-range:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }
.film-range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 28px;
  margin: 0;
  background: transparent;
  --p: 0%;
}
.film-range::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(to right, #fff var(--p), rgba(255, 255, 255, 0.32) var(--p));
}
.film-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -6px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.film-range.is-drag::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -8px; }
.film-range::-moz-range-track { height: 2px; background: rgba(255, 255, 255, 0.32); border: 0; }
.film-range::-moz-range-progress { height: 2px; background: #fff; }
.film-range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.film-time { font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: 0.02em; white-space: nowrap; }

/* Pull up at the top of a project to leave. Parked fully offscreen so it never leaves a strip. */
html.page { overscroll-behavior-y: none; }
.exit {
  --bay: 248px;
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bay);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: #000;
  pointer-events: none;
  visibility: hidden;
  transform: translate3d(0, calc(-100% - 12px), 0);
}
.exit.is-open { visibility: visible; }
.exit.is-open,
.p-main.is-open { will-change: transform; }
.exit-lockup {
  position: relative;
  width: min(148px, 40vw);
  margin-bottom: 16px;
  opacity: 0;
  --turn: 0;
  transform-origin: center bottom;
}
.exit-mark {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
}
.exit-ring, .exit-halo {
  position: absolute;
  border-radius: 28px;
  pointer-events: none;
  background: conic-gradient(
    from calc(var(--turn) * 1turn - 18deg),
    transparent 0deg,
    transparent 168deg,
    rgba(255, 255, 255, 0.28) 230deg,
    #fff 310deg,
    #fff 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.exit-ring {
  inset: -16px -24px;
  padding: 2px;
  opacity: clamp(0, var(--turn) * 2.4, 1);
}
.exit-halo {
  inset: -20px -30px;
  padding: 6px;
  filter: blur(8px);
  opacity: clamp(0, var(--turn) * 0.45, 0.32);
  transform: translateY(3px);
}

/* The big title on the hero fills with pink when rolled over, as in the Work menu. */
.p-hero .slide-meta a {
  background: linear-gradient(90deg, #ffcbcb 50%, #fff 50%) 100% 0 / 200% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* Tight tracking pulls the box in past the last glyph, and the text is only painted inside it; give the S room. */
  padding: 0 0.1em 0 0.04em;
  margin: 0 -0.1em 0 -0.04em;
  transition: background-position 0.6s var(--ease);
}
.p-hero .slide-meta a:hover,
.p-hero .slide-meta a:focus-visible { background-position: 0 0; }
/* Contact. Send is the beUI motion button: chrome rim, traveling reflection, spring press. Not the package. */
.contact-scrim {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: rgba(12, 12, 12, 0.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.contact-scrim[hidden] { display: none; }
.contact {
  position: fixed;
  z-index: 90;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100svh - 48px);
  overflow: auto;
  padding: 28px 26px 22px;
  background: #f7f6f4;
  color: var(--fg);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(18, 18, 18, 0.22);
}
.contact[hidden] { display: none; }
.contact-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.contact h2 {
  margin: 0;
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.contact-close {
  appearance: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: none;
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
}
.contact-close svg { width: 18px; height: 18px; }
.contact-close:focus, .contact-send:focus, .field input:focus, .composer-edit:focus, .tidy:focus { outline: none; }
.contact-close:focus-visible, .contact-send:focus-visible, .field input:focus-visible, .composer-edit:focus-visible, .tidy:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 13px; letter-spacing: 0.01em; }
.field input, .field textarea {
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #e4e2de;
  border-radius: 14px;
  background: #fff;
  color: var(--fg);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
}
.tidy {
  appearance: none;
  font: inherit;
  color: inherit;
}
html.contact-open, html.contact-open body { overflow: hidden; }
.composer-box {
  position: relative;
  border: 1px solid #e4e2de;
  border-radius: 14px;
  background: #fff;
}
.composer-box:has([aria-invalid="true"]) { border-color: #9f2d2d; }
.composer-edit {
  min-height: 132px;
  max-height: 220px;
  overflow: auto;
  padding: 14px 16px 34px;
  font-size: 16px;
  line-height: 1.45;
  outline: none;
  white-space: pre-wrap;
}
.composer-edit.is-empty:before {
  content: attr(data-placeholder);
  color: #5c5854;
  pointer-events: none;
}
.composer-edit p { margin: 0 0 0.45em; }
.composer-edit p:last-child { margin: 0; }
.composer-edit ul, .composer-edit ol { margin: 0.15em 0 0.35em; padding-left: 1.15em; }
.composer-edit li { margin: 0.12em 0; }
.tidy {
  position: absolute;
  right: 8px;
  bottom: 8px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid #d9d6d1;
  border-radius: 999px;
  background: #f7f6f4;
  font-size: 12px;
  letter-spacing: -0.01em;
}
.tidy[hidden] { display: none; }
.tidy:disabled { opacity: 0.55; }
.field input[aria-invalid="true"] { border-color: #9f2d2d; }
.field-error { margin: 0; color: #9f2d2d; font-size: 13px; line-height: 1.35; }
.field-error[hidden] { display: none; }
.field-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.contact-send {
  appearance: none;
  position: relative;
  isolation: isolate;
  width: 100%;
  margin-top: 6px;
  padding: 15px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #1c1c1c;
  font: inherit;
  font-size: 15px;
  letter-spacing: -0.01em;
  overflow: hidden;
}
.contact-send {
  height: 48px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.contact-send::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 -30%;
  background: linear-gradient(105deg, #111 0%, #737373 14%, #fafafa 26%, #525252 38%, #0a0a0a 50%, #a3a3a3 64%, #fff 75%, #404040 87%, #111 100%);
  background-size: 160% 100%;
  animation: chrome-drift 8s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.contact-send::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 2px;
  border-radius: inherit;
  background: #f4f4f4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}
.contact-send .shine {
  position: absolute;
  z-index: 0;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 34%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  transform: translateX(-120%) skewX(-12deg);
  opacity: 0;
  pointer-events: none;
}
.contact-send .send-label { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .contact-send:hover { transform: scale(1.02); }
  .contact-send:hover .shine {
    opacity: 1;
    transform: translateX(320%) skewX(-12deg);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s linear;
  }
}
.contact-send:active { transform: scale(0.93); transition-duration: 0.08s; }
.contact-send:disabled { opacity: 0.6; }
.contact-send:disabled::before { animation-play-state: paused; }
@keyframes chrome-drift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.contact-form.is-sent .field,
.contact-form.is-sent .contact-send,
.contact-form.is-sent .field-hp,
.contact-form.is-sent h2,
.contact-form.is-sent .contact-note { display: none; }
.contact-done { display: none; padding: 8px 0 4px; }
.contact-form.is-sent .contact-head { justify-content: flex-end; margin-bottom: 0; }
.contact:has(.contact-form.is-sent) { width: min(340px, calc(100vw - 32px)); }
.contact-form.is-sent .contact-done { display: block; }
.contact-done-kicker {
  margin: 0 0 8px;
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.contact-done-line { margin: 0; font-size: 16px; min-height: 1.4em; }
.contact-note { min-height: 1.3em; margin: 10px 0 0; font-size: 14px; line-height: 1.4; }
button.big {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  text-align: left;
  color: inherit;
}

.p-stills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  padding: 0 var(--gutter);
}
.p-stills figure { margin: 0; overflow: hidden; background: var(--line); }
.p-stills figure:nth-child(3n + 1) { grid-column: 1 / -1; }
.p-stills img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.p-stills figure:not(:nth-child(3n + 1)) img { aspect-ratio: 4 / 3; }
@media (max-width: 720px) { .p-stills { grid-template-columns: 1fr; } }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.p-facts.reveal, .p-stills .reveal { transform: none; }
.p-stills figure:nth-child(2) { transition-delay: 0.08s; }
.p-stills figure:nth-child(3) { transition-delay: 0.14s; }
.reveal.in { opacity: 1; transform: none; }

/* next project */
.p-next {
  position: relative;
  display: block;
  height: 80vh;
  margin-top: clamp(64px, 10vw, 160px);
  overflow: hidden;
  color: #fff;
  background: #000;
}
.p-next video, .p-next .poster {
  position: absolute;
  left: 0;
  right: 0;
  top: -10%;
  z-index: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  opacity: 0.72;
  transform: scale(1.04);
  transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}
.p-next:hover video, .p-next:hover .poster,
.p-next:focus-visible video, .p-next:focus-visible .poster {
  opacity: 1;
  transform: scale(1.12);
}
.p-next .slide-meta {
  z-index: 2;
  color: #fff;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.p-next:hover .slide-meta,
.p-next:focus-visible .slide-meta { transform: translateY(-12px); }
.p-next .slide-title { color: #fff; }
.p-next .name {
  display: inline-block;
  color: transparent;
  /* The text is painted through the background, so the box is the clip. Tight tracking and line-height leave the last
     glyph and the ascenders and descenders outside it; pad the box out and pull the margins back to keep the layout. */
  padding: 0.12em 0.1em 0.14em 0.04em;
  margin: -0.12em -0.1em -0.14em -0.04em;
  /* Pink fills in from the left, as on the project titles. */
  background-image: linear-gradient(90deg, #ffcbcb 50%, #fff 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-position 0.6s var(--ease);
}
.p-next:hover .name,
.p-next:focus-visible .name { background-position: 0 0; }
.p-next .slide-sub {
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--ease) 0.55s, transform 0.45s var(--ease) 0.55s;
}
.p-next:hover .slide-sub,
.p-next:focus-visible .slide-sub { opacity: 1; transform: none; }
.p-next .slide-sub strong { color: inherit; font-weight: 400; }
.p-next .slide-meta .label { display: block; margin-bottom: 16px; color: inherit; opacity: 0.72; }
.film-play.just-on { animation: swell 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes swell {
  0% { transform: scale(1); }
  45% { transform: scale(1.45); }
  100% { transform: scale(1); }
}
html.is-leaving body { pointer-events: none; }
html.is-leaving .p-main {
  transition: transform 0.46s cubic-bezier(0.7, 0, 0.84, 0), opacity 0.46s linear;
  transform: translate3d(9vw, -11vh, 0) scale(1.05);
  opacity: 0;
}
html.is-arriving .p-main {
  transform: translate3d(-6vw, 8vh, 0);
  opacity: 0;
}
html.is-arriving.is-here .p-main {
  transform: none;
  opacity: 1;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
}
.p-next:focus { outline: none; }
.p-next:focus-visible { outline: 1px solid currentColor; outline-offset: -6px; }

/* ---------- Audio player: play button, waveform across the page, time ---------- */
.p-audio { padding: clamp(56px, 7vw, 112px) var(--gutter) 0; }
.audio {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 24px);
}
.audio-play {
  appearance: none;
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--fg);
  color: #fff;
  cursor: pointer;
  transition: transform 0.35s var(--ease);
}
.audio-play:hover { transform: scale(1.07); }
.audio-play:active { transform: scale(0.95); transition-duration: 0.08s; }
.audio-play:focus { outline: none; }
.audio-play:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }
.audio-play svg { grid-area: 1 / 1; width: 16px; height: 16px; transition: opacity 0.2s var(--ease); }
.audio-play .icon-play { transform: translateX(1px); }
.audio.is-playing .icon-play,
.audio:not(.is-playing) .icon-pause { opacity: 0; }
.audio-wave {
  position: relative;
  flex: 1;
  min-width: 0;
  height: clamp(56px, 6vw, 88px);
  cursor: pointer;
  touch-action: pan-y;
  user-select: none;
}
.audio-wave canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.audio-wave:focus { outline: none; }
.audio-wave:focus-visible { outline: 1px solid var(--fg); outline-offset: 6px; }
.audio-time {
  flex: none;
  min-width: 5.5em;
  text-align: right;
  font-size: 13px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
}
.audio-caption {
  margin: 28px 0 0;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.2;
  font-weight: 400;
  color: var(--fg);
}
@media (max-width: 600px) {
  .audio { flex-wrap: wrap; }
  .audio-wave { order: 3; flex: 1 0 100%; }
  .audio-time { margin-left: auto; }
}
/* ---------- Info ---------- */
.info { padding: calc(var(--gutter) * 2 + 80px) var(--gutter) var(--gutter); }
.info h1 {
  font-weight: 500;
  font-size: clamp(64px, 14vw, 260px);
  line-height: 0.86;
  letter-spacing: -0.05em;
  margin: 0 0 clamp(40px, 6vw, 96px);
}
.info-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.info-body { grid-column: 1 / span 7; }
.info-body p { font-size: clamp(20px, 2vw, 30px); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.9em; }
.info-body p:last-child { margin-bottom: 0; }
.info-lists { grid-column: 9 / span 4; display: grid; gap: 22px; align-content: start; }
.info-lists ul { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--line); }
.info-lists li { padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.3; }
.info-lists .label { color: var(--dim); font-size: 13px; }
.info + .site-footer { padding-top: clamp(24px, 3vw, 48px); }
@media (max-width: 820px) { .info-body, .info-lists { grid-column: 1 / -1; } }

/* ---------- Footer ---------- */
.site-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: clamp(48px, 8vw, 120px) var(--gutter) var(--gutter);
  font-size: 14px;
  color: var(--dim);
}
.site-footer a:hover { color: var(--fg); }
.foot-links { display: flex; gap: 4px; align-items: center; }
.foot-links a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--fg);
}
.foot-links a:focus { outline: none; }
.foot-links a:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.foot-links svg { width: 18px; height: 18px; display: block; }
.site-footer .big {
  flex-basis: 100%;
  font-size: clamp(40px, 7vw, 120px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--fg);
  margin-bottom: clamp(32px, 5vw, 72px);
}
.twist { display: inline-block; min-width: 9.2ch; text-align: left; white-space: nowrap; }
.twist-caret {
  display: inline-block;
  width: 0.06em;
  height: 0.72em;
  margin-left: 0.06em;
  background: currentColor;
  vertical-align: -0.02em;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .slide video, .slide .poster, .p-next video, .p-next .poster { transform: none; }
  .p-next .slide-meta { transform: none; }
  .reveal { opacity: 1; transform: none; }
  html.home:not(.is-motion) { scroll-snap-type: y mandatory; }
  .slide { scroll-snap-align: start; }
  html.home.is-motion .slide .slide-title,
  html.home.is-motion .slide .slide-line { opacity: 1; transform: none; }
}

/* ---------- Fluid cursor ---------- */
/* Position and rotation are set from the Magic UI smooth-cursor spring. */
@media (hover: hover) and (pointer: fine) {
  html.has-cursor, html.has-cursor * { cursor: none !important; }
  html.has-cursor input:not([type="range"]),
  html.has-cursor textarea,
  html.has-cursor .composer-edit { cursor: text !important; }
}
.smooth-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
.smooth-cursor.is-field,
.smooth-cursor.is-none { opacity: 0 !important; }
.smooth-cursor-pointer,
.smooth-cursor-arrow,
.smooth-cursor-text,
.smooth-cursor-scrub {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  opacity: 0;
}
.smooth-cursor-arrow,
.smooth-cursor-text,
.smooth-cursor-scrub {
  transform: translate(-50%, -50%) scale(0.82);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.smooth-cursor-pointer { transition: opacity 0.18s linear; }
.smooth-cursor.is-pointer .smooth-cursor-pointer { opacity: 1; }
.smooth-cursor.is-arrow .smooth-cursor-arrow,
.smooth-cursor.is-text .smooth-cursor-text,
.smooth-cursor.is-scrub .smooth-cursor-scrub {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.smooth-cursor.is-down .smooth-cursor-arrow,
.smooth-cursor.is-down .smooth-cursor-text,
.smooth-cursor.is-down .smooth-cursor-scrub { transform: translate(-50%, -50%) scale(0.86); }
.smooth-cursor-scrub {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1.5px #111;
}
.smooth-cursor-text svg { width: 22px; height: 22px; }
.smooth-cursor svg { display: block; overflow: visible; }

/* ---------- Smooth scroll (Lenis) + parallax ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
img, video, a, .slide-title { -webkit-user-drag: none; user-select: none; }
.p-text, .info-body, .field { user-select: text; -webkit-user-drag: auto; }
.p-hero .slide-meta { z-index: 2; }