:root {
  --rook-projects-dark: #11110f;
  --rook-projects-paper: #eee9df;
  --rook-projects-paper-soft: #f5f2eb;
  --rook-projects-ink: #191815;
  --rook-projects-pad: clamp(22px, 4vw, 68px);
  --rook-projects-serif: "Libre Caslon Display", Georgia, serif;
  --rook-projects-sans: "DM Sans", Arial, sans-serif;
  --rook-projects-ease: cubic-bezier(.22, 1, .36, 1);
}

.rook-projects-page,
.rook-projects-page * { box-sizing: border-box; }

.rook-projects-page {
  width: 100%;
  margin: 0;
  overflow-x: clip;
  background: var(--rook-projects-dark);
  color: var(--rook-projects-paper);
  font-family: var(--rook-projects-sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

.rook-projects-page main { display: block; width: 100%; margin: 0; }
.rook-projects-page a { color: inherit; text-decoration: none; }
.rook-projects-page img,
.rook-projects-page canvas { display: block; }

.projects-eyebrow {
  display: block;
  font: 500 11px/1 var(--rook-projects-sans);
  letter-spacing: .21em;
  text-transform: uppercase;
}

/* Selected-project scroll journey */
.project-journey {
  position: relative;
  height: 1420vh;
  height: 1420svh;
  background: var(--rook-projects-dark);
}

.journey-snap-marker {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

@media (max-width: 820px) {
  html.rook-projects-mobile-snap,
  html.rook-projects-mobile-snap body,
  html.rook-projects-mobile-snap #wrapwrap {
    scroll-snap-type: y mandatory;
  }
}

.journey-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--rook-projects-dark);
}

.featured-canvas,
.featured-shade,
.archive-transition,
.archive-mosaic {
  position: absolute;
  inset: 0;
}

.featured-canvas {
  z-index: 1;
  width: 100%;
  height: 100%;
  background: var(--rook-projects-dark);
  transition: transform .76s var(--rook-projects-ease);
  transform-origin: center;
}

.featured-shade {
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(17, 17, 15, .38), transparent 46%),
    linear-gradient(0deg, rgba(17, 17, 15, .44), transparent 31%, transparent 74%, rgba(17, 17, 15, .14));
}

.journey-intro {
  position: absolute;
  z-index: 7;
  top: 50%;
  left: var(--rook-projects-pad);
  width: min(1180px, calc(100vw - 2 * var(--rook-projects-pad)));
  transform: translateY(-48%);
  will-change: opacity;
}

.journey-intro .projects-eyebrow {
  margin-bottom: clamp(32px, 4vw, 58px);
  color: rgba(238, 233, 223, .52);
}

.journey-intro h1 {
  max-width: 1180px;
  margin: 0;
  font: 400 clamp(76px, 10vw, 158px)/.87 var(--rook-projects-serif);
  letter-spacing: -.055em;
}

.journey-intro > p,
.archive-intro-copy > p {
  width: min(480px, 42vw);
  margin: clamp(44px, 5vw, 76px) 4vw 0 auto;
  color: rgba(238, 233, 223, .68);
  font: 300 clamp(15px, 1.3vw, 19px)/1.75 var(--rook-projects-sans);
}

.projects-scroll-cue {
  position: absolute;
  z-index: 8;
  right: var(--rook-projects-pad);
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(238, 233, 223, .52);
  font-size: 8px;
  letter-spacing: .2em;
}

.projects-scroll-cue i {
  position: relative;
  display: block;
  width: 42px;
  height: 1px;
  overflow: hidden;
  background: rgba(238, 233, 223, .2);
}

.projects-scroll-cue i::after {
  position: absolute;
  inset: 0;
  content: "";
  background: var(--rook-projects-paper);
  animation: rook-projects-cue 2s var(--rook-projects-ease) infinite;
  transform: translateX(-100%);
}

@keyframes rook-projects-cue { 50%, 100% { transform: translateX(100%); } }

