:root {
  --color-surface: #e9e7df;
  --color-ink: #10110f;
  --color-accent: #c7ff16;
  --color-muted: #696b63;
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --size-step--1: clamp(0.88rem, 0.82rem + 0.2vw, 1rem);
  --size-step-0: clamp(1rem, 0.92rem + 0.38vw, 1.2rem);
  --size-step-1: clamp(1.35rem, 1.12rem + 1vw, 2rem);
  --size-step-2: clamp(2.4rem, 1.6rem + 3.4vw, 5rem);
  --size-step-3: clamp(3.6rem, 2.2rem + 6vw, 8rem);
  --space-1: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  --space-2: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  --space-3: clamp(1.5rem, 1.15rem + 1.5vw, 2.5rem);
  --space-4: clamp(3rem, 2rem + 4vw, 6rem);
  --measure: 100%;
  --focus-ring-color: var(--color-ink);
  --focus-ring-width: 3px;
  --focus-ring-offset: 4px;
  --duration-fast: 140ms;
  --duration-standard: 220ms;
}

* {
  box-sizing: border-box;
}

@view-transition {
  navigation: auto;
}

html {
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-sans);
}

body {
  margin: 0;
  min-width: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

a:hover {
  text-decoration-color: var(--color-accent);
}

a,
button { touch-action: manipulation; }

h1[id],
h2[id],
h3[id] { scroll-margin-top: 5rem; }

a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.skip-link {
  background: var(--color-accent);
  color: var(--color-ink);
  left: var(--space-2);
  padding: var(--space-1) var(--space-2);
  position: fixed;
  top: var(--space-2);
  transform: translateY(-200%);
  transition: transform var(--duration-fast) ease-out;
  z-index: 1;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header,
main,
.site-footer {
  margin-inline: auto;
  max-width: var(--measure);
  padding-inline: var(--space-2);
}

.site-header {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  padding-block: var(--space-2);
}

.brand {
  font-size: var(--size-step-1);
  font-weight: 800;
  letter-spacing: -0.06em;
  text-decoration: none;
}

.brand span {
  color: var(--color-accent);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  font-size: var(--size-step--1);
  text-decoration: none;
}

.site-nav a[aria-current='page'] {
  background: var(--color-accent);
  font-weight: 700;
}

.site-footer {
  border-top: 1px solid currentColor;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--size-step--1);
  gap: var(--space-1) var(--space-2);
  justify-content: space-between;
  margin-top: var(--space-4);
  padding-block: var(--space-2);
}

.site-footer p {
  margin: 0;
}

.page-intro {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-4);
}

.page-intro h1,
.page-section h2 {
  letter-spacing: -0.06em;
  line-height: 0.92;
  margin: 0;
}

.page-intro h1 {
  font-size: var(--size-step-3);
  max-width: 12ch;
}

.page-intro p,
.page-section p {
  font-size: var(--size-step-0);
  line-height: 1.5;
  margin: 0;
  max-width: 52ch;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--size-step--1) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-section {
  border-top: 1px solid currentColor;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-3);
}

.page-section h2 {
  font-size: var(--size-step-1);
}

.project-index {
  margin-top: var(--space-3);
}

.project-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.project-index__row {
  border-top: 1px solid currentColor;
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-2);
}

.project-index__details {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  justify-content: space-between;
}

.project-index__link {
  font-size: var(--size-step-1);
  font-weight: 700;
}

.project-index__meta {
  color: var(--color-muted);
  display: flex;
  font-family: var(--font-mono);
  font-size: var(--size-step--1);
  gap: var(--space-1);
  margin: 0;
}

.project-index__meta span + time::before {
  content: '/';
  margin-right: var(--space-1);
}

.project-index__preview {
  margin: 0;
}

.project-index__preview .project-thumbnail {
  aspect-ratio: 16 / 9;
  display: block;
  height: auto;
  width: 100%;
}

.project-page {
  padding-block: var(--space-3);
}

.project-hero {
  display: grid;
  gap: var(--space-3);
}

.project-hero__intro {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.project-hero h1 {
  font-size: var(--size-step-2);
  letter-spacing: -0.06em;
  line-height: 0.94;
  margin: 0;
  max-width: 18ch;
  overflow-wrap: anywhere;
}

.project-hero__summary,
.project-hero__role {
  font-size: var(--size-step-0);
  line-height: 1.5;
  margin: 0;
  max-width: 52ch;
}

.project-hero__metadata {
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--size-step--1);
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.project-hero__metadata li + li::before {
  content: '/';
  margin-right: var(--space-1);
}

.project-hero__media,
.project-block {
  margin: 0;
}

.project-hero__media {
  min-width: 0;
}

.project-hero__media img,
.project-block img,
.project-block video,
.project-block iframe {
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

.project-hero__media img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.project-story {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

.project-block {
  border-top: 1px solid currentColor;
  padding-top: var(--space-2);
}

.project-block h2,
.project-block h3,
.project-block p,
.project-block ol,
.project-block ul,
.project-block dl {
  margin-block: 0 var(--space-2);
}

.project-block--text p,
.project-block--ai p,
.project-block--process p {
  line-height: 1.6;
  max-width: 52ch;
}

.project-gallery,
.project-block--comparison,
.project-block--related ul {
  display: grid;
  gap: var(--space-2);
}

.project-block figcaption {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--size-step--1);
  margin-top: var(--space-1);
}

.project-block--comparison figure {
  margin: 0;
}

.project-block--process ol,
.project-block--related ul {
  list-style: none;
  padding: 0;
}

.project-block--process li,
.project-block--credits dl > div {
  border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  padding-block: var(--space-2);
}

.project-block--credits dt {
  font-weight: 700;
}

.project-block--credits dd {
  margin: var(--space-1) 0 0;
}

.project-block--embed iframe {
  aspect-ratio: 16 / 9;
  border: 1px solid currentColor;
}

.project-block--related a {
  display: grid;
  gap: var(--space-1);
}

.project-page__back {
  border-top: 1px solid currentColor;
  margin: 0;
  padding-top: var(--space-2);
}

@media (min-width: 42rem) {
  .page-section {
    grid-template-columns: minmax(10rem, 1fr) minmax(0, 2fr);
  }

  .project-index__row {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.75fr);
  }

  .project-hero {
    grid-template-columns: minmax(14rem, 0.75fr) minmax(0, 1.75fr);
  }

  .project-gallery,
  .project-block--comparison,
  .project-block--related ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-index[data-enhanced='true'] .project-index__preview {
    opacity: 0;
    transform: translateY(var(--space-1));
    transition: opacity var(--duration-standard) ease-out, transform var(--duration-standard) ease-out;
  }

  .project-index[data-enhanced='true'] .project-index__preview[data-active='true'] {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .project-index[data-enhanced='true'] .project-index__preview,
  .project-index[data-enhanced='true'] .project-index__preview[data-active='true'] {
    opacity: 1;
    transition: none;
    transform: none;
  }

  [data-transition-media] {
    view-transition-name: none !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01ms !important;
  }
}

/* Full-screen project reel ------------------------------------------------ */
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.reel-hero {
  background: #080908;
  color: #f4f2ea;
  height: var(--reel-height);
  margin-inline: calc(clamp(1rem, 2.2vw, 2.25rem) * -1);
  position: relative;
}
.reel-hero__sticky { height: 100svh; overflow: hidden; position: sticky; top: 0; }
.is-home .site-header {
  background: linear-gradient(180deg, rgba(0,0,0,.45), transparent);
  border: 0;
  color: #f4f2ea;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  backdrop-filter: none;
}
.is-home .brand__mark img { filter: invert(1); }
.is-home .site-nav a[aria-current='page'] { box-shadow: none; }
.is-home main { padding-top: 0; }
.reel-hero__media,
.reel-hero__slide { inset: 0; position: absolute; }
.reel-hero__slide {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transform: scale(1.025);
  transition: clip-path 460ms cubic-bezier(.77,0,.18,1), opacity 40ms linear, transform 720ms cubic-bezier(.2,.8,.2,1);
}
.reel-hero__slide[data-active='true'] { clip-path: inset(0); opacity: 1; transform: scale(1); z-index: 1; }
.reel-hero__slide::after { background: linear-gradient(180deg, rgba(0,0,0,.22), transparent 35%, rgba(0,0,0,.5)); content: ''; inset: 0; position: absolute; }
.reel-hero__slide img,
.reel-hero__slide video { height: 100%; object-fit: cover; width: 100%; }
.reel-hero[data-active-slide='1'] .reel-hero__slide[data-active='true'] img { image-rendering: auto; }
.reel-hero__chrome { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); grid-template-rows: auto 1fr auto auto; height: 100%; padding: 4.2rem clamp(1rem,2.2vw,2.25rem) 1.2rem; position: relative; z-index: 3; }
.reel-hero__topline { display: grid; font-family: var(--font-mono); font-size: .63rem; grid-column: 1 / -1; grid-template-columns: repeat(3,1fr); letter-spacing: .04em; text-transform: uppercase; }
.reel-hero__topline p { margin: 0; }
.reel-hero__topline p:nth-child(2) { text-align: center; }
.reel-hero__topline p:last-child { text-align: right; }
.reel-hero__current { align-self: end; display: grid; font-family: var(--font-mono); font-size: .68rem; gap: .45rem; grid-column: 1 / 8; grid-row: 2; text-transform: uppercase; }
.reel-hero__current p { margin: 0; }
.reel-hero__current > a { align-items: end; display: flex; font-family: var(--font-sans); font-size: clamp(2.6rem,7vw,8rem); font-weight: 700; justify-content: space-between; letter-spacing: -.075em; line-height: .78; margin-top: .5rem; text-decoration: none; }
.reel-hero__current > a span:last-child { font-family: var(--font-mono); font-size: 1rem; letter-spacing: 0; }
.reel-hero__controls { border-top: 1px solid rgba(255,255,255,.45); display: grid; gap: 0; grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(3,1fr); margin-top: 2rem; }
.reel-hero__controls button { background: none; border: 0; border-right: 1px solid rgba(255,255,255,.28); color: inherit; cursor: pointer; display: grid; font-family: var(--font-mono); font-size: .61rem; gap: .7rem; grid-template-columns: 1.5rem 1fr; opacity: .48; padding: .75rem .7rem .75rem 0; text-align: left; text-transform: uppercase; transition: opacity 180ms ease, background 180ms ease; }
.reel-hero__controls button + button { padding-left: .7rem; }
.reel-hero__controls button[aria-selected='true'] { background: rgba(199,255,22,.92); color: #10110f; opacity: 1; padding-left: .7rem; }
.reel-hero__controls button:last-child { border-right: 0; }
.reel-hero__scroll { font-family: var(--font-mono); font-size: .58rem; grid-column: 10 / -1; grid-row: 4; justify-self: end; margin-top: .75rem; text-decoration: none; text-transform: uppercase; }
.reel-hero__mobile-wordmark,
.reel-hero__mobile-scene,
.reel-hero__mobile-rail,
.reel-hero__mobile-meter { display: none; }
.mobile-scroll-manifesto,
.mobile-scroll-outro,
.mobile-showreel,
.mobile-archive { display: none; }
.mobile-label { display: none; }
.about-statement__mark { align-self: end; grid-column: 1 / 3; margin: 2rem 0 0; }
.about-statement__mark img { display: block; height: auto; image-rendering: auto; max-width: 5rem; width: 100%; }
.about-statement__mark figcaption { font-family: var(--font-mono); font-size: .58rem; margin-top: .6rem; text-transform: uppercase; }

@media (max-width: 48rem) {
  .reel-hero { height: var(--reel-height); }
  .is-home .site-header { gap: .35rem; grid-template-columns: 1fr; padding-block: .65rem; }
  .is-home .brand { grid-column: 1; grid-row: 1; }
  .is-home .site-header nav { grid-column: 1; grid-row: 2; justify-self: stretch; width: 100%; }
  .is-home .site-nav { justify-content: space-between; max-width: none; width: 100%; }
  .reel-hero__chrome { padding-top: 6.4rem; }
  .reel-hero__topline { grid-template-columns: 1fr 1fr; }
  .reel-hero__topline p:nth-child(2) { display: none; }
  .reel-hero__current { grid-column: 1 / -1; }
  .reel-hero__current > a { font-size: clamp(2.5rem,12vw,5rem); max-width: 9ch; }
  .reel-hero__controls { overflow: hidden; }
  .reel-hero__controls button { display: flex; justify-content: center; min-width: 0; padding: .8rem .25rem; }
  .reel-hero__controls button + button,
  .reel-hero__controls button[aria-selected='true'] { padding-left: .25rem; }
  .reel-hero__controls button span:last-child { display: none; }
  .reel-hero__scroll { grid-column: 7 / -1; }
  .about-statement__mark { margin-left: 20%; max-width: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reel-hero__slide { transition: none; transform: none; }
}

/* 2026 visual system ------------------------------------------------------ */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
::selection { background: var(--color-accent); color: var(--color-ink); }

.site-header,
main,
.site-footer {
  max-width: none;
  padding-inline: clamp(1rem, 2.2vw, 2.25rem);
}

.site-header {
  align-items: center;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 22%, transparent);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding-block: .7rem;
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(16px);
}

.brand { align-items: center; display: inline-flex; grid-column: 1 / 3; justify-self: start; }
.brand__mark { align-items: center; display: inline-flex; height: 2.65rem; justify-content: center; width: 2.65rem; }
.brand__mark img { display: block; height: 100%; object-fit: contain; width: 100%; }
.site-header nav { grid-column: 6 / -1; justify-self: end; }
.site-nav { gap: .4rem clamp(.75rem, 1.8vw, 2rem); }
.site-nav a { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.site-nav a[aria-current='page'] { background: none; box-shadow: inset 0 -.45em 0 var(--color-accent); }

.home-hero {
  --pointer-x: 0;
  --pointer-y: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  min-height: calc(100svh - 3.4rem);
  overflow: hidden;
  padding-block: 1rem 1.4rem;
  position: relative;
}

.home-hero__meta {
  display: grid;
  font-family: var(--font-mono);
  font-size: clamp(.62rem, .75vw, .78rem);
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, 1fr);
  line-height: 1.35;
  text-transform: uppercase;
  z-index: 2;
}
.home-hero__meta p { margin: 0; }
.home-hero__meta p:nth-child(2) { grid-column: 6 / 9; }
.home-hero__meta p:last-child { grid-column: 10 / -1; }

.home-hero__stage {
  clip-path: polygon(6% 7%, 100% 0, 94% 88%, 11% 100%);
  grid-column: 5 / 11;
  grid-row: 2;
  margin: 2vh 0 0;
  min-height: min(58vh, 46rem);
  overflow: hidden;
  position: relative;
  transform: translate(calc(var(--pointer-x) * 1.2rem), calc(var(--pointer-y) * 1rem)) rotate(calc(var(--pointer-x) * .7deg));
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}
.home-hero__stage::after { background: linear-gradient(115deg, transparent 30%, rgba(199,255,22,.42) 50%, transparent 70%); content: ''; inset: 0; mix-blend-mode: screen; position: absolute; transform: translateX(calc(var(--pointer-x) * 18%)); }
.home-hero__stage video { filter: saturate(.35) contrast(1.3); height: 100%; object-fit: cover; width: 100%; }
.home-hero__signal { bottom: 8%; display: flex; gap: .32rem; left: 7%; position: absolute; z-index: 2; }
.home-hero__signal span { animation: signal 900ms ease-in-out infinite alternate; background: var(--color-accent); height: 2.4rem; width: .34rem; }
.home-hero__signal span:nth-child(2) { animation-delay: -300ms; height: 1.2rem; }
.home-hero__signal span:nth-child(3) { animation-delay: -600ms; height: 3.1rem; }
.home-hero__signal span:nth-child(4) { animation-delay: -150ms; height: 1.8rem; }
@keyframes signal { to { transform: scaleY(.22); transform-origin: bottom; } }

.kinetic-title {
  align-self: center;
  display: flex;
  flex-direction: column;
  font-size: clamp(4.4rem, 14.2vw, 13.8rem);
  font-weight: 850;
  grid-column: 1 / -1;
  grid-row: 2;
  letter-spacing: -.095em;
  line-height: .72;
  margin: 0;
  pointer-events: none;
  position: relative;
  text-transform: uppercase;
  z-index: 3;
}
.kinetic-title span:nth-child(2) { align-self: center; color: transparent; -webkit-text-stroke: clamp(1px, .12vw, 2px) var(--color-ink); transform: translateX(calc(var(--pointer-x) * -2rem)); }
.kinetic-title span:last-child { align-self: flex-end; transform: translateX(calc(var(--pointer-x) * 1.5rem)); }
.home-hero__statement { align-self: end; font-size: clamp(1rem, 1.5vw, 1.45rem); grid-column: 1 / 5; grid-row: 3; line-height: 1.12; margin: 0; max-width: 23ch; }
.home-hero__scroll { align-self: end; font-family: var(--font-mono); font-size: .72rem; grid-column: 10 / -1; grid-row: 3; justify-self: end; text-decoration: none; text-transform: uppercase; }

.page-section { border-top: 1px solid; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; padding-block: clamp(4rem, 8vw, 9rem); }
.section-heading { grid-column: 1 / 5; }
.section-heading h2 { font-size: clamp(4rem, 9vw, 10rem); letter-spacing: -.08em; margin-top: .6rem; }
.section-body { grid-column: 5 / -1; }
.section-lead { font-size: clamp(1.35rem, 2.2vw, 2.4rem) !important; letter-spacing: -.035em; line-height: 1.08 !important; max-width: 30ch !important; }
.text-link { display: inline-block; font-family: var(--font-mono); font-size: .74rem; margin-top: 2rem; text-transform: uppercase; }

.page-section--work { display: block; }
.selected-work__head { align-items: end; border-bottom: 1px solid color-mix(in srgb, currentColor 28%, transparent); display: grid; gap: 1rem; grid-template-columns: repeat(12,minmax(0,1fr)); padding-bottom: clamp(2rem,4vw,4rem); }
.selected-work__head .eyebrow { grid-column: 1 / 3; }
.selected-work__head h2 { font-size: clamp(4.5rem,10vw,11rem); grid-column: 3 / 8; letter-spacing: -.085em; line-height: .72; margin: 0; }
.selected-work__head .section-lead { grid-column: 8 / -1; margin: 0 0 .25rem; max-width: 22ch !important; }
.selected-work__body .text-link { margin-left: 50%; }

.project-index { align-items: start; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: clamp(2rem,4vw,4rem); }
.project-index__list { grid-column: 1 / 6; }
.project-index__row { align-items: start; border-top-color: color-mix(in srgb, currentColor 28%, transparent); display: grid; gap: .8rem; grid-template-columns: 2rem 1fr 1.5rem; min-height: 5.7rem; padding: .9rem 0; transition: opacity 180ms ease; }
.project-index__row:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 28%, transparent); }
.project-index__number, .project-index__arrow { font-family: var(--font-mono); font-size: .68rem; padding-top: .3rem; }
.project-index__arrow { justify-self: end; transform: translate(-.4rem,.4rem); transition: transform 180ms ease; }
.project-index__details { align-items: start; display: grid; gap: .6rem; }
.project-index__link { font-size: clamp(1.3rem, 1.85vw, 2.15rem); letter-spacing: -.045em; line-height: .98; text-decoration: none; }
.project-index__meta { font-size: .65rem; text-transform: uppercase; }
.project-index__row[data-active='false'] { opacity: .42; }
.project-index__row[data-active='true'] .project-index__arrow { transform: translate(0,0); }
.project-index__media { align-self: start; grid-column: 7 / -1; height: min(66svh,46rem); min-height: 34rem; overflow: hidden; position: sticky; top: 5.2rem; }
.project-index__preview { inset: 0; margin: 0; opacity: 0; position: absolute; transform: scale(1.04); transition: opacity 400ms ease, transform 800ms cubic-bezier(.2,.8,.2,1); }
.project-index__preview[data-active='true'] { opacity: 1; transform: scale(1); z-index: 1; }
.project-index__preview .project-thumbnail { filter: saturate(.75); height: 100%; width: 100%; }
.project-index__media > p { background: var(--color-accent); bottom: 0; font-family: var(--font-mono); font-size: .68rem; margin: 0; padding: .55rem .65rem; position: absolute; right: 0; z-index: 3; }

