:root {
  --page-bg: #f7f7f4;
  --ink: #080808;
  --margin: 30px;
  --content-width: calc(100vw - (var(--margin) * 2));
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
video {
  display: block;
  width: 100%;
}

.detail-nav {
  position: fixed;
  left: var(--margin);
  right: var(--margin);
  top: 26px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  background: rgba(247, 247, 244, .88);
  backdrop-filter: blur(12px);
}

.detail-logo img {
  width: auto;
  height: 27px;
}

.detail-nav nav {
  display: flex;
  gap: 30px;
  font-size: 14px;
  font-weight: 800;
}

.global-nav {
  position: fixed;
  left: var(--margin);
  right: var(--margin);
  top: 32px;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  color: #fff;
  mix-blend-mode: difference;
}

.global-logo {
  display: block;
  pointer-events: auto;
  color: inherit;
}

.global-logo svg {
  display: block;
  width: auto;
  height: 27px;
  fill: currentColor;
}

.global-nav nav {
  display: flex;
  justify-content: flex-end;
  gap: 32px;
  color: inherit;
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
  pointer-events: auto;
}

.hero-nav-invert-mask,
.hero-fluid-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1080px;
  pointer-events: none;
  overflow: hidden;
  opacity: var(--hero-mask-visibility, 1);
  transition: opacity .12s linear;
}

.hero-nav-invert-mask { display: none; }
.hero-fluid-mask { z-index: 36; }