.featured-item {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

.featured-source {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.featured-item:first-of-type .featured-source { object-position: center 36%; }

.featured-copy {
  position: absolute;
  z-index: 7;
  left: var(--rook-projects-pad);
  bottom: clamp(74px, 10vh, 116px);
  width: min(1160px, calc(100vw - 2 * var(--rook-projects-pad)));
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 42px, 0);
  pointer-events: none;
  will-change: opacity, transform, clip-path;
}

.featured-copy > span {
  display: block;
  margin-bottom: 20px;
  color: rgba(238, 233, 223, .62);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.featured-copy h2 {
  margin: 0;
  font: 400 clamp(76px, 10vw, 158px)/.88 var(--rook-projects-serif);
  letter-spacing: -.055em;
}

.featured-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 20px;
  color: rgba(238, 233, 223, .72);
  font-size: clamp(9px, .85vw, 12px);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.featured-meta p { margin: 0; }
.featured-meta p:last-child { color: rgba(238, 233, 223, .5); }

.featured-copy > a,
.projects-cta > a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 25px;
  padding-bottom: 7px;
  border-bottom: 1px solid currentColor;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .17em;
}

.featured-copy a i,
.projects-cta a i { font-style: normal; transition: transform .45s var(--rook-projects-ease); }
.featured-copy a:hover i,
.projects-cta a:hover i { transform: translate(4px, -4px); }

.journey-progress {
  position: absolute;
  z-index: 9;
  right: var(--rook-projects-pad);
  bottom: 26px;
  left: var(--rook-projects-pad);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  opacity: 0;
  pointer-events: none;
}

.journey-progress > i {
  position: relative;
  height: 2px;
  overflow: hidden;
  background: rgba(238, 233, 223, .24);
}

.journey-progress > i > span {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--rook-projects-paper-soft);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* Mosaic transition from the fourth selected project into the archive. */
.archive-transition {
  z-index: 7;
  display: grid;
  align-items: center;
  padding: clamp(112px, 12vw, 180px) var(--rook-projects-pad) clamp(74px, 8vw, 120px);
  overflow: hidden;
  background: transparent;
  color: var(--rook-projects-ink);
  opacity: 0;
  visibility: hidden;
}

.archive-transition.is-complete { background: var(--rook-projects-paper); }

.archive-intro-copy {
  position: relative;
  z-index: 8;
  width: min(1180px, 92vw);
  opacity: 0;
  transform: translate3d(0, 74px, 0);
}

.archive-intro-copy .projects-eyebrow {
  margin-bottom: clamp(30px, 4vw, 58px);
  color: rgba(25, 24, 21, .52);
}

.archive-intro-copy h2 {
  margin: 0;
  font: 400 clamp(76px, 10vw, 158px)/.87 var(--rook-projects-serif);
  letter-spacing: -.055em;
}

.archive-intro-copy > p {
  color: rgba(25, 24, 21, .68);
}

.archive-mosaic {
  z-index: 6;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: opacity;
}

.image-load-failed .featured-canvas {
  background: var(--rook-projects-dark) url("/rook_projects/static/src/img/projects/planes-of-paradise-hero.jpg") center 36% / cover no-repeat;
}

/* All projects */
.all-projects {
  position: relative;
  z-index: 10;
  padding: clamp(110px, 14vw, 220px) var(--rook-projects-pad) clamp(120px, 15vw, 240px);
  background: var(--rook-projects-paper);
  color: var(--rook-projects-ink);
}

.project-archive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(88px, 11vw, 176px) clamp(22px, 4vw, 68px);
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  perspective: 1600px;
}

.archive-card {
  --media-from: translate3d(0, 110px, 0) scale(.96);
  --media-clip-from: inset(0 0 100% 0);
  --media-clip-to: inset(0);
  --media-filter-from: blur(0) saturate(1);
  --media-origin: 50% 50%;
  --media-duration: 1.55s;
  --text-from: translate3d(0, 46px, 0);
  --text-clip-from: inset(0 0 100% 0);
  --text-clip-to: inset(0);
  --text-filter-from: blur(0);
  --text-duration: 1.08s;
  --text-delay: .48s;
  min-width: 0;
  color: inherit;
  content-visibility: auto;
  contain-intrinsic-size: 720px;
  perspective: 1600px;
}

.archive-card-inner {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.archive-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #c8c0b4;
  opacity: 0;
  clip-path: var(--media-clip-from);
  filter: var(--media-filter-from);
  transform: var(--media-from);
  transform-origin: var(--media-origin);
  transition:
    opacity 1.12s var(--rook-projects-ease),
    transform var(--media-duration) var(--rook-projects-ease),
    clip-path var(--media-duration) var(--rook-projects-ease),
    filter 1.3s var(--rook-projects-ease);
  will-change: opacity, transform, clip-path, filter;
}

.archive-card:nth-child(4n + 2) .archive-media,
.archive-card:nth-child(4n + 3) .archive-media { aspect-ratio: 4 / 3.35; }

.archive-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.035);
  transition: transform 1.25s var(--rook-projects-ease), filter .9s var(--rook-projects-ease);
}

.archive-card.is-visible .archive-media {
  opacity: 1;
  clip-path: var(--media-clip-to);
  filter: blur(0) saturate(1);
  transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg) scale(1);
}

