.work-deck, .work-project, .ora-works-page { --work-strip: calc(100vw * 64 / 1440); --project-rail: var(--work-strip); }
.ora-works-page { background: #000; color: #faf9f6; overflow: hidden; }
.ora-works-page > .project-rail { --project-rail: 64px; width: 64px; border: 0; background: transparent; color: #faf9f6; }
.ora-works-page > .project-rail > :not(#menu-toggle) { display: none; }
.ora-works-page > .project-rail #menu-toggle { border: 0; }
.work-deck { position: relative; flex: 0 0 100vw; width: 100vw; height: 100dvh; min-height: 540px; overflow: hidden; background: #000; color: #faf9f6; }
.work-deck-intro { height: 100%; width: calc(100% - 4 * var(--work-strip)); padding: 5.5vh 3vw 6vh 7.75vw; display: flex; flex-direction: column; justify-content: space-between; }
.work-deck-heading { margin: 0; font-family: "PP Editorial Old", serif; font-weight: 400; font-size: 2vw; line-height: 1.1; }
.work-deck-description { margin: 0; max-width: 46vw; font-size: 2.25vw; letter-spacing: normal; line-height: 1.4; }
.work-strips { position: absolute; inset: 0 0 0 auto; display: flex; width: calc(4 * var(--work-strip)); }
.work-strip { position: relative; flex: 0 0 var(--work-strip); width: var(--work-strip); height: 100%; border: 0; border-left: 1px solid #c9c4bb; background: #faf9f6; color: #000; padding: 0; font-weight: 400; text-align: center; }
button.work-strip { cursor: pointer; touch-action: pinch-zoom; }
[data-work-deck] .work-strip { touch-action: pan-y pinch-zoom; }
.work-strip:first-child { border-radius: 0 0 0 2vw; }
.work-strip-number { position: absolute; inset: 0 0 auto; height: var(--work-strip); display: grid; place-items: center; border-bottom: 1px solid #c9c4bb; font-family: "PP Editorial Old", serif; font-size: 2.25vw; line-height: 1; }
.work-strip-dot { position: absolute; top: 11.5vh; left: 50%; transform: translateX(-50%); font-size: 12px; }
.work-strip-name, .work-strip-brand, .work-strip-year { position: absolute; left: 50%; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); white-space: nowrap; }
.work-strip-name { top: 16.6vh; font-family: "PP Editorial Old", serif; font-size: 2.75vw; letter-spacing: -.035em; line-height: 1; }
.work-strip-brand { top: 56%; font-family: "PP Editorial Old", serif; font-size: 1.12vw; letter-spacing: -.055em; line-height: 1; }
.work-strip-year { bottom: 3.5vh; font-size: .8vw; line-height: 1; }
.work-strip:focus-visible, .work-project button:focus-visible { outline: 2px solid currentColor; outline-offset: -7px; }
/* Keep rail focus visible without drawing a frame during project navigation. */
.work-strip:focus,
.work-project .work-rail-menu:focus,
.work-project .work-return-body:focus { outline: none; }
.work-strip:focus-visible .work-strip-name,
.work-return-body:focus-visible .work-strip-name { text-decoration: none; }
.work-strip:focus-visible,
.work-return-body:focus-visible { background: #eeeae4; }
.work-project .work-rail-menu:focus-visible { background: #eeeae4; box-shadow: none; }
.work-project .project-gallery:focus,
.work-project .project-title:focus { outline: none; }
.work-strip[data-work-open]:hover { background: #eeeae4; }
.work-project { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; --return-x: calc(100vw - 4 * var(--work-strip)); transform: translate3d(var(--return-x),0,0); transition: transform var(--work-instant,950ms) cubic-bezier(.76,0,.24,1); }
.work-project[data-present="true"] { visibility: visible; pointer-events: auto; }
.work-return { position: absolute; z-index: 3; inset: 0 auto 0 0; border-radius: 0 !important; }
.work-return-body { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; }
.work-rail-menu { z-index: 1; width: 100%; padding: 0; border: 0; border-bottom: 1px solid #c9c4bb; background: transparent; color: inherit; cursor: pointer; }
.work-rail-menu-icon { display: none; width: 52%; height: auto; }
.work-project[data-rail-ready="true"] .work-rail-index { display: none; }
.work-project[data-rail-ready="true"] .work-rail-menu-icon { display: block; }
body[data-work-expanded="true"] #fullscreen-menu { z-index: 300; }
body[data-work-expanded="true"] #fullscreen-menu [data-menu-close] { display: block; }
.work-project > .project-snap { position: absolute; left: var(--work-strip); background: #faf9f6; color: #000; touch-action: pinch-zoom; }
.work-project[data-open="true"] { transform: translate3d(0,0,0); }
/* The three remaining strips return over the project as one rigid group. */
.work-trailing-strips { position: absolute; inset: 0 auto 0 var(--work-strip); z-index: 4; display: flex; width: max-content; pointer-events: none; transform: translate3d(0,0,0); transition: transform var(--work-instant,950ms) cubic-bezier(.76,0,.24,1); }
.work-project[data-open="true"] .work-trailing-strips { transform: translate3d(calc(100vw - var(--work-strip)),0,0); }
.work-trailing-strips .work-strip { border-radius: 0; }
.work-project .project-gallery { touch-action: pinch-zoom; }
body[data-work-expanded="true"] > [data-intro-header] { visibility: hidden; }
[data-work-deck][data-expanded="true"] [data-work-open][aria-expanded="true"] { opacity: 0; }
.work-project .project-title { text-transform: none; }
.work-project .project-next { cursor: pointer; }
.work-project .project-cover { --project-cue-height: max(32px, 2.45vw); flex-direction: column; align-items: center; justify-content: center; }
.work-project .project-scroll-cue { display: grid; place-items: center; flex: 0 0 var(--project-cue-height); width: 100%; color: var(--film-cue-color, #4f6b5b); }
.work-project .project-scroll-cue svg { display: block; width: 3.2vw; height: auto; }
.work-project .project-cover video { flex: 0 0 auto; display: block; width: min(100%, calc((100dvh - var(--project-cue-height)) * var(--film-ratio, 1.6842105263))); height: auto; max-height: calc(100% - var(--project-cue-height)); object-fit: contain; object-position: center; border-radius: 0 0 3% 3% / 0 0 5.05% 5.05%; }
@media (max-width: 767px) {
  .work-deck, .work-project, .ora-works-page { --work-strip: 44px; }
  .ora-works-page > .project-rail { width: 44px; --project-rail: 44px; }
  .ora-works-page #fullscreen-menu { left: 44px; width: calc(100% - 44px); }
  .ora-works-page #fullscreen-menu [data-nav-item] { font-size: min(68px,14vw); }
  .work-deck { min-height: 540px; }
  .work-deck-intro { padding: 90px 20px 36px 24px; }
  .work-deck-heading { font-size: 26px; }
  .work-deck-description { font-size: 19px; max-width: none; line-height: 1.35; letter-spacing: -.04em; }
  .work-wide-break { display: none; }
  .work-strip-number { height: 54px; font-size: 28px; }
  .work-strip-name { font-size: 26px; top: 120px; }
  .work-strip-brand { font-size: 13px; top: auto; bottom: 24%; }
  .work-strip-year { font-size: 10px; bottom: 30px; }
  .work-strip-dot { top: 77px; }
  .work-project .project-title { font-size: 48px; }
  .work-project .project-cover { --project-cue-height: 44px; }
  .work-project .project-scroll-cue svg { width: 46px; }
}
@media (max-height: 650px) and (min-width: 768px) {
  .work-deck { min-height: 0; }
  .work-strip-name { font-size: min(2.75vw,4.5vh); top: max(calc(var(--work-strip) + 30px),18vh); }
  .work-strip-brand { font-size: min(1.12vw,2.5vh); top: 64%; }
  .work-strip-dot { display: none; }
}
@media (max-height: 540px) and (max-width: 767px) {
  .work-deck { min-height: 0; }
  .work-deck-intro { padding-top: 70px; padding-bottom: 22px; }
  .work-deck-description { font-size: 17px; }
  .work-strip-name { top: 85px; font-size: 21px; }
  .work-strip-dot { top: 61px; }
  .work-strip-brand { bottom: 65px; font-size: 11px; }
  .work-strip-year { bottom: 15px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .work-project, .work-trailing-strips { transition-duration: 0ms; }
}

/* Unified page/image snap pace and equal visible image gaps. */
[data-snapping="true"] .project-stage { transition-duration: 800ms; }
.project-image { display: flow-root; }
/* Contain the 184 empty capture rows without a negative margin or overlapping
   composited layers. The image retains its original scale and every artwork row. */
.project-image-sauces {
  position: relative; aspect-ratio: 3024 / 1780; overflow: hidden;
  isolation: isolate; background: #faf9f6;
}
.project-image-sauces img {
  position: absolute; inset: auto 0 0; margin: 0; width: 100%; height: auto;
}
/* Clip the captured black bar and its compressed edge above the cream artwork. */
.work-project[data-work-project="half-million"] .project-image:first-child {
  position: relative; aspect-ratio: 2048 / 1210; overflow: hidden;
}
.work-project[data-work-project="half-million"] .project-image:first-child img {
  position: absolute; inset: auto 0 0; width: 100%; height: auto;
}
/* Trim the captured green footer edge from the contact screenshot. */
.work-project[data-work-project="half-million"] .project-image:nth-child(6) {
  position: relative; aspect-ratio: 2048 / 1208; overflow: hidden;
}
.work-project[data-work-project="half-million"] .project-image:nth-child(6) img {
  position: absolute; inset: 0 0 auto; width: 100%; height: auto;
}
.project-scroll-cue [data-project-cue-arrow] {
  transform-box: fill-box; transform-origin: center;
}

.work-project .project-cover { justify-content: flex-start; }
.work-project .project-film-frame {
  display: flex; align-items: center; justify-content: center;
  flex: 1 1 0; min-height: 0; width: 100%; overflow: hidden;
  background: #faf2d8; border-radius: 0 0 1.9vw 1.9vw;
}
.work-project .project-film-frame video {
  width: min(100%, calc((100dvh - var(--project-cue-height)) * var(--film-ratio, 1.6842105263)));
  height: auto; max-height: 100%; object-fit: contain;
  border-radius: 0 0 3% 3% / 0 0 5.05% 5.05%;
}
/* Anchor the 1886 film to the top. Override its sampled inline color so the
   remaining space always joins the off-white arrow area below. */
.work-project[data-work-project="1886"] .project-film-frame {
  align-items: flex-start;
  background-color: #faf9f6 !important;
}
.work-project[data-work-project="1886"] .project-film-frame video {
  object-position: center top;
}
@media (max-width: 767px) {
  .project-gallery { padding-bottom: 10px; }
  .work-project .project-film-frame { border-radius: 0 0 20px 20px; }
  .work-project .project-film-frame video { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
  /* Fit the 1886 frame to its portrait film, so sampled sky color cannot
     become top/bottom bands. Keep the complete recording uncropped. */
  .work-project[data-work-project="1886"] .project-film-frame {
    flex: 0 0 auto;
    width: min(100%, calc((100dvh - var(--project-cue-height)) * 720 / 1274));
    aspect-ratio: 720 / 1274;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-snapping="true"] .project-stage { transition-duration: 0ms; }
}
@media (max-width: 767px) {
  [data-horizontal-story] [data-horizontal-panel] { min-height: 100dvh; }
}

/* Open project rail: reference proportions and the shared animated menu icon. */
.work-project .work-return { border-left: 0; border-right: 1px solid #c9c4bb; border-radius: 0 0 0 2vw !important; }
.work-project .work-return .work-strip-name { top: 9.6vw; font-size: 2.7vw; letter-spacing: -.045em; }
.work-project .work-return .work-strip-brand { font-size: 1.14vw; letter-spacing: -.05em; }
.work-project .work-return .work-strip-year { bottom: 3.8vh; font-size: .78vw; }
.work-project[data-menu-open="true"] .work-return { background: #000; color: #f3eee8; border-color: #333; }
.work-project[data-menu-open="true"] .work-rail-menu { border-color: #333; }
body[data-work-expanded="true"] #fullscreen-menu { left: calc(100vw * 64 / 1440); width: calc(100% - 100vw * 64 / 1440); }
@media (max-width: 767px) {
  .work-project .work-return .work-strip-name { top: 120px; font-size: 26px; }
  .work-project .work-return .work-strip-brand { font-size: 13px; }
  .work-project .work-return .work-strip-year { bottom: 30px; font-size: 10px; }
  body[data-work-expanded="true"] #fullscreen-menu { left: 44px; width: calc(100% - 44px); }
}
@media (max-height: 540px) and (max-width: 767px) {
  .work-project .work-return .work-strip-name { top: 85px; font-size: 21px; }
  .work-project .work-return .work-strip-brand { font-size: 11px; }
  .work-project .work-return .work-strip-year { bottom: 15px; font-size: 9px; }
}

/* One shared resting position for deck, moving rail, and trailing clones. */
.work-strip-name, .work-project .work-return .work-strip-name {
 top: max(18vh, 9.6vw); font-size:2.75vw; letter-spacing:-.035em; line-height:1;
}
@media (max-width:767px) {
 .work-strip-name, .work-project .work-return .work-strip-name { top:130px; font-size:26px; }
}
@media (max-height:540px) and (max-width:767px) {
 .work-strip-name, .work-project .work-return .work-strip-name { top:95px; font-size:21px; }
}