/* Quiet neutral surfaces, with green reserved for direct manipulation. */
:root{--wall:#fafafa;--sheet:#efefef;--sheet-border:#dedede;--pad:#f8f8f8;--pad-border:#e4e4e4;--ui-text:#777;--ui-text-active:#505050;--ui-pill:#fcfcfc;--ui-shadow:0 3px 10px #00000008,0 1px 3px #00000006;--focus:#52794a}
body{background:var(--wall) url('wall-grain.svg') repeat;color:var(--ui-text)}
.matrix-controller{background:var(--sheet);border-color:var(--sheet-border);color:var(--ui-text);box-shadow:inset 0 1px 0 #ffffffd9,var(--ui-shadow);backdrop-filter:blur(14px)}
.matrix-pad,.matrix-pad[data-active=true]{background:var(--pad);border-color:var(--pad-border);box-shadow:inset 0 1px 2px #00000002}
.matrix-modes button,.matrix-actions button{color:var(--ui-text);border:1px solid transparent;transition:background .18s,color .18s,box-shadow .18s}
.matrix-modes button[aria-selected=true],.matrix-actions button[aria-pressed=true]{background:var(--ui-pill);border-color:#dedede;color:var(--ui-text-active);box-shadow:0 1px 2px #00000004}
.matrix-actions button{background:#f5f5f5;border-color:#e8e8e8;padding:6px 10px}.matrix-actions{gap:6px}
.matrix-modes button:hover,.matrix-actions button:hover{background:var(--ui-pill);color:var(--ui-text-active)}
.matrix-pad:focus-visible,button:focus-visible{outline-color:var(--focus)}
.settings{background:#f4f4f4fa;border-color:#dedede;color:var(--ui-text);box-shadow:var(--ui-shadow)}.settings input{accent-color:#929292}.settings button:hover{background:#e7e7e7}
body.dark{--wall:#353535;--sheet:#414141;--sheet-border:#505050;--pad:#3a3a3a;--pad-border:#4c4c4c;--ui-text:#aaa;--ui-text-active:#ddd;--ui-pill:#505050;--ui-shadow:0 3px 10px #00000018;--focus:#a3bb8c;background-color:var(--wall)}
.dark .matrix-controller{background:var(--sheet);border-color:var(--sheet-border);color:var(--ui-text);box-shadow:inset 0 1px 0 #ffffff09,var(--ui-shadow)}
.dark .matrix-pad[data-active=true]{background:var(--pad);border-color:var(--pad-border)}
.dark .matrix-modes button[aria-selected=true],.dark .matrix-actions button[aria-pressed=true]{background:var(--ui-pill);border-color:#606060;color:var(--ui-text-active)}
.dark .matrix-actions button{background:#474747;border-color:#505050}.dark .settings{background:#414141fa;color:#aaa;border-color:#505050}

@font-face{font-family:Inter;src:url('inter-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('inter-medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-feature-settings:"cv11","ss01";font-optical-sizing:auto}
.matrix-controller,.settings,.matrix-modes button,.matrix-actions button{font-family:inherit;font-weight:500;letter-spacing:-.015em}
.matrix-modes{width:100%;gap:3px;padding:3px;background:#e7e7e7;border-radius:14px;margin-bottom:8px}
.matrix-modes button{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:7px 8px;font-size:11px;border-radius:11px}
.ui-icon{display:block;flex:none;width:18px;height:18px}
.matrix-actions{justify-content:space-between;gap:8px;margin-top:8px}
.matrix-actions #matrixMotion{display:flex;align-items:center;gap:7px;background:transparent;border:1px solid transparent;color:var(--ui-text);padding:6px 4px;font-size:11px;box-shadow:none}
.motion-track{position:relative;display:block;width:30px;height:18px;border-radius:12px;background:#d4d4d4;box-shadow:inset 0 1px 2px #00000008;transition:background .2s}
.motion-thumb{position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #00000018;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
#matrixMotion[aria-checked=true] .motion-track{background:#858585}
#matrixMotion[aria-checked=true] .motion-thumb{transform:translateX(12px)}
.matrix-actions #matrixReset{padding:7px 12px;font-size:11px;border-radius:12px}
.dark .matrix-modes{background:#383838}.dark .motion-track{background:#555}.dark #matrixMotion[aria-checked=true] .motion-track{background:#a0a0a0}
@media(prefers-reduced-motion:reduce){.motion-track,.motion-thumb{transition:none}}

/* Short, state-driven icon gestures; no perpetual toolbar motion. */
.ui-icon{transform-origin:center;transform-box:fill-box}
#sphereView[aria-selected=true] .ui-icon{animation:icon-orbit .72s cubic-bezier(.22,.68,.22,1) both}
#gridView[aria-selected=true] .ui-icon path{transform-origin:center;transform-box:fill-box;animation:icon-grid .46s cubic-bezier(.2,.8,.2,1) both}
#gridView[aria-selected=true] .ui-icon path:nth-child(2){animation-delay:45ms}
#gridView[aria-selected=true] .ui-icon path:nth-child(3){animation-delay:90ms}
#matrixMotion[aria-checked=true] .ui-icon path{transform-origin:center;transform-box:fill-box;animation:icon-motion .7s ease-in-out both}
#matrixMotion[aria-checked=true] .ui-icon path:nth-child(2){animation-delay:65ms}
#matrixMotion[aria-checked=true] .ui-icon path:nth-child(3){animation-delay:130ms}
#matrixMotion[aria-checked=false] .ui-icon{animation:icon-rest .3s ease-out both}
@keyframes icon-orbit{0%{transform:perspective(60px) rotateY(0deg)}45%{transform:perspective(60px) rotateY(180deg)}100%{transform:perspective(60px) rotateY(360deg)}}
@keyframes icon-grid{0%{transform:scale(.7);opacity:.45}55%{transform:scale(1.13);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes icon-motion{0%{transform:translate(-1.5px,-1.5px);opacity:.45}55%{transform:translate(.6px,.6px);opacity:1}100%{transform:translate(0,0);opacity:1}}
@keyframes icon-rest{0%{transform:scale(.88)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){#sphereView .ui-icon,#gridView .ui-icon path,#matrixMotion .ui-icon,#matrixMotion .ui-icon path{animation:none!important}}

/* The portfolio blinking-dot sheet's bottom-right scale/fade transition. */
.matrix-controller{transform-origin:right bottom;opacity:0;pointer-events:none;transform:scale(.1);transition:opacity 180ms ease,transform 480ms cubic-bezier(.2,.9,.2,1)}
.matrix-controller.is-open{opacity:1;pointer-events:auto;transform:scale(1)}
.matrix-launcher{position:fixed;right:calc(22px + env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));z-index:19;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--sheet-border);border-radius:50%;background:var(--sheet);color:#858585;box-shadow:var(--ui-shadow);padding:0;transition:opacity 180ms ease,transform 480ms cubic-bezier(.2,.9,.2,1);cursor:pointer}
.matrix-launcher[aria-expanded=true]{opacity:0;transform:scale(.72);pointer-events:none}
.matrix-actions #matrixReset{margin-left:auto}
.photo-viewing .matrix-launcher{visibility:hidden}
@media(max-width:480px){.matrix-controller{transform:scale(.1)}.matrix-controller.is-open{transform:scale(1)}.matrix-launcher{right:calc(12px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.matrix-controller,.matrix-launcher{transition:none}}

.matrix-launcher .ui-icon{width:20px;height:20px}

:root{--paper-color:#f5f2e9}
.case-face,#detail .detail-print .case-face{background-color:var(--paper-color);border-radius:1.8px;border:0}
#detail .detail-print .case-face{overflow:hidden;box-shadow:inset 0 0 0 .5px #ffffff55,0 8px 22px #171c1118}

@font-face{font-family:NoteCaveat;src:url('caveat.ttf') format('truetype');font-weight:400 700;font-display:swap}
.case-face .number{display:none}
.case-face img.paper-caption,#detail .detail-print img.paper-caption{position:absolute;display:block;object-fit:fill;aspect-ratio:auto;border:0;box-shadow:none;pointer-events:none;transform:none;max-height:none}

/* No decorative colored linework on the photos or controller. */
:root{--focus:#858585}
.case-edge,.case-rear:after{display:none}
.case-face{box-shadow:0 1px 2px #00000010}
#detail .detail-print .case-face{box-shadow:0 8px 22px #00000018}
.case-face img,#detail .detail-print img{box-shadow:none;border:0}
.matrix-pad:focus-visible,button:focus-visible{outline-color:#858585}
.print::before{border-color:#858585;background:#8b8d90}

/* No focus/tap highlight lines on any interactive surface. */
*:focus,*:focus-visible{outline:none!important}
*{-webkit-tap-highlight-color:transparent}
.matrix-modes button:focus-visible,.matrix-actions button:focus-visible,.matrix-launcher:focus-visible{background:var(--ui-pill)}

/* Photo navigation uses the same soft neutral surfaces as the controller sheet. */
#detail .nav{gap:8px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
#detail .nav button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--pad-border);border-radius:50%;background:var(--ui-pill);color:var(--ui-text-active);box-shadow:0 1px 2px #00000004;transition:background 180ms ease,transform 180ms ease}
#detail .nav button:hover,#detail .nav button:focus-visible{background:var(--pad)}
#detail .nav button:active{transform:scale(.94)}
#detail .nav .ui-icon{width:17px;height:17px}
@media(prefers-reduced-motion:reduce){#detail .nav button{transition:none}}

/* Portfolio type and case-study Home breadcrumb, aligned with the sheet launcher. */
.gallery-footer{position:fixed;inset:auto 0 calc(22px + env(safe-area-inset-bottom));height:44px;padding:0;z-index:18;display:flex;align-items:center;justify-content:center;pointer-events:none;font-family:inherit}
.gallery-footer .gallery-title{margin:0;color:#706c63;font:500 14px/1.2 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.015em}
.gallery-footer .case-study-breadcrumb{position:absolute;left:calc(22px + env(safe-area-inset-left));display:inline-flex;align-items:center;gap:6px;margin:0;padding:12px 0;color:#706c63;font-size:12px;font-weight:500;line-height:1.2;text-decoration:none;pointer-events:auto}
.gallery-home svg{display:block;flex:none}
.gallery-footer .case-study-breadcrumb:hover,.gallery-footer .case-study-breadcrumb:visited{color:#706c63;text-decoration:none}
.photo-viewing .gallery-footer{visibility:hidden}
@media(max-width:480px){.gallery-footer{bottom:calc(12px + env(safe-area-inset-bottom))}.gallery-footer .case-study-breadcrumb{left:calc(12px + env(safe-area-inset-left))}}

/* Center the viewer navigation even when mobile captions use a column layout. */
#detail .detail-caption{flex-direction:row;align-items:center;justify-content:center;bottom:calc(22px + env(safe-area-inset-bottom))}