.archive-card.is-visible .archive-media img { transform: scale(1); }

.archive-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: end;
  gap: 22px;
  padding-top: 22px;
  opacity: 0;
  clip-path: var(--text-clip-from);
  filter: var(--text-filter-from);
  transform: var(--text-from);
  transform-origin: 50% 50%;
  transition:
    opacity .96s var(--rook-projects-ease) var(--text-delay),
    transform var(--text-duration) var(--rook-projects-ease) var(--text-delay),
    clip-path var(--text-duration) var(--rook-projects-ease) var(--text-delay),
    filter .96s var(--rook-projects-ease) var(--text-delay);
  will-change: opacity, transform, clip-path, filter;
}

.archive-card.is-visible .archive-meta {
  opacity: 1;
  clip-path: var(--text-clip-to);
  filter: blur(0);
  transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg) scale(1);
}

/* Motion study: every remaining project deliberately tests a different image
   entrance and a different attached-text entrance. */
.archive-card:nth-child(1) {
  --media-from: translate3d(0, 150px, 0) scale(.94);
  --text-from: translate3d(0, 62px, 0);
}
.archive-card:nth-child(2) {
  --media-from: translate3d(-150px, 0, 0) scale(.98);
  --media-clip-from: inset(0 0 0 100%);
  --text-from: translate3d(90px, 0, 0);
  --text-clip-from: inset(0 100% 0 0);
}
.archive-card:nth-child(3) {
  --media-from: translate3d(150px, 0, 0) scale(.98);
  --media-clip-from: inset(0 100% 0 0);
  --text-from: translate3d(-90px, 0, 0);
  --text-clip-from: inset(0 0 0 100%);
}
.archive-card:nth-child(4) {
  --media-from: translate3d(0, 0, 0) scale(1.24);
  --media-clip-from: inset(0);
  --media-filter-from: blur(12px) saturate(.72);
  --text-from: translate3d(0, 32px, 0) scale(.88);
  --text-filter-from: blur(9px);
}
.archive-card:nth-child(5) {
  --media-from: translate3d(0, 0, 0) scale(.7);
  --media-clip-from: inset(12% 12% 12% 12%);
  --media-origin: 50% 50%;
  --text-from: translate3d(0, 0, 0) scale(1.22);
  --text-filter-from: blur(7px);
}
.archive-card:nth-child(6) {
  --media-from: translate3d(0, 90px, 0) rotateX(82deg) scale(.96);
  --media-clip-from: inset(0);
  --media-origin: 50% 100%;
  --text-from: translate3d(0, -48px, 0) rotateX(-48deg);
  --text-clip-from: inset(100% 0 0 0);
}
.archive-card:nth-child(7) {
  --media-from: translate3d(0, -90px, 0) rotateX(-82deg) scale(.96);
  --media-clip-from: inset(0);
  --media-origin: 50% 0;
  --text-from: translate3d(0, 54px, 0) rotateX(48deg);
  --text-clip-from: inset(0 0 100% 0);
}
.archive-card:nth-child(8) {
  --media-from: translate3d(-85px, 0, 0) rotateY(-76deg) scale(.94);
  --media-clip-from: inset(0);
  --media-origin: 0 50%;
  --text-from: translate3d(70px, 0, 0) rotateY(38deg);
  --text-clip-from: inset(0 100% 0 0);
}
.archive-card:nth-child(9) {
  --media-from: translate3d(85px, 0, 0) rotateY(76deg) scale(.94);
  --media-clip-from: inset(0);
  --media-origin: 100% 50%;
  --text-from: translate3d(-70px, 0, 0) rotateY(-38deg);
  --text-clip-from: inset(0 0 0 100%);
}
.archive-card:nth-child(10) {
  --media-from: translate3d(-130px, -100px, 0) scale(.88);
  --media-clip-from: polygon(0 0, 0 0, 0 0, 0 0);
  --media-clip-to: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  --text-from: translate3d(70px, 54px, 0) rotateZ(3deg);
  --text-clip-from: inset(0 100% 100% 0);
}
.archive-card:nth-child(11) {
  --media-from: translate3d(130px, -100px, 0) scale(.88);
  --media-clip-from: polygon(100% 0, 100% 0, 100% 0, 100% 0);
  --media-clip-to: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  --text-from: translate3d(-70px, 54px, 0) rotateZ(-3deg);
  --text-clip-from: inset(0 0 100% 100%);
}
.archive-card:nth-child(12) {
  --media-from: translate3d(-130px, 100px, 0) scale(.88);
  --media-clip-from: polygon(0 100%, 0 100%, 0 100%, 0 100%);
  --media-clip-to: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  --text-from: translate3d(68px, -48px, 0) rotateZ(-3deg);
  --text-clip-from: inset(100% 100% 0 0);
}
.archive-card:nth-child(13) {
  --media-from: translate3d(130px, 100px, 0) scale(.88);
  --media-clip-from: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%);
  --media-clip-to: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  --text-from: translate3d(-68px, -48px, 0) rotateZ(3deg);
  --text-clip-from: inset(100% 0 0 100%);
}
.archive-card:nth-child(14) {
  --media-from: translate3d(0, 70px, 0) rotateZ(-9deg) scale(.82);
  --media-clip-from: inset(0);
  --media-origin: 0 100%;
  --text-from: translate3d(34px, 46px, 0) rotateZ(7deg);
}
.archive-card:nth-child(15) {
  --media-from: translate3d(0, 70px, 0) rotateZ(9deg) scale(.82);
  --media-clip-from: inset(0);
  --media-origin: 100% 100%;
  --text-from: translate3d(-34px, 46px, 0) rotateZ(-7deg);
}
.archive-card:nth-child(16) {
  --media-from: translate3d(-90px, 50px, 0) skewX(-14deg) scale(.94);
  --media-clip-from: inset(0 0 0 46%);
  --text-from: translate3d(75px, 0, 0) skewX(12deg);
  --text-clip-from: inset(0 100% 0 0);
}
.archive-card:nth-child(17) {
  --media-from: translate3d(90px, 50px, 0) skewX(14deg) scale(.94);
  --media-clip-from: inset(0 46% 0 0);
  --text-from: translate3d(-75px, 0, 0) skewX(-12deg);
  --text-clip-from: inset(0 0 0 100%);
}
.archive-card:nth-child(18) {
  --media-from: translate3d(0, 0, 0) scaleX(.08);
  --media-clip-from: inset(0 47% 0 47%);
  --media-origin: 50% 50%;
  --text-from: translate3d(0, 0, 0) scaleX(.2);
  --text-clip-from: inset(0 48% 0 48%);
}
.archive-card:nth-child(19) {
  --media-from: translate3d(0, 0, 0) scaleY(.08);
  --media-clip-from: inset(47% 0 47% 0);
  --media-origin: 50% 50%;
  --text-from: translate3d(0, 0, 0) scaleY(.2);
  --text-clip-from: inset(48% 0 48% 0);
}
.archive-card:nth-child(20) {
  --media-from: translate3d(0, 0, 0) scale(.45) rotateZ(-5deg);
  --media-clip-from: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  --media-clip-to: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  --media-filter-from: blur(8px) saturate(.65);
  --text-from: translate3d(0, 0, 0) scale(.64) rotateZ(4deg);
  --text-filter-from: blur(6px);
}
.archive-card:nth-child(21) {
  --media-from: translate3d(-80px, 0, 0) scaleX(.72);
  --media-clip-from: inset(0 100% 0 0);
  --media-origin: 0 50%;
  --text-from: translate3d(-38px, 34px, 0) skewY(-14deg) scale(.9);
  --text-clip-from: inset(0 0 100% 24%);
}
.archive-card:nth-child(22) {
  --media-from: translate3d(80px, 0, 0) scaleX(.72);
  --media-clip-from: inset(0 0 0 100%);
  --media-origin: 100% 50%;
  --text-from: translate3d(0, -56px, 0);
  --text-clip-from: inset(100% 0 0 0);
}
.archive-card:nth-child(23) {
  --media-from: translate3d(0, 0, 0) scale(1.12);
  --media-clip-from: inset(4% 4% 4% 4%);
  --media-filter-from: blur(20px) saturate(.38);
  --media-duration: 1.9s;
  --text-from: translate3d(0, 24px, 0);
  --text-filter-from: blur(13px);
  --text-duration: 1.35s;
}
.archive-card:nth-child(24) {
  --media-from: translate3d(0, 80px, -360px) rotateX(24deg) scale(.88);
  --media-clip-from: inset(0);
  --media-duration: 1.85s;
  --text-from: translate3d(0, 44px, -140px) rotateX(28deg);
  --text-filter-from: blur(5px);
}
.archive-card:nth-child(25) {
  --media-from: translate3d(0, -35px, 260px) scale(1.32);
  --media-clip-from: inset(0);
  --media-filter-from: blur(7px) saturate(.78);
  --text-from: translate3d(0, -32px, 120px) scale(1.18);
  --text-filter-from: blur(5px);
}
.archive-card:nth-child(26) {
  --media-from: translate3d(-70px, 90px, 0) rotate3d(1, -1, 0, 74deg) scale(.86);
  --media-clip-from: inset(0);
  --media-origin: 0 100%;
  --text-from: translate3d(58px, 30px, 0) rotate3d(1, 1, 0, 42deg);
  --text-clip-from: inset(0 100% 0 0);
}
.archive-card:nth-child(27) {
  --media-from: translate3d(0, 135px, 0) rotateZ(-4deg) scale(.9);
  --media-clip-from: polygon(0 28%, 100% 0, 100% 72%, 0 100%);
  --media-clip-to: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  --media-duration: 1.95s;
  --text-from: translate3d(-48px, 62px, 0) rotateZ(3deg);
  --text-filter-from: blur(4px);
}
.archive-card:nth-child(28) {
  --media-from: translate3d(0, 110px, 0) rotateX(-88deg) scale(.96);
  --media-clip-from: inset(0);
  --media-origin: 50% 100%;
  --media-duration: 1.9s;
  --text-from: translate3d(0, 72px, 0) rotateX(-62deg);
  --text-clip-from: inset(0 0 100% 0);
}
.archive-card:nth-child(29) {
  --media-from: translate3d(0, 190px, 0) scale(.78) rotateZ(2deg);
  --media-clip-from: inset(14% 8% 0 8%);
  --media-filter-from: blur(6px) saturate(.58);
  --media-duration: 2.1s;
  --text-from: translate3d(0, 96px, 0) scale(.92);
  --text-filter-from: blur(8px);
  --text-duration: 1.5s;
  --text-delay: .72s;
}

