/* The showroom is isolated from the approved page and its motion system. */
#work #catalog.showroom-ready{display:block;grid-auto-rows:auto}
#work #catalog.showroom-ready>.showroom-fallback{display:none}
#work #catalog:not(.showroom-ready)>.showroom-fallback{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px;grid-column:1/-1}
#work .showroom{--sr-ambient:#98b2c1;--sr-text:#f6f7f1;--sr-muted:#b9c1b5;min-width:0}
#work .sr-stage{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,30fr) minmax(0,70fr);grid-template-areas:"heading media" "details media";grid-template-rows:auto 1fr;gap:24px 36px;min-height:640px;padding:40px 36px 36px 40px;overflow:hidden;border:1px solid #363e33;border-radius:12px;background:#1c211e;color:var(--sr-text)}
#work .sr-stage::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background-color:var(--sr-ambient);opacity:.23;mask-image:radial-gradient(ellipse at 76% 46%,#000,transparent 65%);-webkit-mask-image:radial-gradient(ellipse at 76% 46%,#000,transparent 65%);transition:background-color 480ms ease}
#work .sr-stage::after{content:"";position:absolute;z-index:-1;left:36%;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#b1c5b04d,transparent);box-shadow:0 -18px 80px 10px #b4c7b00a;pointer-events:none}
#work .sr-heading{grid-area:heading;align-self:end;min-width:0;padding-top:10px}
#work .sr-meta{font-size:12px;line-height:1.6;letter-spacing:.035em;color:#c6cdbf;margin-bottom:28px}
#work .sr-title{font-size:clamp(32px,3.15vw,46px);line-height:1.12;letter-spacing:-.045em;font-weight:600;min-height:3.36em;overflow-wrap:normal;text-wrap:balance}
#work .sr-details{grid-area:details;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
#work .sr-description{font-size:16px;line-height:1.7;color:#c6cdc1;min-height:5.1em;max-width:340px}
#work .sr-actions{display:flex;flex-direction:column;align-items:stretch;width:100%;gap:8px;margin-top:25px;max-width:308px}
#work .sr-primary,#work .sr-request{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:15px 18px;border:1px solid transparent;border-radius:4px;font-size:13px;line-height:1.5;font-weight:600;text-align:left;transition:background .2s}
#work .sr-primary{background:var(--lime);color:#20251d}
#work .sr-primary:hover{background:#e3ff8a}
#work .sr-request{color:#f0f4e9;border-color:#77816d;background:transparent}
#work .sr-request:hover{background:#ffffff09;border-color:#c5d0b9}
#work .sr-actions svg{width:20px;height:20px;flex:none}
#work .sr-notes{margin-top:18px;min-height:44px;font-size:11px;line-height:1.7;color:var(--sr-muted)}
#work .sr-notes p+p{margin-top:5px}
#work .sr-counter{display:flex;align-items:center;justify-content:space-between;gap:22px;width:100%;max-width:308px;margin-top:auto;padding-top:26px;color:#c9d0c2;font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.06em}
#work .sr-arrows{display:flex;gap:7px}
#work .sr-prev,#work .sr-next{display:grid;place-items:center;width:44px;height:44px;padding:0;background:transparent;border:1px solid #65715c;border-radius:50%;color:#f5f8ee}
#work .sr-prev:hover:not(:disabled),#work .sr-next:hover:not(:disabled){background:#ffffff0d;border-color:#d3f36b}
#work .sr-prev:disabled,#work .sr-next:disabled{opacity:.3}
#work .sr-media{grid-area:media;position:relative;align-self:center;justify-self:end;width:100%;max-width:800px;min-width:0;padding-bottom:46px}
#work .sr-screen{position:relative;isolation:isolate;aspect-ratio:1425/990;overflow:hidden;border:1px solid #a8b6a04d;border-radius:6px;background:#151b17;box-shadow:0 32px 50px -25px #000b,0 0 75px -32px var(--sr-ambient);transition:transform .25s,box-shadow .5s}
#work .sr-screen:hover{transform:translateY(-2px) scale(1.005)}
#work .sr-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;pointer-events:none;opacity:1}
#work .sr-image.is-outgoing{z-index:2;pointer-events:none}
#work .sr-image.is-current{z-index:1}
#work .sr-screen::after{content:"";position:absolute;z-index:4;top:0;bottom:0;left:0;width:2px;opacity:0;background:#e5f7d4;box-shadow:0 0 14px 4px #d6f3b866,0 0 44px 15px #d8f8c12b;pointer-events:none}
#work .is-switching .sr-image.is-current{animation:sr-open 480ms cubic-bezier(.3,.7,.2,1) both}
#work .is-switching .sr-image.is-outgoing{animation:sr-close 480ms cubic-bezier(.3,.7,.2,1) both}
#work .is-switching .sr-screen::after{animation:sr-light 480ms cubic-bezier(.3,.7,.2,1) both}
#work .sr-expand{position:absolute;right:0;bottom:0;display:flex;gap:12px;align-items:center;justify-content:center;min-height:44px;padding:6px 0 4px 16px;border:0;border-radius:0;background:transparent;color:#e5ebdd;font-size:12px}
#work .sr-expand svg{width:19px;height:19px}
#work .sr-expand:hover{color:var(--lime)}
#work .sr-status{position:absolute;z-index:3;left:12px;bottom:58px;max-width:calc(100% - 24px);padding:6px 10px;border-radius:3px;background:#1a211cec;color:#ecf4e4;font-size:11px;line-height:1.5;pointer-events:none}
#work .sr-placeholder{position:absolute;inset:0;display:grid;place-content:center;padding:24px;text-align:center;font-size:18px;line-height:1.6;color:#d5decd;background:#202922}
#work .sr-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:20px;min-width:0}
#work .sr-thumb{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:12px;min-width:0;min-height:44px;padding:10px 10px 13px;border:1px solid #d8dbd1;border-radius:7px;background:transparent;color:#343b2c;text-align:left;font-size:13px;line-height:1.4;transition:border-color .2s,background .2s}
#work .sr-thumb-frame{display:block;width:100%;aspect-ratio:16/10;overflow:hidden;background:#242a24;border-radius:3px}
#work .sr-thumb img{width:100%;height:100%;object-fit:contain}
#work .sr-thumb[aria-pressed="true"]{border-color:#4d623b;box-shadow:inset 0 -3px 0 #556e38;background:#edf0e4}
#work .sr-thumb[aria-pressed="true"]::after{content:"✓";position:absolute;right:16px;top:16px;display:grid;place-items:center;width:24px;height:24px;border:1px solid #343e2b;border-radius:50%;background:var(--lime);color:#242c1b;font-size:13px;font-weight:600}
#work .sr-thumb:hover{border-color:#7d8b6a;background:#eef0e7}
#work .sr-nav.is-overflowing{display:flex;overflow-x:auto;gap:14px;scrollbar-width:thin;scroll-snap-type:x proximity;padding-bottom:10px}
#work .sr-nav.is-overflowing .sr-thumb{flex:0 0 180px;scroll-snap-align:start}
#work .sr-all-toggle{display:flex;align-items:center;justify-content:center;gap:16px;min-height:48px;margin:20px auto 0;padding:12px 20px;border:1px solid #a7b298;border-radius:4px;background:transparent;color:#313b28;font-size:13px;font-weight:600}
#work .sr-all-toggle:hover{background:#e9edde}
#work .sr-picker{margin-top:22px;padding:24px;border:1px solid #cdd4c2;border-radius:8px;background:#eef0e7}
#work .sr-search{width:100%;max-width:420px;min-height:48px;padding:12px 15px;margin-bottom:22px;border:1px solid #a4ae97;border-radius:4px;background:#fafbf6;color:#252f1d;font:inherit}
#work .sr-picker-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
#work .sr-empty{font-size:14px;color:#566249;padding:10px 0}
#work .sr-picker-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
#work .sr-picker-title{font-size:15px;font-weight:600}
#work .sr-collapse{min-height:44px;padding:8px 0 8px 12px;border:0;border-bottom:1px solid #a9b59b;background:transparent;color:#435435;font-size:12px}
#work .sr-search-label{display:block;margin-bottom:8px;font-size:12px;color:#4d5d40}
#work .sr-placeholder{z-index:0}
#work .sr-live{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#work .showroom :focus-visible{outline:3px solid #8aa72f;outline-offset:5px}
#work .sr-stage :focus-visible{outline-color:#d3f36b}
#work .is-entering .sr-media{animation:sr-enter 700ms cubic-bezier(.2,.8,.2,1) both}
#work .is-entering .sr-heading{animation:sr-enter 620ms 60ms cubic-bezier(.2,.8,.2,1) both}
#work .is-entering .sr-details{animation:sr-enter 620ms 120ms cubic-bezier(.2,.8,.2,1) both}
@keyframes sr-open{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes sr-close{from{clip-path:inset(0)}to{clip-path:inset(0 0 0 100%)}}
@keyframes sr-light{0%{left:0;opacity:0}12%{opacity:.9}85%{opacity:.8}100%{left:100%;opacity:0}}
@keyframes sr-enter{from{opacity:.45;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){#work .sr-stage{min-height:670px}}
@media(min-width:960px) and (max-width:1199px){#work .sr-stage{padding:30px 25px;gap:20px 25px;min-height:610px;grid-template-columns:minmax(0,34fr) minmax(0,66fr)}#work .sr-title{font-size:34px}#work .sr-meta{font-size:11px}#work .sr-description{font-size:15px}#work .sr-primary,#work .sr-request{padding:14px 13px;font-size:12px}}
@media(max-width:959px){#work .sr-stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"heading" "media" "details";grid-template-rows:auto auto 1fr;gap:22px;min-height:0;padding:30px}#work .sr-heading{padding:0}#work .sr-meta{margin-bottom:12px}#work .sr-title{min-height:0;font-size:38px;max-width:600px;text-wrap:initial}#work .sr-media{width:100%;max-width:720px;justify-self:center;padding-bottom:44px}#work .sr-description{min-height:0;max-width:600px;font-size:16px}#work .sr-actions{max-width:none;flex-direction:row;gap:12px;margin-top:20px}#work .sr-primary,#work .sr-request{flex:1;min-width:0}#work .sr-notes{min-height:0}#work .sr-counter{max-width:none;padding-top:18px}#work .sr-nav{gap:10px}#work .sr-thumb{font-size:11px;gap:9px;padding:7px 7px 10px}#work .sr-thumb[aria-pressed="true"]::after{right:10px;top:10px;width:21px;height:21px}#work .sr-picker-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:639px){#work #catalog:not(.showroom-ready)>.showroom-fallback{grid-template-columns:minmax(0,1fr)}#work .sr-stage{padding:23px 18px 18px;gap:19px;border-radius:8px}#work .sr-meta{font-size:11px;line-height:1.5;margin-bottom:13px}#work .sr-title{font-size:30px;line-height:1.16;letter-spacing:-.035em;min-height:2.32em}#work .sr-description{font-size:14px;line-height:1.7;min-height:7.14em}#work .sr-media{padding-bottom:42px}#work .sr-screen{border-radius:3px;box-shadow:0 18px 34px -15px #0009,0 0 40px -22px var(--sr-ambient)}#work .sr-expand{font-size:11px;min-height:44px}#work .sr-actions{flex-direction:column;gap:9px;margin-top:4px}#work .sr-primary,#work .sr-request{min-height:51px;font-size:13px;padding:13px 15px}#work .sr-notes{font-size:10px;line-height:1.6;min-height:48px;margin-top:12px}#work .sr-counter{padding-top:12px}#work .sr-nav{display:flex;overflow-x:auto;gap:10px;margin-top:15px;padding:0 0 10px;scrollbar-width:thin;scroll-snap-type:x proximity}#work .sr-nav .sr-thumb,#work .sr-nav.is-overflowing .sr-thumb{flex:0 0 128px;scroll-snap-align:start;font-size:12px;padding:7px 7px 11px;gap:10px}#work .sr-all-toggle{width:100%;margin-top:8px;min-height:48px}#work .sr-picker{padding:14px;margin-top:15px}#work .sr-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#work .sr-picker .sr-thumb{font-size:12px;min-height:116px}#work .sr-status{font-size:10px;bottom:51px;padding:5px 7px}#work .sr-placeholder{font-size:13px;padding:15px}}
/* Reserve each text slot so choosing another sphere does not move the page. */
@media(min-width:640px) and (max-width:959px){#work .sr-title{min-height:2.24em}#work .sr-description{min-height:3.4em}#work .sr-notes{min-height:44px}}
@media(max-width:639px){#work .sr-title{min-height:3.48em}#work .sr-description{min-height:6.8em}}
@media(prefers-reduced-motion:reduce){#work .sr-stage *,#work .sr-stage::before,#work .sr-stage::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}#work .sr-screen:hover{transform:none}#work .is-switching .sr-screen::after{display:none}#work .sr-image.is-outgoing{display:none}}
@supports not (clip-path:inset(0)){#work .is-switching .sr-image.is-current{animation:sr-fade 220ms ease both}#work .is-switching .sr-image.is-outgoing{animation:sr-fade 220ms ease reverse both}#work .is-switching .sr-screen::after{display:none}}
@keyframes sr-fade{from{opacity:0}to{opacity:1}}
