/* 11 Nov 2026 morning riff (John, WhatsApp 04:58 to 05:26). build.py block "11 Nov morning riff". Loaded last on every page. */

/* 1. The dotted trail and its gold dot sit inside the black, never on the black/white seam */
section.s[data-trk=in]::before,section.blk[data-trk=in]::before{top:30px}
section.s[data-trk=in]::after,section.blk[data-trk=in]::after{top:27px}
main .wrap.next::before{top:20px}
main .wrap.next::after{top:17px}
[data-trk=off]::before,[data-trk=off]::after{display:none !important;animation:none !important}
/* a short run of black above a white band: the trail runs inside it, then the black fades into the white */
.trk{position:relative;height:48px;background:linear-gradient(180deg,#000 0,#000 66%,rgba(0,0,0,.45) 82%,rgba(255,255,255,.7) 93%,#fff 100%);overflow:hidden;margin:0}
.trk::before{content:"";position:absolute;left:0;right:0;top:15px;height:3px;background:radial-gradient(circle,rgba(255,255,255,.42) 1.1px,transparent 1.7px) 0 50%/16px 3px repeat-x}
.trk::after{content:"";position:absolute;top:12px;width:9px;height:9px;margin-left:-4px;border-radius:50%;background:#FFC629;box-shadow:0 0 14px 2px rgba(255,198,41,.75);animation:nyc-run 11s linear infinite;opacity:0}
.trk:nth-of-type(odd)::after{animation-duration:13s;animation-delay:-5s}
/* the dot band under each inner hero: on the black, clear of the join below */
.dotband.dk11{height:30px;box-sizing:content-box;padding:16px 0 26px;background-color:#000;background-image:radial-gradient(circle,rgba(255,255,255,.34) 1px,transparent 1.6px);background-size:18px 10px;background-origin:content-box;background-clip:content-box;background-position:0 0}
.dotband.dk11::after{top:16px;bottom:26px;mix-blend-mode:screen}
@media (max-width:760px){
 .trk{height:40px}.trk::before{top:12px}.trk::after{top:9px}
 section.s[data-trk=in]::before,section.blk[data-trk=in]::before{top:22px}
 section.s[data-trk=in]::after,section.blk[data-trk=in]::after{top:19px}
 main .wrap.next::before{top:14px}main .wrap.next::after{top:11px}
 .dotband.dk11{padding:12px 0 18px;height:24px}
 .dotband.dk11::after{top:12px;bottom:18px}
}
@media (prefers-reduced-motion:reduce){.trk::after{display:none}}

/* 2. Home, "A trusted circle": the orrery turns inside the dancer's gold arc, white and grey on the black */
.kpair.trc figure{position:relative}
.trc .trco{position:absolute;left:72.5%;top:51.3%;width:39%;aspect-ratio:1;transform:translate(-50%,-50%);display:block;pointer-events:none}
@media (min-width:760px){.trc .trco{top:51.5%}}
.trc .trco svg{width:100%;height:100%;display:block;overflow:hidden;clip-path:circle(41% at 50% 50%)}
.trco .fr,.trco .tk,.trco .cart,.trco .spk{display:none}
.trco .st circle{fill:rgba(255,255,255,.5)}
.trco .r{fill:none;stroke:rgba(255,255,255,.26);stroke-width:1}
.trco .r.g{stroke:rgba(255,198,41,.5)}
.trco .m{fill:rgba(255,255,255,.86)}
.trco .m.p1{fill:rgba(255,255,255,.6)}.trco .m.p2{fill:#C9C9C9}.trco .m.p3{fill:rgba(255,198,41,.9)}
.trco .ray{stroke:rgba(255,198,41,.7);stroke-width:1.2}
.trco .c{fill:#FFC629}
.trco .ny{font:800 11px Archivo,Arial,sans-serif;font-stretch:87.5%;fill:#000}
.trco .ring{transform-origin:200px 200px;animation:cxspin var(--s,90s) linear infinite}
.trco .ring.rev{animation-direction:reverse}
@keyframes cxspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.trco .ring{animation:none}}

/* 6. How NYC works: four steps, Measure the fourth */
@media (min-width:761px){.hw3.hw4{grid-template-columns:repeat(4,1fr);gap:40px}.hw3.hw4 p{font-size:18px}}
.hb-svg .kax{stroke:rgba(255,255,255,.45);stroke-width:1.2;fill:none}
.hb-svg .kbar{fill:#FFC629;stroke:none}
.hb-svg .kchk{stroke:#FFC629;stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hb-svg .kloop{stroke:#7FC4C4;stroke-width:1.6;fill:none}
.hb-svg .khead{fill:#7FC4C4}
@media (max-width:760px){.hb-st{flex-wrap:wrap;row-gap:6px}}

/* 7. Logo carousel: logos reversed out in white, on black and on the deep palette, changing tile to tile */
.frz-lgc[data-lg=w] li.lg{background:#161616}
.frz-lgc[data-lg=w] li.lg img{filter:brightness(0) invert(1);opacity:.95}
.frz-lgc[data-lg=w] ul li.lg:nth-child(6n+2){background:#0B3B40}
.frz-lgc[data-lg=w] ul li.lg:nth-child(6n+3){background:#8A6400}
.frz-lgc[data-lg=w] ul li.lg:nth-child(6n+4){background:#1C6E74}
.frz-lgc[data-lg=w] ul li.lg:nth-child(6n+5){background:#12545A}
.frz-lgc[data-lg=w] ul li.lg:nth-child(6n+6){background:#242424}

/* 8 and 10. Less black on phones; the orrery bigger, the frame fits what it holds */
.bbstage.bb11{padding:clamp(28px,4vw,56px) 0 clamp(20px,3vw,44px)}
.bbstage.bb11 iframe{height:min(100vh,980px);min-height:720px}
@media (max-width:999px){.bbstage.bb11{padding:18px 0 6px}.bbstage.bb11 iframe{min-height:0;height:var(--bbh,640px)}}
@media (max-width:760px){
 .hw-build.js-on{height:135vh}
 .hw-build.js-on .hb-in{height:auto;top:max(60px,calc(50vh - 250px));padding:24px 0 28px}
 .hw-build .hb-in{padding:10px 0 44px}
}
@media (max-width:760px){
 main>section.s,main>section.blk{padding-top:56px;padding-bottom:56px}
 main>section.s.conn{padding-bottom:40px}
 main>.sec{padding-top:58px;padding-bottom:58px}
 main>.rsec{padding-top:52px;padding-bottom:52px}
 main>.slugs{padding-top:52px;padding-bottom:52px}
}
/* 5. people carousels: bright real photographs, same strip as the logo and Nicole friezes */
.frz-pp img{filter:saturate(1.05) contrast(1.02)}
/* 9. the loop, beside the trusted circle */
.loop11{font:800 clamp(19px,1.7vw,24px)/1.25 Archivo,Arial,sans-serif;font-stretch:84%;letter-spacing:.005em;margin:18px 0 0;max-width:36ch}
.loop11::first-line{color:inherit}