/* Final motion palette: only the seven approved complementary pairs are used.
   JavaScript assigns each complete pair to a random two-card row. */
.archive-card.is-motion-study {
  --media-from: translate3d(0, 110px, 0) scale(.96);
  --media-clip-from: inset(0 0 100% 0);
  --media-clip-to: inset(0);
  --media-filter-from: blur(0) saturate(1);
  --media-origin: 50% 50%;
  --media-duration: 1.55s;
  --text-from: translate3d(0, 46px, 0);
  --text-clip-from: inset(0 0 100% 0);
  --text-clip-to: inset(0);
  --text-filter-from: blur(0);
  --text-duration: 1.08s;
  --text-delay: .48s;
}

.archive-card.motion-morning {
  --media-from: translate3d(0, 150px, 0) scale(.94);
  --text-from: translate3d(0, 62px, 0);
}
.archive-card.motion-crystal {
  --media-from: translate3d(-150px, 0, 0) scale(.98);
  --media-clip-from: inset(0 0 0 100%);
  --text-from: translate3d(90px, 0, 0);
  --text-clip-from: inset(0 100% 0 0);
}
.archive-card.motion-brownstone {
  --media-from: translate3d(150px, 0, 0) scale(.98);
  --media-clip-from: inset(0 100% 0 0);
  --text-from: translate3d(-90px, 0, 0);
  --text-clip-from: inset(0 0 0 100%);
}
.archive-card.motion-little-big {
  --media-from: translate3d(0, 0, 0) scale(1.24);
  --media-clip-from: inset(0);
  --media-filter-from: blur(12px) saturate(.72);
  --text-from: translate3d(0, 32px, 0) scale(.88);
  --text-filter-from: blur(9px);
}
.archive-card.motion-olive {
  --media-from: translate3d(85px, 0, 0) rotateY(76deg) scale(.94);
  --media-clip-from: inset(0);
  --media-origin: 100% 50%;
  --text-from: translate3d(-70px, 0, 0) rotateY(-38deg);
  --text-clip-from: inset(0 0 0 100%);
}
.archive-card.motion-narvan {
  --media-from: translate3d(-130px, -100px, 0) scale(.88);
  --media-clip-from: polygon(0 0, 0 0, 0 0, 0 0);
  --media-clip-to: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  --text-from: translate3d(70px, 54px, 0) rotateZ(3deg);
  --text-clip-from: inset(0 100% 100% 0);
}
.archive-card.motion-rose {
  --media-from: translate3d(130px, -100px, 0) scale(.88);
  --media-clip-from: polygon(100% 0, 100% 0, 100% 0, 100% 0);
  --media-clip-to: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  --text-from: translate3d(-70px, 54px, 0) rotateZ(-3deg);
  --text-clip-from: inset(0 0 100% 100%);
}
.archive-card.motion-luxury-flat {
  --media-from: translate3d(-130px, 100px, 0) scale(.88);
  --media-clip-from: polygon(0 100%, 0 100%, 0 100%, 0 100%);
  --media-clip-to: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  --text-from: translate3d(68px, -48px, 0) rotateZ(-3deg);
  --text-clip-from: inset(100% 100% 0 0);
}
.archive-card.motion-lake {
  --media-from: translate3d(130px, 100px, 0) scale(.88);
  --media-clip-from: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%);
  --media-clip-to: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  --text-from: translate3d(-68px, -48px, 0) rotateZ(3deg);
  --text-clip-from: inset(100% 0 0 100%);
}
.archive-card.motion-angles {
  --media-from: translate3d(0, 70px, 0) rotateZ(-9deg) scale(.82);
  --media-clip-from: inset(0);
  --media-origin: 0 100%;
  --text-from: translate3d(34px, 46px, 0) rotateZ(7deg);
}
.archive-card.motion-harmonious {
  --media-from: translate3d(-80px, 0, 0) scaleX(.72);
  --media-clip-from: inset(0 100% 0 0);
  --media-origin: 0 50%;
  --text-from: translate3d(-38px, 34px, 0) skewY(-14deg) scale(.9);
  --text-clip-from: inset(0 0 100% 24%);
}
.archive-card.motion-oysters {
  --media-from: translate3d(80px, 0, 0) scaleX(.72);
  --media-clip-from: inset(0 0 0 100%);
  --media-origin: 100% 50%;
  --text-from: translate3d(0, -56px, 0);
  --text-clip-from: inset(100% 0 0 0);
}
.archive-card.motion-farm {
  --media-from: translate3d(0, -35px, 260px) scale(1.32);
  --media-clip-from: inset(0);
  --media-filter-from: blur(7px) saturate(.78);
  --text-from: translate3d(0, -32px, 120px) scale(1.18);
  --text-filter-from: blur(5px);
}
.archive-card.motion-shaded {
  --media-from: translate3d(-70px, 90px, 0) rotate3d(1, -1, 0, 74deg) scale(.86);
  --media-clip-from: inset(0);
  --media-origin: 0 100%;
  --text-from: translate3d(58px, 30px, 0) rotate3d(1, 1, 0, 42deg);
  --text-clip-from: inset(0 100% 0 0);
}

