.work-list { list-style: none; padding: 0; margin: -5px 0 0; }
.work-row {
  width: 100%; min-height: 42px; border: 0; padding: 3px 0;
  display: flex; align-items: center; gap: 12px;
  text-align: left; color: #242520; background: transparent;
  font-size: 25px; line-height: 1.25; letter-spacing: -.6px;
  cursor: pointer; touch-action: manipulation;
}
.work-row img { width: 15px; height: 15px; opacity: .42; transition: transform 140ms ease-out, opacity 140ms ease-out; }
.work-row[data-selected="true"] img { opacity: 1; transform: translateX(3px); }
.work-row[data-selected="true"] span { font-weight: 500; }
.work-row:focus-visible { outline: 0; }
.work-row:focus-visible span { text-decoration: underline; text-underline-offset: 5px; }
.terminal-loader { display: none; flex: 0 0 13px; width: 13px; height: 13px; margin-left: 1px; border: 2px solid #24252030; border-top-color: currentColor; border-right-color: currentColor; border-radius: 2px; }
.work-row[aria-busy="true"] .terminal-loader { display: block; animation: terminal-processing 720ms steps(8) infinite; }
@keyframes terminal-processing { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .work-row[aria-busy="true"] .terminal-loader { animation: none; }
}
.work-status { margin: 3px 0 0 27px; font-size: 13px; line-height: 1.2; letter-spacing: -.15px; }
.work-status:empty { display: none; }

.project-gallery {
  position: fixed; inset: 0; margin: 0; border: 0; padding: 0;
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  overflow: hidden; color: var(--ink); background: #d8c7cd;
  font-family: var(--font-text); isolation: isolate;
}
.project-gallery::backdrop { background: transparent; }
.project-gallery:focus { outline: none; }
.gallery-environment { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.gallery-environment img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-viewport { position: relative; width: 100%; height: 100%; overflow: clip; }
.gallery-viewport:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.gallery-frame {
  position: absolute; left: var(--gallery-left, 0px); top: var(--gallery-top, 0px);
  width: 1505px; height: 1045px; transform: scale(var(--gallery-scale, 1));
  transform-origin: top left;
}
.gallery-scene-area { position: relative; width: 100%; height: 100%; overflow: clip; }
.gallery-ui-frame {
  position: absolute; left: var(--gallery-left, 0px); top: var(--gallery-top, 0px);
  width: var(--stage-width, 1505px); height: var(--stage-height, 1045px);
  transform: scale(var(--gallery-scale, 1)); transform-origin: top left; pointer-events: none;
}
.gallery-header, .project-caption { pointer-events: auto; }

.gallery-reference-scene { position: absolute; inset: 0; pointer-events: none; }
.gallery-reference-scene > img { width: 1505px; height: 1045px; display: block; }
.gallery-reference-scene[hidden] { display: none; }
/* Continue the room at the reference scale. Cover sizing would move the floor
   and lighting at both edges of the centered photograph. */
.project-gallery[data-project="doodle"] .gallery-environment img {
  position: absolute; left: var(--gallery-left); top: var(--gallery-top);
  width: calc(1505px * var(--gallery-scale)); height: calc(1045px * var(--gallery-scale));
}
.project-gallery[data-project="doodle"] .gallery-environment::before,
.project-gallery[data-project="doodle"] .gallery-environment::after {
  content: ''; position: absolute; top: var(--gallery-top); bottom: 0;
  width: calc(var(--gallery-left) + 2px); background-image: url('./gallery/stage-background.webp');
  background-size: calc(1505px * var(--gallery-scale)) calc(1045px * var(--gallery-scale));
  background-repeat: no-repeat; transform: scaleX(-1);
}
.project-gallery[data-project="doodle"] .gallery-environment::before { left: 0; background-position: left top; }
.project-gallery[data-project="doodle"] .gallery-environment::after { right: 0; background-position: right top; }
.gallery-reference-scene > div {
  position: absolute; background-image: url('./gallery/stage-background.webp'); background-size: 1505px 1045px;
  mask-image: linear-gradient(to right,transparent,#000 var(--feather),#000 calc(100% - var(--feather)),transparent),linear-gradient(to bottom,transparent,#000 var(--feather),#000 calc(100% - var(--feather)),transparent);
  mask-composite: intersect;
}
.scene-clear-wordmark { --feather: 12px; left: 48px; top: 30px; width: 225px; height: 68px; background-position: -48px -30px; }
.scene-clear-back { --feather: 12px; left: 1251px; top: 38px; width: 230px; height: 58px; background-position: -1251px -38px; }
.scene-clear-caption { --feather: 20px; left: 1100px; top: 548px; width: 381px; height: 287px; background-position: -1100px -548px; }
.scene-clear-note { --feather: 28px; left: 794px; top: 266px; width: 370px; height: 424px; background-position: -794px -266px; }
.scene-clear-note { display: none; }
.gallery-header {
  position: absolute; top: 39px; left: 66px; right: 64px; z-index: 3;
  display: flex; justify-content: space-between; align-items: center;
}
.gallery-wordmark { font-family: var(--font-display); font-size: 34px; font-weight: 400; line-height: 1.2; letter-spacing: -.8px; }
.gallery-back {
  display: inline-flex; align-items: center; gap: 14px; min-height: 52px;
  padding: 8px 0; border: 0; background: transparent; color: inherit;
  font-size: 20px; letter-spacing: -.35px; cursor: pointer;
}
.gallery-back img { width: 30px; height: 30px; transition: transform 180ms cubic-bezier(.2,.75,.12,1); }
.gallery-back:hover img { transform: translateX(-4px); }
.project-primary, .project-secondary { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; }
.project-primary { width: 1000px; height: 900px; z-index: 1; }
.project-secondary { width: 1000px; height: 1000px; z-index: 2; }
.plane-enter, .plane-depth { width: 100%; height: 100%; }
.project-primary .plane-depth { transform: translate3d(calc(var(--depth-x, 0px) * .45), calc(var(--depth-y, 0px) * .45), 0); }
.project-secondary .plane-depth { transform: translate3d(calc(var(--depth-x, 0px) * 1.4), calc(var(--depth-y, 0px) * 1.4), 0); }
.plane-surface { width: 100%; height: 100%; overflow: hidden; background: #ecece7; }
.project-primary .plane-surface {
  border: 2px solid #e7e7e1; border-radius: 13px;
  box-shadow: -8px 13px 0 -5px #9b999480, -16px 31px 42px -9px #48353d46;
}
.project-secondary .plane-surface { box-shadow: -27px 31px 49px -12px #49383d50; }
.plane-surface img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-caption { position: absolute; left: 1126px; top: 555px; width: 330px; z-index: 2; }
.project-caption h2 { margin: 0; font-family: var(--font-display); font-size: 103px; font-weight: 400; line-height: 1.08; letter-spacing: -3.8px; white-space: nowrap; }
.project-caption p { margin: 11px 0 0; font-size: 26px; line-height: 1.38; letter-spacing: -.75px; color: #6b676b; text-wrap: pretty; }
.project-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; min-height: 52px; font-size: 22px; letter-spacing: -.5px; }
.project-link-short { display: none; }
.project-link-label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 9px; }
.project-link img { width: 26px; height: 26px; transform: rotate(180deg); transition: transform 180ms cubic-bezier(.2,.75,.12,1); }
.project-link:hover img { transform: translateX(3px) rotate(180deg); }
.project-gallery[data-project="autolister"] .project-caption h2 { font-size: 73px; letter-spacing: -2.7px; }
.project-gallery[data-project="autolister"] .project-caption p { margin-top: 24px; }
.project-gallery[data-project="cryptik"] .project-caption h2 { font-size: 100px; }
.project-gallery[data-project="cryptik"] .project-caption { top: 480px; }
.project-gallery[data-project="autolister"] .project-secondary .plane-surface,
.project-gallery[data-project="cryptik"] .project-secondary .plane-surface { background: transparent; box-shadow: none; overflow: visible; }
.project-gallery[data-project="autolister"] .project-secondary .plane-surface img,
.project-gallery[data-project="cryptik"] .project-secondary .plane-surface img { object-fit: contain; }
.project-gallery[data-project="cryptik"] .project-secondary .plane-depth { transform: none; }

/* The photographed Doodle planes retain the approved artwork's original pixels.
   Header, caption, navigation, and interaction remain native HTML. */
.project-gallery[data-project="doodle"] .project-primary .plane-surface {
  position: relative; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  clip-path: polygon(0% 0%,93.326% 16.071%,100% 89.423%,6.206% 99.725%);
}
.project-gallery[data-project="doodle"] .project-primary .plane-surface img {
  position: absolute; width: 176.23%; height: 143.544%; left: -3.0445%; top: -28.9835%; max-width: none;
}
.project-gallery[data-project="doodle"] .project-primary .plane-depth { transform: none; }
.project-gallery[data-project="doodle"] .project-secondary { z-index: 0; }
.project-gallery[data-project="doodle"] .project-secondary .plane-depth { position: relative; }
.project-gallery[data-project="doodle"] .project-secondary .plane-depth { transform: none !important; }
.project-gallery[data-project="doodle"] .project-secondary .plane-depth::before {
  content: ''; position: absolute; left: -40px; top: -16px; width: 307px; height: 365px;
  background-image: url('./gallery/doodle-stage-reference.webp'); background-size: 1505px 1045px; background-position: -810px -285px;
  mask-image: linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent),linear-gradient(to bottom,transparent,#000 28px,#000 calc(100% - 45px),transparent);
  mask-composite: intersect;
}
/* The stationary note keeps its original photographic cast shadow. A second
   room crop underneath it would introduce a rectangular lighting boundary. */
.project-gallery[data-project="doodle"] .project-secondary .plane-depth::before { display: none !important; }
.project-gallery[data-project="doodle"] .project-secondary .plane-surface {
  position: relative; background: transparent; box-shadow: none;
  clip-path: polygon(9.926% .365%,100% 10.949%,86.765% 100%,0% 87.956%);
}
.project-gallery[data-project="doodle"] .project-secondary .plane-surface img {
  position: absolute; width: 553.309%; height: 381.387%; left: -312.5%; top: -109.854%; max-width: none;
}

@media (max-width: 900px) and (orientation: portrait), (max-width: 599px) {
  .project-gallery[data-project="doodle"] .gallery-environment img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .project-gallery[data-project="doodle"] .gallery-environment::before,
  .project-gallery[data-project="doodle"] .gallery-environment::after { display: none; }
  .work-list { margin-top: -2px; }
  .work-row { min-height: 32px; gap: 9px; font-size: 19px; letter-spacing: -.4px; padding: 2px 0; }
  .work-row img { width: 12px; height: 12px; }
  .work-status { margin: 2px 0 0 21px; font-size: 10px; }
  .project-gallery { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .project-gallery::-webkit-scrollbar { display: none; }
  .gallery-environment { position: fixed; }
  .gallery-frame { position: relative; inset: auto; width: 100%; height: auto; min-height: 100dvh; transform: none; padding-bottom: max(40px, env(safe-area-inset-bottom)); }
  .gallery-reference-scene { display: none; }
  .project-gallery[data-project="doodle"] .project-primary,
  .project-gallery[data-project="doodle"] .project-secondary { display: block; }
  .project-gallery[data-project="doodle"] .project-secondary .plane-depth::before { display: none; }
  .gallery-header { position: sticky; top: 0; left: auto; right: auto; padding: max(23px, env(safe-area-inset-top)) 24px 0; }
  .gallery-wordmark { font-size: 24px; letter-spacing: -.6px; }
  .gallery-back { gap: 7px; font-size: 15px; min-height: 48px; }
  .gallery-back img { width: 21px; height: 21px; }
  .project-primary { position: relative; width: calc(100% - 70px); height: auto; margin: 47px 0 0 24px; transform: rotate(-4deg); }
  .project-primary .plane-surface { border-radius: 5px; border-width: 1px; box-shadow: -3px 5px 0 -2px #9b999480, -8px 14px 27px -7px #48353d46; }
  .project-primary .plane-surface img { height: auto; }
  .project-secondary { left: auto; right: 19px; top: var(--artwork-top, 290px); width: 112px; height: 112px; transform: rotate(7deg); }
  .project-secondary .plane-surface { box-shadow: -10px 13px 21px -7px #49383d50; }
  .plane-depth { transform: none !important; }
  .project-caption { position: relative; inset: auto; width: auto; margin: 82px 24px 0; }
  .project-caption h2 { font-size: 64px; letter-spacing: -2.3px; line-height: 1.08; }
  .project-caption p { max-width: 310px; margin-top: 12px; font-size: 19px; line-height: 1.45; letter-spacing: -.45px; }
  .project-link { margin-top: 19px; min-height: 50px; gap: 9px; font-size: 18px; }
  .project-link img { width: 21px; height: 21px; }
  .project-link-label { text-underline-offset: 6px; }
  .project-gallery[data-project="autolister"] .project-caption h2 { font-size: 54px; letter-spacing: -2px; }
  .project-gallery[data-project="autolister"] .project-caption p { margin-top: 12px; }
  .project-gallery[data-project="cryptik"] .project-caption h2 { font-size: 64px; }
  .project-gallery[data-project="cryptik"] .project-caption { top: auto; }
  .project-gallery[data-project="cryptik"] .project-secondary { width: 150px; height: 100px; right: 11px; transform: none; }
  .project-gallery[data-project="autolister"] .project-secondary { width: 130px; height: 195px; right: 5px; transform: rotate(7deg); }
  .project-gallery[data-project="doodle"] .project-primary .plane-surface img { height: 143.544%; }
  .project-gallery[data-project="doodle"] .project-secondary { width: 112px; height: 112px; transform: none; }
  .project-gallery[data-project="doodle"] .gallery-frame { min-height: max(100dvh, calc(var(--doodle-caption-top) + 270px)); }
  .project-gallery[data-project="doodle"] .gallery-reference-scene {
    display: block; inset: auto; left: var(--doodle-mobile-left);
    top: calc(100px - 150px * var(--doodle-mobile-scale)); width: 1505px; height: 1045px;
    transform: scale(var(--doodle-mobile-scale)); transform-origin: top left;
    clip-path: inset(150px 405px 0 0);
    mask-image: linear-gradient(to right,transparent,#000 128px,#000 972px,transparent 1100px),linear-gradient(to bottom,transparent 150px,#000 278px,#000 945px,transparent);
    mask-composite: intersect;
  }
  .project-gallery[data-project="doodle"] .project-primary { position: absolute; margin: 0; }
  .project-gallery[data-project="doodle"] .project-caption { position: absolute; top: var(--doodle-caption-top); left: 24px; right: 24px; margin: 0; }
  .project-gallery[data-project="doodle"] .project-secondary .plane-depth::before {
    display: block; left: calc(-40px * var(--doodle-mobile-scale)); top: calc(-16px * var(--doodle-mobile-scale));
    width: calc(307px * var(--doodle-mobile-scale)); height: calc(365px * var(--doodle-mobile-scale));
    background-size: calc(1505px * var(--doodle-mobile-scale)) calc(1045px * var(--doodle-mobile-scale));
    background-position: calc(-810px * var(--doodle-mobile-scale)) calc(-285px * var(--doodle-mobile-scale));
    --note-feather: calc(28px * var(--doodle-mobile-scale));
    mask-image: linear-gradient(to right,transparent,#000 var(--note-feather),#000 calc(100% - var(--note-feather)),transparent),linear-gradient(to bottom,transparent,#000 var(--note-feather),#000 calc(100% - var(--note-feather)),transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .plane-depth { transform: none !important; }
  .work-row img, .gallery-back img, .project-link img { transition: none; }
}
@media (forced-colors: active) {
  .project-gallery { background: Canvas; color: CanvasText; }
  .gallery-environment { display: none; }
  .project-caption p { color: CanvasText; }
  .work-row { color: ButtonText; }
}

/* Continuous approved photographic compositions. Only website text is replaced
   by native HTML. Clean plates restore the stone behind those text regions. */
.composed-scene { position: absolute; inset: 0; margin: 0; transform-origin: 42% 54%; pointer-events: none; }
.composed-scene[hidden] { display: none; }
.composed-photo, .composed-photo img { display: block; width: 100%; height: 100%; }
.composed-clear {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); overflow: hidden;
  --feather: 12px;
  mask-image: linear-gradient(to right,transparent,#000 var(--feather),#000 calc(100% - var(--feather)),transparent),linear-gradient(to bottom,transparent,#000 var(--feather),#000 calc(100% - var(--feather)),transparent);
  mask-composite: intersect;
}
.composed-clear picture {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.composed-clear img { display: block; width: 100%; height: 100%; max-width: none; }
.project-gallery[data-scene="composed"] { overflow: hidden; scrollbar-width: none; }
.project-gallery[data-scene="composed"]::-webkit-scrollbar { display: none; }
.project-gallery[data-scene="composed"] .gallery-viewport { height: 100%; }
.project-gallery[data-scene="composed"] .gallery-frame { width: var(--stage-width); height: var(--stage-height); }
.project-gallery[data-scene="composed"] .gallery-environment img,
.project-gallery[data-scene="composed"] .project-primary,
.project-gallery[data-scene="composed"] .project-secondary { display: none; }
.project-gallery[data-scene="composed"] .gallery-reference-scene { display: none !important; }
.project-gallery[data-project="doodle"][data-scene="composed"] .gallery-environment img { position: static; width: 100%; height: 100%; object-fit: cover; }
.project-gallery[data-project="doodle"][data-scene="composed"] .gallery-environment::before,
.project-gallery[data-project="doodle"][data-scene="composed"] .gallery-environment::after { display: none; }
.project-gallery[data-project="autolister"] { background: #dcccbc; }
.project-gallery[data-project="cryptik"] { background: #c7bcb3; }
.project-gallery[data-scene="composed"] .gallery-header { position: absolute; top: 38px; left: 68px; right: 68px; margin: 0; }
.project-gallery[data-scene="composed"] .gallery-wordmark { letter-spacing: -.3px; }
.project-description-line { display: block; white-space: nowrap; }
.project-gallery[data-scene="composed"] .composed-clear-wordmark { --x: 54px; --y: 36px; --w: 211px; --h: 62px; }
.project-gallery[data-scene="composed"] .composed-clear-back { --x: 1264px; --y: 37px; --w: 187px; --h: 62px; }
.project-gallery[data-project="autolister"] .composed-clear-caption { --x: 1108px; --y: 402px; --w: 372px; --h: 258px; --feather: 16px; }
.project-gallery[data-project="cryptik"] .composed-clear-caption { --x: 937px; --y: 307px; --w: 439px; --h: 247px; --feather: 16px; }
.project-gallery[data-project="autolister"] .project-caption { left: 1124px; top: 413px; width: 352px; }
.project-gallery[data-project="autolister"] .project-caption h2 { font-size: 77px; letter-spacing: -4px; }
.project-gallery[data-project="autolister"] .project-caption p { margin: 16px 0 0 20px; max-width: 330px; font-size: 26px; line-height: 31px; letter-spacing: -.9px; color: #747174; }
.project-gallery[data-project="autolister"] .project-description-line { width: max-content; transform: scaleX(.915); transform-origin: left; }
.project-gallery[data-project="autolister"] .project-link { margin: 21px 0 0 21px; font-size: 21.5px; letter-spacing: -.65px; }
.project-gallery[data-project="cryptik"] .project-caption { left: 957px; top: 315px; width: 450px; }
.project-gallery[data-project="cryptik"] .project-caption h2 { font-size: 94px; }
.project-gallery[data-project="cryptik"] .project-caption p { white-space: nowrap; margin: 20px 0 0 2px; letter-spacing: -.6px; color: #4d4b4d; }
.project-gallery[data-project="cryptik"] .project-link { margin: 17px 0 0 2px; font-size: 21px; }

/* The atelier has a wide desktop photograph and its own native caption camera.
   Portrait and split layouts below retain the shared glass and text geometry. */
.project-gallery[data-project="doodle"][data-scene="composed"] .project-caption { left: min(var(--atelier-caption-x, 1234px), calc((100vw - var(--gallery-left) - 32px) / var(--gallery-scale) - 360px)); top: 431px; width: 360px; }
.project-gallery[data-project="doodle"][data-scene="composed"] .project-caption h2 { font-size: 92px; letter-spacing: -3.4px; }
.project-gallery[data-project="doodle"][data-scene="composed"] .project-caption p { margin: 0; font-size: 24px; line-height: 31px; letter-spacing: -.65px; }
.project-gallery[data-project="doodle"][data-scene="composed"] .project-link { margin: 10px 0 0; font-size: 22px; }
.project-gallery[data-project="doodle"][data-scene="composed"] .project-link-short { display: inline; text-decoration: underline; text-underline-offset: 9px; text-decoration-thickness: 1px; }
.project-gallery[data-project="doodle"][data-scene="composed"] .project-link-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.project-gallery[data-project="doodle"][data-scene="composed"] .gallery-environment img { object-position: 50% 52%; }

/* Widescreen uses one continuous photographic render, never stitched strips.
   The approved aspect ratio keeps its original, lossless source photograph. */
@media (min-width: 600px) and (min-aspect-ratio: 3/2) {
  .project-gallery[data-project="doodle"] .gallery-reference-scene {
    mask-image: linear-gradient(to right,transparent,#000 80px,#000 calc(100% - 80px),transparent);
  }
  .project-gallery[data-scene="composed"] .gallery-environment img { display: block; object-position: 50% 0; }
  .project-gallery[data-scene="composed"] .composed-scene { display: none; }
}

@media (min-width: 600px) and (orientation: landscape) and (max-height: 600px) {
  .project-gallery[data-scene="composed"] .gallery-wordmark { font-size: max(34px, calc(22px / var(--gallery-scale))); }
  .project-gallery[data-scene="composed"] .gallery-back { font-size: max(20px, calc(14px / var(--gallery-scale))); min-height: calc(44px / var(--gallery-scale)); }
  .project-gallery[data-scene="composed"] .gallery-back img { width: max(30px, calc(18px / var(--gallery-scale))); height: max(30px, calc(18px / var(--gallery-scale))); }
  .project-gallery[data-scene="composed"] .project-caption { width: max(352px, calc(224px / var(--gallery-scale))); }
  .project-gallery[data-project="cryptik"] .project-caption { width: max(450px, calc(224px / var(--gallery-scale))); }
  .project-gallery[data-scene="composed"] .project-caption h2 { font-size: max(77px, calc(48px / var(--gallery-scale))); letter-spacing: calc(-1.8px / var(--gallery-scale)); }
  .project-gallery[data-project="cryptik"] .project-caption h2 { font-size: max(94px, calc(48px / var(--gallery-scale))); }
  .project-gallery[data-scene="composed"] .project-caption p { max-width: none; font-size: max(26px, calc(16px / var(--gallery-scale))); line-height: 1.28; }
  .project-gallery[data-scene="composed"] .project-link { font-size: max(21px, calc(16px / var(--gallery-scale))); min-height: calc(44px / var(--gallery-scale)); }
  .project-gallery[data-scene="composed"] .project-link img { width: max(26px, calc(20px / var(--gallery-scale))); height: max(26px, calc(20px / var(--gallery-scale))); }
}

@media (orientation: portrait), (max-width: 599px) {
  .project-gallery[data-scene="composed"] { overflow-y: auto; overscroll-behavior: contain; }
  .project-gallery[data-scene="composed"] .gallery-environment img { display: none; }
  .gallery-viewport { height: auto; min-height: 100dvh; }
  .project-gallery[data-scene="composed"] .gallery-viewport { height: var(--mobile-stage-height); min-height: 100dvh; }
  .project-gallery[data-scene="composed"] .gallery-frame {
    position: absolute; left: 0; top: 0; padding: 0; min-height: 0;
    width: var(--stage-width); height: var(--stage-height);
    transform: scale(var(--gallery-scale)); transform-origin: top left;
  }
  .project-gallery[data-scene="composed"] .gallery-header { position: absolute; top: 56px; left: 69px; right: 78px; padding: 0; margin: 0; }
  .project-gallery[data-scene="composed"] .gallery-wordmark { font-size: 47.5px; letter-spacing: -1.2px; }
  .project-gallery[data-scene="composed"] .gallery-back { position: relative; gap: 22px; font-size: 27.2px; min-height: 80px; letter-spacing: -.6px; }
  .project-gallery[data-scene="composed"] .gallery-back img { width: 36px; height: 36px; }
  .project-gallery[data-scene="composed"] .gallery-back::before { content: ''; position: absolute; inset: -20px 0; }
  .project-gallery[data-project="cryptik"] .gallery-header { top: 54px; left: 51px; right: 56px; }
  .project-gallery[data-project="cryptik"] .gallery-wordmark { font-size: 50.5px; }
  .project-gallery[data-project="cryptik"] .gallery-back { font-size: 26px; gap: 23px; }
  .project-gallery[data-project="autolister"] .composed-clear-wordmark { --x: 48px; --y: 49px; --w: 279px; --h: 81px; --feather: 18px; }
  .project-gallery[data-project="autolister"] .composed-clear-back { --x: 540px; --y: 61px; --w: 253px; --h: 61px; }
  .project-gallery[data-project="autolister"] .composed-clear-caption { --x: 43px; --y: 1363px; --w: 681px; --h: 378px; --feather: 22px; }
  .project-gallery[data-project="cryptik"] .composed-clear-wordmark { --x: 32px; --y: 50px; --w: 302px; --h: 78px; --feather: 18px; }
  .project-gallery[data-project="cryptik"] .composed-clear-back { --x: 574px; --y: 61px; --w: 238px; --h: 62px; }
  .project-gallery[data-project="cryptik"] .composed-clear-caption { --x: 30px; --y: 1468px; --w: 645px; --h: 321px; --feather: 22px; }
  .project-gallery[data-scene="composed"] .project-caption { position: absolute; width: 746px; margin: 0; }
  .project-gallery[data-project="autolister"] .project-caption { left: 61px; top: 1367px; }
  .project-gallery[data-project="cryptik"] .project-caption { left: 54px; top: 1486px; }
  .project-gallery[data-scene="composed"] .project-caption h2 { font-size: 130px; line-height: 1.08; letter-spacing: -5px; }
  .project-gallery[data-scene="composed"] .project-caption p { margin: 20px 0 0; max-width: 700px; font-size: 42px; line-height: 52px; letter-spacing: -1.2px; color: var(--ink); }
  .project-gallery[data-project="autolister"] .project-caption h2 { letter-spacing: -5.8px; }
  .project-gallery[data-project="autolister"] .project-caption p { max-width: 700px; font-size: 40.5px; margin: 16px 0 0 6px; letter-spacing: -.4px; }
  .project-gallery[data-project="autolister"] .project-description-line { transform: none; }
  .project-gallery[data-project="cryptik"] .project-caption h2 { font-size: 117px; }
  .project-gallery[data-project="cryptik"] .project-caption p { font-size: 38px; margin: 19px 0 0 2px; white-space: nowrap; }
  .project-gallery[data-scene="composed"] .project-link { font-size: 40px; min-height: 96px; margin: 32px 0 0; gap: 26px; letter-spacing: -1px; }
  .project-gallery[data-project="autolister"] .project-link { margin: 15px 0 0 4px; }
  .project-gallery[data-project="cryptik"] .project-link { margin: 2px 0 0 1px; font-size: 38px; letter-spacing: -1.1px; }
  .project-gallery[data-scene="composed"] .project-link img { width: 46px; height: 46px; }
  .project-gallery[data-scene="composed"] .project-link { position: relative; }
  .project-gallery[data-scene="composed"] .project-link::before { content: ''; position: absolute; inset: -14px 0; }
  .project-gallery[data-scene="composed"] .project-link-label { position: relative; text-decoration: none; }
  .project-gallery[data-scene="composed"] .project-link-label::after { content: ''; position: absolute; left: 3px; right: -3px; height: 2px; bottom: -3px; background: currentColor; }
  .project-gallery[data-project="cryptik"] .project-link-label::after { bottom: -8px; }
  .project-gallery[data-project="doodle"][data-scene="composed"] .gallery-header { top: 54px; left: 54px; right: 56px; }
  .project-gallery[data-project="doodle"][data-scene="composed"] .gallery-wordmark { font-size: 50.5px; }
  .project-gallery[data-project="doodle"][data-scene="composed"] .gallery-back { font-size: 26px; gap: 23px; }
  .project-gallery[data-project="doodle"][data-scene="composed"] .project-caption { left: 54px; right: auto; top: 1460px; width: 730px; margin: 0; }
  .project-gallery[data-project="doodle"][data-scene="composed"] .project-caption h2 { font-size: 128px; letter-spacing: -4.5px; }
  .project-gallery[data-project="doodle"][data-scene="composed"] .project-caption p { max-width: 730px; font-size: 38px; line-height: 52px; margin: 16px 0 0 2px; letter-spacing: -.4px; }
  .project-gallery[data-project="doodle"][data-scene="composed"] .project-link { margin: 18px 0 0 2px; font-size: 38px; }
}

/* The photo fills one measured artwork window. Glass is a feathered optical
   veil behind native text, with no card boundary or separate button surface. */
@media (orientation: portrait), (max-width: 599px), (orientation: landscape) and (min-width: 600px) and (max-width: 1180px), (orientation: landscape) and (min-width: 600px) and (max-width: 1366px) and (min-height: 900px) {
  .project-gallery[data-project][data-scene="composed"] {
    --gallery-surface: #f4efe8;
    --caption-inset: clamp(24px, 4vw, 48px);
    --caption-bottom-space: clamp(24px, 8svh, 64px);
    --caption-left: max(var(--caption-inset), env(safe-area-inset-left));
    --caption-right: max(var(--caption-inset), env(safe-area-inset-right));
    height: var(--visible-height, 100dvh); overflow: hidden;
  }
  .project-gallery[data-project="doodle"][data-scene="composed"] { --gallery-surface: #f4efe8; }
  .project-gallery[data-project="cryptik"][data-scene="composed"] { --gallery-surface: #eeede8; }
  .project-gallery[data-project][data-scene="composed"] .gallery-environment img { display: none; }
  .project-gallery[data-project][data-scene="composed"] .gallery-viewport {
    height: var(--mobile-art-window, 100dvh); min-height: 0; overflow: clip;
  }
  .project-gallery[data-scene="composed"] .gallery-scene-area { height: var(--mobile-stage-height); }
  .project-gallery[data-project][data-scene="composed"] .gallery-frame {
    left: var(--gallery-left); top: var(--gallery-top); width: var(--stage-width); height: var(--mobile-image-height);
    transform: scale(var(--gallery-scale)); transform-origin: top left; mask-image: none;
  }
  .project-gallery[data-scene="composed"] .composed-scene {
    top: 0; bottom: auto; height: var(--mobile-image-height); mask-image: none;
  }
  .project-gallery[data-scene="composed"] .gallery-ui-frame {
    left: 0; right: 0; width: auto; height: auto; transform: none;
  }
  .project-gallery[data-scene="composed"] .gallery-header-frame { top: 0; z-index: 4; }
  .project-gallery[data-scene="composed"] .gallery-header-frame::before { display: none; }
  .project-gallery[data-project][data-scene="composed"] .gallery-header {
    position: relative; inset: auto; margin: 0; padding: max(16px, env(safe-area-inset-top)) var(--caption-right) 0 var(--caption-left);
  }
  .project-gallery[data-project][data-scene="composed"] .gallery-wordmark { font-size: 24px; letter-spacing: -.6px; }
  .project-gallery[data-project][data-scene="composed"] .gallery-back {
    gap: 8px; font-size: 13px; min-height: 44px; padding: 0; letter-spacing: 0;
  }
  .project-gallery[data-project][data-scene="composed"] .gallery-back img { width: 19px; height: 19px; }
  .project-gallery[data-scene="composed"] .gallery-caption-frame { top: auto; bottom: 0; z-index: 5; }
  .project-gallery[data-scene="composed"] .gallery-caption-frame::before {
    content: ''; position: absolute; inset: -64px -24px -24px; pointer-events: none;
    /* Frost a registered copy of this scene. Unlike a moving backdrop filter,
       this glass cannot reflect a clipped frame or sample the next project. */
    background-image: linear-gradient(#f4efe81f, #f4efe82e), var(--caption-glass-photo, none);
    background-size: 100% 100%, var(--caption-glass-size);
    background-position: 0 0, var(--caption-glass-position);
    background-repeat: no-repeat;
    filter: blur(8px) saturate(1.04);
    -webkit-mask-image: linear-gradient(transparent, #00000080 28px, #000 72px);
    mask-image: linear-gradient(transparent, #00000080 28px, #000 72px);
  }
  .project-gallery[data-project][data-scene="composed"] .project-caption {
    position: relative; inset: auto; width: auto; margin: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px;
    padding: 22px var(--caption-right) max(var(--caption-bottom-space), env(safe-area-inset-bottom)) var(--caption-left); background: transparent;
  }
  .project-gallery[data-scene="composed"] .project-caption::before {
    content: ''; position: absolute; top: 0; left: var(--caption-left); right: var(--caption-right);
    height: 1px; background: #24252035; box-shadow: 0 1px 0 #ffffff4d;
  }
  .project-gallery[data-project][data-scene="composed"] .project-caption h2 {
    grid-column: 1; grid-row: 1; align-self: center;
    font-size: clamp(32px, 9.5vw, 42px); line-height: 1.05; letter-spacing: -1.4px;
  }
  .project-gallery[data-project][data-scene="composed"] .project-caption p {
    grid-column: 1 / -1; grid-row: 2; max-width: none; margin: 8px 0 0;
    font-size: 15px; line-height: 21px; min-block-size: 2lh; letter-spacing: -.2px; white-space: normal; color: var(--ink);
  }
  .project-gallery[data-project][data-scene="composed"] .project-description-line { width: auto; white-space: normal; transform: none; }
  .project-gallery[data-project][data-scene="composed"] .project-link {
    position: relative; inset: auto; grid-column: 2; grid-row: 1; align-self: center;
    min-height: 48px; min-width: 80px; margin: 0; padding: 0; border: 0; border-radius: 0;
    justify-content: flex-end; gap: 12px; font-size: 15px; letter-spacing: 0;
  }
  .project-gallery[data-scene="composed"] .project-link::before { display: none; }
  .project-gallery[data-project][data-scene="composed"] .project-link img { width: 22px; height: 22px; }
  .project-gallery[data-project][data-scene="composed"] .project-link-short { display: inline; text-decoration: none; }
  .project-gallery[data-scene="composed"] .project-link-label {
    position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .project-gallery[data-scene="composed"] .project-link-label::after { display: none; }
}

@media (orientation: portrait) and (min-width: 600px) {
  .project-gallery[data-project][data-scene="composed"] .gallery-wordmark { font-size: 30px; }
  .project-gallery[data-project][data-scene="composed"] .gallery-back { font-size: 16px; }
  .project-gallery[data-project][data-scene="composed"] .project-caption { padding-top: 28px; padding-bottom: max(var(--caption-bottom-space), env(safe-area-inset-bottom)); }
  .project-gallery[data-project][data-scene="composed"] .project-caption h2 { font-size: 48px; }
  .project-gallery[data-project][data-scene="composed"] .project-caption p { font-size: 18px; line-height: 25px; }
  .project-gallery[data-project][data-scene="composed"] .project-link { font-size: 18px; }
}

@media (orientation: portrait) and (min-width: 600px) and (max-height: 800px) {
  .project-gallery[data-project][data-scene="composed"] .project-caption { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}

/* The same responsive photography is art-directed into a separate left stage
   on landscape tablets and phones. The right caption never covers the art. */
.project-gallery[data-project][data-layout="split"] { height: var(--visible-height, 100dvh); }
.project-gallery[data-scene="composed"][data-layout="split"] .composed-scene { display: block; }
.project-gallery[data-scene="composed"][data-layout="split"] .gallery-environment::before,
.project-gallery[data-scene="composed"][data-layout="split"] .gallery-environment::after { display: none; }
.project-gallery[data-scene="composed"][data-layout="split"] .gallery-caption-frame {
  left: auto; right: 0; width: clamp(300px, 30vw, 360px);
}
.project-gallery[data-project][data-layout="split"] .project-caption { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.project-gallery[data-project][data-layout="split"] .project-caption h2 { font-size: clamp(30px, 2.8vw, 36px); }
.project-gallery[data-project][data-layout="split"] .project-caption p { font-size: 15px; line-height: 21px; }

@media (orientation: portrait) and (max-height: 600px) {
  .project-gallery[data-project][data-scene="composed"] .project-caption { padding-top: 14px; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .project-gallery[data-project][data-scene="composed"] .project-caption h2 { font-size: 32px; padding-right: 90px; grid-column: 1 / -1; }
  .project-gallery[data-project][data-scene="composed"] .project-link { position: absolute; top: -7px; right: var(--caption-right); }
}

@media (prefers-reduced-transparency: reduce) {
  .project-gallery[data-scene="composed"] .gallery-caption-frame::before {
    background: #f4efe8; filter: none; -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none;
  }
}

/* Full-bleed landscape photographs need no backdrop extensions or edge masks. */
.project-gallery[data-scene="composed"][data-layout="split"] .gallery-environment img { display: none; }
.project-gallery[data-scene="composed"][data-layout="split"] .gallery-frame {
  top: var(--gallery-top); mask-image: none;
}
.project-gallery[data-scene="composed"][data-layout="split"] .composed-scene { top: 0; mask-image: none; }
@media (orientation: landscape) and (max-width: 700px) {
  .project-gallery[data-scene="composed"][data-layout="split"] .gallery-caption-frame { width: 260px; }
  .project-gallery[data-project][data-layout="split"] .project-caption h2 { font-size: 24px; }
  .project-gallery[data-project][data-layout="split"] .project-caption p { font-size: 14px; line-height: 20px; }
}


/* Fixed repeated pages on a native track. The header stays within its gesture area. */
.gallery-shell {
  position: fixed; inset: 0; width: 100vw; height: 100dvh;
  max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  overflow: hidden; background: #d8c7cd; color: var(--ink); font-family: var(--font-text);
}
.gallery-shell::backdrop { background: transparent; }
.gallery-shell:focus { outline: none; }
.gallery-track {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  overflow-x: hidden; overflow-y: auto; scroll-snap-type: y mandatory;
  overscroll-behavior-y: none; overflow-anchor: none; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; touch-action: pan-y pinch-zoom;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-shell[data-phase="closing"] .gallery-track { overflow-y: hidden; }
.gallery-track:focus { outline: none; }
.gallery-track > .gallery-panel[data-project][data-scene] {
  position: relative; inset: auto; width: 100%; height: var(--gallery-page-height, 100%); min-height: 0;
  flex: 0 0 var(--gallery-page-height, 100%); margin: 0; overflow: clip; scroll-snap-align: start; scroll-snap-stop: always;
  contain: layout paint style; overflow-anchor: none; touch-action: pan-y pinch-zoom;
}
/* An invisible surface above the seam casts a broad, blurred shadow onto the
   next photograph. There is no painted stroke or bevel at the scene boundary. */
.gallery-panel::before {
  content: ''; position: absolute; z-index: 8; top: -18px; left: 0; right: 0;
  height: 18px; pointer-events: none;
  opacity: var(--room-edge-opacity, 0);
  background: transparent;
  box-shadow: 0 20px 38px 14px #160e0996, 0 34px 64px 22px #160e0938;
}
@media (forced-colors: active) {
  .gallery-panel::before { top: 0; height: 1px; background: CanvasText; box-shadow: none; }
}
.gallery-panel .gallery-environment { position: absolute; }
.gallery-panel[data-ready="false"] .composed-scene { visibility: hidden; }
.gallery-scene-loader { display: none; }
.gallery-panel[data-ready="false"] .gallery-scene-loader {
  display: block; position: absolute; top: 46%; left: calc(50% - 9px);
  width: 18px; height: 18px; border: 1px solid #24252030; border-top-color: currentColor;
  border-radius: 50%; animation: terminal-processing 1s linear infinite;
}
.gallery-panel[data-ready="error"] .gallery-scene-loader {
  display: block; position: absolute; top: 45%; left: 15%; right: 15%; text-align: center; font-size: 14px;
}
.gallery-chrome { z-index: 10; }
.gallery-track > .gallery-chrome {
  position: sticky; top: 0; left: 0; width: 100%; flex: 0 0 0; height: 0; min-height: 0; overflow: visible;
}
.gallery-chrome .gallery-wordmark { letter-spacing: -.3px; }
.gallery-chrome .gallery-header { position: absolute; top: 38px; left: 68px; right: 68px; padding: 0; margin: 0; isolation: isolate; }
.gallery-chrome .gallery-header::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  /* Keep controls legible even when an engine cannot composite backdrop blur. */
  /* Counteract the centered camera so the glass reaches both viewport edges. */
  top: calc(-38px - (var(--gallery-top, 0px) + 32px) / var(--gallery-scale, 1));
  left: calc(-68px - (var(--gallery-left, 0px) + 32px) / var(--gallery-scale, 1));
  right: auto; bottom: -48px;
  width: calc((100vw + 64px) / var(--gallery-scale, 1)); background: #f4efe8e6;
  /* A cosine alpha falloff has no abrupt slope at either end of the veil. */
  -webkit-backdrop-filter: blur(10px) saturate(1.04); backdrop-filter: blur(10px) saturate(1.04);
  -webkit-mask-image: linear-gradient(#000 0 52%, rgba(0,0,0,0.99039) 55%, rgba(0,0,0,0.96194) 58%, rgba(0,0,0,0.91573) 61%, rgba(0,0,0,0.85355) 64%, rgba(0,0,0,0.77779) 67%, rgba(0,0,0,0.69134) 70%, rgba(0,0,0,0.59755) 73%, rgba(0,0,0,0.50000) 76%, rgba(0,0,0,0.40245) 79%, rgba(0,0,0,0.30866) 82%, rgba(0,0,0,0.22221) 85%, rgba(0,0,0,0.14645) 88%, rgba(0,0,0,0.08427) 91%, rgba(0,0,0,0.03806) 94%, rgba(0,0,0,0.00961) 97%, rgba(0,0,0,0.00000) 100%);
  mask-image: linear-gradient(#000 0 52%, rgba(0,0,0,0.99039) 55%, rgba(0,0,0,0.96194) 58%, rgba(0,0,0,0.91573) 61%, rgba(0,0,0,0.85355) 64%, rgba(0,0,0,0.77779) 67%, rgba(0,0,0,0.69134) 70%, rgba(0,0,0,0.59755) 73%, rgba(0,0,0,0.50000) 76%, rgba(0,0,0,0.40245) 79%, rgba(0,0,0,0.30866) 82%, rgba(0,0,0,0.22221) 85%, rgba(0,0,0,0.14645) 88%, rgba(0,0,0,0.08427) 91%, rgba(0,0,0,0.03806) 94%, rgba(0,0,0,0.00961) 97%, rgba(0,0,0,0.00000) 100%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
.gallery-chrome .gallery-header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 1px;
  pointer-events: none; background: #24252026; box-shadow: 0 1px 0 #ffffff35;
}
@media (orientation: portrait), (max-width: 599px),
  (orientation: landscape) and (min-width: 600px) and (max-width: 1180px),
  (orientation: landscape) and (max-width: 1366px) and (min-height: 900px) {
  .gallery-chrome { left: 0; right: 0; top: 0; width: auto; height: auto; transform: none; }
  .gallery-chrome .gallery-header-frame { left: 0; right: 0; top: 0; width: auto; height: auto; transform: none; }
  .gallery-chrome .gallery-header {
    --chrome-inset: clamp(24px, 4vw, 48px);
    position: relative; inset: auto;
    padding: max(16px, env(safe-area-inset-top)) max(var(--chrome-inset), env(safe-area-inset-right)) 0 max(var(--chrome-inset), env(safe-area-inset-left));
  }
  .gallery-chrome .gallery-header::before {
    /* Overscan hides the filter's sampling bounds outside the viewport. */
    inset: -32px -32px -48px; width: auto;
    -webkit-mask-image: linear-gradient(#000 0 52%, rgba(0,0,0,0.99039) 55%, rgba(0,0,0,0.96194) 58%, rgba(0,0,0,0.91573) 61%, rgba(0,0,0,0.85355) 64%, rgba(0,0,0,0.77779) 67%, rgba(0,0,0,0.69134) 70%, rgba(0,0,0,0.59755) 73%, rgba(0,0,0,0.50000) 76%, rgba(0,0,0,0.40245) 79%, rgba(0,0,0,0.30866) 82%, rgba(0,0,0,0.22221) 85%, rgba(0,0,0,0.14645) 88%, rgba(0,0,0,0.08427) 91%, rgba(0,0,0,0.03806) 94%, rgba(0,0,0,0.00961) 97%, rgba(0,0,0,0.00000) 100%);
    mask-image: linear-gradient(#000 0 52%, rgba(0,0,0,0.99039) 55%, rgba(0,0,0,0.96194) 58%, rgba(0,0,0,0.91573) 61%, rgba(0,0,0,0.85355) 64%, rgba(0,0,0,0.77779) 67%, rgba(0,0,0,0.69134) 70%, rgba(0,0,0,0.59755) 73%, rgba(0,0,0,0.50000) 76%, rgba(0,0,0,0.40245) 79%, rgba(0,0,0,0.30866) 82%, rgba(0,0,0,0.22221) 85%, rgba(0,0,0,0.14645) 88%, rgba(0,0,0,0.08427) 91%, rgba(0,0,0,0.03806) 94%, rgba(0,0,0,0.00961) 97%, rgba(0,0,0,0.00000) 100%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .gallery-chrome .gallery-header::after {
    left: max(var(--chrome-inset), env(safe-area-inset-left)); right: max(var(--chrome-inset), env(safe-area-inset-right)); bottom: -8px;
  }
  .gallery-chrome .gallery-wordmark { font-size: 24px; letter-spacing: -.6px; }
  .gallery-chrome .gallery-back { gap: 8px; font-size: 13px; min-height: 44px; padding: 0; letter-spacing: 0; }
  .gallery-chrome .gallery-back img { width: 19px; height: 19px; }
}
@media (orientation: portrait) and (min-width: 600px) {
  .gallery-chrome .gallery-wordmark { font-size: 30px; }
  .gallery-chrome .gallery-back { font-size: 16px; }
}
@supports (backdrop-filter: blur(1px)) {
  .gallery-chrome .gallery-header::before { background: #f4efe86b; }
}
@supports (-webkit-backdrop-filter: blur(1px)) and (not (backdrop-filter: blur(1px))) {
  .gallery-chrome .gallery-header::before { background: #f4efe8f0; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gallery-chrome .gallery-header::before { background: #f4efe8f0; }
}
@media (prefers-reduced-transparency: reduce) {
  .gallery-chrome .gallery-header::before { background: #f4efe8e6; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-panel[data-ready="false"] .gallery-scene-loader { animation: none; }
}
@media (forced-colors: active) {
  .gallery-shell { background: Canvas; color: CanvasText; }
  .gallery-panel .gallery-caption-frame::before { background: Canvas; filter: none; -webkit-mask-image: none; mask-image: none; }
  .gallery-chrome .gallery-header::before { background: Canvas; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (orientation: landscape) and (min-width: 1181px) and (max-height: 600px) {
  .gallery-shell[data-layout="desktop"] .gallery-wordmark { font-size: max(34px, calc(22px / var(--gallery-scale))); }
  .gallery-shell[data-layout="desktop"] .gallery-back { font-size: max(20px, calc(14px / var(--gallery-scale))); min-height: calc(44px / var(--gallery-scale)); }
  .gallery-shell[data-layout="desktop"] .gallery-back img { width: max(30px, calc(18px / var(--gallery-scale))); height: max(30px, calc(18px / var(--gallery-scale))); }
}

/* During a viewport switch, retain the last decoded artwork until the complete
   replacement set is ready. Media queries must not expose an empty image node. */
.gallery-panel[data-project][data-scene][data-art="photo"] .composed-scene { display: block; }
.gallery-panel[data-project][data-scene][data-art="photo"] .gallery-environment img { display: none; }
.gallery-panel[data-project][data-scene][data-art="wide"] .composed-scene { display: none; }
.gallery-panel[data-project][data-scene][data-art="wide"] .gallery-environment img { display: block; }
.gallery-panel[data-art] .composed-photo img { object-fit: cover; }


/* A compact vertical position rail floats beside the last caption line.
   Its 44px hit area is out of flow, so the accepted footer geometry stays fixed. */
.project-caption { --cue-scale: var(--gallery-scale); }
.project-caption p { position: relative; }
.project-caption .project-description-line:last-of-type { padding-right: calc(44px / var(--cue-scale)); }
.gallery-scroll-cue {
  position: absolute; right: 0; bottom: calc((1lh - 44px / var(--cue-scale)) / 2);
  width: calc(44px / var(--cue-scale)); height: calc(44px / var(--cue-scale));
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  gap: calc(4px / var(--cue-scale)); padding: 0; margin: 0; border: 0;
  background: transparent; color: var(--ink); opacity: .7; cursor: pointer;
  line-height: inherit; touch-action: manipulation; transition: opacity 120ms ease-out;
}
.gallery-scroll-cue > span {
  flex: 0 0 auto; width: calc(3.5px / var(--cue-scale)); height: calc(3.5px / var(--cue-scale));
  border-radius: 999px; background: currentColor; pointer-events: none;
}
.gallery-scroll-cue > span[data-active="true"] { height: calc(12px / var(--cue-scale)); }
.gallery-scroll-cue:hover, .gallery-scroll-cue:focus-visible { opacity: 1; }
.gallery-scroll-cue:focus-visible { outline-offset: 2px; }
@media (orientation: portrait), (max-width: 599px),
  (orientation: landscape) and (min-width: 600px) and (max-width: 1180px),
  (orientation: landscape) and (max-width: 1366px) and (min-height: 900px) {
  .project-caption { --cue-scale: 1; }
}
@media (forced-colors: active) {
  .gallery-scroll-cue { color: CanvasText; opacity: 1; }
  .gallery-scroll-cue > span { background: CanvasText; forced-color-adjust: none; }
}