/* Research page (the rhizome map): the one colourful part of the site. Built from experiments/research-rhizome. */
/* ── research rhizome (prototype): the one colourful part of the site ───────── */
:root{--time:#e8b24f;--water:#3fc0d0;--mth:#8fd06f;--mind:#f27aa6;--att:#b58cf5;--scale:#6f94ff;--prac:#cfc9bb}
.rh{padding-top:var(--head)}
.rz-box{position:relative;max-width:1600px;margin:8px auto 0;overflow-x:clip}   /* the ?'s halo never widens the page */
.hint{margin:18px 0 0;font-size:14px;color:var(--mut);display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
/* the map's guide: a ? in the top-right corner, in a patch of dark the layout keeps free (research.js KEEP); it unfolds over the map when asked for */
.rh-help{position:absolute;z-index:8;top:14px;right:var(--pad)}
.rh-help>summary{position:relative;isolation:isolate;list-style:none;display:block;cursor:pointer;border-radius:50%}
.rh-help>summary::-webkit-details-marker{display:none}
.rh-help>summary::before{content:'';position:absolute;z-index:-1;inset:-30px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--bg) 42%,color-mix(in srgb,var(--bg) 60%,transparent) 70%,transparent)}
.rh-help>summary>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:16px/1 var(--display);color:var(--fg);
  border:1px solid var(--mut);background:var(--bg);transition:background .2s,color .2s,border-color .2s}
