/* 10 Nov 06:57 batch (John, WhatsApp). Loaded last on every page. */
/* 1. logo captions: tap or click a logo, a short caption opens under it */
ul.logos,ul.wall{position:relative}
ul.logos li.hc,ul.wall li.hc{padding:0}
.lgb{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:inherit;padding:inherit;cursor:pointer;position:relative;border-radius:2px;-webkit-tap-highlight-color:transparent}
ul.logos li.hc>.lgb{padding:10px 8px}
.lgb img{pointer-events:none}
.lgb::after{content:"";position:absolute;right:7px;bottom:7px;width:6px;height:6px;border-radius:50%;background:#FFC629;opacity:.75;box-shadow:0 0 0 3px rgba(255,198,41,.16);transition:transform .25s,opacity .25s}
.lgb:hover::after,.lgb[aria-expanded=true]::after{opacity:1;transform:scale(1.3)}
.lgb:focus-visible{outline:2px solid #FFC629;outline-offset:2px}
.lgb[aria-expanded=true]{box-shadow:inset 0 0 0 1px rgba(255,198,41,.9)}
.lgb .tx{pointer-events:none}
.lcap{position:absolute;z-index:20;box-sizing:border-box;width:min(320px,100%);padding:14px 40px 15px 16px;background:#111;color:#fff;border-top:2px solid #FFC629;border-radius:2px;box-shadow:0 14px 40px rgba(0,0,0,.35);font:400 15px/1.45 Atkinson,Arial,sans-serif;text-align:left;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s}
.lcap.on{opacity:1;transform:none}
.lcap b{display:block;margin:0 0 4px;font:800 13px/1.2 Archivo,Arial,sans-serif;font-stretch:85%;letter-spacing:.14em;text-transform:uppercase;color:#FFC629}
.lcap button{all:unset;position:absolute;top:8px;right:8px;width:28px;height:28px;display:grid;place-items:center;font-size:20px;line-height:1;color:rgba(255,255,255,.75);cursor:pointer}
.lcap button:focus-visible{outline:2px solid #FFC629}
.lcap::before{content:"";position:absolute;top:-8px;left:var(--ax,24px);border:6px solid transparent;border-bottom-color:#FFC629;border-top:0}
.capnote{margin:14px 0 0;font:400 14px/1.4 Atkinson,Arial,sans-serif;opacity:.7}
@media (prefers-reduced-motion:reduce){.lcap{transition:none}}

/* 4. the orrery as the black book's mark, in the white space of "A trusted circle" */
.connectors.tl{position:relative;overflow:hidden}
.connectors .wrap{position:relative}
.connectors .cxorr{position:absolute;right:clamp(-110px,-4vw,-20px);top:50%;width:clamp(170px,34vw,470px);aspect-ratio:1;transform:translateY(-50%);display:block;opacity:.9;z-index:0}
.connectors .cxorr svg{width:100%;height:100%;display:block;overflow:visible}
.connectors .wrap>*:not(.cxorr){position:relative;z-index:1}
.cxorr .r{fill:none;stroke:rgba(17,17,17,.13);stroke-width:1}
.cxorr .r.g{stroke:rgba(201,150,20,.32)}
.cxorr .d{fill:rgba(17,17,17,.26)}
.cxorr .d.g{fill:#E0A912}
.cxorr .c{fill:#FFC629}
.cxorr .ring{transform-origin:200px 200px;animation:cxspin var(--s,90s) linear infinite}
.cxorr .ring.rev{animation-direction:reverse}
@keyframes cxspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cxorr .ring{animation:none}}
@media (max-width:759px){.connectors .wrap{display:flex;flex-direction:column}
.connectors .wrap>*{order:1}
.connectors .sub{margin-bottom:0 !important}
.connectors .cxorr{order:2;position:relative;top:auto;right:auto;align-self:flex-end;width:176px;margin:-6px -30px -34px 0;transform:none}
.connectors .cxlink{order:3;margin-top:0}}

/* 5. Rough Diamond: the stacked book, tight under the headline */
.bookfeat .bf.stk{align-items:start}
.bookfeat .bf.stk figure img{max-width:640px}
@media (min-width:900px){.bookfeat .bf.stk{align-items:center}}
@media (max-width:899px){
.bookfeat .bf.stk{display:flex;flex-direction:column;gap:0}
.bookfeat .bf.stk>div{display:contents}
.bookfeat .bf.stk>div>*{order:3}
.bookfeat .bf.stk .lbl,.bookfeat .bf.stk .lbl2{order:1}
.bookfeat .bf.stk h2{order:1}
.bookfeat .bf.stk figure{order:2;margin:12px 0 -8px}
.bookfeat .bf.stk figure img{width:100%;max-width:520px;margin:0}
}
/* Rough Diamond page: the imprint block carries a small front cover on the right */
.rdimp{display:grid;gap:22px 48px;align-items:center}
.rdimp .cv{margin:0;justify-self:end}
.rdimp .cv img{display:block;width:clamp(110px,14vw,170px);height:auto;box-shadow:0 18px 36px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.18)}
.rdimp figcaption,.rdimp .cap{font:400 15px/1.45 Atkinson,Arial,sans-serif;opacity:.75;max-width:40ch}
@media (min-width:700px){.rdimp{grid-template-columns:1fr auto}}
@media (max-width:699px){.rdimp{grid-template-columns:minmax(0,1fr) auto;gap:14px}.rdimp .cv img{width:84px}.rdimp h2{font-size:clamp(28px,8.4vw,36px) !important}}

/* 6. black book hero: cleaner stacking, the woman kept clear */
@media (min-width:761px){.bbh h1{font-size:min(8.6vw,124px)}.bbh h1 span.w2{white-space:nowrap}}

/* 7. black book: black all the way down to the orrery */
.bbintro{background:#000;color:#fff}
.bbintro .lead,.bbintro .lead strong{color:#fff}

/* 9. article headers: the lead image as a dark hint behind the black header */
header.wtop.hbg{position:relative;overflow:hidden;background:#000;isolation:isolate}
header.wtop.hbg .wbg{position:absolute;inset:0;z-index:-1;margin:0;pointer-events:none}
header.wtop.hbg .wbg img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.15) blur(3px);transform:scale(1.06)}
header.wtop.hbg .wbg.clean img{filter:grayscale(.15);transform:none}
header.wtop.hbg .wbg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.8) 55%,rgba(0,0,0,.92) 100%)}

/* 11c. menu: a panel that slides in from the right on phones too, the page still visible behind it */
@media (max-width:560px){nav.main .np{width:88vw;padding-left:24px;padding-right:22px}
nav.main .np-top{margin-right:48px}}

/* 12. Resources hero: headline on the left, the hands moved right and clear of it, a small caption inside the black */
.ihero.resh .ph{background:#000}
.ihero.resh .ph img{transform:translateX(15%)}
.ihero.resh .copy .wrap{max-width:none}
.ihero.resh h1{max-width:52%}
.ihero.resh .rescap{margin:18px 0 0;max-width:30ch;font:400 clamp(16px,1.35vw,19px)/1.45 Atkinson,Arial,sans-serif;color:rgba(255,255,255,.82)}
@media (max-width:760px){.ihero.resh .ph img{transform:none;object-position:68% 40%}
.ihero.resh h1{max-width:none}
.ihero.resh .rescap{max-width:32ch;font-size:16px;margin-top:14px}}