.reel-page { margin-inline: calc(clamp(1rem,2.2vw,2.25rem) * -1); padding: clamp(6rem,10vw,9rem) clamp(1rem,2.2vw,2.25rem) 2rem; }
.reel-page__head { align-items: end; display: grid; gap: 1rem; grid-template-columns: repeat(12,minmax(0,1fr)); padding-bottom: clamp(2rem,4vw,4rem); }
.reel-page__head .eyebrow { grid-column: 1 / 3; }
.reel-page__head h1 { font-size: clamp(5rem,15vw,16rem); grid-column: 3 / -1; letter-spacing: -.09em; line-height: .7; margin: 0; }
.reel-page__head > p:last-child { font-size: clamp(1rem,1.6vw,1.5rem); grid-column: 8 / -1; line-height: 1.15; margin: 1rem 0 0; max-width: 28ch; }
.reel-page__player { aspect-ratio: 16 / 9; background: #090909; }
.reel-page__player iframe { border: 0; display: block; height: 100%; width: 100%; }
.reel-page__foot { border-top: 1px solid; display: flex; font-family: var(--font-mono); font-size: .65rem; justify-content: space-between; margin-top: 1rem; padding-top: .75rem; text-transform: uppercase; }
.reel-page__foot p { margin: 0; }
.reel-page__foot a { text-decoration: none; }

.lab-teaser { background: #11120f; color: #f2f0e8; margin-inline: calc(clamp(1rem, 2.2vw, 2.25rem) * -1); padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 2.2vw, 2.25rem) 1.5rem; }
.lab-teaser .section-heading { display: grid; grid-template-columns: repeat(12,1fr); }
.lab-teaser .eyebrow { grid-column: 1 / 4; }
.lab-teaser h2 { font-size: clamp(6rem, 18vw, 18rem); grid-column: 1 / -1; letter-spacing: -.1em; line-height: .72; margin: 1rem 0 4rem; }
.lab-teaser__grid { display: grid; gap: clamp(.75rem,1.2vw,1.4rem); grid-template-columns: repeat(3,minmax(0,1fr)); }
.lab-teaser__card { color: inherit; display: block; min-width: 0; text-decoration: none; }
.lab-teaser__card video { aspect-ratio: 4 / 5; display: block; filter: saturate(.55); height: auto; object-fit: cover; transition: filter 300ms ease, transform 500ms cubic-bezier(.2,.8,.2,1); width: 100%; }
.lab-teaser__card > span { border-top: 1px solid #555; display: grid; font-family: var(--font-mono); font-size: .68rem; gap: .75rem; grid-template-columns: 2rem 1fr auto; margin-top: .6rem; padding-top: .6rem; text-transform: uppercase; }
.lab-teaser__card small { color: #9a9b96; font: inherit; }
.lab-teaser__card:hover video { filter: saturate(1); transform: scale(.985); }
.lab-teaser__card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.lab-teaser__link { border-top: 1px solid #555; display: flex; font-size: clamp(1.4rem, 3vw, 3rem); justify-content: space-between; margin-top: 2rem; padding-top: 1rem; text-decoration: none; }

.page-intro { grid-template-columns: repeat(12,minmax(0,1fr)); min-height: 62vh; padding-block: clamp(4rem,10vw,10rem); }
.page-intro .eyebrow { grid-column: 1 / 4; }
.page-intro h1 { font-size: clamp(6rem,18vw,18rem); grid-column: 1 / -1; max-width: none; }
.page-intro > p:last-child { align-self: end; font-size: clamp(1.2rem,2.2vw,2.2rem); grid-column: 7 / -1; line-height: 1.1; max-width: 32ch; }
.page-intro--lab h1 span { color: var(--color-accent); }
.motion-archive { background: #11120f; color: #f2f0e8; margin-inline: calc(clamp(1rem,2.2vw,2.25rem) * -1); padding: 1.5rem clamp(1rem,2.2vw,2.25rem) 7rem; }
.motion-archive__head { align-items: end; border-top: 1px solid #555; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); padding: 1rem 0 clamp(2.5rem,5vw,5rem); }
.motion-archive__head h2 { font-size: clamp(2.6rem,4.5vw,5rem); grid-column: 1 / 9; letter-spacing: -.055em; line-height: .9; margin: 0; }
.motion-archive__head p { grid-column: 10 / -1; justify-self: end; text-align: right; }
.motion-archive__head p { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; }
.motion-archive__grid { display: grid; gap: clamp(.7rem,1.2vw,1.4rem); grid-auto-flow: dense; grid-template-columns: repeat(12,minmax(0,1fr)); }
.motion-card { grid-column: span 4; margin: 0; }
.motion-card__open { background: none; border: 0; color: inherit; cursor: zoom-in; display: block; overflow: hidden; padding: 0; position: relative; width: 100%; }
.motion-card__open > span { background: var(--color-accent); bottom: .65rem; color: #11120f; font-family: var(--font-mono); font-size: .6rem; opacity: 0; padding: .45rem .6rem; position: absolute; right: .65rem; text-transform: uppercase; transform: translateY(.3rem); transition: opacity 180ms ease, transform 180ms ease; }
.motion-card__open:hover > span,
.motion-card__open:focus-visible > span { opacity: 1; transform: none; }
.motion-card video { aspect-ratio: 4 / 5; background: #20211e; display: block; filter: saturate(.62); height: auto; object-fit: cover; transition: filter 300ms ease, transform 500ms ease; width: 100%; }
.motion-card:hover video { filter: saturate(1); transform: scale(.985); }
.motion-card figcaption { border-top: 1px solid #3a3b38; display: grid; font-family: var(--font-mono); font-size: .68rem; gap: 1rem; grid-template-columns: 2rem 1fr auto; margin-top: .6rem; padding-top: .6rem; text-transform: uppercase; }
.motion-card figcaption span:first-child,
.motion-card figcaption span:last-child { color: #9a9b96; }

.work-catalog { border-top: 1px solid; padding-block: 1rem clamp(5rem, 10vw, 10rem); }
.work-catalog__head { align-items: baseline; display: flex; justify-content: space-between; padding-bottom: clamp(3rem, 6vw, 6rem); }
.work-catalog__head h2 { font-size: clamp(2rem, 5vw, 6rem); letter-spacing: -.06em; margin: 0; }
.work-catalog__head p { font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; }
.work-list { list-style: none; margin: 0; padding: 0; }
.work-list li { border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.work-list li:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.work-list a { align-items: center; display: grid; gap: clamp(.8rem, 2vw, 2rem); grid-template-columns: 2rem minmax(10rem, 1.15fr) minmax(14rem, 1.6fr) minmax(9rem, .8fr) 1rem; min-height: clamp(9rem, 15vw, 14rem); padding-block: 1rem; text-decoration: none; }
.work-list__media { aspect-ratio: 16 / 10; filter: saturate(.78); height: 100%; max-height: 12rem; transition: filter 300ms ease, transform 500ms ease; width: 100%; }
.work-list a:hover .work-list__media { filter: saturate(1); transform: scale(.985); }
.work-list__number, .work-list__meta, .work-list__arrow { font-family: var(--font-mono); font-size: .65rem; text-transform: uppercase; }
.work-list__copy { display: grid; gap: .7rem; }
.work-list__copy strong { font-size: clamp(1.55rem, 3.2vw, 3.8rem); letter-spacing: -.055em; line-height: .9; }
.work-list__copy small { font-size: clamp(.78rem, 1vw, .95rem); line-height: 1.35; max-width: 44ch; }
.work-list__meta { line-height: 1.55; }
.work-list__arrow { justify-self: end; transition: transform 180ms ease; }
.work-list a:hover .work-list__arrow { transform: translate(.2rem, -.2rem); }

.site-footer { align-items: start; background: var(--color-accent); border: 0; display: grid; font-family: var(--font-mono); grid-template-columns: repeat(12,1fr); margin: 0; padding: 2rem clamp(1rem,2.2vw,2.25rem); }
.site-footer p:nth-child(2) { grid-column: 6 / 8; }
.site-footer p:nth-child(3) { grid-column: 9 / 11; }
.site-footer p:last-child { grid-column: 12; justify-self: end; }
.site-footer__mark { font-family: var(--font-sans); font-size: clamp(3rem,7vw,7rem) !important; grid-column: 1 / 4; letter-spacing: -.09em; line-height: .7; }

.project-thumbnail { background: #171815; display: block; overflow: hidden; position: relative; }
.project-thumbnail img,
.project-thumbnail video { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.project-thumbnail__frame { opacity: 0; transform: scale(1); }
.project-thumbnail__frame:first-child { opacity: 1; }
.project-thumbnail--sequence[data-playing='true'] .project-thumbnail__frame {
  animation: thumbnail-dissolve 9.6s cubic-bezier(.4,0,.2,1) infinite;
  animation-delay: calc(var(--frame-index) * 3.2s);
}
.project-thumbnail--video video { display: block; }
.project-block--related .project-thumbnail { aspect-ratio: 16 / 9; width: 100%; }

@keyframes thumbnail-dissolve {
  0%, 27% { opacity: 1; transform: scale(1); }
  36%, 94% { opacity: 0; transform: scale(1.045); }
  100% { opacity: 1; transform: scale(1); }
}

.project-page { padding-top: clamp(3rem,8vw,8rem); }
.project-hero { align-items: end; border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); grid-template-columns: repeat(12,minmax(0,1fr)); min-height: min(82svh, 58rem); padding-bottom: clamp(3rem,6vw,6rem); }
.project-hero__intro { align-self: end; grid-column: 1 / 6; }
.project-hero__media { align-self: stretch; grid-column: 7 / -1; min-height: 60vh; }
.project-hero__media img { height: 100%; min-height: 60vh; object-fit: cover; }
.project-image-trigger { background: #11120f; border: 0; color: inherit; cursor: zoom-in; display: block; margin: 0; overflow: hidden; padding: 0; position: relative; text-align: inherit; width: 100%; }
.project-hero__media .project-image-trigger { height: 100%; }
.project-image-trigger img { transition: transform 450ms cubic-bezier(.2,.8,.2,1), filter 250ms ease; }
.project-image-trigger:hover img { filter: brightness(.9); transform: scale(1.012); }
.project-image-trigger:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.project-image-trigger__hint { background: var(--color-accent); bottom: .75rem; color: #11120f; font-family: var(--font-mono); font-size: .6rem; opacity: 0; padding: .45rem .6rem; position: absolute; right: .75rem; text-transform: uppercase; transform: translateY(.35rem); transition: opacity 180ms ease, transform 180ms ease; }
.project-image-trigger:hover .project-image-trigger__hint,
.project-image-trigger:focus-visible .project-image-trigger__hint { opacity: 1; transform: translateY(0); }
.project-hero h1 { font-size: clamp(3rem,6vw,7rem); }
.project-hero__summary { font-size: clamp(1rem,1.45vw,1.4rem); line-height: 1.32; }
.project-hero__role { border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); font-family: var(--font-mono); font-size: .68rem; padding-top: .8rem; text-transform: uppercase; }
.project-story { gap: clamp(4rem,9vw,10rem); }
.project-story:empty { display: none; }

.project-media { padding-block: clamp(4rem, 8vw, 9rem); }
.project-media__head { align-items: baseline; border-top: 1px solid; display: flex; font-family: var(--font-mono); font-size: .67rem; justify-content: space-between; padding: .8rem 0 clamp(3rem,6vw,6rem); text-transform: uppercase; }
.project-media__head p { margin: 0; }
.project-media__grid { display: grid; gap: clamp(2.5rem,6vw,7rem) clamp(1rem,2vw,2rem); grid-template-columns: repeat(12,minmax(0,1fr)); }
.project-media__item { grid-column: span 6; margin: 0; min-width: 0; }
.project-media__item[data-layout='standard'],
.project-media__item[data-layout='standard-motion'] { grid-column: span 6; }
.project-media--compact .project-media__grid { gap: clamp(1.5rem,3vw,3.5rem) clamp(.75rem,1.2vw,1.25rem); }
.project-media--compact .project-media__item[data-layout='compact'] { grid-column: span 4; }
.project-media--compact .project-media__item[data-layout='compact-motion'] { grid-column: span 6; }
.project-media__item[data-layout='standard'] .project-image-trigger,
.project-media--compact .project-media__item[data-layout='compact'] .project-image-trigger { aspect-ratio: 16 / 9; }
.project-media__item[data-layout='standard'] .project-image-trigger img,
.project-media--compact .project-media__item[data-layout='compact'] .project-image-trigger img { height: 100%; object-fit: cover; }
.project-media__item img,
.project-media__item video { background: #11120f; display: block; height: auto; width: 100%; }
.project-media__item video,
.project-media__embed { aspect-ratio: 16 / 9; }
.project-media__item video { object-fit: contain; }
.project-media__embed { background: #11120f; position: relative; }
.project-media__embed iframe { border: 0; height: 100%; inset: 0; position: absolute; width: 100%; }
.project-media__offline { aspect-ratio: 16 / 9; background: #11120f; overflow: hidden; position: relative; }
.project-image-trigger--offline { height: 100%; }
.project-media__offline img { filter: saturate(.72); height: 100%; object-fit: cover; width: 100%; }
.project-media__offline::after { background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.72)); content: ''; inset: 0; pointer-events: none; position: absolute; }
.project-media__offline p { bottom: 1rem; color: #fff; display: flex; font-family: var(--font-mono); font-size: .6rem; justify-content: space-between; left: 1rem; letter-spacing: .04em; margin: 0; pointer-events: none; position: absolute; right: 1rem; text-transform: uppercase; z-index: 1; }
.project-media__item figcaption { border-top: 1px solid color-mix(in srgb,currentColor 28%,transparent); display: flex; font-family: var(--font-mono); font-size: .62rem; justify-content: space-between; margin-top: .5rem; padding-top: .45rem; text-transform: uppercase; }
.project-lightbox { background: #0b0c0a; border: 0; color: #f2f0e8; height: 100dvh; margin: 0; max-height: none; max-width: none; padding: 0; width: 100%; }
.project-lightbox::backdrop { background: rgba(0,0,0,.92); }
.project-lightbox[open] { display: grid; grid-template-rows: auto 1fr; }
.project-lightbox__bar { align-items: center; border-bottom: 1px solid #363733; display: flex; font-family: var(--font-mono); font-size: .65rem; justify-content: space-between; padding: .8rem clamp(1rem,2.2vw,2.25rem); text-transform: uppercase; }
.project-lightbox__bar p { margin: 0; }
.project-lightbox button { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; touch-action: manipulation; }
.project-lightbox__bar button { font-family: var(--font-mono); font-size: .65rem; padding: .35rem 0 .35rem 1rem; text-transform: uppercase; }
.project-lightbox__stage { align-items: center; display: grid; grid-template-columns: clamp(3rem,7vw,7rem) 1fr clamp(3rem,7vw,7rem); min-height: 0; }
.project-lightbox__stage figure { display: grid; grid-template-rows: minmax(0,1fr) auto; height: 100%; margin: 0; min-height: 0; padding: clamp(1rem,2vw,2rem) 0 .8rem; }
.project-lightbox__stage img { align-self: center; justify-self: center; max-height: calc(100dvh - 8rem); max-width: 100%; object-fit: contain; }
.project-lightbox__stage figcaption { font-family: var(--font-mono); font-size: .6rem; margin-top: .65rem; text-align: center; text-transform: uppercase; }
.project-lightbox__nav { align-self: stretch; font-family: var(--font-mono) !important; font-size: clamp(1.2rem,2vw,2rem) !important; }
.project-lightbox__nav:hover,
.project-lightbox__nav:focus-visible,
.project-lightbox__bar button:hover,
.project-lightbox__bar button:focus-visible { color: var(--color-accent); }
.motion-lightbox { background: #0b0c0a; border: 0; color: #f2f0e8; height: 100dvh; margin: 0; max-height: none; max-width: none; padding: 0; width: 100%; }
.motion-lightbox::backdrop { background: rgba(0,0,0,.92); }
.motion-lightbox[open] { display: grid; grid-template-rows: auto 1fr; }
.motion-lightbox__bar { align-items: center; border-bottom: 1px solid #363733; display: flex; font-family: var(--font-mono); font-size: .65rem; justify-content: space-between; padding: .8rem clamp(1rem,2.2vw,2.25rem); text-transform: uppercase; }
.motion-lightbox__bar p { margin: 0; }
.motion-lightbox button { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; touch-action: manipulation; }
.motion-lightbox__bar button { font-family: var(--font-mono); font-size: .65rem; text-transform: uppercase; }
.motion-lightbox__stage { align-items: center; display: grid; grid-template-columns: clamp(3rem,7vw,7rem) 1fr clamp(3rem,7vw,7rem); min-height: 0; }
.motion-lightbox__stage figure { display: grid; grid-template-rows: minmax(0,1fr) auto; height: 100%; margin: 0; min-height: 0; padding: clamp(1rem,2vw,2rem) 0 .8rem; }
.motion-lightbox__stage video { align-self: center; background: #111; justify-self: center; max-height: calc(100dvh - 8rem); max-width: min(100%,70rem); object-fit: contain; }
.motion-lightbox__stage figcaption { font-family: var(--font-mono); font-size: .6rem; margin-top: .65rem; text-align: center; text-transform: uppercase; }
.motion-lightbox__stage > button { align-self: stretch; font-family: var(--font-mono); font-size: clamp(1.2rem,2vw,2rem); }
.motion-lightbox button:hover,
.motion-lightbox button:focus-visible { color: var(--color-accent); }
.project-gallery { grid-template-columns: repeat(12,minmax(0,1fr)); }
.project-gallery > img { grid-column: span 6; margin: 0; width: 100%; }
.project-gallery > img:nth-child(3n) { grid-column: 3 / 11; }

.motion-card { position: relative; }
.motion-card__toggle {
  background: color-mix(in srgb, #11120f 78%, transparent);
  border: 1px solid color-mix(in srgb, #f2f0e8 55%, transparent);
  border-radius: 999px;
  color: #f2f0e8;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: .6rem;
  opacity: 0;
  padding: .45rem .65rem;
  position: absolute;
  right: .65rem;
  text-transform: uppercase;
  top: .65rem;
  transition: opacity 180ms ease;
  z-index: 2;
}
.motion-card:hover .motion-card__toggle,
.motion-card__toggle:focus-visible { opacity: 1; }

.page-intro--archive h1 span,
.page-intro--about h1 span { color: var(--color-accent); }
.page-intro--about h1 { font-size: clamp(4.2rem, 13vw, 13rem); line-height: .78; }

.archive-index { border-top: 1px solid; padding-block: 1rem clamp(5rem, 10vw, 10rem); }
.archive-index__head { align-items: baseline; display: flex; justify-content: space-between; padding-bottom: clamp(3rem, 6vw, 6rem); }
.archive-index__head h2 { font-size: clamp(2rem, 5vw, 6rem); letter-spacing: -.06em; margin: 0; }
.archive-index__head p { font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; }
.archive-list { list-style: none; margin: 0; padding: 0; }
.archive-list li { border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.archive-list li:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.archive-list a { align-items: center; display: grid; gap: clamp(.75rem, 2vw, 2rem); grid-template-columns: 2rem minmax(5rem, 1.25fr) 2fr 1fr 1rem; min-height: clamp(8rem, 15vw, 13rem); padding-block: 1rem; text-decoration: none; }
.archive-list img { aspect-ratio: 16 / 10; filter: grayscale(1); height: 100%; max-height: 11rem; object-fit: cover; transition: filter 300ms ease, transform 500ms ease; width: 100%; }
.archive-list a:hover img { filter: grayscale(0); transform: scale(.98); }
.archive-list__number, .archive-list__meta { font-family: var(--font-mono); font-size: .65rem; text-transform: uppercase; }
.archive-list__title { font-size: clamp(1.5rem, 3.5vw, 4rem); font-weight: 700; letter-spacing: -.055em; line-height: .9; }
.archive-families { display: flex; flex-wrap: wrap; gap: .6rem; padding-top: 4rem; }
.archive-families span { border: 1px solid; border-radius: 999px; font-size: clamp(1rem, 2vw, 2rem); padding: .4em .7em; }

.page-intro--about { align-items: end; grid-template-rows: auto 1fr auto; min-height: 72svh; padding-bottom: clamp(3rem,6vw,6rem); }
.about-intro__meta { align-self: start; display: flex; grid-column: 1 / -1; justify-content: space-between; }
.about-intro__meta p { font-family: var(--font-mono); font-size: .66rem; line-height: 1.45; margin: 0; text-transform: uppercase; }
.about-intro__meta p:last-child { text-align: right; }
.page-intro--about h1 { align-self: end; grid-column: 1 / 9; max-width: 8ch; }
.page-intro--about .about-intro__copy { align-self: end; grid-column: 9 / -1; padding-bottom: .6rem; }
.about-intro__copy p { margin: 0; }
.about-intro__copy p { font-size: clamp(1.15rem,1.8vw,1.7rem); line-height: 1.18; max-width: 25ch; }
.about-statement { border-top: 1px solid; display: grid; gap: 2rem; grid-template-columns: repeat(12, minmax(0, 1fr)); padding-block: clamp(4rem, 7vw,7rem); }
.about-statement__aside { display: flex; flex-direction: column; grid-column: 1 / 4; justify-content: space-between; }
.about-statement__content { grid-column: 4 / -1; }
.about-statement h2 { font-size: clamp(2.8rem,5.5vw,6.3rem); letter-spacing: -.065em; line-height: .92; margin: 0; max-width: 11ch; }
.about-statement__detail { align-items: end; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); display: grid; gap: 2rem; grid-template-columns: 1fr auto; margin-top: clamp(3rem,5vw,5rem); padding-top: 1rem; }
.about-statement__detail > p { font-size: clamp(1rem,1.35vw,1.3rem); line-height: 1.4; margin: 0; max-width: 38ch; }
.about-statement__mark { margin: 0; text-align: right; }
.about-statement__mark img { margin-left: auto; max-width: 5rem; }
.about-statement__mark figcaption { white-space: nowrap; }
.capabilities { border-top: 1px solid; display: grid; gap: clamp(3rem,6vw,6rem); grid-template-columns: repeat(12, minmax(0, 1fr)); padding-block: clamp(4rem, 7vw, 7rem); }
.capabilities__head { grid-column: 1 / 5; }
.capabilities h2 { font-size: clamp(2.4rem, 4.5vw, 4.8rem); letter-spacing: -.06em; line-height: .92; margin: .6rem 0 1.5rem; }
.capabilities__head > p:last-child { line-height: 1.4; max-width: 24ch; }
.capabilities ol { display: grid; gap: 0 clamp(1.5rem,3vw,3rem); grid-column: 5 / -1; grid-template-columns: 1fr 1fr; list-style: none; margin: 0; padding: 0; }
.capabilities li { border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); display: grid; gap: .75rem 1rem; grid-template-columns: 2rem 1fr; padding: 1.25rem 0 2.25rem; }
.capabilities li span { font-family: var(--font-mono); font-size: .65rem; }
.capabilities li strong { font-size: clamp(1.2rem, 1.8vw, 1.8rem); letter-spacing: -.04em; }
.capabilities li p { grid-column: 2; line-height: 1.45; margin: 0; max-width: 30ch; }
.contact-panel { background: var(--color-accent); margin-inline: calc(clamp(1rem, 2.2vw, 2.25rem) * -1); padding: clamp(3rem, 7vw, 7rem) clamp(1rem, 2.2vw, 2.25rem); }
.contact-panel__body { align-items: end; display: grid; gap: 2rem; grid-template-columns: 3fr 1fr; margin: 2rem 0 clamp(3rem, 6vw, 6rem); }
.contact-panel h2 { font-size: clamp(3.5rem, 8.5vw, 9rem); letter-spacing: -.085em; line-height: .8; margin: 0; }
.contact-panel__body p { font-family: var(--font-mono); font-size: .65rem; line-height: 1.6; margin: 0; text-transform: uppercase; }
.contact-panel a { border-bottom: 1px solid; display: flex; font-size: clamp(1.1rem, 2.7vw, 2.8rem); justify-content: space-between; padding-bottom: .7rem; text-decoration: none; }

@media (max-width: 64rem) {
  .project-media--compact .project-media__item[data-layout='compact'] { grid-column: span 6; }
}

@media (max-width: 48rem) {
  .site-header { grid-template-columns: 1fr auto; }
  .brand, .site-header nav { grid-column: auto; }
  .site-nav { gap: .7rem; }
  .site-header { align-items: start; }
  .site-nav { justify-content: flex-end; max-width: 15rem; }
  .home-hero { min-height: calc(100svh - 3rem); }
  .home-hero__meta { grid-template-columns: 1fr 1fr; }
  .home-hero__meta p:nth-child(2) { display: none; }
  .home-hero__meta p:last-child { grid-column: 2; text-align: right; }
  .home-hero__stage { grid-column: 3 / -1; min-height: 52vh; }
  .kinetic-title { font-size: clamp(4rem,21vw,7rem); line-height: .77; }
  .home-hero__statement { grid-column: 1 / 9; }
  .home-hero__scroll { grid-column: 9 / -1; }
  .page-section { display: block; }
  .selected-work__head { display: block; }
  .selected-work__head h2 { font-size: clamp(4.5rem,20vw,7rem); margin: 1rem 0 2rem; }
  .selected-work__head .section-lead { max-width: 26ch !important; }
  .selected-work__body .text-link { margin-left: 0; }
  .section-heading { margin-bottom: 3rem; }
  .section-heading h2 { font-size: 4.5rem; }
  .project-index { display: block; }
  .project-index__list { display: grid; gap: 2rem; }
  .project-index__row { grid-template-columns: 2rem 1fr 1rem; min-height: 0; }
  .project-index__media { aspect-ratio: 16 / 10; height: auto; margin: 2rem 0 0; min-height: 0; position: relative; top: auto; }
  .project-index__row[data-active='false'] { opacity: 1; }
  .lab-teaser__grid { grid-template-columns: 1fr 1fr; }
  .lab-teaser__card:last-child { grid-column: 1 / -1; }
  .lab-teaser__card:last-child video { aspect-ratio: 16 / 9; }
  .page-intro { display: grid; min-height: 55vh; }
  .page-intro > p:last-child { grid-column: 3 / -1; }
  .page-intro--about { display: block; min-height: auto; padding-block: 6rem 5rem; }
  .about-intro__meta { display: flex; }
  .page-intro--about h1 { font-size: clamp(4.6rem,21vw,7rem); margin: 2.5rem 0 3rem; max-width: 7ch; }
  .page-intro--about .about-intro__copy { margin-left: 0; padding: 0; }
  .about-statement__aside { display: block; }
  .about-statement__content { margin-top: 3rem; }
  .about-statement__detail { grid-template-columns: 1fr; }
  .about-statement__mark { text-align: left; }
  .about-statement__mark img { margin-left: 0; }
  .motion-archive__head { grid-template-columns: 1fr; }
  .motion-archive__head h2 { font-size: clamp(2.4rem,12vw,4rem); grid-column: 1; white-space: nowrap; }
  .motion-archive__head p { grid-column: 1; justify-self: end; margin: .75rem 0 0; }
  .motion-card { grid-column: span 6; }
  .motion-card__toggle { opacity: 1; }
  .work-list a { grid-template-columns: 1.5rem minmax(5.5rem, .8fr) 1.4fr 1rem; min-height: 8rem; }
  .work-list__meta { display: none; }
  .work-list__copy small { display: none; }
  .work-list__copy strong { font-size: clamp(1.2rem, 4vw, 2rem); }
  .archive-list a { grid-template-columns: 1.5rem 5rem 1fr 1rem; min-height: 7rem; }
  .archive-list__meta { display: none; }
  .archive-list__title { font-size: 1.35rem; }
  .about-statement, .capabilities { display: block; }
  .about-statement h2 { margin-top: 2rem; }
  .about-statement > p:last-child { margin-left: 20%; }
  .capabilities ol { grid-template-columns: 1fr; margin-top: 3rem; }
  .capabilities li { grid-template-columns: 1.5rem 1fr; }
  .capabilities li p { grid-column: 2; }
  .project-gallery > img, .project-gallery > img:nth-child(3n) { grid-column: 1 / -1; }
  .project-hero { display: block; }
  .project-hero__media { margin-top: 2rem; }
  .project-hero__media,
  .project-hero__media img { min-height: 0; }
  .project-media__grid { gap-block: 3.5rem; }
  .project-media__item { grid-column: 1 / -1 !important; }
  .project-image-trigger__hint { opacity: 1; transform: none; }
  .project-lightbox__stage { grid-template-columns: 2.75rem 1fr 2.75rem; }
  .project-lightbox__stage figure { padding-top: .75rem; }
  .motion-lightbox__stage { grid-template-columns: 2.75rem 1fr 2.75rem; }
  .motion-card__open > span { opacity: 1; transform: none; }
  .contact-panel__body { display: block; }
  .contact-panel__body p { margin-top: 2rem; }
  .site-footer { gap: 2rem 0; grid-template-columns: repeat(2,1fr); }
  .site-footer__mark, .site-footer p:nth-child(2), .site-footer p:nth-child(3), .site-footer p:last-child { grid-column: auto; justify-self: auto; }
  .reel-page__head { display: block; }
  .reel-page__head h1 { font-size: clamp(4.8rem,22vw,8rem); margin: 1rem 0 2rem; }
  .reel-page__head > p:last-child { max-width: 26ch; }
}

@media (max-width: 32rem) {
  .brand { gap: .4rem; }
  .brand__mark { height: 1.8rem; width: 1.8rem; }
  .brand__mark img { height: 1.45rem; width: 1.45rem; }
  .work-catalog__head { align-items: start; gap: 1rem; }
  .work-catalog__head p { max-width: 11rem; text-align: right; }
  .work-list a { grid-template-columns: 1.5rem 5rem minmax(0,1fr) 1rem; }
  .motion-card { grid-column: 1 / -1; }
  .lab-teaser__grid { grid-template-columns: 1fr; }
  .lab-teaser__card:last-child { grid-column: auto; }
  .lab-teaser__card:last-child video { aspect-ratio: 4 / 5; }
}

/* Mobile home ------------------------------------------------------------ */
@media (max-width: 48rem) {
  .desktop-label { display: none; }
  .mobile-label { display: inline; }

  .is-home {
    --mobile-gutter: 1rem;
    --mobile-gap: .6rem;
  }

  .site-header {
    align-items: center;
    column-gap: .6rem;
    grid-template-columns: 2.25rem minmax(0,1fr);
    padding: .7rem 1rem;
  }
  .brand { grid-column: 1; grid-row: 1; }
  .site-header nav { grid-column: 2; grid-row: 1; justify-self: stretch; width: 100%; }
  .site-nav { display: grid; gap: 0; grid-template-columns: repeat(4,minmax(0,1fr)); max-width: none; width: 100%; }
  .site-nav li { text-align: right; }
  .site-nav a { font-size: .68rem; justify-content: flex-end; padding-inline: 0; width: 100%; }

  .is-home .site-header {
    backdrop-filter: blur(10px);
    background: rgba(7,8,7,.96);
    border-bottom: 1px solid rgba(255,255,255,.18);
    color: #f4f2ea;
    grid-template-columns: 2.25rem minmax(0,1fr);
  }
  .is-home .brand { grid-column: 1; grid-row: 1; }
  .is-home .site-header nav { grid-column: 2; grid-row: 1; justify-self: stretch; width: 100%; }
  .is-home .brand__mark img { filter: invert(1); }
  .is-home .site-nav a { color: inherit; font-size: .68rem; opacity: .52; }
  .is-home[data-mobile-section='reel'] .site-nav a[href='/reel'],
  .is-home[data-mobile-section='work'] .site-nav a[href='/work'],
  .is-home[data-mobile-section='lab'] .site-nav a[href='/lab'],
  .is-home[data-mobile-section='about'] .site-nav a[href='/about'] {
    box-shadow: inset 0 -.45em 0 var(--color-accent);
    color: inherit;
    opacity: 1;
  }
  .is-home .site-header::after {
    background: var(--color-accent);
    bottom: -1px;
    content: '';
    height: 2px;
    left: 0;
    position: absolute;
    transform: scaleX(var(--page-progress,0));
    transform-origin: left;
    width: 100%;
  }

  .reel-hero,
  .reel-hero[data-active-slide] { background: #070807; color: #f4f2ea; }
  .reel-hero__sticky { background: #070807; height: 100svh; }
  .reel-hero__media,
  .reel-hero[data-active-slide] .reel-hero__media {
    bottom: auto;
    clip-path: inset(0);
    height: 68svh;
    left: var(--mobile-gutter);
    overflow: hidden;
    right: var(--mobile-gutter);
    top: 9.5svh;
    transition: left 560ms cubic-bezier(.2,.75,.2,1), right 560ms cubic-bezier(.2,.75,.2,1);
  }
  .reel-hero[data-active-slide='1'] .reel-hero__media { left: calc(var(--mobile-gutter) + 12vw); }
  .reel-hero[data-active-slide='2'] .reel-hero__media { right: calc(var(--mobile-gutter) + 12vw); }
  .reel-hero__slide,
  .reel-hero__slide[data-active='true'] { clip-path: inset(0 0 0 100%); opacity: 0; transform: none; }
  .reel-hero__slide[data-active='true'] { clip-path: inset(0); opacity: 1; }
  .reel-hero__slide::after { background: linear-gradient(180deg,rgba(0,0,0,.12),transparent 40%,rgba(0,0,0,.7)); }
  .reel-hero__slide img,
  .reel-hero__slide video { filter: saturate(.9); }
  .reel-hero__slide[data-active='true'] img,
  .reel-hero__slide[data-active='true'] video { transform: translate3d(var(--hero-shift,0),0,0) scale(var(--hero-scale,1.08)); transition: transform 90ms linear; }
  .reel-hero__chrome {
    color: #f4f2ea;
    grid-template-rows: auto 1fr auto auto auto;
    padding: 5.25rem var(--mobile-gutter) max(1rem,env(safe-area-inset-bottom));
  }
  .reel-hero__mobile-wordmark,
  .reel-hero__mobile-scene { display: none; }
  .reel-hero__mobile-rail {
    border-bottom: 1px solid rgba(255,255,255,.42);
    display: flex;
    font-family: var(--font-mono);
    font-size: .52rem;
    justify-content: space-between;
    letter-spacing: .035em;
    padding: .45rem 0;
    text-transform: uppercase;
  }
  .reel-hero__mobile-rail span:last-child { color: var(--color-accent); }
  .reel-hero__topline { font-size: .5rem; grid-row: 2; margin-top: .5rem; }
  .reel-hero__topline p:first-child,
  .reel-hero__topline p:nth-child(2) { display: none; }
  .reel-hero__topline p:last-child { grid-column: 2; }
  .reel-hero__current { align-self: end; color: inherit; grid-column: 1 / -1; grid-row: 2; padding-bottom: .8rem; }
  .reel-hero__current > p:first-child { border-bottom: 1px solid rgba(255,255,255,.45); display: flex; justify-content: space-between; padding-bottom: .35rem; }
  .reel-hero__current > p:first-child::after { color: var(--color-accent); content: 'FEATURED / MOTION'; }
  .reel-hero__current > a { font-size: clamp(3.2rem,15.5vw,5rem); line-height: .72; max-width: 6.6ch; min-height: 1.55em; text-transform: uppercase; }
  .reel-hero__controls { border-color: rgba(255,255,255,.38); grid-row: 3; }
  .reel-hero__controls button { border-color: rgba(255,255,255,.22); color: inherit; font-size: .5rem; min-height: 2.7rem; opacity: .45; position: relative; }
  .reel-hero__controls button span:last-child { display: none; }
  .reel-hero__controls button[aria-selected='true'] { background: transparent; color: inherit; opacity: 1; }
  .reel-hero__controls button[aria-selected='true']::after { background: var(--color-accent); bottom: 0; content: ''; height: 2px; left: 0; position: absolute; right: 0; }
  .reel-hero__mobile-meter { background: rgba(255,255,255,.18); display: block; grid-column: 1 / -1; grid-row: 4; height: 1px; margin-top: .7rem; }
  .reel-hero__mobile-meter span { background: var(--color-accent); display: block; height: 100%; transform: scaleX(var(--reel-progress,.333)); transform-origin: left; width: 100%; }
  .reel-hero__scroll { font-size: .52rem; grid-column: 1 / -1; grid-row: 5; justify-self: end; }

  .mobile-showreel {
    background: #070807;
    color: #f4f2ea;
    display: block;
    height: 170svh;
    margin-inline: -1rem;
    position: relative;
  }
  .mobile-showreel__sticky {
    align-content: space-between;
    column-gap: var(--mobile-gap);
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    height: 100svh;
    overflow: hidden;
    padding: 5.5rem var(--mobile-gutter) max(1.25rem,env(safe-area-inset-bottom));
    position: sticky;
    top: 0;
  }
  .mobile-showreel .eyebrow,
  .mobile-showreel__frame,
  .mobile-showreel__progress { grid-column: 1 / -1; }
  .mobile-showreel .eyebrow { margin: 0; }
  .mobile-showreel__frame {
    align-self: center;
    border: 1px solid rgba(255,255,255,.22);
    color: inherit;
    display: block;
    height: 58svh;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    transform: translateY(var(--showreel-y,6svh)) scale(var(--showreel-scale,.72));
  }
  .mobile-showreel__frame::after { background: linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.72)); content: ''; inset: 0; position: absolute; }
  .mobile-showreel__frame img { height: 100%; object-fit: cover; transform: scale(1.06); width: 100%; }
  .mobile-showreel__title { bottom: .8rem; display: flex; flex-direction: column; font-size: clamp(5rem,26vw,8rem); font-weight: 700; left: .75rem; letter-spacing: -.1em; line-height: .62; position: absolute; text-transform: uppercase; z-index: 2; }
  .mobile-showreel__title i { font-style: normal; }
  .mobile-showreel__title i:last-child { margin-left: 17vw; }
  .mobile-showreel__play { font-family: var(--font-mono); font-size: .55rem; position: absolute; right: .75rem; top: .75rem; text-transform: uppercase; z-index: 2; }
  .mobile-showreel__progress { background: rgba(255,255,255,.2); height: 1px; }
  .mobile-showreel__progress span { background: var(--color-accent); display: block; height: 100%; transform: scaleX(var(--showreel-progress,0)); transform-origin: left; width: 100%; }
  .mobile-showreel__note { font-size: 1rem; grid-column: 1 / 4; line-height: 1.08; margin: 0; }

  .page-section--work { background: var(--color-paper); color: #11120f; margin-inline: -1rem; padding: 0 var(--mobile-gutter) 4rem; }
  .selected-work__head { column-gap: var(--mobile-gap); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); min-height: 88svh; padding-top: 5.5rem; }
  .selected-work__head .eyebrow,
  .selected-work__head h2 { grid-column: 1 / -1; }
  .selected-work__head .eyebrow { margin: 0; }
  .selected-work__head h2 { font-size: clamp(5.4rem,27vw,8.5rem); line-height: .72; margin: 24svh 0 0; }
  .selected-work__head .section-lead { align-self: end; font-size: 1rem !important; grid-column: 2 / -1; line-height: 1.12; margin: 0 0 6svh; max-width: 24ch !important; }
  .project-index__list { gap: 0; }
  .project-index__media { display: none; }
  .project-index__row {
    align-content: start;
    background: transparent;
    border-top: 1px solid rgba(17,18,15,.42);
    color: #11120f;
    column-gap: var(--mobile-gap);
    display: grid;
    grid-template-columns: 1.4rem minmax(0,1fr) 1rem;
    min-height: 102svh;
    padding: .8rem 0 10svh;
    position: relative;
  }
  .project-index__details,
  .project-index__number,
  .project-index__arrow { position: sticky; top: 5.25rem; z-index: 4; }
  .project-index__details { min-width: 0; opacity: .42; transition: opacity 200ms ease; }
  .project-index__row[data-in-view='true'] .project-index__details { opacity: 1; }
  .project-index__link { font-size: clamp(1.75rem,8vw,2.55rem); line-height: .92; max-width: 12ch; }
  .project-index__meta { display: flex; font-size: .55rem; margin-top: .3rem; }
  .project-index__row > .project-index__preview,
  .project-index__row[data-scroll-variant] > .project-index__preview {
    aspect-ratio: 4 / 5;
    clip-path: inset(var(--row-clip,18%) 0 0 0);
    display: block;
    filter: none;
    grid-column: 1 / -1;
    height: 62svh;
    margin: 4.5rem 0 0;
    opacity: 1 !important;
    overflow: hidden;
    position: sticky;
    top: 18svh;
    transform: translate3d(0,var(--row-y,0),0) scale(var(--row-scale,.94)) !important;
    width: 100%;
  }
  .project-index__row > .project-index__preview .project-thumbnail,
  .project-index__row > .project-index__preview img,
  .project-index__row > .project-index__preview video { height: 100%; object-fit: cover; width: 100%; }
  .project-index__row > .project-index__preview::after { border: 1px solid rgba(255,255,255,.28); content: ''; inset: .55rem; pointer-events: none; position: absolute; z-index: 2; }
  .selected-work__body > .text-link { border-block: 1px solid; display: flex; font-size: .75rem; justify-content: space-between; margin: 0 0 4rem; padding: 1rem 0; }

  .lab-teaser {
    background: #11120f;
    color: #f2f0e8;
    height: auto;
    margin-inline: -1rem;
    overflow: hidden;
    padding: 5.5rem 0 5rem;
  }
  .lab-teaser .section-heading { border-top: 1px solid rgba(255,255,255,.4); display: block; height: auto; padding: .75rem var(--mobile-gutter) 0; position: relative; top: auto; }
  .lab-teaser h2 { font-size: clamp(5.6rem,29vw,9rem); line-height: .7; margin: 1rem 0 2rem; }
  .lab-teaser .section-heading::after { content: 'Swipe the studies →'; display: block; font-family: var(--font-mono); font-size: .55rem; margin-bottom: 1rem; text-align: right; text-transform: uppercase; }
  .lab-teaser__grid { display: flex; gap: .8rem; overflow-x: auto; overscroll-behavior-inline: contain; padding: 0 var(--mobile-gutter) 1.2rem; position: relative; scroll-padding-left: var(--mobile-gutter); scroll-snap-type: x mandatory; scrollbar-color: var(--color-accent) rgba(255,255,255,.16); top: auto; transform: none !important; width: 100%; }
  .lab-teaser__card,
  .lab-teaser__card:last-child { flex: 0 0 calc(100vw - 3rem); margin: 0; scroll-snap-align: start; width: calc(100vw - 3rem); }
  .lab-teaser__card video,
  .lab-teaser__card:last-child video { aspect-ratio: auto; height: 58svh; object-fit: cover; }
  .lab-teaser__card span { border-top: 1px solid rgba(255,255,255,.35); }
  .lab-teaser__link { margin: 2.5rem var(--mobile-gutter) 0; position: relative; inset: auto; }

  .mobile-scroll-outro {
    background: #070807;
    color: #f4f2ea;
    display: block;
    height: 145svh;
    margin-inline: -1rem;
    position: relative;
  }
  .mobile-scroll-outro__sticky { align-content: space-between; column-gap: var(--mobile-gap); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); height: 100svh; overflow: hidden; padding: 5.5rem var(--mobile-gutter) max(1.5rem,env(safe-area-inset-bottom)); position: sticky; top: 0; }
  .mobile-scroll-outro .eyebrow,
  .mobile-scroll-outro h2,
  .mobile-scroll-outro a { grid-column: 1 / -1; }
  .mobile-scroll-outro .eyebrow { margin: 0; }
  .mobile-scroll-outro h2 { align-self: center; display: flex; flex-direction: column; font-size: clamp(4.8rem,21vw,7rem); gap: var(--outro-gap,18vw); letter-spacing: -.1em; line-height: .72; margin: 0; text-transform: uppercase; white-space: nowrap; }
  .mobile-scroll-outro h2 span:last-child { align-self: flex-end; }
  .mobile-scroll-outro p { font-size: 1rem; grid-column: 1 / 3; line-height: 1.12; margin: 0; }
  .mobile-scroll-outro a { border-block: 1px solid var(--color-accent); color: var(--color-accent); display: flex; justify-content: space-between; padding: 1rem 0; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home-hero__stage,
  .kinetic-title span,
  .project-image-trigger img,
  .project-image-trigger__hint,
  .lab-teaser__card video,
  .motion-card__open > span,
  .project-thumbnail__frame,
  .reel-hero__slide[data-active='true'] { animation: none !important; transition: none !important; }
}

@media (max-width: 48rem) and (prefers-reduced-motion: reduce) {
  .mobile-showreel,
  .mobile-scroll-outro { height: auto; }
  .mobile-showreel__sticky,
  .mobile-scroll-outro__sticky,
  .project-index__details,
  .project-index__number,
  .project-index__arrow,
  .project-index__row > .project-index__preview { position: relative; top: auto; }
  .mobile-showreel__frame,
  .project-index__row > .project-index__preview { clip-path: none; transform: none !important; }
  .project-index__row { min-height: auto; }
}
/* Final portfolio composition rules. See docs/portfolio-layout-spec.md. */

:root {
  --layout-gutter: clamp(1rem, 2.2vw, 2.25rem);
  --layout-gap: clamp(.75rem, 1.2vw, 1.4rem);
}

.project-page {
  padding-top: clamp(5rem, 8vw, 8rem);
}

.project-hero {
  column-gap: var(--layout-gap);
  min-height: min(76svh, 52rem);
}

.project-hero__intro {
  grid-column: 1 / 6;
}

.project-hero__media {
  grid-column: 7 / -1;
  min-height: min(58svh, 44rem);
}

.project-hero__media img {
  min-height: min(58svh, 44rem);
  object-fit: contain;
}

.project-hero h1 {
  font-size: clamp(3rem, 5.5vw, 6.5rem);
  line-height: .88;
  max-width: 12ch;
  overflow-wrap: normal;
  word-break: keep-all;
}

.project-story {
  gap: clamp(4rem, 7vw, 8rem);
  padding-block: clamp(4rem, 7vw, 8rem);
}

.project-block--text,
.project-block--credits,
.project-block--process,
.project-block--ai {
  column-gap: var(--layout-gap);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.project-block--text h2,
.project-block--credits h2,
.project-block--process h2,
.project-block--ai h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.75rem);
  grid-column: 1 / 4;
  letter-spacing: -.045em;
  line-height: 1;
}

.project-block--text > p,
.project-block--ai > p {
  font-size: clamp(1.15rem, 1.65vw, 1.55rem);
  grid-column: 4 / 10;
  line-height: 1.38;
}

.project-block--credits dl,
.project-block--process ol {
  grid-column: 4 / -1;
  margin: 0;
}

.project-media {
  padding-block: clamp(4rem, 7vw, 8rem);
}

.project-media__head {
  padding-bottom: clamp(2.5rem, 4vw, 4.5rem);
}

.project-media__grid {
  gap: clamp(2rem, 4vw, 5rem) var(--layout-gap);
}

.project-media__item[data-layout='standard-feature'],
.project-media__item[data-layout='standard-motion'] {
  grid-column: 1 / -1;
}

.project-media__item[data-layout='standard'] {
  grid-column: span 6;
}

.project-media--compact .project-media__grid {
  gap: clamp(1.25rem, 2.4vw, 2.75rem) var(--layout-gap);
}

.project-media--compact .project-media__item[data-layout='compact-feature'] {
  grid-column: span 8;
}

.project-media--compact .project-media__item[data-layout='compact'] {
  grid-column: span 4;
}

.project-media--compact .project-media__item[data-layout='compact-motion'] {
  grid-column: 1 / -1;
}

.project-media__item figcaption {
  border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  display: flex;
  justify-content: space-between;
  margin-top: .55rem;
  padding-top: .5rem;
}

.project-page__back {
  font-family: var(--font-mono);
  font-size: .68rem;
  padding-block: 1rem clamp(4rem, 8vw, 8rem);
  text-transform: uppercase;
}

@media (max-width: 48rem) {
  :root {
    --layout-gutter: 1rem;
    --layout-gap: .65rem;
  }

  .project-page {
    padding-top: 5.5rem;
  }

  .brand,
  .site-nav a {
    align-items: center;
    display: inline-flex;
    min-height: 2.75rem;
  }

  .brand {
    justify-content: flex-start;
    min-width: 2.75rem;
  }

  .site-nav a {
    justify-content: center;
    width: 100%;
  }

  .project-hero {
    min-height: auto;
    padding-bottom: 3rem;
  }

  .project-hero h1 {
    font-size: clamp(2.7rem, 13vw, 4.5rem);
    max-width: 11ch;
  }

  .project-hero__summary {
    max-width: 30ch;
  }

  .project-hero__media,
  .project-hero__media img {
    min-height: 0;
  }

  .project-hero__media {
    aspect-ratio: 4 / 3;
    margin-top: 2.5rem;
  }

  .project-hero__media .project-image-trigger,
  .project-hero__media img {
    height: 100%;
  }

  .project-story {
    gap: 4rem;
    padding-block: 4rem;
  }

  .project-block--text,
  .project-block--credits,
  .project-block--process,
  .project-block--ai {
    display: block;
  }

  .project-block--text h2,
  .project-block--credits h2,
  .project-block--process h2,
  .project-block--ai h2 {
    font-size: 1.65rem;
    margin-bottom: 2rem;
    max-width: 12ch;
  }

  .project-block--text > p,
  .project-block--ai > p {
    font-size: 1.05rem;
    line-height: 1.45;
    margin-left: 25%;
    max-width: 28ch;
  }

  .project-media {
    padding-block: 4rem;
  }

  .project-media__head {
    padding-bottom: 2rem;
  }

  .project-media__grid {
    display: grid;
    gap: 3rem .65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-media__item[data-layout='standard'],
  .project-media__item[data-layout='standard-feature'],
  .project-media__item[data-layout='standard-motion'],
  .project-media--compact .project-media__item[data-layout='compact-feature'],
  .project-media--compact .project-media__item[data-layout='compact-motion'] {
    grid-column: 1 / -1 !important;
  }

  .project-media--compact .project-media__item[data-layout='compact'] {
    grid-column: span 1 !important;
  }

  .project-media--compact .project-media__item[data-layout='compact'] .project-image-trigger {
    aspect-ratio: 4 / 3;
  }

  .project-media__item figcaption {
    font-size: .55rem;
  }

  .project-media .project-image-trigger__hint {
    display: none;
  }

  .project-page__back {
    padding-bottom: 4rem;
  }
}

@media (min-width: 40rem) and (max-width: 48rem) {
  .project-media--compact .project-media__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .project-media--compact .project-media__item[data-layout='compact-feature'] {
    grid-column: span 2 !important;
  }

  .project-media--compact .project-media__item[data-layout='compact'] {
    grid-column: span 1 !important;
  }

  .project-media--compact .project-media__item[data-layout='compact-motion'] {
    grid-column: 1 / -1 !important;
  }

}

@media (max-width: 48rem) {
  .mobile-showreel {
    height: 140svh;
  }

  .selected-work__head {
    min-height: 72svh;
  }

  .selected-work__head h2 {
    margin-top: 18svh;
  }

  .selected-work__head .section-lead {
    margin-bottom: 4svh;
  }

  .project-index__list {
    gap: 0;
  }

  .project-index__row {
    column-gap: var(--layout-gap);
    grid-template-columns: 1.4rem minmax(0, 1fr) 1rem;
    min-height: 0;
    padding: 1rem 0 5rem;
  }

  .project-index__details,
  .project-index__number,
  .project-index__arrow {
    position: relative;
    top: auto;
  }

  .project-index__details {
    opacity: 1;
  }

  .project-index__link {
    font-size: clamp(1.6rem, 7.5vw, 2.3rem);
    line-height: .94;
    max-width: 13ch;
  }

  .project-index__row > .project-index__preview,
  .project-index__row[data-scroll-variant] > .project-index__preview {
    aspect-ratio: 4 / 3;
    clip-path: none;
    height: auto;
    margin-top: 2rem;
    opacity: .38 !important;
    position: relative;
    top: auto;
    transform: translate3d(0, 1rem, 0) scale(.985) !important;
    transition: opacity 420ms ease, transform 620ms cubic-bezier(.2, .8, .2, 1);
  }

  .project-index__row[data-in-view='true'] > .project-index__preview {
    opacity: 1 !important;
    transform: none !important;
  }

  .lab-teaser__card,
  .lab-teaser__card:last-child {
    flex-basis: calc(82vw - 1rem);
    width: calc(82vw - 1rem);
  }

  .lab-teaser__card video,
  .lab-teaser__card:last-child video {
    height: 54svh;
  }

  .mobile-scroll-outro {
    height: 118svh;
  }
}

@media (min-width: 40rem) and (max-width: 48rem) {
  .project-index__row > .project-index__preview,
  .project-index__row[data-scroll-variant] > .project-index__preview {
    aspect-ratio: 16 / 10;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reel-hero,
  .reel-hero[style] {
    height: 100svh !important;
  }

  .mobile-showreel,
  .mobile-scroll-outro {
    height: auto;
  }

  .project-index__row > .project-index__preview {
    clip-path: none;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Particle orbit narrative --------------------------------------------- */
.particle-orbit-hero.reel-hero {
  --center-mark-opacity: 0;
  --focus-meta-opacity: 0;
  --hero-dark-opacity: 1;
  background: #c5c8c3;
  color: #f4f3ed;
}

.particle-orbit-hero .circulation-hero__sticky {
  background:
    radial-gradient(circle at 50% 43%, rgba(255, 255, 255, .36), transparent 25%),
    linear-gradient(180deg, #c6c9c3 0%, #aeb2ad 42%, #6673ed 76%, #c7ff16 100%);
}

.particle-orbit-hero__dark {
  background:
    radial-gradient(circle at 50% 50%, #161714 0%, #080907 48%, #030403 100%);
  inset: 0;
  opacity: var(--hero-dark-opacity);
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.particle-orbit-hero .circulation-hero__grain {
  mix-blend-mode: multiply;
  opacity: .18;
  z-index: 1;
}

.logo-particle-stage {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.logo-particle-stage__fallback,
.particle-orbit-hero__center-mark {
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(76vw, 68rem);
}

.logo-particle-stage__fallback span,
.particle-orbit-hero__center-mark span {
  background-image: radial-gradient(circle, #f4f3ed 0 2.2px, transparent 2.65px);
  background-position: center;
  background-size: 10px 10px;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(8rem, 21vw, 21rem);
  font-weight: 900;
  letter-spacing: -.095em;
  line-height: .72;
  text-align: center;
}

.logo-particle-stage__fallback {
  opacity: 1;
  transition: opacity 180ms ease;
}

.particle-orbit-hero[data-particles-ready='true'] .logo-particle-stage__fallback {
  opacity: 0;
}

.logo-particle-stage__particles {
  inset: 0;
  position: absolute;
}

.logo-particle {
  background: #f4f3ed;
  border-radius: 50%;
  box-shadow: 0 0 .7rem rgba(244, 243, 237, .34);
  height: calc(clamp(12px, 1.05vw, 18px) + var(--particle-variance, 0px));
  left: 50%;
  opacity: var(--particle-opacity, 0);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) translate3d(var(--particle-x, 0), var(--particle-y, 0), 0) scale(var(--particle-scale, 1));
  width: calc(clamp(12px, 1.05vw, 18px) + var(--particle-variance, 0px));
  will-change: transform, opacity;
}

.particle-orbit-hero .circulation-hero__field {
  transform: none;
  z-index: 4;
}

.particle-orbit-hero .circulation-node {
  transition: none;
}

.particle-orbit-hero .circulation-node--project {
  border-color: rgba(244, 243, 237, .5);
  box-shadow: 0 1.4rem 3.5rem rgba(3, 4, 3, .2);
}

.particle-orbit-hero__center-mark {
  mix-blend-mode: difference;
  opacity: var(--center-mark-opacity);
  transform: translate(-50%, -50%) scale(calc(.86 + var(--center-mark-opacity) * .14));
  width: min(30vw, 27rem);
  z-index: 120;
}

.particle-orbit-hero__center-mark span {
  background-image: radial-gradient(circle, #fff 0 1.7px, transparent 2.1px);
  background-size: 8px 8px;
  font-size: clamp(3.8rem, 8vw, 8rem);
}

.particle-orbit-hero__focus-meta {
  bottom: 1.2rem;
  color: #fff;
  display: grid;
  font-family: var(--font-mono);
  font-size: clamp(.6rem, .72vw, .75rem);
  gap: .75rem;
  grid-template-columns: 8rem minmax(0, 1fr) 8rem;
  left: var(--layout-gutter);
  letter-spacing: .035em;
  mix-blend-mode: difference;
  opacity: var(--focus-meta-opacity);
  pointer-events: none;
  right: var(--layout-gutter);
  text-transform: uppercase;
  z-index: 520;
}

.particle-orbit-hero__focus-meta strong {
  font-family: var(--font-sans);
  font-size: clamp(2.8rem, 7vw, 7.5rem);
  font-weight: 800;
  grid-column: 2;
  grid-row: 1 / 3;
  justify-self: center;
  letter-spacing: -.075em;
  line-height: .78;
  max-width: 10ch;
  text-align: center;
}

.particle-orbit-hero__focus-meta span:last-child {
  justify-self: end;
}

.particle-orbit-hero .circulation-hero__chrome {
  color: #fff;
  mix-blend-mode: difference;
  z-index: 600;
}

.particle-orbit-hero .circulation-hero__note {
  max-width: 18ch;
}

/* Work portal and opposing title rails */
.work-lineup.page-section--work {
  min-height: 240svh;
  overflow: clip;
  padding-top: 0;
  position: relative;
}

.work-lineup__head {
  align-items: end;
  border-bottom: 0;
  height: 100svh;
  inset: 0 0 auto;
  min-height: 0;
  padding: clamp(6rem, 10vw, 9rem) var(--layout-gutter) clamp(3rem, 6vw, 6rem);
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.work-lineup__head h2 {
  color: rgba(17, 18, 15, .92);
  font-size: clamp(7rem, 18vw, 19rem);
  grid-column: 1 / 10;
}

.work-lineup__head .section-lead {
  grid-column: 9 / -1;
}

.work-lineup__body {
  position: relative;
  z-index: 2;
}

.work-lineup .project-index {
  --portal-entry: 0;
  margin-top: 0;
  perspective: 1400px;
}

.work-lineup .project-index__list {
  padding-top: 100svh;
}

.work-lineup .project-index__row {
  --row-opacity: .27;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 260ms ease,
    transform 760ms cubic-bezier(.22, .8, .22, 1);
}

.work-lineup .project-index[data-enhanced='true'] .project-index__row[data-revealed='false'] {
  opacity: 0;
  transform: translate3d(0, 7rem, 0);
}

.work-lineup .project-index__row[data-revealed='true'][data-active='false'] {
  opacity: .27;
}

.work-lineup .project-index__row[data-revealed='true'][data-active='true'] {
  opacity: 1;
}

.work-lineup .project-index__portal {
  align-self: start;
  aspect-ratio: 1;
  grid-column: 5 / 9;
  grid-row: 1;
  perspective: 1100px;
  pointer-events: none;
  position: sticky;
  top: 16svh;
  transform: translate3d(0, calc((1 - var(--portal-entry)) * 54svh), 0);
  width: 100%;
  z-index: 4;
}

.work-lineup .project-index__portal::before {
  background: linear-gradient(135deg, #f2f3ef 0%, #a8aaa4 31%, #70726d 67%, #d8dad4 100%);
  border-radius: 50%;
  box-shadow:
    -1.2rem 1.8rem 0 #6a6c67,
    -2rem 2.6rem 4rem rgba(17, 18, 15, .24),
    inset .45rem -.45rem 1rem rgba(17, 18, 15, .28),
    inset -.35rem .35rem .8rem rgba(255, 255, 255, .72);
  content: '';
  inset: -2.1%;
  position: absolute;
  transform: translateZ(-2rem);
}

.work-lineup .project-index__media {
  --portal-shift-x: 0vw;
  --portal-rotate-y: 0deg;
  aspect-ratio: 1;
  background: #151613;
  border: clamp(.55rem, 1vw, 1rem) solid #bfc1bb;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .72),
    inset 1rem 0 1.6rem rgba(255, 255, 255, .18),
    inset -1.4rem 0 2rem rgba(0, 0, 0, .28);
  grid-column: auto;
  grid-row: auto;
  height: 100%;
  min-height: 0;
  overflow: visible;
  position: relative;
  top: auto;
  transform: translate3d(var(--portal-shift-x), 0, 0) rotateY(var(--portal-rotate-y));
  transform-style: preserve-3d;
  transition:
    transform 720ms cubic-bezier(.65, 0, .35, 1),
    box-shadow 720ms cubic-bezier(.65, 0, .35, 1);
  width: 100%;
}

.work-lineup .project-index[data-preview-side='left'] .project-index__media {
  --portal-shift-x: -1.4vw;
  --portal-rotate-y: -12deg;
  box-shadow:
    inset 1.5rem 0 2.1rem rgba(255, 255, 255, .22),
    inset -2rem 0 2.6rem rgba(0, 0, 0, .35),
    1.2rem .7rem 2.2rem rgba(17, 18, 15, .14);
}

.work-lineup .project-index[data-preview-side='right'] .project-index__media {
  --portal-shift-x: 1.4vw;
  --portal-rotate-y: 12deg;
  box-shadow:
    inset -1.5rem 0 2.1rem rgba(255, 255, 255, .22),
    inset 2rem 0 2.6rem rgba(0, 0, 0, .35),
    -1.2rem .7rem 2.2rem rgba(17, 18, 15, .14);
}

.work-lineup .project-index__preview {
  border-radius: 50%;
  inset: clamp(.35rem, .6vw, .65rem);
  overflow: hidden;
  transform: scale(1.035) translateZ(.1px);
}

.work-lineup .project-index__preview[data-active='true'] {
  transform: scale(1) translateZ(.1px);
}

.work-lineup .project-index__media > p {
  bottom: 8%;
  transform: translateX(-50%) translateZ(2rem);
}

@media (max-width: 64rem) and (min-width: 48.01rem) {
  .work-lineup .project-index__portal {
    grid-column: 5 / 9;
  }

  .work-lineup .project-index__row {
    width: 34%;
  }
}

@media (max-width: 48rem) {
  .particle-orbit-hero.reel-hero {
    --reel-height: 960svh !important;
  }

  .particle-orbit-hero .circulation-node--project {
    --node-size: clamp(3.1rem, calc(var(--node-ratio) * 1.4vw), 7rem) !important;
  }

  .particle-orbit-hero .circulation-node--solid {
    --node-size: clamp(1.25rem, calc(var(--node-ratio) * 2.2vw), 3.8rem) !important;
  }

  .logo-particle-stage__fallback {
    width: 84vw;
  }

  .logo-particle-stage__fallback span {
    font-size: 34vw;
  }

  .particle-orbit-hero__center-mark {
    width: 46vw;
  }

  .particle-orbit-hero__center-mark span {
    font-size: 13vw;
  }

  .particle-orbit-hero__focus-meta {
    bottom: 5rem;
    display: grid;
    font-size: .5rem;
    gap: .4rem;
    grid-template-columns: 1fr 1fr;
  }

  .particle-orbit-hero__focus-meta strong {
    font-size: clamp(2.6rem, 13vw, 4.5rem);
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    max-width: 8ch;
    text-align: left;
  }

  .particle-orbit-hero__focus-meta span:last-child {
    grid-column: 2;
    justify-self: end;
  }

  .work-lineup.page-section--work {
    min-height: auto;
    padding-top: 0;
  }

  .work-lineup__head {
    height: 82svh;
    padding: 6rem var(--mobile-gutter) 3rem;
  }

  .work-lineup__head h2 {
    margin-top: 16svh;
  }

  .work-lineup .project-index__list {
    padding-top: 82svh;
  }

  .work-lineup .project-index__portal {
    display: none;
  }

  .work-lineup .project-index[data-enhanced='true'] .project-index__row[data-revealed='false'] {
    transform: translate3d(0, 3.5rem, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .particle-orbit-hero.reel-hero,
  .particle-orbit-hero.reel-hero[style] {
    height: 100svh !important;
  }

  .logo-particle {
    will-change: auto;
  }

  .work-lineup .project-index__media,
  .work-lineup .project-index__row {
    transition: none;
  }

  .work-lineup .project-index__portal {
    transform: none;
  }
}

/* Superlocal-faithful home reconstruction ------------------------------
   The homepage owns a single canvas-led hero and a selection-driven coin.
   These selectors intentionally follow all legacy home overrides. */
.is-home .site-header {
  display: none;
}

.reference-hero.reel-hero,
.reference-hero.reel-hero[style] {
  --reference-silver: #c5c6c4;
  --reference-ink: #171814;
  --reference-copper: #ff641f;
  background: var(--reference-silver);
  color: var(--reference-ink);
  height: var(--reel-height, 679.2svh) !important;
  margin-inline: calc(var(--layout-gutter) * -1);
  overflow: visible;
  width: calc(100% + var(--layout-gutter) * 2);
}

.reference-hero .reference-hero__sticky,
.reference-hero .circulation-hero__sticky {
  background:
    radial-gradient(circle at 1px 1px, rgba(18, 19, 16, .1) 1.15px, transparent 1.45px) 0 0 / 52px 52px,
    linear-gradient(180deg, #c5c6c4 0%, #c5c6c4 57%, #d7a49e 78%, #ff6a2c 100%);
  height: 100svh;
  overflow: hidden;
  position: sticky;
  top: 0;
}

.reference-hero__sunrise {
  background: linear-gradient(180deg, transparent 0 56%, rgba(255, 100, 31, .14) 77%, rgba(255, 100, 31, .5) 100%);
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.reference-hero .reference-hero__grain {
  mix-blend-mode: multiply;
  opacity: .13;
  z-index: 4;
}

.reference-hero__canvas {
  display: block;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}

.reference-hero__assets {
  height: 1px;
  left: -9999px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 1px;
}

.reference-hero__nav {
  display: flex;
  gap: .25rem;
  left: 50%;
  position: absolute;
  top: 2rem;
  transform: translateX(-50%);
  z-index: 20;
}

.reference-hero__pill {
  align-items: center;
  background: #f7f7f2;
  border-radius: 999px;
  color: var(--reference-ink);
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: clamp(.78rem, 1vw, .98rem);
  font-weight: 760;
  justify-content: center;
  letter-spacing: -.045em;
  line-height: 1;
  min-height: 2.25rem;
  padding: .35rem .78rem .42rem;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

.reference-hero__pill:hover,
.reference-hero__pill:focus-visible,
.reference-hero__pill--brand {
  background: var(--reference-ink);
  color: #f7f7f2;
  outline: none;
}

.reference-hero__statement {
  bottom: clamp(1.25rem, 3vw, 2.6rem);
  color: color-mix(in srgb, var(--reference-ink) calc(100% - var(--tone) * 62%), #ffb64a);
  display: grid;
  gap: .7rem 2rem;
  grid-template-columns: minmax(0, 8fr) minmax(15rem, 4fr);
  left: var(--layout-gutter);
  opacity: var(--read);
  pointer-events: none;
  position: absolute;
  right: var(--layout-gutter);
  transform: translateY(calc((1 - var(--read)) * 2rem));
  z-index: 12;
}

.reference-hero__kicker,
.reference-hero__tagline {
  font-family: var(--font-mono);
  font-size: clamp(.65rem, .8vw, .8rem);
  letter-spacing: -.025em;
  line-height: 1.05;
  text-transform: uppercase;
}

.reference-hero__statement h2 {
  font-size: clamp(3.1rem, 7.3vw, 7.75rem);
  font-weight: 820;
  grid-column: 1;
  letter-spacing: -.075em;
  line-height: .82;
  max-width: 9ch;
}

.reference-hero__body {
  align-self: end;
  font-size: clamp(1.35rem, 2.25vw, 2.45rem);
  font-weight: 720;
  grid-column: 1;
  letter-spacing: -.055em;
  line-height: .96;
  max-width: 31ch;
}

.reference-hero__tagline {
  align-self: end;
  grid-column: 2;
  grid-row: 2 / 4;
  justify-self: end;
  max-width: 19ch;
  text-align: right;
}

.reference-hero__footerline {
  align-items: end;
  bottom: clamp(1.2rem, 2.2vw, 2rem);
  display: grid;
  font-family: var(--font-mono);
  font-size: clamp(.75rem, 1.1vw, 1.05rem);
  grid-template-columns: 1fr auto 1fr;
  left: var(--layout-gutter);
  letter-spacing: -.04em;
  line-height: .92;
  opacity: calc(1 - var(--fly));
  pointer-events: none;
  position: absolute;
  right: var(--layout-gutter);
  text-transform: uppercase;
  z-index: 12;
}

.reference-hero__footerline span:first-child {
  font-family: var(--font-sans);
  font-size: clamp(3rem, 6vw, 6.4rem);
  font-weight: 850;
  letter-spacing: -.085em;
}

.reference-hero__footerline span:nth-child(2) {
  justify-self: center;
}

.reference-hero__footerline span:last-child {
  justify-self: end;
}

.work-lineup.page-section--work {
  background:
    radial-gradient(circle at 1px 1px, rgba(18, 19, 16, .1) 1.15px, transparent 1.45px) 0 0 / 52px 52px,
    #c5c6c4;
  border: 0;
  color: #171814;
  margin-inline: calc(var(--layout-gutter) * -1);
  min-height: 190svh;
  overflow: clip;
  padding: 0 var(--layout-gutter);
  position: relative;
}

.work-lineup__head {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.work-lineup__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-height: inherit;
  perspective: none;
}

.work-lineup .reference-index {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin: 0;
  min-height: inherit;
  perspective: 1300px;
  position: relative;
}

.work-lineup .reference-index .project-index__list {
  align-items: center;
  display: grid;
  grid-auto-flow: column;
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(7, minmax(6.8rem, auto));
  margin: 0;
  padding: 60svh 0;
  position: relative;
  z-index: 2;
}

.work-lineup .reference-index .project-index__row,
.work-lineup .reference-index .project-index__row[data-side='right'] {
  align-items: center;
  border: 0;
  display: flex;
  min-height: 6.8rem;
  opacity: 1;
  padding: 0;
  transition: opacity 420ms ease, transform 700ms cubic-bezier(.22, .8, .22, 1);
  width: auto;
}

.work-lineup .reference-index[data-enhanced='true'] .project-index__row[data-revealed='false'] {
  opacity: 0;
  transform: translateY(3.5rem);
}

.work-lineup .reference-index .project-index__row[data-side='left'] {
  justify-content: flex-end;
  padding-right: 17vw;
  text-align: right;
  transform: translateX(calc(-1 * var(--rail-shift)));
}

.work-lineup .reference-index .project-index__row[data-side='right'] {
  justify-content: flex-start;
  margin-left: 0;
  padding-left: 17vw;
  text-align: left;
  transform: translateX(var(--rail-shift));
}

.work-lineup .reference-index .project-index__row[data-active='false'] {
  opacity: 1;
}

.work-lineup .reference-index .project-index__link {
  color: #171814;
  display: inline-block;
  font-family: var(--font-sans);
  font-size: clamp(2rem, 3.05vw, 3.2rem);
  font-weight: 820;
  letter-spacing: -.075em;
  line-height: .84;
  max-width: 8.6em;
  position: relative;
  text-decoration: none;
  text-wrap: balance;
  transition: color 160ms ease;
  white-space: normal;
}

.work-lineup .reference-index .project-index__link:hover,
.work-lineup .reference-index .project-index__link:focus-visible,
.work-lineup .reference-index .project-index__row[data-active='true'] .project-index__link {
  color: #ff641f;
  outline: none;
}

.work-lineup .reference-index .project-index__portal-track {
  align-self: stretch;
  display: block;
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: 100%;
  pointer-events: none;
  position: relative;
  z-index: 3;
}

.work-lineup .reference-index .project-index__portal {
  aspect-ratio: 1;
  margin-inline: auto;
  perspective: 1300px;
  position: sticky;
  top: calc(50svh - min(18.3vw, 16.3rem));
  transform: none;
  width: min(36.6vw, 32.6rem);
}

.work-lineup .reference-index .project-index__portal::before {
  content: none;
}

.work-lineup .reference-index .project-index__coin {
  aspect-ratio: 1;
  background: linear-gradient(90deg, #756e61 0%, #e4ded1 8%, #8a8172 18%, #efe7d9 28%, #6e685f 42%, #d8d0c3 60%, #776f61 76%, #ede4d6 91%, #81796d 100%);
  border-radius: 50%;
  height: 100%;
  padding: clamp(.65rem, 1.15vw, 1.05rem);
  position: relative;
  transform-style: preserve-3d;
  width: 100%;
  will-change: transform;
}

.work-lineup .reference-index .project-index__coin::before,
.work-lineup .reference-index .project-index__coin::after {
  border-radius: 50%;
  content: '';
  pointer-events: none;
  position: absolute;
}

.work-lineup .reference-index .project-index__coin::before {
  background: linear-gradient(90deg, #4b473f, #f0eadf 20%, #777064 49%, #ddd5c8 74%, #504b43);
  inset: -2.4%;
  transform: translateZ(-1.55rem);
}

.work-lineup .reference-index .project-index__coin::after {
  border: 2px solid rgba(255, 255, 255, .62);
  inset: 2.8%;
  transform: translateZ(.18rem);
}

.work-lineup .reference-index .project-index__media {
  aspect-ratio: 1;
  background: #171814;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  display: block;
  height: 100%;
  overflow: hidden;
  position: relative;
  transform: translateZ(.2rem);
  transition: none;
  width: 100%;
}

.work-lineup .reference-index .project-index__preview {
  border-radius: 50%;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  transform: scale(1.025);
  transition: opacity 90ms linear;
}

.work-lineup .reference-index .project-index__preview[data-active='true'] {
  opacity: 1;
  transform: scale(1.025);
}

.work-lineup .reference-index .project-index__preview .project-thumbnail,
.work-lineup .reference-index .project-index__preview img,
.work-lineup .reference-index .project-index__preview video {
  border-radius: 50%;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.work-lineup .reference-index .project-index__coin-meta {
  display: flex;
  gap: .25rem;
  justify-content: center;
  left: 50%;
  opacity: 1;
  position: absolute;
  top: calc(100% + clamp(1.1rem, 3.5vh, 2.7rem));
  transform: translateX(-50%);
  transition: opacity 160ms ease;
  white-space: nowrap;
}

.work-lineup .reference-index[data-flipping='true'] .project-index__coin-meta {
  opacity: 0;
}

.work-lineup .reference-index .project-index__coin-meta span {
  background: #f7f7f2;
  border-radius: 999px;
  color: #171814;
  display: inline-block;
  font-size: clamp(.68rem, .8vw, .8rem);
  font-weight: 760;
  letter-spacing: -.04em;
  line-height: 1;
  max-width: 18rem;
  overflow: hidden;
  padding: .45rem .72rem .5rem;
  text-overflow: ellipsis;
}

.work-lineup .reference-index .project-index__coin-meta span:first-child {
  background: #ff641f;
}

.work-lineup__exit.text-link {
  align-self: end;
  border: 0;
  bottom: 1.4rem;
  font-size: .75rem;
  grid-column: 1 / -1;
  justify-self: center;
  margin: 0;
  padding: .45rem .7rem;
  position: absolute;
  z-index: 5;
}

@media (max-width: 48rem) {
  .reference-hero.reel-hero,
  .reference-hero.reel-hero[style] {
    --reel-height: 520svh !important;
  }

  .reference-hero .reference-hero__sticky,
  .reference-hero .circulation-hero__sticky {
    background-size: 32px 32px, 100% 100%;
  }

  .reference-hero__nav {
    gap: .18rem;
    top: 1rem;
  }

  .reference-hero__pill {
    font-size: .7rem;
    min-height: 1.9rem;
    padding: .3rem .57rem .35rem;
  }

  .reference-hero__statement {
    bottom: 1rem;
    display: block;
    left: var(--mobile-gutter);
    right: var(--mobile-gutter);
  }

  .reference-hero__statement h2 {
    font-size: clamp(3rem, 15.5vw, 5rem);
    margin: .6rem 0 1rem;
  }

  .reference-hero__body {
    font-size: clamp(1.15rem, 5.4vw, 1.55rem);
    max-width: 26ch;
  }

  .reference-hero__tagline {
    margin-top: 1.2rem;
    text-align: left;
  }

  .reference-hero__footerline {
    bottom: 1rem;
    grid-template-columns: 1fr auto;
    left: var(--mobile-gutter);
    right: var(--mobile-gutter);
  }

  .reference-hero__footerline span:first-child {
    font-size: clamp(2.6rem, 16vw, 4.6rem);
  }

  .reference-hero__footerline span:nth-child(2) {
    justify-self: end;
  }

  .reference-hero__footerline span:last-child {
    display: none;
  }

  .work-lineup.page-section--work {
    background-size: 32px 32px, 100% 100%;
    margin-inline: calc(var(--mobile-gutter) * -1);
    min-height: auto;
    padding: 0;
  }

  .work-lineup__body {
    display: block;
  }

  .work-lineup .reference-index {
    display: grid;
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .work-lineup .reference-index .project-index__portal-track {
    grid-column: 1;
    grid-row: 1;
    min-height: 100%;
    z-index: 5;
  }

  .work-lineup .reference-index .project-index__portal {
    top: 5rem;
    width: min(82vw, 22rem);
  }

  .work-lineup .reference-index .project-index__list {
    display: block;
    grid-column: 1;
    grid-row: 1;
    padding: calc(min(82vw, 22rem) + 13rem) var(--mobile-gutter) 36svh;
    z-index: 6;
  }

  .work-lineup .reference-index .project-index__row,
  .work-lineup .reference-index .project-index__row[data-side='left'],
  .work-lineup .reference-index .project-index__row[data-side='right'] {
    justify-content: flex-start;
    min-height: clamp(3.25rem, 14vw, 4.2rem);
    padding: 0;
    text-align: left;
    transform: none;
  }

  .work-lineup .reference-index .project-index__link {
    font-size: clamp(1.35rem, 6.15vw, 2rem);
    line-height: .92;
    max-width: none;
    padding-left: 1.42em;
  }

  .work-lineup .reference-index .project-index__link::before {
    background: #ff641f;
    border-radius: 50%;
    content: '';
    height: 1.02em;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(.5);
    transition: opacity 160ms ease, transform 300ms cubic-bezier(.22, .8, .22, 1);
    width: 1.02em;
  }

  .work-lineup .reference-index .project-index__row[data-active='true'] .project-index__link::before,
  .work-lineup .reference-index .project-index__link:focus-visible::before {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  .work-lineup .reference-index .project-index__coin-meta {
    top: calc(100% + 1.5rem);
  }

  .work-lineup .reference-index .project-index__coin-meta span {
    font-size: .65rem;
    max-width: 12rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reference-hero.reel-hero,
  .reference-hero.reel-hero[style] {
    height: 100svh !important;
  }

  .reference-hero__statement {
    display: none;
  }

  .work-lineup .reference-index .project-index__row,
  .work-lineup .reference-index .project-index__coin-meta {
    transition: none;
  }
}

/* Clean featured hero ---------------------------------------------------- */
.reel-hero__sticky {
  background: #070807;
}

.reel-hero__media {
  background: #070807;
  bottom: 5.6rem;
  left: 34%;
  right: var(--layout-gutter);
  top: 4.75rem;
}

.reel-hero__slide::after {
  display: none;
}

.reel-hero__slide img,
.reel-hero__slide video {
  background: #070807;
  object-fit: contain;
}

.reel-hero__chrome {
  grid-template-rows: 1fr auto;
}

.reel-hero__current {
  align-self: center;
  grid-column: 1 / 5;
  grid-row: 1;
}

.reel-hero__current > a {
  font-size: clamp(2.6rem, 4.7vw, 5.75rem);
  line-height: .82;
  max-width: 8ch;
}

.reel-hero__controls {
  grid-row: 2;
  margin-top: 1.25rem;
}

.reel-hero__mobile-meter {
  grid-row: 3;
}

.mobile-showreel__frame {
  border: 0;
}

.project-index__preview::after {
  display: none;
}

@media (max-width: 48rem) {
  .reel-hero__media,
  .reel-hero[data-active-slide] .reel-hero__media {
    bottom: auto;
    height: min(50svh, 31rem);
    left: var(--mobile-gutter);
    right: var(--mobile-gutter);
    top: 5.25rem;
  }

  .reel-hero[data-active-slide='1'] .reel-hero__media,
  .reel-hero[data-active-slide='2'] .reel-hero__media {
    left: var(--mobile-gutter);
    right: var(--mobile-gutter);
  }

  .reel-hero__slide,
  .reel-hero__slide[data-active='true'] {
    clip-path: none;
  }

  .reel-hero__slide[data-active='true'] img,
  .reel-hero__slide[data-active='true'] video {
    transform: none;
    transition: none;
  }

  .reel-hero__chrome {
    grid-template-rows: 1fr auto auto;
    padding: 5.25rem var(--mobile-gutter) 1rem;
  }

  .reel-hero__current {
    align-self: start;
    grid-column: 1 / -1;
    grid-row: 1;
    padding-bottom: 1rem;
    padding-top: calc(min(50svh, 31rem) + 1.25rem);
  }

  .reel-hero__current > p:first-child {
    border: 0;
    padding-bottom: 0;
  }

  .reel-hero__current > p:first-child::after {
    content: none;
  }

  .reel-hero__current > a {
    font-size: clamp(2.65rem, 13vw, 4.5rem);
    line-height: .78;
    max-width: 8ch;
    min-height: 0;
  }

  .reel-hero__controls {
    grid-row: 2;
    margin-top: 0;
  }

  .reel-hero__mobile-meter {
    grid-row: 3;
  }
}

/* Thought Form hero ----------------------------------------------------- */
.reel-hero {
  --form-band-shift: -9px;
  --form-scale: .94;
  --form-tilt: -1.4deg;
  --form-x: 2.25vw;
  --form-y: 0svh;
}

.reel-hero__sticky {
  isolation: isolate;
}

.reel-hero__form {
  aspect-ratio: 16 / 10;
  position: absolute;
  right: var(--layout-gutter);
  top: 50%;
  transform: translate3d(var(--form-x), calc(-50% + var(--form-y)), 0) rotate(var(--form-tilt)) scale(var(--form-scale));
  transform-origin: center;
  width: min(59vw, 70rem);
  z-index: 1;
}

.reel-hero__form::before {
  background: var(--color-accent);
  content: '';
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
  top: -.55rem;
  transform: scaleX(var(--hero-progress));
  transform-origin: left;
}

.reel-hero__media {
  background: #070807;
  border: 1px solid rgba(244, 242, 234, .36);
  inset: 0;
  overflow: hidden;
  position: absolute;
}

.reel-hero__slide,
.reel-hero__slide[data-active='true'] {
  clip-path: inset(0 var(--slide-clip, 0%) 0 0);
  opacity: var(--slide-opacity, 0);
  transform: translate3d(var(--slide-x, 0%), 0, 0) scale(var(--slide-scale, 1));
  transition: none;
}

.reel-hero__slide img,
.reel-hero__slide video {
  filter: saturate(.86) contrast(1.03);
  object-fit: contain;
  transform: none !important;
  transition: none !important;
}

.reel-hero__form-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  inset: 0;
  mix-blend-mode: difference;
  pointer-events: none;
  position: absolute;
  z-index: 20;
}

.reel-hero__form-grid span {
  border-left: 1px solid rgba(244, 242, 234, .26);
  transform: translateY(var(--form-band-shift));
}

.reel-hero__form-grid span:nth-child(even) {
  transform: translateY(calc(var(--form-band-shift) * -1));
}

.reel-hero__form-grid span:last-child {
  border-right: 1px solid rgba(244, 242, 234, .26);
}

.reel-hero__form-mark {
  bottom: 1rem;
  filter: invert(1);
  height: auto;
  left: 1rem;
  mix-blend-mode: difference;
  opacity: .78;
  position: absolute;
  width: clamp(2rem, 3.2vw, 3.75rem);
  z-index: 21;
}

.reel-hero__form-meta {
  display: flex;
  font-family: var(--font-mono);
  font-size: .58rem;
  justify-content: space-between;
  letter-spacing: .035em;
  margin: .65rem 0 0;
  text-transform: uppercase;
}

.reel-hero__form-meta span:nth-child(2) {
  color: var(--color-accent);
}

.reel-hero__chrome {
  z-index: 3;
}

.reel-hero__current {
  grid-column: 1 / 5;
}

.reel-hero__controls button[aria-selected='true'] {
  background: transparent;
  box-shadow: inset 0 2px 0 var(--color-accent);
  color: inherit;
}

.reel-hero__mobile-meter span {
  transform: scaleX(var(--hero-progress, 0));
}

@media (max-width: 48rem) {
  .reel-hero__form {
    aspect-ratio: 4 / 3;
    left: var(--mobile-gutter);
    right: var(--mobile-gutter);
    top: 5.25rem;
    transform: translate3d(0, var(--form-y), 0) scale(var(--form-scale));
    transform-origin: center top;
    width: auto;
  }

  .reel-hero__form::before {
    top: -.4rem;
  }

  .reel-hero__media,
  .reel-hero[data-active-slide] .reel-hero__media {
    height: auto;
    inset: 0;
    position: absolute;
  }

  .reel-hero__form-mark {
    bottom: .7rem;
    left: .7rem;
    width: 2rem;
  }

  .reel-hero__form-meta {
    font-size: .5rem;
    margin-top: .45rem;
  }

  .reel-hero__chrome {
    padding-top: 5.25rem;
  }

  .reel-hero__current {
    padding-top: calc((100vw - (var(--mobile-gutter) * 2)) * .75 + 3.7rem);
  }

  .reel-hero__controls button[aria-selected='true'] {
    box-shadow: inset 0 -2px 0 var(--color-accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reel-hero__form {
    transform: translate3d(0, -50%, 0);
  }

  .reel-hero__slide,
  .reel-hero__slide[data-active='true'] {
    clip-path: none;
    transform: none;
  }

  .reel-hero__form-grid span {
    transform: none;
  }
}

@media (max-width: 48rem) and (prefers-reduced-motion: reduce) {
  .reel-hero__form {
    transform: none;
  }
}

/* TIN circulation homepage --------------------------------------------- */
.is-home .site-header {
  background: transparent;
  border: 0;
  color: #fff;
  mix-blend-mode: difference;
}

.is-home .brand__mark img {
  filter: invert(1);
}

.circulation-hero.reel-hero {
  --field-progress: 0;
  --statement-progress: 0;
  --hero-exit: 0;
  background: #b9bcb7;
  color: #10110f;
  height: var(--reel-height);
  isolation: isolate;
}

.circulation-hero .circulation-hero__sticky {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .33), transparent 26%),
    linear-gradient(180deg, #c7c9c4 0%, #aeb2ad 43%, #8391f1 75%, #c7ff16 100%);
  height: 100svh;
  isolation: isolate;
  overflow: hidden;
  position: sticky;
  top: 0;
}

.circulation-hero__grain {
  background-image: radial-gradient(rgba(16, 17, 15, .34) .65px, transparent .8px);
  background-size: 4px 4px;
  inset: 0;
  opacity: calc(.24 - var(--hero-exit) * .14);
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.circulation-hero__field {
  inset: 0;
  position: absolute;
  transform: scale(calc(1 - var(--hero-exit) * .08));
  transform-origin: center;
  z-index: 2;
}

.circulation-node {
  height: var(--node-height, var(--node-size));
  left: 50%;
  margin: 0;
  opacity: var(--node-opacity, 1);
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) translate3d(var(--node-x, 0), var(--node-y, 0), 0) rotate(var(--node-rotate, 0deg)) scale(var(--node-scale, .72));
  transform-origin: center;
  width: var(--node-width, var(--node-size));
  will-change: transform, opacity;
}

.circulation-node--project {
  background: #151613;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: var(--node-radius, 50%);
  box-shadow: 0 1.2rem 3rem rgba(16, 17, 15, .16);
}

.circulation-node--project img {
  border-radius: inherit;
  filter: saturate(.9) contrast(1.03);
  height: 100%;
  object-fit: cover;
  transition: filter 240ms ease;
  width: 100%;
}

.circulation-node--solid {
  background: var(--node-color);
  border: 1px solid rgba(16, 17, 15, .16);
  border-radius: 50%;
  box-shadow: inset -.45rem -.55rem 1.4rem rgba(16, 17, 15, .1);
}

.circulation-hero__statement {
  display: flex;
  flex-direction: column;
  font-size: clamp(4rem, 11.5vw, 12rem);
  font-weight: 800;
  inset: 50% auto auto 50%;
  letter-spacing: -.092em;
  line-height: .72;
  opacity: var(--statement-progress);
  pointer-events: none;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  transform: translate(-50%, calc(-44% + (1 - var(--statement-progress)) * 3.5rem)) scale(calc(.92 + var(--statement-progress) * .08));
  white-space: nowrap;
  z-index: 3;
}

.circulation-hero__statement span:last-child {
  color: #f2f0e8;
  text-shadow: 0 0 1px rgba(16, 17, 15, .5);
}

.circulation-hero__chrome {
  display: grid;
  font-family: var(--font-mono);
  font-size: clamp(.58rem, .7vw, .72rem);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  inset: 0;
  letter-spacing: .04em;
  padding: 5.5rem var(--layout-gutter) 1.25rem;
  pointer-events: none;
  position: absolute;
  text-transform: uppercase;
  z-index: 4;
}

.circulation-hero__chrome p {
  margin: 0;
}

.circulation-hero__index {
  grid-column: 1 / 3;
}

.circulation-hero__place {
  grid-column: 5 / 8;
}

.circulation-hero__note {
  grid-column: 10 / -1;
  justify-self: end;
  text-align: right;
}

.circulation-hero__actions {
  align-self: end;
  display: flex;
  gap: 1.5rem;
  grid-column: 1 / 6;
  pointer-events: auto;
}

.circulation-hero__actions a {
  border-bottom: 1px solid currentColor;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  min-width: 10rem;
  padding-bottom: .45rem;
  text-decoration: none;
}

.circulation-hero__scroll {
  align-self: end;
  grid-column: 10 / -1;
  justify-self: end;
}

.circulation-hero__scroll span {
  background: currentColor;
  display: inline-block;
  height: 1px;
  margin-right: .55rem;
  transform: scaleX(calc(.22 + var(--hero-progress) * .78));
  transform-origin: right;
  vertical-align: middle;
  width: 4rem;
}

/* Work lineup */
.work-lineup.page-section--work {
  background: #f0eee6;
  border-top: 0;
  color: #11120f;
  margin-inline: calc(var(--layout-gutter) * -1);
  padding: clamp(6rem, 10vw, 10rem) var(--layout-gutter);
}

.work-lineup__head {
  min-height: 58svh;
}

.work-lineup__head h2 {
  font-size: clamp(6rem, 16vw, 17rem);
  grid-column: 3 / 10;
}

.work-lineup__head .section-lead {
  font-size: clamp(1.15rem, 1.7vw, 1.8rem) !important;
  grid-column: 9 / -1;
  max-width: 24ch !important;
}

.work-lineup .project-index {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-top: clamp(4rem, 8vw, 8rem);
  position: relative;
}

.work-lineup .project-index__list {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  z-index: 2;
}

.work-lineup .project-index__row {
  border-color: rgba(17, 18, 15, .34);
  min-height: clamp(6rem, 8vw, 8.5rem);
  padding: 1rem 0;
  width: 31%;
}

.work-lineup .project-index__row[data-side='right'] {
  margin-left: auto;
}

.work-lineup .project-index__row[data-active='false'] {
  opacity: .27;
}

.work-lineup .project-index__row[data-active='true'] {
  opacity: 1;
}

.work-lineup .project-index__link {
  font-size: clamp(1.1rem, 1.55vw, 1.8rem);
}

.work-lineup .project-index__media {
  align-self: start;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 1.5rem 4rem rgba(17, 18, 15, .13);
  grid-column: 5 / 9;
  grid-row: 1;
  height: auto;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
  position: sticky;
  top: 16svh;
  width: 100%;
  z-index: 1;
}

.work-lineup .project-index__preview,
.work-lineup .project-index__preview .project-thumbnail,
.work-lineup .project-index__preview img,
.work-lineup .project-index__preview video {
  border-radius: 50%;
}

.work-lineup .project-index__preview img,
.work-lineup .project-index__preview video {
  object-fit: cover;
}

.work-lineup .project-index__media > p {
  background: #11120f;
  border-radius: 999px;
  bottom: 7%;
  color: #f0eee6;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.work-lineup__exit.text-link {
  border-block: 1px solid;
  display: flex;
  font-size: clamp(.75rem, .9vw, .9rem);
  justify-content: space-between;
  margin: clamp(4rem, 8vw, 8rem) 0 0;
  padding: 1rem 0;
}

/* Featured color bands */
.featured-sequence {
  background: #11120f;
  color: #f2f0e8;
  margin-inline: calc(var(--layout-gutter) * -1);
}

.featured-sequence__head {
  align-items: end;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-height: 82svh;
  padding: clamp(6rem, 10vw, 10rem) var(--layout-gutter);
}

.featured-sequence__head .eyebrow {
  align-self: start;
  grid-column: 1 / 4;
}

.featured-sequence__head h2 {
  font-size: clamp(5rem, 13vw, 14rem);
  grid-column: 1 / 10;
  letter-spacing: -.09em;
  line-height: .73;
  margin: 0;
}

.featured-sequence__head > p:last-child {
  font-size: clamp(1.1rem, 1.65vw, 1.7rem);
  grid-column: 9 / -1;
  line-height: 1.1;
  margin: 0;
  max-width: 24ch;
}

.featured-sequence__list {
  isolation: isolate;
}

.featured-band {
  background: var(--band-bg);
  color: var(--band-fg);
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  min-height: 86svh;
  overflow: hidden;
  padding: 1.25rem var(--layout-gutter);
  position: sticky;
  text-decoration: none;
  top: 0;
}

.featured-band__number {
  font-family: var(--font-mono);
  font-size: .68rem;
  grid-column: 1 / 3;
}

.featured-band__client {
  font-family: var(--font-mono);
  font-size: .68rem;
  grid-column: 5 / 9;
  text-transform: uppercase;
}

.featured-band > strong {
  align-self: center;
  font-size: clamp(4rem, 10vw, 11rem);
  font-weight: 800;
  grid-column: 1 / 10;
  grid-row: 2;
  letter-spacing: -.085em;
  line-height: .75;
  max-width: 8ch;
  position: relative;
  z-index: 2;
}

.featured-band__media {
  align-self: center;
  aspect-ratio: 1;
  border-radius: 50%;
  grid-column: 7 / 12;
  grid-row: 1 / -1;
  justify-self: end;
  overflow: hidden;
  width: min(41vw, 43rem);
}

.featured-band__media img {
  filter: saturate(.88);
  height: 100%;
  object-fit: cover;
  transition: filter 400ms ease, transform 700ms cubic-bezier(.2, .8, .2, 1);
  width: 100%;
}

.featured-band:hover .featured-band__media img {
  filter: saturate(1.1);
  transform: scale(1.035);
}

.featured-band__open {
  align-self: end;
  border-top: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: .68rem;
  grid-column: 1 / 4;
  padding-top: .55rem;
  text-transform: uppercase;
}

/* Lab orbit */
.lab-orbit.lab-teaser {
  background: #10110f;
  margin-inline: calc(var(--layout-gutter) * -1);
  min-height: 150svh;
  overflow: hidden;
  padding: clamp(7rem, 12vw, 12rem) var(--layout-gutter) 2rem;
}

.lab-orbit__head {
  align-items: start;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.lab-orbit__head .eyebrow {
  grid-column: 1 / 4;
}

.lab-orbit__head h2 {
  font-size: clamp(7rem, 21vw, 22rem);
  grid-column: 1 / 10;
  margin: 2rem 0 0;
}

.lab-orbit__head > p:last-child {
  align-self: end;
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  grid-column: 9 / -1;
  line-height: 1.12;
  margin: 0 0 3rem;
  max-width: 23ch;
}

.lab-orbit .lab-orbit__field {
  display: block;
  min-height: 92svh;
  position: relative;
}

.lab-orbit .lab-orbit__study {
  position: absolute;
  width: min(31vw, 34rem);
  z-index: 2;
}

.lab-orbit .lab-orbit__study[data-lab-position='1'] {
  left: 1%;
  top: 8%;
}

.lab-orbit .lab-orbit__study[data-lab-position='2'] {
  right: 3%;
  top: 0;
  width: min(24vw, 27rem);
}

.lab-orbit .lab-orbit__study[data-lab-position='3'] {
  left: 39%;
  top: 41%;
  width: min(28vw, 31rem);
}

.lab-orbit .lab-orbit__study video,
.lab-orbit .lab-orbit__study:last-child video {
  aspect-ratio: 1;
  border-radius: 50%;
  filter: saturate(.72) contrast(1.06);
  height: auto;
}

.lab-orbit .lab-orbit__study > span {
  border-color: rgba(242, 240, 232, .38);
}

.lab-orbit__solid {
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  position: absolute;
}

.lab-orbit__solid--one {
  background: #c7ff16;
  left: 31%;
  top: 17%;
  width: clamp(3rem, 8vw, 8rem);
}

.lab-orbit__solid--two {
  background: #5366ff;
  right: 20%;
  top: 52%;
  width: clamp(4rem, 12vw, 13rem);
}

.lab-orbit .lab-teaser__link {
  margin-top: 0;
}

@media (max-width: 64rem) {
  .work-lineup .project-index__row {
    width: 33%;
  }

  .work-lineup .project-index__media {
    grid-column: 5 / 9;
  }

  .featured-band > strong {
    grid-column: 1 / 9;
  }
}

@media (max-width: 48rem) {
  .is-home .site-header {
    color: #fff;
    mix-blend-mode: difference;
  }

  .circulation-hero.reel-hero {
    --reel-height: 470svh !important;
  }

  .circulation-hero .circulation-hero__sticky {
    background:
      radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .25), transparent 28%),
      linear-gradient(180deg, #c6c8c3 0%, #aeb1ac 48%, #8290ed 77%, #c7ff16 100%);
  }

  .circulation-node {
    --node-size: clamp(3.7rem, 19vw, 6.4rem) !important;
  }

  .circulation-node--solid {
    --node-size: clamp(1.5rem, 9vw, 3.4rem) !important;
  }

  .circulation-hero__statement {
    font-size: clamp(3rem, 16vw, 5.7rem);
    line-height: .76;
    white-space: normal;
    width: calc(100% - 2rem);
  }

  .circulation-hero__chrome {
    font-size: .5rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 5.5rem var(--mobile-gutter) 1rem;
  }

  .circulation-hero__index {
    grid-column: 1 / 3;
  }

  .circulation-hero__place {
    display: none;
  }

  .circulation-hero__note {
    grid-column: 3 / -1;
  }

  .circulation-hero__actions {
    display: grid;
    gap: .7rem;
    grid-column: 1 / -1;
  }

  .circulation-hero__actions a {
    min-width: 0;
    width: 100%;
  }

  .circulation-hero__scroll {
    display: none;
  }

  .work-lineup.page-section--work {
    padding-top: 6rem;
  }

  .work-lineup__head {
    display: grid;
    min-height: 70svh;
    padding-bottom: 3rem;
  }

  .work-lineup__head h2 {
    font-size: clamp(5.5rem, 28vw, 9rem);
    grid-column: 1 / -1;
    margin-top: 18svh;
  }

  .work-lineup__head .section-lead {
    font-size: 1rem !important;
    grid-column: 2 / -1;
  }

  .work-lineup .project-index {
    display: block;
    margin-top: 3rem;
  }

  .work-lineup .project-index__row,
  .work-lineup .project-index__row[data-side='right'] {
    margin-left: 0;
    padding: 1rem 0 4rem;
    width: 100%;
  }

  .work-lineup .project-index__row[data-active='false'] {
    opacity: 1;
  }

  .work-lineup .project-index__link {
    font-size: clamp(1.55rem, 7vw, 2.3rem);
  }

  .work-lineup .project-index__media {
    display: none;
  }

  .work-lineup .project-index__row > .project-index__preview,
  .work-lineup .project-index__row[data-scroll-variant] > .project-index__preview {
    aspect-ratio: 1;
    border-radius: 50%;
    clip-path: circle(50%);
    grid-column: 1 / -1;
    height: auto;
    inset: auto;
    justify-self: start;
    margin: 2rem 0 0;
    max-width: 17rem;
    opacity: 1 !important;
    position: relative;
    top: auto;
    transform: none !important;
    width: 72vw;
  }

  .work-lineup .project-index__row[data-side='right'] > .project-index__preview {
    justify-self: end;
  }

  .work-lineup .project-index__row > .project-index__preview::after {
    border: 0;
  }

  .work-lineup__exit.text-link {
    margin-top: 1rem;
  }

  .featured-sequence__head {
    display: block;
    min-height: 78svh;
    padding-top: 7rem;
  }

  .featured-sequence__head h2 {
    font-size: clamp(4.6rem, 23vw, 7.5rem);
    margin-top: 22svh;
  }

  .featured-sequence__head > p:last-child {
    font-size: 1rem;
    margin: 2rem 0 0 25%;
  }

  .featured-band {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 78svh;
    padding: 1rem var(--mobile-gutter);
  }

  .featured-band__number {
    grid-column: 1;
  }

  .featured-band__client {
    grid-column: 2 / -1;
    justify-self: end;
    text-align: right;
  }

  .featured-band > strong {
    align-self: start;
    font-size: clamp(3.2rem, 15vw, 5.4rem);
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 10svh;
    max-width: 7ch;
  }

  .featured-band__media {
    align-self: end;
    grid-column: 2 / -1;
    grid-row: 2;
    width: min(72vw, 25rem);
  }

  .featured-band__open {
    grid-column: 1 / -1;
  }

  .lab-orbit.lab-teaser {
    min-height: auto;
    padding-top: 7rem;
  }

  .lab-orbit__head {
    display: block !important;
  }

  .lab-orbit__head h2 {
    font-size: clamp(6rem, 30vw, 9.5rem);
    margin: 2rem 0;
  }

  .lab-orbit__head > p:last-child {
    font-size: 1rem;
    margin: 0 0 4rem 25%;
  }

  .lab-orbit .lab-orbit__field {
    display: flex;
    gap: 1rem;
    min-height: 0;
    overflow-x: auto;
    padding: 0 var(--mobile-gutter) 2rem;
    scroll-snap-type: x mandatory;
  }

  .lab-orbit .lab-orbit__study,
  .lab-orbit .lab-orbit__study[data-lab-position] {
    flex: 0 0 78vw;
    inset: auto;
    position: relative;
    scroll-snap-align: center;
    width: 78vw;
  }

  .lab-orbit .lab-orbit__study video,
  .lab-orbit .lab-orbit__study:last-child video {
    height: auto;
  }

  .lab-orbit__solid {
    display: none;
  }

  .lab-orbit .lab-teaser__link {
    margin-inline: var(--mobile-gutter);
  }
}

@media (prefers-reduced-motion: reduce) {
  .circulation-hero.reel-hero,
  .circulation-hero.reel-hero[style] {
    height: 100svh !important;
  }

  .circulation-node {
    will-change: auto;
  }

  .featured-band {
    position: relative;
  }

  .featured-band__media img,
  .lab-orbit .lab-orbit__study video {
    transition: none;
  }
}

/* Particle orbit final cascade -----------------------------------------
   This block intentionally follows the legacy circulation rules. The new
   hero and portal reuse their DOM vocabulary but own a different timeline. */
.work-lineup.page-section--work {
  min-height: 240svh;
  overflow: clip;
  padding: 0 var(--layout-gutter) clamp(6rem, 10vw, 10rem);
  position: relative;
}

.work-lineup__head {
  align-items: end;
  border-bottom: 0;
  height: 100svh;
  inset: 0 0 auto;
  min-height: 0;
  padding: clamp(6rem, 10vw, 9rem) 0 clamp(3rem, 6vw, 6rem);
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.work-lineup__head h2 {
  color: rgba(17, 18, 15, .92);
  font-size: clamp(7rem, 18vw, 19rem);
  grid-column: 1 / 10;
}

.work-lineup__head .section-lead {
  grid-column: 9 / -1;
}

.work-lineup__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  perspective: 1400px;
}

.work-lineup .project-index {
  display: contents;
}

.work-lineup .project-index__list {
  padding-top: 100svh;
}

.work-lineup .project-index__portal-track {
  align-self: stretch;
  grid-column: 1 / -1;
  grid-row: 1 / 3;
  min-height: 100%;
  pointer-events: none;
  position: relative;
  z-index: 4;
}

.work-lineup .project-index__portal {
  --portal-spin-y: 0deg;
  aspect-ratio: 1;
  margin-inline: auto;
  perspective: 1100px;
  pointer-events: none;
  position: sticky;
  top: calc(50svh - min(16vw, 15rem));
  transform: rotateY(var(--portal-spin-y));
  transform-style: preserve-3d;
  width: min(32vw, 30rem);
  will-change: transform;
}

.work-lineup .project-index__media {
  --portal-shift-x: 0vw;
  --portal-rotate-y: 0deg;
  aspect-ratio: 1;
  background: #151613;
  border: clamp(.55rem, 1vw, 1rem) solid #bfc1bb;
  border-radius: 50%;
  box-shadow: none;
  grid-column: auto;
  grid-row: auto;
  height: 100%;
  min-height: 0;
  overflow: visible;
  position: relative;
  top: auto;
  transform: translate3d(var(--portal-shift-x), 0, 0) rotateY(var(--portal-rotate-y));
  transform-style: preserve-3d;
  transition:
    transform 720ms cubic-bezier(.65, 0, .35, 1);
  width: 100%;
  z-index: 1;
}

.work-lineup .project-index__portal::before,
.work-lineup .project-index[data-preview-side='left'] .project-index__media,
.work-lineup .project-index[data-preview-side='right'] .project-index__media {
  box-shadow: none;
}

.work-lineup .project-index__row,
.work-lineup .project-index__row[data-side='right'] {
  width: 42%;
}

.work-lineup .project-index__details {
  min-width: 0;
}

.work-lineup .project-index__link {
  font-size: clamp(.95rem, 1.3vw, 1.4rem);
  line-height: .94;
  max-width: none;
  white-space: nowrap;
}

.work-lineup .project-index__row[data-side='right'] .project-index__details {
  text-align: right;
}

.work-lineup .project-index__preview {
  border-radius: 50%;
  inset: clamp(.35rem, .6vw, .65rem);
  overflow: hidden;
  transform: scale(1.035) translateZ(.1px);
}

.work-lineup .project-index__preview[data-active='true'] {
  transform: scale(1) translateZ(.1px);
}

.work-lineup .project-index__media > p {
  bottom: 8%;
  transform: translateX(-50%) translateZ(2rem);
}

.work-lineup__exit.text-link {
  grid-column: 1 / -1;
  grid-row: 2;
}

@media (max-width: 48rem) {
  .particle-orbit-hero.reel-hero {
    --reel-height: 960svh !important;
  }

  .logo-particle {
    height: calc(clamp(9px, 2.8vw, 12px) + var(--particle-mobile-variance, 0px));
    width: calc(clamp(9px, 2.8vw, 12px) + var(--particle-mobile-variance, 0px));
  }

  .work-lineup.page-section--work {
    min-height: auto;
    padding: 0 var(--mobile-gutter) 4rem;
  }

  .work-lineup__head {
    height: 82svh;
    min-height: 0;
    padding: 6rem 0 3rem;
  }

  .work-lineup__head h2 {
    margin-top: 16svh;
  }

  .work-lineup .project-index {
    display: contents;
  }

  .work-lineup .project-index__list {
    padding-top: 82svh;
  }

  .work-lineup .project-index__portal-track {
    display: block;
  }

  .work-lineup .project-index__portal {
    display: block;
    top: calc(50svh - min(29vw, 8.5rem));
    width: min(58vw, 17rem);
  }

  .work-lineup .project-index__media {
    display: block;
  }

  .work-lineup .project-index__row,
  .work-lineup .project-index__row[data-side='right'] {
    min-height: clamp(7.5rem, 29svh, 14rem);
    padding: 1rem 0;
    width: 47%;
  }

  .work-lineup .project-index__row[data-side='right'] {
    margin-left: auto;
  }

  .work-lineup .project-index__link {
    font-size: clamp(.72rem, 3.4vw, .92rem);
    white-space: nowrap;
  }

  .work-lineup .project-index__row > .project-index__preview {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .particle-orbit-hero.reel-hero,
  .particle-orbit-hero.reel-hero[style] {
    height: 100svh !important;
  }

  .work-lineup .project-index__media,
  .work-lineup .project-index__row {
    transition: none;
  }

  .work-lineup .project-index__portal {
    transform: none;
  }
}

/* Reconstructed-home cascade guard: this must remain the final rule set. */
.is-home .reference-hero.reel-hero,
.is-home .reference-hero.reel-hero[style] {
  height: var(--reel-height, 679.2svh) !important;
  margin-inline: calc(var(--layout-gutter) * -1);
  width: calc(100% + var(--layout-gutter) * 2);
}

.is-home .reference-hero .reference-hero__sticky {
  background:
    radial-gradient(circle at 1px 1px, rgba(18, 19, 16, .1) 1.15px, transparent 1.45px) 0 0 / 52px 52px,
    linear-gradient(180deg, #c5c6c4 0%, #c5c6c4 57%, #d7a49e 78%, #ff6a2c 100%);
  height: 100svh;
}

.is-home .work-lineup.page-section--work {
  background:
    radial-gradient(circle at 1px 1px, rgba(18, 19, 16, .1) 1.15px, transparent 1.45px) 0 0 / 52px 52px,
    #c5c6c4;
  color: #171814;
  margin-inline: calc(var(--layout-gutter) * -1);
  min-height: 190svh;
  padding: 0 var(--layout-gutter);
}

.is-home .work-lineup__head {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.is-home .work-lineup__body {
  min-height: inherit;
}

.is-home .work-lineup__exit.text-link {
  border: 0;
  bottom: 1.4rem;
  margin: 0;
  position: absolute;
}

@media (max-width: 48rem) {
  .is-home .reference-hero.reel-hero,
  .is-home .reference-hero.reel-hero[style] {
    --reel-height: 520svh !important;
    margin-inline: calc(var(--mobile-gutter) * -1);
    width: calc(100% + var(--mobile-gutter) * 2);
  }

  .is-home .reference-hero .reference-hero__sticky {
    background-size: 32px 32px, 100% 100%;
  }

  .is-home .work-lineup.page-section--work {
    margin-inline: calc(var(--mobile-gutter) * -1);
    min-height: auto;
    padding: 0;
  }

  .is-home .work-lineup .reference-index {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    min-height: auto;
    width: 100%;
  }

  .is-home .work-lineup .reference-index .project-index__portal-track {
    display: block;
    grid-column: 1;
    grid-row: 1;
    min-height: 100%;
    width: 100%;
  }

  .is-home .work-lineup .reference-index .project-index__portal {
    display: block;
    margin-inline: auto;
    top: 5rem;
    width: min(82vw, 22rem);
  }

  .is-home .work-lineup .reference-index .project-index__list {
    display: block;
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding: calc(min(82vw, 22rem) + 13rem) var(--mobile-gutter) 36svh;
    width: 100%;
  }

  .is-home .work-lineup .reference-index .project-index__row,
  .is-home .work-lineup .reference-index .project-index__row[data-side='left'],
  .is-home .work-lineup .reference-index .project-index__row[data-side='right'] {
    justify-content: flex-start;
    margin-left: 0;
    min-height: clamp(3.25rem, 14vw, 4.2rem);
    padding: 0;
    text-align: left;
    transform: none;
    width: 100%;
  }

  .is-home .work-lineup .reference-index .project-index__link {
    font-size: clamp(1.35rem, 6.15vw, 2rem);
    line-height: .92;
    max-width: none;
    padding-left: 1.42em;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-home .reference-hero.reel-hero,
  .is-home .reference-hero.reel-hero[style] {
    height: 100svh !important;
  }
}