.hero-nav-invert-svg,
.hero-fluid-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-nav-fluid-blob,
.hero-nav-fluid-metaballs,
.hero-fluid-video-blob,
.hero-fluid-video-metaballs { fill: #fff; }

.hero-fluid-blob,
.hero-fluid-metaballs { fill: #000; }

.hero-fluid-blob,
.hero-fluid-video-blob { fill-rule: nonzero; }

.hero-nav-invert-object,
.hero-fluid-video-object { width: 100%; height: 100%; }

.hero-nav-invert-content {
  position: relative;
  width: 100vw;
  height: 1080px;
}

.hero-nav-invert-logo {
  position: absolute;
  left: var(--margin);
  top: 32px;
  color: #fff;
}

.hero-nav-invert-logo svg {
  display: block;
  width: auto;
  height: 27px;
  fill: currentColor;
}

.hero-nav-invert-content nav {
  position: absolute;
  left: var(--mask-nav-left, 0px);
  top: var(--mask-nav-top, 0px);
  display: flex;
  justify-content: flex-end;
  gap: 32px;
  color: #fff;
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.hero-fluid-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-hero {
  position: relative;
  min-height: 1080px;
  padding: 0 var(--margin);
}

.project-hero h1 {
  position: absolute;
  left: var(--margin);
  top: 170px;
  margin: 0;
  font-size: clamp(34px, 3.945vw, 76px);
  font-weight: 450;
  line-height: .79;
  letter-spacing: -.075em;
  text-align: left;
  z-index: 52;
  color: #fff;
  mix-blend-mode: difference;
}

.project-part {
  position: absolute;
  right: var(--margin);
  top: 170px;
  margin: 0;
  font-size: clamp(34px, 3.945vw, 76px);
  font-weight: 450;
  line-height: .79;
  letter-spacing: -.075em;
  white-space: nowrap;
  z-index: 52;
  color: #fff;
  mix-blend-mode: difference;
}

.project-introduction {
  position: absolute;
  left: var(--margin);
  bottom: 170px;
  display: grid;
  grid-template-columns: 240px 430px;
  gap: 44px;
  align-items: start;
  z-index: 52;
  color: #fff;
  mix-blend-mode: difference;
}

.section-label,
.gallery-note span,
.project-credits span,
.next-project > span {
  display: block;
  margin-bottom: 14px;
  color: rgba(0, 0, 0, .46);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
}

.project-introduction p {
  margin: 0;
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: -.04em;
}

.hero-project-card {
  position: absolute;
  right: 0;
  bottom: 170px;
  width: 45.25vw;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0;
  display: block;
  background: transparent;
  color: #000;
  z-index: 52;
}

.hero-project-card img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.hero-project-card figcaption {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 950;
}

.project-cover {
  width: 100%;
  height: 100vh;
  min-height: 720px;
  margin: 0;
  overflow: hidden;
  background: #111;
}

.project-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.concept-section {
  min-height: 850px;
  padding: 150px var(--margin);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
}

.concept-copy {
  max-width: 1040px;
}

.concept-copy > p:first-child {
  max-width: 820px;
  margin: 0;
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -.045em;
}

.concept-statement {
  margin: 180px 0 0;
  font-size: clamp(62px, 6vw, 116px);
  font-weight: 450;
  line-height: .92;
  letter-spacing: -.065em;
}

.project-gallery {
  padding: 0 var(--margin) 220px;
}

.gallery-frame {
  margin: 0;
  overflow: hidden;
  background: #e4e4df;
}

.gallery-frame img,
.gallery-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-full {
  width: 100%;
  height: min(78vw, 1120px);
}

.gallery-pair {
  display: grid;
  gap: 30px;
  margin-top: 220px;
}

.gallery-pair-asymmetric {
  grid-template-columns: 1.42fr .88fr;
  align-items: end;
}

.gallery-pair-asymmetric .gallery-frame:first-child {
  height: 890px;
}

.gallery-pair-asymmetric .gallery-frame:last-child {
  height: 650px;
}

.gallery-dark {
  padding: 28px;
  background: #050505;
}

.gallery-note {
  width: 42%;
  margin: 170px 0 170px 50%;
}

.gallery-note p {
  margin: 0;
  font-size: 31px;
  line-height: 1.08;
  letter-spacing: -.04em;
}

.gallery-wide {
  width: 72%;
  height: 760px;
  margin-left: auto;
}

.gallery-pair-equal {
  grid-template-columns: 1fr 1fr;
}

.gallery-tall {
  height: 1040px;
}

.gallery-video {
  width: 78%;
  height: 860px;
  margin: 240px auto 0;
  background: #000;
}

.gallery-last {
  margin-top: 240px;
}

.project-credits {
  min-height: 620px;
  padding: 130px var(--margin);
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(0, 0, 0, .22);
}

.photo-wall {
  position: relative;
  z-index: 52;
  margin: -40px var(--margin) 0;
  padding: 24px 0 0;
}

.photo-wall-item {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  overflow: hidden;
  background: transparent;
  opacity: 0;
}

.photo-wall.is-laid-out .photo-wall-item {
  opacity: 1;
}

.photo-wall-item img,
.photo-wall-item video {
  display: block;
  width: 100%;
  height: auto;
}

.photo-wall-item video {
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Generic project-detail motion system. New text and media added to <main>
   inherit the same scroll reveal automatically; fixed navigation and the
   closing LIGHTWU module are deliberately outside this system. */
.detail-reveal-text {
  --detail-reveal-progress: 1;
  transform: translate3d(0, calc((1 - var(--detail-reveal-progress)) * 26px), 0);
  clip-path: inset(0 0 calc((1 - var(--detail-reveal-progress)) * 100%) 0);
  will-change: transform, clip-path;
}

.detail-media-frame {
  --detail-reveal-progress: 1;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  will-change: clip-path;
}

.detail-media-frame[data-reveal-anchor="left"] {
  clip-path: inset(
    calc((1 - var(--detail-reveal-progress)) * 100%)
    calc((1 - var(--detail-reveal-progress)) * 100%)
    0 0
  );
  transform-origin: 0 100%;
}

.detail-media-frame[data-reveal-anchor="center"] {
  clip-path: inset(
    calc((1 - var(--detail-reveal-progress)) * 100%)
    calc((1 - var(--detail-reveal-progress)) * 50%)
    0
    calc((1 - var(--detail-reveal-progress)) * 50%)
  );
  transform-origin: 50% 100%;
}

.detail-media-frame[data-reveal-anchor="right"] {
  clip-path: inset(
    calc((1 - var(--detail-reveal-progress)) * 100%)
    0 0
    calc((1 - var(--detail-reveal-progress)) * 100%)
  );
  transform-origin: 100% 100%;
}

.detail-media-frame > img,
.detail-media-frame > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, var(--detail-media-parallax-y, 0px), 0) scale(1.08);
  transform-origin: 50% 50%;
  will-change: transform;
}

.hero-project-card > .detail-media-frame {
  min-height: 0;
}

.waterfall-gallery {
  padding: 130px var(--margin) 260px;
  overflow: hidden;
}

.waterfall-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.waterfall-row + .waterfall-row {
  margin-top: 170px;
}

.waterfall-item {
  margin: 0;
  overflow: hidden;
  background: #e4e4df;
}

.waterfall-item img,
.waterfall-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.waterfall-dark {
  padding: 26px;
  background: #050505;
}

.waterfall-row-a .waterfall-landscape {
  width: 58%;
  height: 760px;
}

.waterfall-row-a .waterfall-portrait {
  width: 31%;
  height: 680px;
  margin-top: 250px;
}

.waterfall-row-b {
  min-height: 1080px;
}

.waterfall-row-b .waterfall-narrow {
  width: 31%;
  height: 850px;
  margin-top: 170px;
}

.waterfall-note {
  width: 23%;
  margin-top: 30px;
}

.waterfall-note span {
  display: block;
  margin-bottom: 14px;
  color: rgba(0, 0, 0, .46);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
}

.waterfall-note p {
  margin: 0;
  font-size: 29px;
  line-height: 1.08;
  letter-spacing: -.04em;
}

.waterfall-row-b .waterfall-wide {
  width: 38%;
  height: 610px;
  margin-top: 420px;
}

.waterfall-row-c .waterfall-square {
  width: 42%;
  height: 760px;
}

.waterfall-row-c .waterfall-tall {
  width: 47%;
  height: 1020px;
  margin-top: 230px;
}

.waterfall-row-d {
  min-height: 1100px;
}

.waterfall-row-d .waterfall-video {
  width: 62%;
  height: 760px;
  margin-top: 230px;
  background: #000;
}

.waterfall-row-d .waterfall-offset {
  width: 28%;
  height: 830px;
}

.waterfall-finale {
  width: 78%;
  height: 900px;
  margin: 230px auto 0;
}

.project-credits > a {
  font-size: 36px;
  font-weight: 700;
}

.project-credits > div {
  justify-self: end;
  width: 62%;
}

.project-credits p {
  margin: 0;
  font-size: 21px;
  line-height: 1.45;
}

.next-project {
  min-height: 1080px;
  padding: 80px var(--margin);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #050505;
  color: #fff;
}

.next-project > span {
  color: rgba(255, 255, 255, .48);
}

.next-project > a {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font-size: clamp(105px, 12vw, 230px);
  font-weight: 500;
  line-height: .78;
  letter-spacing: -.075em;
}

.next-project b {
  font-size: .45em;
}

.detail-footer {
  min-height: 780px;
  padding: 110px var(--margin) 35px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr auto;
  background: #050505;
  color: #fff;
}

.detail-footer > p {
  margin: 0;
  font-size: clamp(80px, 9vw, 170px);
  line-height: .84;
  letter-spacing: -.065em;
}

.detail-footer > a {
  align-self: start;
  justify-self: end;
  padding: 18px 22px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
}

.detail-footer > div {
  grid-column: 1 / -1;
  align-self: end;
  font-size: 13px;
}

.detail-ending {
  min-height: 0;
  margin: 0 var(--margin);
  padding: 0;
  display: block;
  background: var(--page-bg);
  color: var(--ink);
  border-top: 0;
}

.ending-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 30px;
  min-height: 0;
}

.detail-contact-section {
  position: relative;
  height: auto;
  padding: 60px 0 26px;
  background: var(--page-bg);
  color: var(--ink);
  overflow: visible;
  --contact-copy-top: 170px;
  --contact-title-block: 190.4px;
  --contact-actions-gap: 44px;
}

.contact-copy {
  position: absolute;
  left: 0;
  top: var(--contact-copy-top);
  transform: translateY(30px);
}

.contact-copy h2 {
  margin: 0;
  font-size: 97.24px;
  font-weight: 300;
  line-height: .98;
  letter-spacing: .0043008em;
}

.contact-actions {
  display: flex;
  gap: 18px;
  margin-top: 44px;
}

.contact-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 214px;
  height: 62px;
  padding: 0 26px;
  border: 2px solid rgba(0, 0, 0, .36);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 480;
}