.archive-meta > div:first-child > span {
  display: block;
  margin-bottom: 11px;
  color: rgba(25, 24, 21, .48);
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.archive-meta h3 {
  margin: 0;
  font: 400 clamp(32px, 3vw, 52px)/.98 var(--rook-projects-serif);
  letter-spacing: -.04em;
}

.archive-facts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: 4px;
  color: rgba(25, 24, 21, .62);
  font-size: 9px;
  letter-spacing: .11em;
  text-align: right;
  text-transform: uppercase;
}

.archive-facts p { margin: 0; }
.archive-facts p:last-child { color: rgba(25, 24, 21, .42); }

.archive-meta > i {
  margin-bottom: 2px;
  font-size: 15px;
  font-style: normal;
  transition: transform .45s var(--rook-projects-ease);
}

@media (hover: hover) and (pointer: fine) {
  .archive-card:hover .archive-media img,
  .archive-card:focus-visible .archive-media img {
    filter: brightness(1.035);
    transform: scale(1.027);
  }
  .archive-card:hover .archive-meta > i,
  .archive-card:focus-visible .archive-meta > i { transform: translate(4px, -4px); }
}

.archive-card:focus-visible { outline: 1px solid var(--rook-projects-ink); outline-offset: 7px; }
.archive-card.is-leaving .archive-media img { transform: scale(1.115); transition-duration: .76s; }
html.rook-project-navigating .featured-canvas { transform: scale(1.115); transition-duration: .76s; }
html.rook-project-navigating .rook-global-header { opacity: 0 !important; }

