/* 10 Nov remaining items (build.py block "10 Nov remaining items") */
/* How NYC works: the structure builds as you scroll. Without motion (reduced motion or no script) it shows finished, in normal flow. */
.hw-build{background:#0B0B0B;color:#fff;position:relative}
.hw-build .hb-in{padding:24px 0 96px}
.hw-build .lbl{color:#FFC629;margin:0 0 18px}
.hb-svg{display:block;width:100%;max-width:960px;height:auto;margin:0 auto;overflow:visible}
.hb-svg .mv{transform-box:fill-box;transform-origin:center;will-change:transform,opacity}
.hb-svg .g0{stroke:rgba(255,255,255,.28);stroke-width:1}
.hb-svg .g1{stroke:rgba(255,255,255,.18);stroke-width:1}
.hb-svg .blk{stroke:rgba(255,255,255,.55);stroke-width:1.2}
.hb-svg .b1{fill:#0B3B40}.hb-svg .b2{fill:#12545A}.hb-svg .b3{fill:#1C6E74}
.hb-svg .cap{fill:#FFC629;stroke:#FFC629}
.hb-svg .meas{stroke:#FFC629;stroke-width:2;fill:none}
.hb-svg .link{stroke:rgba(255,198,41,.7);stroke-width:1.4;fill:none;stroke-dasharray:1 1}
.hb-svg .tie{stroke:rgba(255,255,255,.4);stroke-width:1;fill:none;stroke-dasharray:1 1}
.hb-svg .dr{stroke-dasharray:1 1}
.hb-svg .ring{fill:none;stroke:rgba(255,198,41,.38);stroke-width:1.2}
.hb-svg .brief{fill:#FFC629;filter:drop-shadow(0 0 10px rgba(255,198,41,.55))}
.hb-svg .sp{stroke-width:2}
.hb-svg .sp0{fill:#0B0B0B;stroke:#FFC629}.hb-svg .sp1{fill:#fff;stroke:#fff}.hb-svg .sp2{fill:#1C6E74;stroke:#7FC4C4}
.hb-svg .bk{fill:none;stroke:rgba(255,255,255,.7);stroke-width:1.2;opacity:.3}
.hb-st{list-style:none;display:flex;justify-content:center;gap:clamp(14px,3vw,40px);margin:26px 0 0;padding:0;font:700 14px/1.2 Archivo,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.hb-st li{padding:8px 14px;border:1px solid rgba(255,255,255,.2);border-radius:999px;transition:color .3s,border-color .3s,background .3s}
.hb-st li span{color:#FFC629;margin-right:4px}
.hw-build.js-on .hb-st li{color:rgba(255,255,255,.45)}
.hw-build.js-on .hb-st li.on{color:#0B0B0B;background:#FFC629;border-color:#FFC629}
.hw-build.js-on .hb-st li.on span{color:#0B0B0B}
.hw-build.js-on .hb-st li.done{color:#fff;border-color:rgba(255,198,41,.6)}
/* motion on: a tall run with the drawing held in view while it builds */
.hw-build.js-on{height:230vh}
.hw-build.js-on .hb-in{position:sticky;top:0;height:100vh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:70px 0 40px}
.hw-build.js-on .hb-svg{max-height:calc(100vh - 220px);width:auto;max-width:100%}
@media (max-width:760px){
 .hw-build .hb-in{padding:10px 0 64px}
 .hw-build.js-on{height:200vh}
 .hw-build.js-on .hb-in{padding:64px 0 28px}
 .hb-svg{width:108%;max-width:none;margin-left:-4%}
 .hw-build.js-on .hb-svg{width:108%;max-height:none}
 .hb-st{gap:6px;font-size:10px;letter-spacing:.05em;margin-top:18px}
 .hb-st li{padding:7px 9px;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.hw-build{height:auto !important}.hw-build .hb-in{position:static !important;height:auto !important}.hb-svg .mv{transform:none !important;transition:none}.hb-st li{transition:none}}
/* Clients: more colour, and the friezes run across the black selected work */
.clp.keepw .lbl{color:#0F6B70}
.clp .wall li:nth-child(6n+2),.clp .wall li:nth-child(6n+6){background:#FFF6D9}
.clp .wall li:nth-child(6n+4){background:#E4F0EF}
@media (max-width:700px){.clp .wall li:nth-child(n){background:#fff}.clp .wall li:nth-child(4n+2),.clp .wall li:nth-child(4n+3){background:#FFF6D9}.clp .wall li:nth-child(8n+3),.clp .wall li:nth-child(8n+6){background:#E4F0EF}}
.clp .wall li.hc:hover,.clp .wall li.hc:focus-within{background:#FFE9A6}
.clp.dk{background:#000}
.clp.dk>.wrap>.lbl{color:#FFC629}
.clp.dk .case{border-top:2px solid rgba(255,198,41,.55)}
.clp.dk .case:nth-child(3n+2){border-top-color:#2A8C8F}
.clp.dk .case .meta>span:first-child{color:#FFC629}
.clp.dk .case .out{border-left:3px solid #FFC629;padding:2px 0 2px 14px}
.clp.dk .case .out b{color:#FFC629}
.clp.dk .case .src a{color:#9ED6D3}
.clp-cont{padding-top:clamp(36px,4vw,56px) !important}
.clp-cont .cases{margin-top:0 !important}
.clp.dk:has(+ .frz){padding-bottom:clamp(28px,3vw,44px) !important}
/* impact lines, sourced only */
.imp{margin:12px 0 0;font-size:15px;line-height:1.45;color:#0B3B40;border-left:3px solid #FFC629;padding-left:10px}
.imp{display:block !important}
.imp b{display:inline !important;color:#0B3B40;font-weight:800;margin:0 2px 0 0 !important;width:auto !important}
.case2 .imp,.proof .case .imp{margin-bottom:10px}
.dk .imp,.blk.dk .imp{color:rgba(255,255,255,.88)}
.dk .imp b{color:#FFC629}
.rdimp{max-width:46ch;margin-top:26px;font-size:16px}