.rh-help>summary:hover>span{border-color:var(--fg)}
.rh-help[open]>summary>span{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.rh-panel{position:absolute;top:calc(100% + 10px);right:0;width:min(620px,calc(100vw - 2 * var(--pad)));max-height:calc(100vh - var(--head) - 90px);overflow:auto;
  padding:18px 20px 20px;border:1px solid var(--rule);border-radius:12px;font-size:13px;color:var(--mut);
  background:linear-gradient(160deg,color-mix(in srgb,var(--bg) 97%,transparent),color-mix(in srgb,var(--bg-2) 95%,transparent));
  box-shadow:0 30px 70px -24px rgba(0,0,0,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rh-note{font-size:14px;line-height:1.55;color:var(--text);margin:0 0 16px}
.kick{font:11px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:0 0 10px;padding-top:14px;border-top:1px solid var(--rule)}
.key-in{display:grid;gap:8px}
.key-in p{margin:0;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;line-height:1.5}
.key-in p>b{font:10px var(--display);font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--text);min-width:88px}
.key-in .dot{display:inline-flex;align-items:center;gap:6px}
.key-in .dot i{width:8px;height:8px;border-radius:50%}
.key-in .pg{display:inline-flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
.key-in .pg em{font-style:normal;color:var(--mut)}
.key-in button{font:inherit;font-style:italic;color:var(--prac);background:none;border:0;padding:0;cursor:pointer}
.key-in button:hover,.key-in button:focus-visible{color:var(--fg)}
.key-in .sw{display:inline-block;vertical-align:-1px;margin-right:5px;width:16px;height:11px;border-radius:2px}
.key-in .sw.w{width:12px;height:12px;border-radius:50%;border:1px solid var(--text);vertical-align:-2px}
.key-in .sw.ph{width:14px;height:10px;background:var(--mut);border-radius:1px}
.key-in .sw.cr{border:1px solid var(--rule-2)}
.key-in .sw.og{border:1.5px solid var(--fg);border-radius:3px;box-shadow:0 0 0 2px color-mix(in srgb,var(--fg) 12%,transparent)}
.key-in .sw.th{height:0;border-top:2px dotted var(--prac);border-radius:0}
.key-in .sw.rt{height:0;border-top:2px solid var(--att);border-radius:0}
.key-in .sw.od{height:0;border-top:2px dashed var(--fg);border-radius:0}

/* the map */
.rz{position:relative;overflow:hidden}
.rz svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.rz .glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(10px);background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 15%,transparent),transparent)}
.th{fill:none;transition:opacity .25s,stroke-width .25s}
.th.i{stroke-width:1.6;opacity:.5}                                    /* roots: solid, in the line's colour */
.th.g{stroke:var(--mut);stroke-width:.8;opacity:.3}                      /* photo tethers: thin and grey */
.th.o{stroke-width:1.4;stroke-dasharray:9 7;opacity:.6}                  /* ongoing research: long dashes */
.n{position:absolute;left:0;top:0;transform:translate(-50%,-50%);transition:opacity .25s,transform .3s var(--ease);font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.n:focus-visible{outline:1px solid var(--fg);outline-offset:4px;border-radius:4px}
.n-int{display:flex;flex-direction:column;align-items:center;font-family:var(--display);font-size:calc(clamp(26px,3.5vw,54px) * var(--f,1) * var(--s,1));letter-spacing:-.05em;line-height:1;color:var(--c);white-space:nowrap;z-index:3;text-shadow:0 0 6px var(--bg),0 0 18px var(--bg),0 2px 30px var(--bg)}
.n-int .kw{font:12.5px/1.3 var(--font);font-size:max(11px,calc(12.5px * var(--s,1)));letter-spacing:0;margin-top:8px;opacity:1;color:var(--fg);text-shadow:0 0 6px var(--bg),0 1px 12px var(--bg);white-space:normal;text-align:center;max-width:320px}
.n-int .mt{font:10.5px var(--display);font-size:max(9.5px,calc(10.5px * var(--s,1)));letter-spacing:.07em;text-transform:uppercase;margin-top:5px;opacity:.8;text-shadow:0 0 6px var(--bg),0 1px 12px var(--bg)}
.n-work{font-size:14.5px;line-height:1.25;color:var(--fg);white-space:nowrap;z-index:4;padding:3px 7px;border-radius:99px;background:color-mix(in srgb,var(--bg) 78%,transparent)}
.n-work .d{display:inline-flex;gap:3px;margin-right:6px;vertical-align:1px}
.n-work .d i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.n-work small{font:11px var(--display);color:var(--mut);margin-left:6px}
.n-work.cr{display:flex;width:max-content;align-items:center;gap:8px;padding:4px 10px 4px 11px;font-size:max(11px,calc(12.5px * var(--s,1)))!important;border-radius:6px;border:1px solid var(--rule-2);background:color-mix(in srgb,var(--bg) 88%,transparent);font-size:12.5px;line-height:1.25;color:var(--text)}
.n-work.cr em{display:block;font:9.5px var(--display);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:2px}
.n-work.cr .d{margin-right:4px}
.n-work.cr .lb{white-space:normal;max-width:calc(150px * var(--s,1))}                /* a long title wraps: a credit stays a compact tag that fits beside its line */
.n-work.cr:hover{border-color:var(--mut);color:var(--fg)}

.n-work.disc{display:flex;flex-direction:column;align-items:center;width:calc(var(--d) + 48px);padding:0;background:none;white-space:normal;text-align:center;border-radius:0}
.n-work.disc .cv{display:block;width:var(--d);height:var(--d);border-radius:50%;overflow:hidden;background:var(--bg-2);box-shadow:0 0 0 1.2px color-mix(in srgb,var(--fg) 35%,transparent),0 16px 34px -14px rgba(0,0,0,.95);transition:box-shadow .3s,transform .3s var(--ease)}
.n-work.disc .cv img{display:block;width:100%;height:100%;object-fit:cover}
.n-work.disc .lb{display:block;margin-top:calc(9px * var(--s,1));font-size:max(11.5px,calc(14px * var(--s,1)));line-height:1.3;text-shadow:0 1px 10px var(--bg),0 0 2px var(--bg)}
.n-work.disc:hover .cv,.n-work.disc:focus-visible .cv,.rz.focus .n-work.disc.on .cv{box-shadow:0 0 0 3px var(--c),0 16px 34px -14px rgba(0,0,0,.95)}
.n-work.disc:focus-visible{outline:0}
.n-img{z-index:2;border-radius:3px;box-shadow:0 14px 30px -14px rgba(0,0,0,.9)}
.n-img img{display:block;width:100%;height:auto;border-radius:3px}
.n-img::after{content:'';position:absolute;top:6px;left:6px;width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px rgba(0,0,0,.4)}
.n-ongo{z-index:5;width:calc(220px * var(--s,1));padding:0;overflow:hidden;border-radius:12px;border:1.5px solid color-mix(in srgb,var(--fg) 80%,transparent);background:var(--bg-2);color:var(--fg);white-space:normal;box-shadow:0 0 0 5px color-mix(in srgb,var(--c,var(--fg)) 14%,transparent),0 18px 40px -16px rgba(0,0,0,.9)}
.n-ongo .oi img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.n-ongo .ot{display:block;padding:9px 12px 11px}
.n-ongo em{display:flex;align-items:center;gap:7px;font:10px var(--display);font-size:max(9px,calc(10px * var(--s,1)));font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin-bottom:4px}
.n-ongo em i{width:7px;height:7px;border-radius:50%;background:var(--c,var(--fg));box-shadow:0 0 0 0 var(--c,var(--fg));animation:beat 2.4s ease-out infinite}
.n-ongo b{display:block;font-weight:400;font-size:max(12px,calc(15px * var(--s,1)));line-height:1.25}
.n-ongo:hover{border-color:var(--fg)}
.n-ongo.sm{width:calc(172px * var(--s,1))}
.n-ongo.sm b{font-size:max(11.5px,calc(13.5px * var(--s,1)))}
.n-ongo.sm .ot{padding:8px 10px 9px}
@keyframes beat{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c,var(--fg)) 60%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
@media (prefers-reduced-motion:reduce){.n-ongo em i{animation:none}}
/* one thing in focus: its roots light up, the rest recedes */
.rz.focus .n{opacity:.18}
.rz.focus .n.on{opacity:1}
.rz.focus .th{opacity:.05}
.rz.focus .th.on{opacity:.95;stroke-width:1.8}
.rz.focus .n.on:not(.hov):not(.n-int){transform:translate(-50%,-50%) scale(1.12);z-index:8}
.rz.focus .n.hov:not(.n-int){transform:translate(-50%,-50%) scale(1.45);z-index:9}

/* practice: quieter dotted threads through the same map, one per way of working, work by work in time order */
.th.p{stroke:var(--prac);stroke-width:2;stroke-dasharray:0 6;stroke-linecap:round;opacity:.34}   /* practice: a string of beads from the hub to each work */
.n-meth{font:13px var(--display);letter-spacing:.02em;line-height:1;color:#141414;background:var(--fg);padding:7px 11px 8px;border-radius:5px;white-space:nowrap;z-index:3;box-shadow:0 8px 20px -10px rgba(0,0,0,.9)}   /* practice: a solid card, unlike the coloured theme words */
.n-meth:hover,.rz.focus .n-meth.on{background:var(--prac)}
.th.p{stroke:var(--prac);stroke-width:2;stroke-dasharray:0 6;stroke-linecap:round;stroke-linejoin:round;opacity:.36}   /* practice threads: a string of beads */
.th.p.sub{stroke-width:1.5;stroke-dasharray:0 5}

/* pop-up notes */
dialog.pop{width:min(720px,calc(100vw - 32px));max-height:min(86vh,900px);padding:0;border:0;border-radius:14px;background:var(--bg-2);color:var(--text);box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
dialog.pop::backdrop{background:rgba(5,5,6,.66);backdrop-filter:blur(3px)}
.pop-in{padding:clamp(22px,3vw,36px);overflow:auto;max-height:inherit;box-sizing:border-box;border-top:4px solid var(--c,var(--fg));border-radius:14px}
.pop .x{position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:50%;font-size:20px;color:var(--mut)}
.pop .x:hover{color:var(--fg);background:rgba(255,255,255,.06)}
.pop .k{font:11px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--c,var(--mut));margin:0 0 10px}
.pop h2{font-family:var(--display);font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:-.04em;color:var(--fg);margin:0 0 16px;line-height:1.1}
.pop .line{font-size:1.15rem;font-style:italic;color:var(--fg);line-height:1.45;margin:0 0 18px}
.pop .line cite{display:block;font-style:normal;font-size:12.5px;color:var(--mut);margin-top:6px}
.pop p{font-size:15.5px;line-height:1.65;margin:0 0 1em}
.pop .refs{font-size:13px;color:var(--mut)}
.pop .how{font-size:14px;color:var(--text);border-left:1px solid var(--prac);padding-left:12px}
.pop .how span{display:block;font:10.5px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:3px}
.pop .tr{margin:14px 0 0}
.pop .tr span{display:block;font:10.5px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:5px}
.pop .tr ul{list-style:none;margin:0;padding:0;font-size:13.5px;line-height:1.45;color:var(--text)}
.pop .tr li{display:flex;gap:10px;padding:2px 0}
.pop .tr li small{flex:none;width:4.5ch;font:11px var(--display);color:var(--mut);padding-top:3px}
.pop .tr li.more{color:var(--mut);font-style:italic}
.pop .kws{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.pop .kws span{font-size:12.5px;padding:2px 10px;border-radius:99px;border:1px solid color-mix(in srgb,var(--c) 60%,transparent);color:var(--fg)}
.pop blockquote{margin:18px 0;padding:2px 0 2px 16px;border-left:2px solid var(--c);font-size:1.02rem;color:var(--fg)}
.pop blockquote .tr{display:block;font-size:.92rem;color:var(--text);margin-top:4px}
.pop blockquote cite{display:block;font-style:normal;font-size:12.5px;color:var(--mut);margin-top:6px}
.pop .chips{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px}
.pop .chips button{font-size:12.5px;padding:2px 10px;border-radius:99px;border:1px solid color-mix(in srgb,var(--cc,var(--prac)) 65%,transparent);color:var(--text)}
.pop .chips button.m{border-style:dashed}
.pop .chips button:hover{color:var(--fg);border-color:var(--fg)}
.pop .list{display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--rule)}
.pop .list button{font-size:14.5px;color:var(--fg);border-bottom:1px solid var(--rule-2)}
.pop .list button small{font:11px var(--display);color:var(--mut);margin-right:6px}
.pop .gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:18px 0 0}
.pop .gal figure{margin:0}
.pop .gal img{width:100%;border-radius:3px;cursor:zoom-in}
.pop .gal figcaption{font-size:12.5px;line-height:1.45;color:var(--mut);margin-top:6px}
.pop .big{margin:0 0 14px}
.pop .big img{width:100%;border-radius:4px}
.pop .open{display:inline-block;margin-top:16px;font-size:15px;color:var(--fg);border-bottom:1px solid var(--rule-2)}
@media (max-width:700px){.n-int .kw{font-size:11.5px;max-width:200px}.n-work{font-size:12.5px;padding:2px 6px}.n-work.cr{font-size:11.5px;padding:4px 9px}.n-work.cr .lb{max-width:140px}.n-ongo{width:150px}.n-ongo b{font-size:13px}.n-ongo.sm{width:124px}.n-ongo.sm b{font-size:12px}}