.contact-actions a span { font-size: 1.15em; }

.contact-social {
  position: absolute;
  right: 17vw;
  top: calc(var(--contact-copy-top) + var(--contact-title-block) + var(--contact-actions-gap));
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 28.8px;
  font-weight: 400;
  line-height: 1.02;
  transform: translateY(30px);
}

.contact-logo {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  display: block;
  transform: none;
}

.contact-logo-letter {
  transform-box: view-box;
  transform-origin: var(--letter-origin-x) 65px;
  pointer-events: bounding-box;
}

.contact-logo-letter image { pointer-events: none; }
.contact-logo-letter rect { fill: transparent; pointer-events: all; }
.contact-logo-letter.is-bouncing { animation: contact-logo-letter-bounce 1333ms cubic-bezier(.2, .82, .24, 1) both; }

@keyframes contact-logo-letter-bounce {
  0% { transform: scale(1); }
  34% { transform: scale(.04); }
  68% { transform: scale(1.075); }
  84% { transform: scale(.975); }
  100% { transform: scale(1); }
}

.site-endnote {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  align-items: center;
  gap: 28px;
  color: rgba(0, 0, 0, .9);
  font-size: 17px;
  font-weight: 420;
  line-height: 1;
  margin-top: 70px;
  transform: none;
}

.site-endnote p { margin: 0; }
.site-endnote p:nth-child(2) { justify-self: center; }
.site-endnote p:nth-child(3) { justify-self: end; }