/* CTA */
.projects-cta {
  position: relative;
  z-index: 12;
  display: grid;
  place-content: center;
  justify-items: center;
  min-height: 92svh;
  padding: 110px var(--rook-projects-pad);
  overflow: hidden;
  background: #8f8171;
  color: var(--rook-projects-paper-soft);
  text-align: center;
}

.projects-cta::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 50% 25%, rgba(255,255,255,.08), transparent 42%);
}

.projects-cta > * { position: relative; z-index: 1; }
.projects-cta .projects-eyebrow { color: rgba(245, 242, 235, .62); }

.projects-cta h2 {
  margin: clamp(30px, 5vw, 70px) 0 0;
  font: 400 clamp(76px, 10vw, 158px)/.86 var(--rook-projects-serif);
  letter-spacing: -.06em;
}

.projects-cta p {
  width: min(480px, 82vw);
  margin: clamp(30px, 4vw, 55px) auto 0;
  color: rgba(245, 242, 235, .72);
  font: 300 clamp(15px, 1.3vw, 19px)/1.7 var(--rook-projects-sans);
}

.projects-cta > a { margin-top: clamp(38px, 5vw, 66px); font-size: 9px; }

/* Shared header tone */
body.rook-projects-active .rook-global-header,
body.rook-projects-active .rook-global-header a,
body.rook-projects-active .rook-global-header button { color: var(--rook-projects-paper) !important; }

