/* The existing type, paper and ink palette carry through from the spatial study. */
:root{--architecture:#c6cbbb;--architecture-side:#9da68c;--interior:#d8b09a;--interior-side:#b88d73;--competition:#d8cda7;--competition-side:#b5a675;--piece-ink:#303329}
body.inverted{--architecture:#89967b;--architecture-side:#606e51;--interior:#b38268;--interior-side:#855d48;--competition:#b3a471;--competition-side:#877a50}
[data-category="Architecture"],[data-category-toggle="Architecture"]{--category:var(--architecture);--category-side:var(--architecture-side)}
[data-category="Interior"],[data-category-toggle="Interior"]{--category:var(--interior);--category-side:var(--interior-side)}
[data-category="Competition"],[data-category-toggle="Competition"]{--category:var(--competition);--category-side:var(--competition-side)}
.playground{height:clamp(660px,calc(100svh - 245px),900px)}
.playground .object-wrap{inset:6% 2% 3% 23%;pointer-events:none}
.playground .spatial-object{pointer-events:none}
.coordinate-system{fill:none;stroke:var(--ink);stroke-width:.8;opacity:.68;transition:opacity .5s}
.coordinate-system path{vector-effect:non-scaling-stroke}
.coordinate-system circle{fill:var(--accent);stroke:none}
.coordinate-system text{fill:var(--ink);stroke:none;font:12px 'Courier New',monospace}
.coordinate-system .axis-origin{font-size:8px;fill:var(--muted)}
.has-projects .coordinate-system{opacity:.35}
.project-piece[hidden]{display:none!important}
.project-piece{pointer-events:auto}
.project-solid{transform:translateY(0);transition:transform .3s cubic-bezier(.2,.7,.2,1),filter .3s}
.project-piece polygon{stroke:var(--ink);stroke-width:.7;vector-effect:non-scaling-stroke;stroke-linejoin:miter}
.project-top{fill:var(--category);transition:fill .3s}
.project-side{fill:var(--category-side);transition:fill .3s}
.project-shadow{fill:#00000012;stroke:none!important;transform:translate(2px,9px)}
.project-label{fill:var(--piece-ink);pointer-events:none}
.project-num{font:9px 'Courier New',monospace;opacity:.7}
.project-word{font:15px 'Courier New',monospace;letter-spacing:-.5px}
.project-link{outline:none;cursor:pointer}
.project-link:hover{opacity:1}
.project-piece:hover .project-solid,.project-piece:focus-within .project-solid,.project-piece.is-previewed .project-solid{transform:translateY(-23px);filter:drop-shadow(0 12px 7px #00000016)}
.project-piece:hover .project-top,.project-piece:focus-within .project-top{fill:var(--ink)}
.project-piece:hover .project-label,.project-piece:focus-within .project-label{fill:var(--paper)}
.project-link:focus-visible polygon{stroke:var(--accent);stroke-width:2}
.project-piece.is-falling{animation:project-drop 1050ms cubic-bezier(.24,.63,.25,1) var(--drop-delay,0ms) both}
@keyframes project-drop{0%{transform:translateY(-860px);opacity:0}10%{opacity:1}70%{transform:translateY(0)}83%{transform:translateY(-16px)}94%{transform:translateY(0)}98%{transform:translateY(-2px)}100%{transform:translateY(0);opacity:1}}
.category-rail{top:17%;width:204px}
.category-button{display:flex;gap:11px;align-items:center;text-align:left;width:100%;min-height:49px;padding:11px 8px;border-top:1px solid var(--line);font:12px Arial;transition:background .25s,color .25s}
.category-button:last-child{border-bottom:1px solid var(--line)}
.category-button .category-number{font:8px 'Courier New',monospace;color:var(--muted)}
.category-button>span:not(.category-number):not(.sr-only){font:inherit;color:inherit}
.category-button .category-swatch{display:block;flex:none;width:8px;height:8px;background:var(--category);border:1px solid var(--category-side);opacity:1}
.category-button b{font:17px 'Courier New',monospace;margin-left:auto;font-weight:400;transition:transform .25s}
.category-button[aria-pressed=true]{background:var(--category);color:var(--piece-ink);border-color:var(--category-side)}
.category-button[aria-pressed=true] .category-number{color:var(--piece-ink)}
.category-button[aria-pressed=true] .category-swatch{background:var(--piece-ink);border-color:var(--piece-ink)}
.category-button[aria-pressed=true] b{transform:rotate(45deg)}
.category-button:hover{background:var(--category);color:var(--piece-ink)}
.category-button:hover .category-number{color:var(--piece-ink)}
.site-header nav .nav-category{min-height:60px;font-size:24px;letter-spacing:-.04em;padding:13px 10px;border-bottom:0}
.site-header nav .nav-category .category-number{font-size:9px;margin-right:10px}
.site-header nav>a{font-size:25px}
.playground .project-panel{left:var(--gutter);right:auto;bottom:153px;width:208px}
.project-panel h2{font-size:29px;line-height:1.08;margin:17px 0 14px;overflow-wrap:break-word}
.project-panel p{min-height:39px;font:11px/1.6 Arial}
.project-credit{display:block;font:9px/1.6 'Courier New',monospace;color:var(--muted);min-height:29px;margin-top:6px}
.project-panel .panel-coordinate{color:var(--muted);font-size:8px}
.project-panel[data-category] .panel-coordinate:before{content:'';display:inline-block;width:7px;height:7px;background:var(--category);border:1px solid var(--category-side);margin-right:6px}
.project-panel .panel-rule{margin:14px 0}
.project-panel .interaction-hint{font-size:7px;line-height:1.8}
.playground .stage-caption{bottom:78px}
.playground .stage-controls{bottom:58px;left:auto;right:var(--gutter);transform:none;gap:26px}
.stage-controls button:disabled{opacity:.3;cursor:default}
.stage-controls button:disabled:hover{color:inherit}
.playground .stage-bottom{font-size:8px}
.manifesto{padding-bottom:62px}
@media(min-width:1700px){.playground .object-wrap{inset:3% 5% 3% 24%}.playground .project-panel{width:230px}}
@media(max-width:1100px){.playground{height:690px}.playground .object-wrap{inset:13% -3% 7% 21%}.category-rail{width:172px}.playground .project-panel{width:175px;bottom:145px}.project-panel h2{font-size:26px}.project-word{font-size:14px}}
@media(max-width:760px){.playground{height:760px}.playground .category-rail{top:84px;left:20px;right:20px;width:auto;gap:8px}.category-button{font-size:10px;min-height:48px;gap:6px;padding:10px 5px;border-top:1px solid var(--line)}.category-button:last-child{border-bottom:0}.category-button .category-number{display:none}.category-button .category-swatch{width:6px;height:6px}.category-button b{font-size:13px}.playground .object-wrap{inset:19% -5% 24% -10%}.playground .project-panel{display:block;left:20px;right:20px;bottom:97px;width:auto;min-height:123px;padding-right:35%;pointer-events:none}.project-panel h2{font-size:25px;margin:10px 0 8px;max-width:250px}.project-panel p{min-height:0;font-size:10px}.project-credit{font-size:8px;min-height:0;margin-top:5px}.project-panel .panel-rule{display:none}.project-panel .interaction-hint{display:none}.playground .stage-caption{display:flex;left:auto;right:20px;bottom:115px;font-size:7px;gap:6px;max-width:100px}.stage-caption .small-cross{font-size:22px}.playground .stage-controls{bottom:37px;right:20px;gap:21px}.playground .stage-bottom{bottom:18px;font-size:6px;right:20px}.playground .stage-bottom span:last-child{display:block}.project-word{font-size:15px}.manifesto{padding-bottom:35px}.site-header nav .nav-category{font-size:24px}}
@media(max-width:380px){.category-button{font-size:9px;gap:4px}.playground .project-panel{padding-right:26%}.project-panel h2{font-size:23px}.playground .stage-caption{max-width:80px;font-size:6px}}
@media(prefers-reduced-motion:reduce){.project-piece.is-falling{animation:none}.project-solid{transition:none}}
