/* The Lab is a looping image canvas, not a masonry document. */
body.in-lab { overflow: hidden; }
.in-lab .hint { display: none; }
.in-lab .lab { position: fixed; inset: 0; min-height: 0; padding: 0; overflow: hidden; }
.lab-hub { display: none; }
body.in-lab-hub { overflow: hidden; background: #060707; }
.in-lab-hub .video,.in-lab-hub .wash,.in-lab-hub .grain,.in-lab-hub .home,.in-lab-hub .nav,.in-lab-hub .hint { display: none; }
.in-lab-hub .lab-hub { display: block; }
.lab-hub { position: fixed; z-index: 20; inset: 0; overflow: hidden; background: #060707; color: #d9dede; }
.lab-hub::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .24; background: radial-gradient(circle at 68% 18%,rgba(136,151,151,.12),transparent 36%),radial-gradient(circle at 18% 74%,rgba(92,106,106,.1),transparent 32%); }
.hub-network { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .72; }
.hub-head { position: absolute; z-index: 5; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: max(20px,env(safe-area-inset-top)) 28px 16px; }
.hub-back { min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font-size: 13px; cursor: pointer; opacity: .86; }
.hub-mark,.hub-kicker,.hub-help { font: 10px/1.4 'DM Mono',monospace; letter-spacing: .05em; text-transform: uppercase; }
.hub-mark { opacity: .46; }
.hub-copy { position: absolute; z-index: 2; top: clamp(86px,13svh,148px); left: 28px; width: min(760px,calc(100% - 56px)); pointer-events: none; }
.hub-kicker { margin: 0 0 12px; opacity: .48; }
.hub-copy h2 { margin: 0 0 12px; font: 600 clamp(38px,6vw,86px)/.92 Arial,sans-serif; letter-spacing: -.075em; }
.hub-copy > p:last-child { width: min(610px,86vw); margin: 0; color: #9da5a5; font-size: clamp(13px,1.25vw,17px); line-height: 1.62; }
.project-rail { position: absolute; z-index: 3; inset: auto 0 0; height: min(58svh,590px); overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; }
.project-rail.dragging { cursor: grabbing; }
.project-track { display: flex; align-items: flex-end; gap: 12px; width: max-content; height: 100%; padding: 0 0 18px; transform: translate3d(0,0,0); will-change: transform; }
.project-loop { display: flex; flex: 0 0 auto; align-items: flex-end; gap: 12px; height: 100%; }
.project-card { --card-height: clamp(300px,48svh,500px); position: relative; flex: 0 0 clamp(230px,22vw,340px); width: clamp(230px,22vw,340px); height: var(--card-height); padding: 0; overflow: hidden; border: 1px solid #3d4141; border-radius: 9px; background: #151717; color: #fff; text-align: left; cursor: pointer; isolation: isolate; transition: height .42s cubic-bezier(.22,1,.36,1),filter .3s ease,border-color .3s ease; }
.project-card:hover,.project-card:focus-visible { height: calc(var(--card-height) + 62px); border-color: #9ba2a2; outline: none; }
.project-media { position: absolute; inset: 0; overflow: hidden; background: #ddd; }
.project-media::after { content: ''; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent,rgba(0,0,0,.68)); opacity: 0; transition: opacity .3s ease; }
.project-card:hover .project-media::after,.project-card:focus-visible .project-media::after { opacity: 1; }
.project-cover { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform .7s cubic-bezier(.22,1,.36,1),filter .35s ease; }
.project-card:hover .project-cover,.project-card:focus-visible .project-cover { transform: scale(1.035); }
.project-gradient { background: linear-gradient(145deg,var(--c1),var(--c2) 48%,var(--c3)); }
.project-gradient::before { content: ''; position: absolute; inset: -28%; background: radial-gradient(circle at 28% 34%,var(--c3) 0 13%,transparent 40%),radial-gradient(circle at 72% 66%,var(--c1) 0 12%,transparent 44%),linear-gradient(120deg,var(--c2),var(--c3),var(--c1)); filter: blur(20px) saturate(1.25); animation: hub-gradient 9s ease-in-out infinite alternate; }
.project-gradient::after { inset: 34% 0 0; z-index: 1; }
.project-card:nth-child(2n) .project-gradient::before { animation-direction: alternate-reverse; animation-duration: 11s; }
.project-card:nth-child(3n) .project-gradient::before { animation-duration: 13s; }
.project-info { position: absolute; z-index: 3; inset: auto 18px 17px; display: grid; grid-template-columns: 1fr auto; gap: 5px 14px; align-items: end; opacity: 0; transform: translateY(10px); transition: opacity .28s ease,transform .38s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.project-card:hover .project-info,.project-card:focus-visible .project-info { opacity: 1; transform: none; }
.project-number { grid-column: 2; grid-row: 1 / span 2; align-self: end; font: 10px/1.2 'DM Mono',monospace; opacity: .75; }
.project-title { margin: 0; font-size: clamp(17px,1.65vw,24px); font-weight: 600; line-height: 1.05; letter-spacing: -.045em; }
.project-description { margin: 0; font-size: 11px; line-height: 1.4; opacity: .82; }
.hub-help { position: absolute; z-index: 4; right: 28px; bottom: 13px; color: #8b9494; opacity: .78; pointer-events: none; }
.hub-help i { display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: #4aaa65; }
@keyframes hub-gradient { 0% { transform: translate3d(-8%,-5%,0) rotate(-7deg) scale(1.08); } 50% { transform: translate3d(7%,4%,0) rotate(4deg) scale(1.18); } 100% { transform: translate3d(-2%,8%,0) rotate(10deg) scale(1.12); } }
.labhead { position: absolute; inset: 0 0 auto; z-index: 4; padding: max(18px, env(safe-area-inset-top)) 28px 16px; border: 0; pointer-events: none; background: linear-gradient(var(--paper), transparent); }
.labhead button,.labhead .filters { pointer-events: auto; }
.back,.filter { min-height: 44px; font-size: 13px; }
.filters { gap: 8px; padding: 3px; border: 1px solid #c8c6c1; border-radius: 999px; background: rgba(245,244,241,.9); }
.filter { min-width: 52px; padding: 0 15px; border-radius: 999px; font-size: 15px; font-weight: 600; text-transform: uppercase; }
.filter.active { border: 0; color: var(--paper); background: var(--ink); text-decoration: none; }
.count { font-size: 9px; }
.lab-intro { position: absolute; z-index: 6; top: 68px; right: 28px; width: min(486px,calc(100% - 56px)); color: var(--ink); background: var(--paper); }
.lab-intro summary { position: relative; padding: 14px 40px 14px 16px; list-style: none; font-size: 15px; font-weight: 500; line-height: 1.65; cursor: pointer; }
.lab-intro summary::-webkit-details-marker { display: none; }
.lab-intro summary::after { content: '+'; position: absolute; right: 16px; top: 14px; font: 24px/1.1 Arial,sans-serif; }
.lab-intro[open] summary::after { content: '−'; }
.lab-intro[open] { box-shadow: 0 10px 32px #0000000c; }
.lab-intro summary:focus-visible,.lab-intro-body:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.lab-intro-body { max-height: calc(100svh - 185px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 0 20px 20px 16px; font-size: 14px; line-height: 1.95; }
.lab-intro-body p { margin: 0 0 18px; }
.lab-intro-body p:last-child { margin-bottom: 0; }
.lab-intro-question { font-weight: 600; }
.overview-toggle { position: absolute; z-index: 5; top: max(16px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); border: 0; background: none; width: 44px; height: 44px; color: var(--ink); font: 38px/1 sans-serif; cursor: pointer; }
.grid { position: absolute; z-index: 2; inset: 0; padding: 0; columns: auto; overflow: hidden; touch-action: none; cursor: grab; background: transparent; }
.grid.dragging { cursor: grabbing; }
.tile { position: absolute; left: 0; top: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: #e8e6e1; overflow: hidden; will-change: transform; }
.tile img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.tile:hover img { transform: none; }
.tile:after { display: none; }
.tile:focus-visible { outline: 2px solid #111; outline-offset: 5px; }
.tile img:not([src]) { visibility: hidden; }
/* Stationary lettering behind the moving images, not an overlay footer. */
.footer { position: absolute; z-index: 1; top: 50%; bottom: auto; left: 0; width: 100%; margin: 0; padding: 0 12px; transform: translateY(-50%); font: 700 clamp(28px,3.8vw,78px)/1.1 'Arial',sans-serif; letter-spacing: -.065em; text-transform: none; white-space: nowrap; pointer-events: none; background: none; }
.lab-help { position: absolute; z-index: 4; bottom: 24px; left: 28px; font-size: 10px; pointer-events: none; }
.compare { display: none; position: absolute; z-index: 2; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 92px clamp(22px,7vw,150px) 100px; background: var(--paper); }
.lab.overview .grid,.lab.overview .footer,.lab.overview .lab-help,.lab.overview .lab-intro { display: none; }
.lab.overview .filters { visibility: hidden; }
.lab.overview .compare { display: block; }
.compare-head { position: sticky; z-index: 3; top: 68px; display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 14px; padding: 12px 0; background: rgba(245,244,241,.94); backdrop-filter: blur(9px); font: 700 clamp(18px,2vw,30px)/1 Arial,sans-serif; text-align: center; text-transform: uppercase; }
.compare-head span:first-child { border-right: 1px solid #aaa; }
.compare-body { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(26px,5vw,100px); padding-top: 20px; }
.compare-body::after { content: ''; position: absolute; inset: 0 auto 0 50%; width: 1px; background: #d4d1cc; pointer-events: none; }
.compare-side { min-width: 0; padding: 0 clamp(4px,1vw,18px); }
.compare-mosaic { columns: 3; column-gap: clamp(12px,1.8vw,30px); }
.compare-card { display: block; width: 100%; break-inside: avoid; margin: 0 0 clamp(28px,5vw,80px); padding: 0; border: 0; background: none; cursor: zoom-in; }
.compare-card:nth-child(3n+1) { width: 88%; margin-left: 0; }
.compare-card:nth-child(3n+2) { width: 76%; margin-left: auto; }
.compare-card:nth-child(3n) { width: 94%; margin-right: auto; }
.compare-card img { display: block; width: 100%; height: auto; object-fit: contain; transition: transform .3s ease; }
.compare-card:hover img { transform: scale(1.025); }
.lightbox { align-items: stretch; justify-content: stretch; padding: 0; overflow: hidden; background: transparent; transition: background-color .42s ease; }
.lightbox.open { display: block; }
.lightbox.viewer-visible { background: var(--paper); }
.lab.viewer-underlay { filter: blur(0); opacity: 1; transition: filter .42s ease,opacity .42s ease; }
.lab.viewer-underlay.viewer-underlay-hidden { filter: blur(10px); opacity: .08; }
.lightbox .viewer-close { z-index: 4; top: 5px; right: auto; left: 50%; width: 54px; height: 54px; padding: 0; transform: translateX(-50%); color: #111; font: 45px/1 Arial,sans-serif; }
.lightbox .viewer-close,.viewer-back { opacity: 0; transition: opacity .35s ease; }
.viewer-visible .viewer-close,.viewer-visible .viewer-back { opacity: 1; transition-delay: .32s; }
.lightbox-shell { display: grid; grid-template-columns: 126px minmax(0,1fr); width: 100%; height: 100svh; padding: 0 28px 12px 10px; gap: clamp(28px,5vw,110px); }
.viewer-thumbs { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: calc(50svh - 42px) 8px; scrollbar-width: none; opacity: 0; transition: opacity .32s ease .2s; scroll-behavior: auto; }
.viewer-thumbs::-webkit-scrollbar { display: none; }
.viewer-visible .viewer-thumbs { opacity: 1; }
.viewer-thumb { display: block; width: 80px; margin: 0 0 24px; padding: 0; border: 0; background: none; opacity: .35; cursor: pointer; transform: translateX(var(--dock-shift,0px)); transition: opacity .22s ease,transform .1s ease-out; will-change: transform,opacity; }
.viewer-thumb:last-child { margin-bottom: 0; }
.viewer-thumb:hover,.viewer-thumb.active { opacity: 1; }
.viewer-thumb img { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; pointer-events: none; }
.viewer-stage { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; align-items: center; justify-items: center; padding-top: 62px; gap: 7px; }
.viewer-focus { position: relative; width: 100%; height: 100%; min-height: 0; opacity: 0; transition: opacity .38s ease .28s; }
.viewer-visible .viewer-focus { opacity: 1; }
.viewer-large { position: absolute; top: 50%; left: 50%; display: block; width: auto; height: auto; max-width: min(76vw,1350px); max-height: calc(100svh - 112px); object-fit: contain; opacity: 0; transform: translate(-50%,-50%) scale(.995); transition: opacity .25s ease,transform .25s ease; }
.viewer-large.active { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.viewer-back { flex: 0 0 auto; min-width: 76px; min-height: 38px; padding: 4px 12px; border: 0; background: none; color: #111; font: 700 clamp(18px,1.7vw,28px)/1 Arial,sans-serif; cursor: pointer; }
button:focus-visible,a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media(max-width:760px) {
  .hub-head { padding: max(13px,env(safe-area-inset-top)) 17px 10px; }
  .hub-mark { display: none; }
  .hub-copy { top: max(82px,calc(env(safe-area-inset-top) + 64px)); left: 18px; width: calc(100% - 36px); }
  .hub-copy h2 { margin-bottom: 10px; font-size: clamp(39px,13vw,60px); }
  .hub-copy > p:last-child { width: 100%; font-size: 12px; line-height: 1.55; }
  .project-rail { height: min(55svh,480px); touch-action: pan-y; }
  .project-track,.project-loop { gap: 8px; }
  .project-track { padding-bottom: max(18px,env(safe-area-inset-bottom)); }
  .project-card { --card-height: min(45svh,390px); flex-basis: 65vw; width: 65vw; border-radius: 7px; }
  .project-card:hover,.project-card:focus-visible { height: var(--card-height); }
  .project-media::after { opacity: 1; }
  .project-info { inset: auto 14px 14px; opacity: 1; transform: none; }
  .project-title { font-size: 18px; }
  .hub-help { display: none; }
  .labhead { padding: max(10px, env(safe-area-inset-top)) 16px 14px; }
  .lab-intro { top: max(64px,calc(env(safe-area-inset-top) + 54px)); right: 16px; width: calc(100% - 32px); }
  .lab-intro summary { font-size: 13px; padding-top: 10px; padding-bottom: 10px; }
  .lab-intro summary::after { top: 10px; }
  .lab-intro-body { font-size: 13px; max-height: calc(100svh - 210px); }
  .back { font-size: 11px; max-width: 130px; text-align: left; }
  .filters { gap: 4px; padding: 3px; }
  .filter { min-width: 66px; min-height: 48px; padding: 0 18px; font-size: 17px; }
  .overview-toggle { top: max(10px, env(safe-area-inset-top)); }
  .footer { font-size: clamp(22px,6.7vw,40px); padding: 0 10px; }
  .lab-help { bottom: 12px; left: 0; width: 100%; text-align: center; font-size: 9px; }
  .compare { padding: 74px 12px 75px; }
  .compare-head { top: 60px; margin-bottom: 2px; padding: 11px 0; font-size: 17px; }
  .compare-body { gap: 17px; padding-top: 13px; }
  .compare-side { padding: 0 3px; }
  .compare-mosaic { columns: 1; }
  .compare-card { margin-bottom: clamp(30px,12vw,62px); }
  .compare-card:nth-child(odd) { width: 86%; margin-left: 0; margin-right: auto; }
  .compare-card:nth-child(even) { width: 76%; margin-left: auto; margin-right: 0; }
  .lightbox .viewer-close { top: max(3px,env(safe-area-inset-top)); font-size: 39px; }
  .lightbox-shell { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) 92px; gap: 6px; padding: max(55px,calc(env(safe-area-inset-top) + 49px)) 10px max(8px,env(safe-area-inset-bottom)); }
  .viewer-stage { grid-row: 1; padding-top: 0; gap: 3px; }
  .viewer-large { max-width: 94vw; max-height: calc(100svh - 180px); }
  .viewer-back { min-height: 34px; font-size: 17px; }
  .viewer-thumbs { grid-row: 2; display: flex; align-items: flex-end; gap: 13px; overflow-x: auto; overflow-y: hidden; padding: 6px calc(50vw - 36px); touch-action: pan-x; scroll-behavior: auto; }
  .viewer-thumb,.viewer-thumb:nth-child(n) { flex: 0 0 var(--mobile-thumb-width,58px); width: var(--mobile-thumb-width,58px); max-width: var(--mobile-thumb-width,58px); height: 70px; margin: 0; opacity: .35; transform: translateY(calc(-1 * var(--dock-shift,0px))); }
  .viewer-thumb img { width: 100%; height: 70px; max-width: 100%; object-fit: contain; }
}
@media(min-width:761px) and (max-width:1100px) {
  .compare { padding-left: 28px; padding-right: 28px; }
  .compare-mosaic { columns: 2; }
}
@media(prefers-reduced-motion:reduce) {
  .tile img,.lab.viewer-underlay,.lightbox,.viewer-thumbs,.viewer-focus,.viewer-large,.viewer-thumb,.viewer-close,.viewer-back { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .project-card,.project-cover,.project-info,.project-media::after { transition-duration: .01ms !important; }
  .project-gradient::before { animation: none !important; }
  .project-card:hover,.project-card:focus-visible { height: var(--card-height); }
}