body.rook-projects-active.rook-projects-header-light .rook-global-header,
body.rook-projects-active.rook-projects-header-light .rook-global-header a,
body.rook-projects-active.rook-projects-header-light .rook-global-header button { color: var(--rook-projects-ink) !important; }

body.rook-projects-active.rook-projects-header-light .rook-global-header.is-scrolled {
  background: rgba(238, 233, 223, .72) !important;
  border-bottom: 1px solid rgba(25, 24, 21, .18) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}

body.rook-projects-active:not(.rook-projects-header-light) .rook-global-header.is-scrolled {
  background: rgba(17, 17, 15, .64) !important;
  border-bottom: 1px solid rgba(238, 233, 223, .12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}

/* Odoo editor and reduced motion: static, readable, editable. */
body.rook-projects-static .project-journey { height: auto; }
body.rook-projects-static .journey-sticky { position: relative; height: auto; overflow: visible; }
body.rook-projects-static .featured-canvas,
body.rook-projects-static .featured-shade,
body.rook-projects-static .archive-mosaic,
body.rook-projects-static .journey-progress,
body.rook-projects-static .projects-scroll-cue { display: none !important; }
body.rook-projects-static .journey-intro {
  position: relative;
  top: auto;
  left: auto;
  min-height: 82svh;
  padding: 150px var(--rook-projects-pad) 90px;
  opacity: 1 !important;
  transform: none;
}
body.rook-projects-static .featured-item {
  position: relative;
  min-height: 86svh;
  overflow: hidden;
  pointer-events: auto;
}
body.rook-projects-static .featured-source { opacity: 1; }
body.rook-projects-static .featured-copy {
  opacity: 1 !important;
  clip-path: none !important;
  transform: none !important;
  pointer-events: auto !important;
}
body.rook-projects-static .archive-transition {
  position: relative;
  min-height: 88svh;
  opacity: 1 !important;
  visibility: visible !important;
  background: var(--rook-projects-paper) !important;
}
body.rook-projects-static .archive-intro-copy { opacity: 1 !important; transform: none !important; }
body.rook-projects-static .archive-card { content-visibility: visible; }
body.rook-projects-static .archive-card-inner { opacity: 1 !important; transform: none !important; transition: none !important; }
body.rook-projects-static .archive-media,
body.rook-projects-static .archive-meta {
  opacity: 1 !important;
  clip-path: none !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

@media (max-width: 820px) {
  .project-journey {
    height: 2200vh;
    height: var(--rook-projects-mobile-height, 2200svh);
  }
  .journey-sticky { min-height: 520px; }
  .journey-intro { top: 48%; width: calc(100vw - 2 * var(--rook-projects-pad)); }
  .journey-intro h1,
  .archive-intro-copy h2 { font-size: clamp(50px, 14vw, 76px); line-height: .91; }
  .journey-intro > p,
  .archive-intro-copy > p { width: 100%; margin: 43px 0 0; font-size: 15px; }
  .projects-scroll-cue { right: auto; left: var(--rook-projects-pad); }
  .featured-shade {
    background:
      linear-gradient(90deg, rgba(17, 17, 15, .3), transparent 70%),
      linear-gradient(0deg, rgba(17, 17, 15, .52), transparent 43%, transparent 73%, rgba(17, 17, 15, .13));
  }
  .featured-copy { bottom: max(76px, calc(env(safe-area-inset-bottom) + 58px)); }
  .featured-copy h2 { max-width: 93vw; font-size: clamp(48px, 14vw, 76px); line-height: .92; }
  .featured-meta { max-width: 86vw; font-size: 8px; line-height: 1.55; }
  .archive-transition { padding: 102px var(--rook-projects-pad) 74px; }
  .project-archive-grid { grid-template-columns: 1fr; gap: 84px; }
  .archive-card:nth-child(n) .archive-media { aspect-ratio: 4 / 3; }
  .archive-meta { grid-template-columns: minmax(0, 1fr) 18px; gap: 15px; }
  .archive-facts { grid-column: 1; grid-row: 2; align-items: flex-start; text-align: left; }
  .archive-meta > i { grid-column: 2; grid-row: 1; }
  .projects-cta { min-height: 88svh; }
  .projects-cta h2 { font-size: clamp(56px, 15vw, 84px); }
}

@media (max-width: 480px) {
  .journey-intro h1,
  .archive-intro-copy h2 { font-size: clamp(45px, 13vw, 61px); }
  .featured-copy h2 { font-size: clamp(41px, 11.8vw, 58px); }
  .archive-meta h3 { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .projects-scroll-cue i::after { animation: none; transform: none; }
  .archive-card-inner,
  .archive-media,
  .archive-meta,
  .archive-media img { transition: none !important; }
}

/* Keep featured titles crisp and readable over bright photography. */
.featured-copy {
  isolation: isolate;
  color: #fff;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .65);
}
.featured-item::after {
  content: "";
  position: absolute;
  z-index: 6;
  inset: 45% 0 0;
  opacity: var(--copy-visibility, 0);
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .28) 30%, rgba(0, 0, 0, .55));
}
.featured-copy h2 {
  color: #fff;
  -webkit-text-stroke: .25px currentColor;
}
.featured-copy > span,
.featured-copy .featured-meta,
.featured-copy .featured-meta p:last-child { color: rgba(255, 255, 255, .94); }

/* Compact project index with animated density controls. */
.all-projects { background: #11110f; color: #eee9df; padding: 100px 6vw 110px; min-height: 100svh; }
.archive-toolbar { max-width: 1800px; margin: 0 auto 62px; display:flex; justify-content:space-between; align-items:center; gap:24px; font:500 10px/1.4 var(--rook-projects-sans); letter-spacing:.12em; text-transform:uppercase; }
.archive-toolbar small { margin-left:14px; color:#a6a49d; font-size:9px; }
.archive-zoom { display:flex; border:1px solid #55554f; border-radius:24px; overflow:hidden; }
.archive-zoom button { padding:10px 14px; border:0; border-right:1px solid #55554f; background:transparent; color:#eee9df; font:500 11px/1 var(--rook-projects-sans); cursor:pointer; min-height:36px; }
.archive-zoom button:last-child { border-right:0; }
.archive-zoom button[aria-pressed="true"] { background:#eee9df; color:#11110f; }
.archive-zoom button:focus-visible { outline:2px solid #fff; outline-offset:-4px; }
.all-projects .project-archive-grid { max-width:1800px; grid-template-columns:repeat(var(--grid-columns,10),minmax(0,1fr)); gap:34px 16px; perspective:none; align-items:start; }
.all-projects .archive-card { display:block; content-visibility:visible; contain-intrinsic-size:none; perspective:none; transform-origin:0 0; }
.all-projects .archive-card-inner { transform:none; }
.all-projects .archive-media { aspect-ratio:4/3; opacity:1; transform:none; clip-path:none; filter:none; transition:none; background:#242421; will-change:auto; }
.all-projects .archive-card:nth-child(4n+2) .archive-media { aspect-ratio:1/1; }
.all-projects .archive-card:nth-child(4n+3) .archive-media { aspect-ratio:4/5; }
.all-projects .archive-media img { transform:none; filter:grayscale(1); transition:filter .5s ease,transform .7s cubic-bezier(.22,1,.36,1); }
.all-projects .archive-meta { display:block; padding-top:12px; opacity:1; transform:none; filter:none; clip-path:none; transition:none; will-change:auto; }
.all-projects .archive-meta h3 { font:500 clamp(11px,.95vw,15px)/1.35 var(--rook-projects-sans); letter-spacing:0; color:#d7d5ce; margin:0; transition:color .3s ease; }
.all-projects .archive-meta > div > span, .all-projects .archive-facts, .all-projects .archive-meta > i { display:none; }
.all-projects .archive-card:hover .archive-media img, .all-projects .archive-card:focus-visible .archive-media img { filter:grayscale(0); transform:scale(1.025); }
.all-projects .archive-card:hover h3, .all-projects .archive-card:focus-visible h3 { color:#fff; }
.all-projects .archive-card:focus-visible { outline:1px solid #eee9df; outline-offset:6px; }
@media(max-width:820px) {
 .all-projects { padding:90px 20px 80px; }
 .archive-toolbar { flex-direction:column; align-items:flex-start; margin-bottom:36px; gap:20px; }
 .archive-zoom button { min-height:44px; padding:12px 15px; }
 .all-projects .project-archive-grid { gap:26px 12px; }
 .all-projects .archive-meta h3 { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .all-projects * { transition:none!important; } }

/* Touch screens have no hover: show the project photography in full colour. */
@media (max-width: 820px), (hover: none), (pointer: coarse) {
  .all-projects .archive-media img,
  .all-projects .archive-card:hover .archive-media img,
  .all-projects .archive-card:focus-visible .archive-media img {
    filter: none;
    transform: none;
  }
}