.site-endnote-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 24px;
  border-radius: 4px;
  background: #000;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.ending-head > a {
  font-size: 42px;
  line-height: 1;
  letter-spacing: -.045em;
}

.ending-head > a span {
  margin-left: 12px;
  font-size: .45em;
  vertical-align: middle;
}

.ending-head p {
  margin: 0;
  font-size: 17px;
  font-weight: 420;
  line-height: 1;
}

.ending-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
}

.ending-callout h2 {
  margin: 0 0 44px;
  font-size: clamp(74px, 6.1vw, 118px);
  font-weight: 450;
  line-height: .92;
  letter-spacing: -.055em;
}

.ending-actions {
  display: flex;
  gap: 18px;
}

.ending-actions a {
  min-width: 205px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(0, 0, 0, .5);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}

.ending-social {
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: column;
}

.ending-social a {
  font-size: 29px;
  line-height: 1.16;
  letter-spacing: -.035em;
}

.ending-logo {
  width: 100%;
  height: auto;
  margin: 12px 0 70px;
}

.ending-foot {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  font-size: 12px;
}

.ending-foot p {
  margin: 0;
}

.ending-foot p:nth-child(2) {
  justify-self: center;
}

.ending-foot p:last-child {
  justify-self: end;
}

.ending-foot b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 20px;
  margin-left: 18px;
  border-radius: 3px;
  background: #000;
  color: #fff;
  font-size: 10px;
}

@media (max-width: 900px) {
  :root { --margin: 18px; }
  .detail-nav nav { gap: 14px; font-size: 11px; }
  .detail-nav nav a:nth-child(2),
  .detail-nav nav a:nth-child(3) { display: none; }
  .project-hero { min-height: 980px; }
  .project-hero h1 { top: 145px; }
  .project-part { top: 285px; }
  .project-introduction { bottom: 510px; grid-template-columns: 1fr; gap: 18px; }
  .project-introduction p { max-width: 520px; font-size: 20px; }
  .hero-project-card { right: 0; bottom: 80px; width: calc(100% - var(--margin)); padding: 0; }
  .hero-project-card figcaption { font-size: 9px; }
  .concept-section { grid-template-columns: 1fr; }
  .concept-copy > p:first-child { font-size: 29px; }
  .gallery-pair { margin-top: 90px; gap: 12px; }
  .gallery-pair-asymmetric { grid-template-columns: 1fr; }
  .gallery-pair-asymmetric .gallery-frame:first-child,
  .gallery-pair-asymmetric .gallery-frame:last-child { height: 62vh; }
  .gallery-note { width: 80%; margin: 90px 0 90px 20%; }
  .gallery-wide, .gallery-video { width: 100%; height: 60vh; margin-top: 100px; }
  .gallery-tall { height: 65vh; }
  .project-credits { grid-template-columns: 1fr; gap: 90px; }
  .project-credits > div { justify-self: start; width: 100%; }
  .next-project { min-height: 760px; }
  .detail-footer { grid-template-columns: 1fr; gap: 70px; }
  .detail-footer > a { justify-self: start; }
  .waterfall-gallery { padding-top: 70px; padding-bottom: 120px; }
  .waterfall-row,
  .waterfall-row-b,
  .waterfall-row-d { min-height: 0; flex-direction: column; gap: 70px; }
  .waterfall-row + .waterfall-row { margin-top: 70px; }
  .waterfall-row .waterfall-item,
  .waterfall-row-a .waterfall-landscape,
  .waterfall-row-a .waterfall-portrait,
  .waterfall-row-b .waterfall-narrow,
  .waterfall-row-b .waterfall-wide,
  .waterfall-row-c .waterfall-square,
  .waterfall-row-c .waterfall-tall,
  .waterfall-row-d .waterfall-video,
  .waterfall-row-d .waterfall-offset,
  .waterfall-finale {
    width: 100%;
    height: 62vh;
    margin: 0;
  }
  .waterfall-note { width: 82%; margin: 0 0 0 18%; }
  .photo-wall { padding-top: 16px; padding-bottom: 0; }
  .detail-ending { min-height: 820px; }
  .ending-head > a { font-size: 30px; }
  .ending-content { grid-template-columns: 1fr; gap: 60px; padding: 70px 0; }
  .ending-social { justify-self: start; }
  .ending-social a { font-size: 24px; }
  .ending-actions { flex-wrap: wrap; }
  .ending-logo { margin-bottom: 50px; }
  .ending-foot { grid-template-columns: 1fr; gap: 10px; }
  .ending-foot p:nth-child(2),
  .ending-foot p:last-child { justify-self: start; }
}