html:has(.ora-project-page), .ora-project-page {
  height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
  background: #faf9f6;
  color: #000;
}
.ora-project-page {
  --project-rail: calc(100vw * 64 / 1440);
  -webkit-tap-highlight-color: transparent;
}
.project-rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 110;
  width: var(--project-rail);
  border-right: 1px solid var(--header-border);
  background: var(--header-bg);
  color: var(--header-text);
}
.project-rail #menu-toggle {
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--project-rail);
  border-bottom: 1px solid var(--header-border);
  cursor: pointer;
}
.project-rail #menu-toggle svg { width: 52%; height: 52%; }
.project-rail-title, .project-rail-brand, .project-rail-copyright {
  position: absolute;
  left: 50%;
  writing-mode: vertical-rl;
  transform: translateX(-50%) rotate(180deg);
  white-space: nowrap;
  font-weight: 400;
  line-height: 1;
}
.project-rail-title {
  top: 9.6vw;
  font-family: "PP Editorial Old", serif;
  font-size: 2.7vw;
  letter-spacing: -.045em;
}
.project-rail-brand {
  top: 56%;
  font-family: "PP Editorial Old", serif;
  font-size: 1.14vw;
  letter-spacing: -.05em;
}
.project-rail-copyright { bottom: 3.8vh; font-size: .78vw; }
.project-snap {
  position: fixed;
  inset: 0 0 0 var(--project-rail);
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: pan-x pinch-zoom;
  --snap-pull: 0px;
}
.project-stage {
  height: 100%;
  transform: translate3d(0,0,0);
  transition: transform 260ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
[data-screen="details"] .project-stage { transform: translate3d(0,calc(-100% + var(--snap-pull)),0); }
[data-snapping="true"] .project-stage { transition: transform 800ms cubic-bezier(.76,0,.24,1); }
[data-pulling="true"] .project-stage { transition: none; }
.project-hero, .project-details { height: 100%; width: 100%; overflow: hidden; }
.project-cover { display: flex; align-items: flex-start; width: 100%; height: 100%; text-align: left; cursor: pointer; }
.project-cover img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100% - 2.45vw);
  object-fit: cover;
  object-position: center top;
  border-radius: 0 0 1.9vw 1.9vw;
}
.project-details { display: grid; grid-template-columns: 60% 40%; background: #faf9f6; }
.project-gallery {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: auto;
  scrollbar-width: none;
  padding: .9vw .3vw .9vw .7vw;
  touch-action: pan-x pinch-zoom;
}
.project-gallery::-webkit-scrollbar { display: none; }
.project-image { margin: 0 0 1.25vw; }
.project-image:last-child { margin-bottom: 0; }
.project-image img { display: block; width: 100%; height: auto; user-select: none; }
.project-copy {
  height: 100%;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 17.75vh 2.7vw 6.3vh 2.375vw;
  font-size: calc(1.4 * var(--scale));
  line-height: 1.4;
}
.project-title {
  font-family: "PP Editorial Old", serif;
  font-size: 5.42vw;
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.01em;
  white-space: nowrap;
  margin: 0 0 2.55vw;
  font-feature-settings: "dlig" 0;
}
.project-info-row { display: grid; grid-template-columns: 33.3% 1fr; gap: 5%; margin-left: .5vw; }
.project-info-row h2 { margin: 0; font-size: .7vw; text-transform: uppercase; font-weight: 400; }
.project-info-row p { margin: 0; }
.project-overview { margin-bottom: 1.5vw; }
.project-facts { min-width: 0; margin: 0; }
.project-facts > div { display: grid; grid-template-columns: 1fr 1fr; gap: .8vw; border-top: 1px solid #b8b3ac; padding: .55vw 0; }
.project-facts dt, .project-facts dd { min-width: 0; margin: 0; }
.project-facts a { white-space: nowrap; }
.project-facts a span { margin-left: .3em; }
.project-next { align-self: flex-end; text-transform: uppercase; font-size: .78vw; }
.project-back {
  position: absolute;
  top: 18px;
  left: 2.5vw;
  padding: 8px 10px;
  opacity: 0;
  pointer-events: none;
  background: #faf9f6;
  z-index: 2;
}
.project-back:focus-visible { opacity: 1; pointer-events: auto; }
.ora-project-page :focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.project-copy a:hover, .project-rail-brand:hover { opacity: .65; }
@media (max-width: 767px) {
  .ora-project-page { --project-rail: 44px; }
  .ora-project-page #fullscreen-menu { left: var(--project-rail); width: calc(100% - var(--project-rail)); }
  .ora-project-page #fullscreen-menu [data-nav-item] { font-size: min(68px,14vw); }
  .project-rail-title { top: 93px; font-size: 28px; }
  .project-rail-brand { top: 57%; font-size: 13px; }
  .project-rail-copyright { bottom: 24px; font-size: 10px; }
  .project-cover img { height: 100%; max-height: none; object-fit: cover; object-position: 50% top; border-radius: 0 0 20px 20px; }
  .project-details { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto; }
  .project-gallery { padding: 10px 10px 0; }
  .project-image { margin-bottom: 14px; }
  .project-copy { height: auto; padding: 18px 16px 20px; font-size: 12px; line-height: 1.3; gap: 15px; border-top: 1px solid #b8b3ac; }
  .project-title { font-size: clamp(32px,9.2vw,54px); margin-bottom: 17px; }
  .project-info-row { grid-template-columns: 23% 1fr; gap: 5%; margin-left: 0; }
  .project-info-row h2 { font-size: 9px; }
  .project-overview { margin-bottom: 16px; }
  .project-facts > div { gap: 10px; padding: 5px 0; }
  .project-next { font-size: 10px; }
  .project-back { top: 0; right: 0; left: auto; font-size: 11px; }
}
@media (max-height: 650px) and (min-width: 768px) {
  .project-rail-title { top: max(calc(var(--project-rail) + 24px),20vh); font-size: min(2.7vw,4.3vh); }
  .project-copy { padding-top: 9vh; padding-bottom: 4vh; font-size: min(1vw,2.2vh); }
  .project-title { margin-bottom: 1.4vw; font-size: min(6.25vw,11.2vh); }
  .project-overview { margin-bottom: 1.2vw; }
}
@media (prefers-reduced-motion: reduce) {
  .project-stage, [data-snapping="true"] .project-stage { transition-duration: 0ms; }
}
