@font-face{font-family:Gallery;src:url('assets/gallery-font.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--paper:#f4f4f0;--ink:#1a1a19;--muted:#888982;--acid:#d6fc51;--line:#deded8}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:Gallery,Arial,Helvetica,sans-serif}body{overflow:hidden}button,input{font:inherit}button{cursor:pointer;border:0;color:inherit;background:none}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #718b20;outline-offset:5px}button{touch-action:manipulation}button:disabled{opacity:.4;cursor:default}button:hover{color:#74776b}[hidden]{display:none!important}.topbar{height:100px;position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:0 40px;pointer-events:none}.topbar button{pointer-events:auto}.studio-mark{display:flex;align-items:center;gap:18px;padding:0;text-align:left}.mark{font-size:47px;font-weight:850;line-height:1;letter-spacing:-6px;display:flex;align-items:center}.mark span{font-size:26px;letter-spacing:-2px;align-self:flex-start;margin-top:3px}.studio-caption{font-size:8px;line-height:1.5;font-weight:600;letter-spacing:1.8px}.top-right{display:flex;align-items:center;gap:34px}.text-button{font-size:12px;padding:10px 0}.text-button span{margin-left:12px}.view-toggle{display:flex;align-items:center;gap:12px;border:1px solid #c9c9c2;background:var(--paper);border-radius:30px;padding:11px 19px;font-size:12px;min-width:104px;justify-content:center}.grid-icon{font-size:22px;line-height:1}.view-toggle[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}#universe{height:100dvh;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 48%,#fafaf8 0,#f4f4f0 65%,#eeeee8 100%)}#canvas{z-index:1;isolation:isolate;position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none;outline:none;user-select:none}#canvas.dragging{cursor:grabbing}.canvas-card{position:absolute;top:0;left:0;width:310px;padding:0;will-change:transform,opacity;transform-origin:0 0;overflow:visible;text-align:left;transition:filter .3s;cursor:inherit;box-shadow:0 12px 40px #171a1210;background:#e6e6df;contain:layout style}.canvas-card img{width:100%;height:100%;display:block;object-fit:cover;object-position:top;pointer-events:none}.canvas-card:after{content:'↗';position:absolute;bottom:12px;right:12px;width:32px;height:32px;display:grid;place-items:center;background:var(--acid);border-radius:50%;opacity:0;transform:translateY(5px);transition:.2s}.canvas-card:hover:after,.canvas-card:focus-visible:after{opacity:1;transform:none}.canvas-card:hover{filter:saturate(1.08);cursor:pointer;outline:1px solid #aaa99b;outline-offset:8px}.identity{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:510px;text-align:center;z-index:20;pointer-events:none;isolation:isolate}.identity:before{content:'';position:absolute;inset:-70px -90px;background:radial-gradient(ellipse,#f4f4f0f7 10%,#f4f4f0da 36%,#f4f4f000 70%);z-index:-1}.eyebrow{font-size:9px;font-weight:550;letter-spacing:2.1px;line-height:1.5}.identity .eyebrow{margin:0 0 26px;font-size:8px;letter-spacing:2.5px}.main-logo{width:100%;height:auto;display:block}.identity-note{font-size:14px;line-height:1.6;margin:25px 0 0;letter-spacing:-.2px}.identity-note span{color:#8c8d85}.coordinate{position:absolute;pointer-events:none;z-index:4}.coordinate-top{left:50%;top:126px;transform:translateX(-50%);color:#b3b4aa;font-size:18px}.coordinate span{font-size:7px;letter-spacing:2px;margin-left:13px;vertical-align:2px}.canvas-help{position:absolute;bottom:120px;left:40px;z-index:22;display:flex;align-items:center;gap:12px;font-size:11px;line-height:1.6;pointer-events:none}.canvas-help small{color:#96978e;font-size:9px}.cross-arrow{font-size:28px;color:#919387}.depth-controls{position:absolute;right:40px;bottom:127px;display:flex;align-items:center;gap:15px;z-index:22}.depth-controls button{font-size:19px;width:24px;height:28px}.depth-track{width:78px;height:1px;background:#c7c9bd;position:relative}.depth-track i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--ink);top:-2px;left:0}#resetButton{border-left:1px solid #dddcd4;padding-left:14px;width:40px;margin-left:5px}.bottom-bar{position:fixed;bottom:0;left:0;right:0;height:94px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;z-index:35;pointer-events:none;background:linear-gradient(0deg,var(--paper) 25%,#f4f4f0ee 70%,#f4f4f000)}.bottom-bar>*{pointer-events:auto}.collection-count,.edition{font-size:8px;letter-spacing:1.3px;white-space:nowrap}.collection-count b{font-weight:500}.status-dot{display:inline-block;width:5px;height:5px;background:#88a327;border-radius:50%;margin-right:10px;vertical-align:1px}.edition{color:#8a8c80}.edition span{color:var(--ink);font-size:16px;margin-left:13px}.filters{display:flex;align-items:center;gap:3px;padding:5px;border-radius:40px;background:#e8e9e1bd;backdrop-filter:blur(12px);border:1px solid #e2e3d9}.filters button{font-size:11px;padding:12px 18px;border-radius:25px;white-space:nowrap;transition:background .2s,color .2s}.filters button.active{background:var(--ink);color:white}.filters button:not(.active):hover{background:#dcded1;color:var(--ink)}.filters sup{font-size:7px;top:-.3em;margin-left:4px;opacity:.5}.project-hover{position:fixed;bottom:176px;left:40px;z-index:25;display:flex;flex-direction:column;gap:5px;max-width:300px;padding:13px 40px 13px 16px;background:#f4f4f0f5;backdrop-filter:blur(12px);border-left:2px solid #b7d43e;opacity:0;transform:translateY(7px);transition:.2s;pointer-events:none}.project-hover.shown{opacity:1;transform:none}.project-hover>span:first-child{font-size:8px;color:#83867a;letter-spacing:1px;text-transform:uppercase}.project-hover strong{font-size:13px;font-weight:550}.hover-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:19px}#indexView{height:100dvh;overflow:auto;padding:145px 40px 135px}.index-heading{max-width:1450px;margin:0 auto 70px;display:flex;justify-content:space-between;align-items:flex-end}.index-heading h1{font-size:clamp(38px,4.5vw,72px);line-height:1.05;letter-spacing:-3px;font-weight:500;margin:22px 0 0}.index-heading h1 span{color:#9cab5c}.search{display:flex;align-items:center;gap:10px;border-bottom:1px solid #c7c9bc;width:260px;padding:12px 0;color:#8a8e7e}.search>span{font-size:25px}.search input{background:transparent;border:0;outline:none;font-size:12px;min-width:0;width:100%;color:var(--ink)}.project-grid{max-width:1450px;margin:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:46px 28px}.grid-card{padding:0;text-align:left;min-width:0;position:relative}.grid-card .thumb-wrap{aspect-ratio:1.48;background:#e7e7df;overflow:hidden;position:relative}.grid-card img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}.grid-card:hover img{transform:scale(1.035)}.grid-card .grid-arrow{position:absolute;bottom:15px;right:15px;background:var(--acid);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:20px;opacity:0;transition:.2s}.grid-card:hover .grid-arrow{opacity:1}.grid-info{padding-top:14px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.grid-info strong{font-size:13px;font-weight:550;display:block;line-height:1.5}.grid-info small{font-size:9px;color:#8d9083;line-height:1.8}.grid-info .grid-number{font-size:8px;letter-spacing:1px;color:#8d9083;padding-top:3px}#emptyMessage{text-align:center;font-size:14px;color:#878b7b;padding:50px}dialog{border:0;color:var(--ink);padding:0}dialog::backdrop{background:#15171073;backdrop-filter:blur(12px)}.project-dialog{width:calc(100vw - 40px);max-width:none;height:calc(100dvh - 40px);max-height:none;background:#f4f4f0;overflow:hidden;border-radius:10px;box-shadow:0 25px 120px #0003}.project-dialog[open]{display:flex;flex-direction:column;animation:appear .25s ease}.viewer-toolbar{height:83px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid var(--line);gap:20px;background:#f8f8f5}.viewer-name{min-width:0}.viewer-name .eyebrow{color:#888c7a;font-size:7px;letter-spacing:1.5px}.viewer-name h2{font-size:18px;font-weight:500;letter-spacing:-.5px;margin:5px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.viewer-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.round-button{width:37px;height:37px;border:1px solid #d6d8cb;border-radius:50%;font-size:19px;display:inline-grid;place-items:center;background:transparent}.round-button:hover{background:#e6e8dd;color:var(--ink)}.close-button{background:#20211d;color:#fff;border-color:#20211d;margin-left:12px;font-size:24px}.close-button:hover{background:#4a4c42;color:white}.viewer-position{font-size:10px;color:#8b8e80;margin:0 12px}.viewer-caption{height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:9px;color:#7f8373}.device-switch{display:flex;border:1px solid #d9dace;border-radius:20px;padding:3px;margin-right:20px}.device-switch button{height:27px;width:37px;border-radius:15px;font-size:20px;line-height:1}.device-switch button.active{background:#e0e4d4;color:#24271e}.viewer-content{flex:1;min-height:0;overflow:auto;background:#e5e6df;text-align:center;overscroll-behavior:contain;position:relative;scrollbar-width:thin;scrollbar-color:#b1b6a3 #e5e6df}.viewer-content>img{width:100%;max-width:1600px;height:auto;display:block;margin:0 auto;background:#fff}.viewer-content.hero-image{display:flex;align-items:center;justify-content:center;padding:24px}.viewer-content.hero-image>img{max-height:100%;width:auto;max-width:100%;object-fit:contain;box-shadow:0 4px 50px #0001}.viewer-content iframe{display:block;width:100%;height:100%;border:0;margin:auto;background:white;transition:none}.viewer-content.mobile iframe{width:390px;max-width:100%;box-shadow:0 0 40px #0002}.about-dialog{width:640px;max-width:calc(100vw - 30px);padding:60px;background:var(--paper);border-radius:6px}.about-dialog[open]{animation:appear .25s ease}.about-close{position:absolute;right:20px;top:20px}.about-dialog h2{font-size:50px;font-weight:500;letter-spacing:-2.8px;line-height:1.07;margin:34px 0}.about-dialog h2 em{font-family:Georgia,serif;font-weight:400;color:#859343}.about-dialog>p:not(.eyebrow){font-size:13px;line-height:1.8;color:#7c806f;max-width:440px}.about-stats{display:flex;justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;margin:30px 0;font-size:10px;color:#777b6e}.about-stats b{display:block;font-size:30px;font-weight:450;color:var(--ink);margin-bottom:6px}.about-fine{font-size:10px!important}.about-return{display:flex;justify-content:space-between;width:100%;font-size:12px;padding:17px 0 0}.about-return span{font-size:20px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes appear{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}@media(min-width:1700px){.identity{width:620px}.identity-note{font-size:16px}}@media(max-width:1000px){.edition{display:none}.bottom-bar{padding:0 24px}.topbar{padding:0 24px}.canvas-help{left:24px}.depth-controls{right:24px}.project-hover{left:24px}.identity{width:430px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filters button{padding:12px 14px}.index-heading{margin-bottom:45px}.index-heading h1{font-size:50px}.search{width:200px}}@media(max-width:650px){.topbar{height:80px;padding:0 20px}.studio-caption{display:none}.mark{font-size:38px}.mark span{font-size:22px}.top-right{gap:22px}.text-button{font-size:11px}.view-toggle{padding:8px 13px;min-width:85px;font-size:11px}.identity{width:290px;top:46%}.identity .eyebrow{font-size:6px;letter-spacing:1.8px;margin-bottom:20px}.identity-note{font-size:12px;margin-top:20px}.identity:before{inset:-60px -20px}.coordinate-top{top:108px}.coordinate span{font-size:6px;letter-spacing:1.4px}.bottom-bar{height:109px;flex-direction:column-reverse;justify-content:center;gap:13px;padding:0 12px 10px;background:linear-gradient(0deg,var(--paper) 75%,#f4f4f000)}.collection-count{font-size:6px;letter-spacing:1.5px}.filters{gap:0;padding:4px;width:100%;max-width:410px;justify-content:space-between}.filters button{font-size:10px;padding:10px 13px}.filters sup{font-size:6px}.canvas-help{left:20px;bottom:145px;font-size:10px}.canvas-help small{font-size:8px}.cross-arrow{font-size:22px}.depth-controls{right:20px;bottom:150px;gap:8px}.depth-track{width:30px}#resetButton{display:none}.project-hover{display:none}#indexView{padding:113px 20px 145px}.index-heading{display:block;margin-bottom:35px}.index-heading h1{font-size:44px;letter-spacing:-2px}.search{margin-top:28px;width:100%}.project-grid{gap:28px 14px}.grid-info strong{font-size:10px}.grid-info small{font-size:7px}.grid-number{display:none}.grid-arrow{display:none!important}.project-dialog{width:100vw;height:100dvh;border-radius:0}.viewer-toolbar{height:74px;padding:0 14px;gap:8px}.viewer-name h2{font-size:14px}.viewer-name .eyebrow{font-size:6px}.viewer-actions{gap:5px}.round-button{width:30px;height:30px;font-size:17px}.close-button{margin-left:4px;font-size:22px}.viewer-position{display:none}.viewer-caption{padding:0 14px;font-size:7px;gap:15px}.device-switch{display:none}.viewer-content.hero-image{padding:8px}.about-dialog{padding:50px 28px 30px}.about-dialog h2{font-size:40px;letter-spacing:-2px}.about-dialog>p:not(.eyebrow){font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media(min-width:1001px){.filters{position:absolute;left:50%;transform:translateX(-50%)}}

.bottom-bar{justify-content:center}@media(max-width:650px){.bottom-bar{height:86px;flex-direction:row;padding-bottom:12px}}

.close-button,.about-close{padding:0;display:inline-flex;align-items:center;justify-content:center;line-height:1}.close-button svg,.about-close svg{display:block;flex-shrink:0}

.device-switch button{display:inline-flex;align-items:center;justify-content:center;padding:0}.device-switch svg{display:block}
#aboutButton{background:#1a1a19;color:#fff;border:1px solid #1a1a19;border-radius:30px;padding:13px 19px;line-height:18px}#aboutButton:hover{background:#36382f;border-color:#36382f;color:#fff}.top-right{gap:12px}@media(max-width:650px){#aboutButton{padding:9px 14px;line-height:18px}.top-right{gap:8px}}

.studio-icon{display:block;width:48px;height:48px;object-fit:contain}@media(max-width:650px){.studio-icon{width:38px;height:38px}}

.view-toggle{line-height:18px}.grid-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.grid-icon svg{display:block}
.canvas-help{bottom:33px}.depth-controls{bottom:38px}@media(max-width:900px){.canvas-help{bottom:99px}.depth-controls{bottom:105px}}@media(max-width:650px){.canvas-help{bottom:105px}.depth-controls{bottom:110px}}

/* Window-style project viewer */
.project-dialog{border-radius:16px;background:#f6f6f8;box-shadow:0 35px 140px #0005,0 0 0 1px #fff9;font-family:-apple-system,BlinkMacSystemFont,Gallery,sans-serif;transition:width .25s,height .25s}
.project-dialog::backdrop{background:#25283160;backdrop-filter:blur(15px)}
.viewer-toolbar{height:68px;min-height:68px;padding:0 22px;display:grid;grid-template-columns:1fr auto 1fr;gap:16px;background:#f9f9fbdc;backdrop-filter:blur(30px);border-bottom:1px solid #00000012}
.viewer-name{text-align:center;max-width:360px}.viewer-name h2{font-size:14px;font-weight:600;letter-spacing:-.2px;margin:0 0 4px}.viewer-name>span{font-size:10px;color:#96969c;letter-spacing:0}
.window-controls{display:flex;align-items:center;gap:8px}.window-dot{height:13px;width:13px;border-radius:50%;border:1px solid #00000015;padding:0;display:grid;place-items:center;line-height:1}.window-close{background:#ff5f57}.window-minimize{background:#febc2e}.window-expand{background:#28c840}.window-dot span{opacity:0;color:#0009;font:12px/1 -apple-system,BlinkMacSystemFont,sans-serif;transform:translateY(-.5px)}.window-controls:hover .window-dot span,.window-dot:focus-visible span{opacity:1}
.viewer-actions{justify-self:end;gap:5px}.viewer-position{font:10px/1 -apple-system,BlinkMacSystemFont,sans-serif;color:#8e8e93;margin:0 12px}.viewer-actions .round-button{border:1px solid #0000000c;border-radius:7px;background:#fff9;width:30px;height:29px;padding:0;display:flex;align-items:center;justify-content:center}.viewer-actions .round-button:hover{background:#e6e6ec}.device-switch{margin-right:10px;border:1px solid #00000008;border-radius:7px;padding:2px;background:#e6e6eb}.device-switch button{border-radius:5px;width:29px;height:25px;color:#77777e}.device-switch button.active{background:white;box-shadow:0 1px 3px #0002;color:#28282b}.device-switch svg{width:16px;height:16px}
.viewer-caption{height:31px;background:#f6f6f8;color:#919197;font-size:9px;padding:0 22px;border-bottom:1px solid #00000006}.viewer-content{background:#e9e9ec}.project-dialog.compact{width:80vw;height:80dvh}.project-dialog.expanded{width:100vw;height:100dvh;border-radius:0}
@media(max-width:900px){.viewer-name{max-width:260px}.viewer-position{display:none}.device-switch{margin-right:5px}.viewer-toolbar{grid-template-columns:auto 1fr auto}}
@media(max-width:650px){.project-dialog,.project-dialog.compact{width:100vw;height:100dvh;border-radius:0}.viewer-toolbar{height:65px;min-height:65px;padding:0 14px;gap:10px}.viewer-name{max-width:210px}.viewer-name h2{font-size:12px}.viewer-name>span{font-size:8px}.window-controls{gap:6px}.window-dot{width:12px;height:12px}.viewer-actions{gap:3px}.viewer-actions .round-button{width:27px;height:27px}.viewer-caption{padding:0 14px;font-size:7px}.device-switch{display:none}}
.grid-card .thumb-wrap::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:25%;background:linear-gradient(to top,var(--paper) 0%,rgba(244,244,240,.95) 8%,rgba(244,244,240,0) 100%);pointer-events:none;z-index:1}.grid-card .grid-arrow{z-index:2}.canvas-card{box-shadow:none;background:transparent}.canvas-card::before{content:'';position:absolute;left:0;right:0;bottom:-1px;height:22%;background:linear-gradient(to top,var(--paper) 0%,rgba(244,244,240,0) 100%);pointer-events:none;z-index:1}.canvas-card::after{z-index:2}

/* Keep the exploration tools above the footer's decorative fade. */
.canvas-help,.depth-controls{z-index:40;opacity:1;color:var(--ink)}
.canvas-help small{color:#73766b}.cross-arrow{color:#858b77}
/* Hero studies keep their complete original composition, including the edges. */
.grid-card img,.canvas-card img{object-fit:contain;object-position:top center}
.grid-card .thumb-wrap{background:var(--paper)}
.grid-card[data-category="explorations"] .thumb-wrap{aspect-ratio:var(--thumb-ratio)}
.grid-card:hover img{transform:none}

/* Soft, consistent motion for the gallery's controls. */
.studio-icon{transition:transform .65s cubic-bezier(.22,1,.36,1);transform-origin:50% 50%}
.studio-mark:hover .studio-icon,.studio-mark:focus-visible .studio-icon{transform:rotate(-9deg) scale(1.12)}
.studio-mark:active .studio-icon{transform:rotate(0) scale(.96)}
#aboutButton{display:flex;align-items:center;gap:12px;padding:8px 9px 8px 18px;transition:box-shadow .4s,transform .4s;background:var(--ink);border-color:var(--ink)}
#aboutButton:hover{background:var(--ink);border-color:var(--ink);transform:translateY(-1px);box-shadow:0 6px 18px #00000018}
#aboutButton .studio-arrow{width:29px;height:29px;margin:0;display:grid;place-items:center;border-radius:50%;background:#ffffff16;transition:background .4s,color .4s}
.studio-arrow svg{display:block;transition:transform .5s cubic-bezier(.22,1,.36,1)}
#aboutButton:hover .studio-arrow{background:var(--acid);color:var(--ink)}
#aboutButton:hover .studio-arrow svg{transform:rotate(45deg)}
.filters{position:relative;isolation:isolate}
.filters::before{content:'';position:absolute;top:0;left:0;transform:translate(var(--pill-x,5px),var(--pill-y,5px));width:var(--pill-width,70px);height:var(--pill-height,39px);background:var(--ink);border-radius:30px;z-index:-1;transition:transform .5s cubic-bezier(.22,1,.36,1),width .5s cubic-bezier(.22,1,.36,1),height .4s}
.filters button{transition:color .35s,background .35s}
.filters button.active{background:transparent}
.filters button:not(.active):hover{background:#dcded150}
.view-toggle,.round-button{transition:background .35s,color .35s,border-color .35s}
.grid-card{animation:card-reveal .45s cubic-bezier(.22,1,.36,1) both}
@keyframes card-reveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1001px){.filters{position:absolute}}
@media(max-width:650px){#aboutButton{padding:6px 7px 6px 14px;gap:8px}#aboutButton .studio-arrow{width:26px;height:26px}}
@media(prefers-reduced-motion:reduce){.studio-icon,.studio-arrow svg,.filters::before{transition:none}.grid-card{animation:none}}

/* The hovered project's title remains distinct from the artwork behind it. */
.project-hover{z-index:45;bottom:108px;max-width:380px;padding:18px 72px 18px 20px;background:#1a1a19;color:#fff;border:1px solid #ffffff20;border-left:3px solid var(--acid);border-radius:12px;box-shadow:0 12px 35px #00000024;gap:8px;transform:translateY(10px);transition:opacity .3s,transform .4s cubic-bezier(.22,1,.36,1)}
.project-hover>span:first-child{font-size:9px;color:#d6fc51;letter-spacing:1.1px}
.project-hover strong{font-size:17px;line-height:1.35}
.project-hover .hover-arrow{right:16px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--acid);color:var(--ink);font-size:23px}
@media(max-width:900px){.project-hover{bottom:165px}}

.canvas-card{border-radius:16px;transition:filter .5s ease,box-shadow .5s cubic-bezier(.22,1,.36,1)}
.canvas-card img{border-radius:inherit}
.canvas-card::before{border-radius:0 0 16px 16px}
.canvas-card:hover{outline:0;box-shadow:0 0 0 6px #f4f4f0,0 0 0 7px #a4ab93,0 16px 40px #1a1a1914}
.canvas-card:after{transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.grid-card .thumb-wrap{border-radius:14px;transition:box-shadow .5s ease}
.grid-card img{border-radius:inherit}
.grid-card .thumb-wrap::after{border-radius:0 0 14px 14px}
.grid-card:hover .thumb-wrap{box-shadow:0 0 0 4px #f4f4f0,0 0 0 5px #a4ab93}
.grid-card .grid-arrow{transition:opacity .35s,transform .5s cubic-bezier(.22,1,.36,1);transform:translateY(5px)}
.grid-card:hover .grid-arrow{transform:translateY(0)}

#aboutButton,#viewButton{height:46px;width:124px;min-width:124px;justify-content:center;padding:8px 12px;gap:10px}
#viewButton{transition:background .4s,border-color .4s,color .4s,box-shadow .4s,transform .4s}
#viewButton:hover{color:var(--ink);border-color:#a7ad99;background:#e9ebdf;box-shadow:0 5px 16px #00000008;transform:translateY(-1px)}
#viewButton[aria-pressed=true]:hover{background:#303328;color:#fff;border-color:#303328}
.grid-icon svg{transition:transform .5s cubic-bezier(.22,1,.36,1)}
#viewButton:hover .grid-icon svg{transform:rotate(-5deg) scale(1.08)}
.project-hover{border-left:1px solid #ffffff20}
.hover-arrow svg,.grid-arrow svg,.card-open-arrow svg{display:block}
.canvas-card::after{content:none}
.card-open-arrow{position:absolute;bottom:12px;right:12px;width:32px;height:32px;display:grid;place-items:center;background:var(--acid);border-radius:50%;opacity:0;transform:translateY(5px);transition:opacity .35s,transform .5s cubic-bezier(.22,1,.36,1);z-index:2}
.canvas-card:hover .card-open-arrow,.canvas-card:focus-visible .card-open-arrow{opacity:1;transform:none}
@media(max-width:650px){#aboutButton,#viewButton{height:41px;width:112px;min-width:112px;padding:6px 10px;gap:8px}}
.canvas-card{opacity:0;visibility:hidden}

/* Uniform frame widths: long homes crop only below; hero compositions keep their sides. */
.grid-card .thumb-wrap,.grid-card[data-category="explorations"] .thumb-wrap{aspect-ratio:1.6}
.grid-card img{display:block;width:100%;height:auto;max-width:none;object-fit:initial}
.studio-mark:hover .studio-icon,.studio-mark:focus-visible .studio-icon,.studio-mark:active .studio-icon{transform:none}

@media(prefers-reduced-motion:reduce){.studio-mark:hover .wd-piece,.studio-mark:focus-visible .wd-piece{animation:none}}

.studio-icon,.studio-icon *{pointer-events:none}.studio-mark{width:48px;height:48px;flex-shrink:0}

/* Alternating carousels, animated as one composited strip per visible row. */
.project-grid{display:flex;flex-direction:column;gap:38px;max-width:1450px}
.carousel-row{min-width:0;animation:card-reveal .5s ease both}
.carousel-window{--edge-fade:clamp(28px,5vw,88px);overflow:hidden;padding:7px;margin:-7px;isolation:isolate;-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--edge-fade),#000 calc(100% - var(--edge-fade)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--edge-fade),#000 calc(100% - var(--edge-fade)),transparent)}
.carousel-track{display:flex;width:max-content;animation:gallery-marquee var(--travel-time) linear infinite;animation-direction:var(--travel-direction);animation-play-state:paused}
.carousel-row.in-view .carousel-track{animation-play-state:running;will-change:transform}
.carousel-row:hover .carousel-track,.carousel-row:focus-within .carousel-track{animation-play-state:paused}
.carousel-set{display:flex;gap:28px;padding-right:28px;flex-shrink:0}
.carousel-set .grid-card{width:min(465px,calc((100vw - 136px)/3));min-width:240px;flex-shrink:0;animation:none}
@keyframes gallery-marquee{to{transform:translate3d(-50%,0,0)}}
@media(max-width:1000px){.carousel-set .grid-card{width:calc((100vw - 108px)/2);min-width:220px}}
@media(max-width:650px){.carousel-set{gap:18px;padding-right:18px}.carousel-set .grid-card{width:77vw;min-width:0}.project-grid{gap:28px}.carousel-window{overflow-x:auto;scrollbar-width:none}}
@media(prefers-reduced-motion:reduce){.carousel-track{animation-play-state:paused!important}.carousel-row{animation:none}}
.studio-icon{transition:none!important;transform:none!important}
#viewButton:hover{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 6px 18px #00000020}
#viewButton:hover .grid-icon{color:var(--acid)}
#viewButton[aria-pressed=true]:hover{background:var(--acid);border-color:var(--acid);color:var(--ink)}
#viewButton[aria-pressed=true]:hover .grid-icon{color:var(--ink)}

/* Static mark, with the supplied brand colours cycling only on hover. */
.studio-mark{position:relative;width:56px;height:56px;justify-content:center;isolation:isolate}
.studio-icon{opacity:1;transition:opacity .22s!important}
.wd-color-logo{position:absolute;width:80px;height:80px;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:opacity .22s}
.wd-hover-disc{fill:#010101}.wd-hover-mark{fill:#fff}
.studio-mark:hover .studio-icon,.studio-mark:focus-visible .studio-icon{opacity:0}
.studio-mark:hover .wd-color-logo,.studio-mark:focus-visible .wd-color-logo{opacity:1}
.studio-mark:hover .wd-hover-disc,.studio-mark:focus-visible .wd-hover-disc{animation:wd-brand-disc 5.6s linear infinite}
.studio-mark:hover .wd-hover-mark,.studio-mark:focus-visible .wd-hover-mark{animation:wd-brand-mark 5.6s linear infinite}
@keyframes wd-brand-disc{0%,18%,100%{fill:#010101}25%,43%{fill:#2b4b9b}50%,68%{fill:#e84b1e}75%,93%{fill:#6bb649}}
@keyframes wd-brand-mark{0%,43%,100%{fill:#fff}50%,93%{fill:#010101}}
@media(max-width:650px){.studio-mark{width:40px;height:40px}.wd-color-logo{width:64px;height:64px}}
@media(prefers-reduced-motion:reduce){.studio-mark:hover .wd-hover-disc,.studio-mark:focus-visible .wd-hover-disc{animation:none;fill:#2b4b9b}.studio-mark:hover .wd-hover-mark,.studio-mark:focus-visible .wd-hover-mark{animation:none;fill:white}}
.project-dialog:focus{outline:none}
/* Match the mark itself in both states; the circle adds space around it. */
.wd-color-logo>g{transform-box:view-box;transform-origin:50% 50%;transform:scale(1.088)}
.studio-mark:hover .wd-hover-disc,.studio-mark:focus-visible .wd-hover-disc,.studio-mark:hover .wd-hover-mark,.studio-mark:focus-visible .wd-hover-mark{animation-duration:2.4s}
@media(max-width:650px){.wd-color-logo>g{transform:scale(1.0725)}}
.window-dot{display:grid;place-items:center;line-height:0;flex-shrink:0;color:#0009}
.window-dot svg{display:block;margin:0;opacity:0;transition:opacity .18s}
.window-controls:hover .window-dot svg,.window-dot:focus-visible svg{opacity:1}
.viewer-progress{height:4px;flex-shrink:0;background:#dedfd9;width:100%;overflow:hidden}
.viewer-progress span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#6bb649,#e84b1e);transform:scaleX(0);transform-origin:left;transition:transform .1s linear}
.window-controls{gap:0}
.window-close{width:32px;height:32px;background:#20211f;border:1px solid #20211f;color:white;transition:background .3s,border-color .3s}
.window-close svg{width:16px;height:16px;opacity:1}
.window-close:hover{background:#464b3f;border-color:#464b3f;color:white}
@media(max-width:650px){.window-close{width:30px;height:30px}}

body:has(#projectDialog[open]) .carousel-track,body:has(#aboutDialog[open]) .carousel-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.carousel-window{overflow-x:auto;scrollbar-width:thin}}