/* concept: één horizontale lijn per original, avonden lopen van links naar rechts,
   een draad loopt van elke gast terug naar wie hem of haar uitnodigde */
:root{
  --bg:#F0F1F3; --fg:#15171C; --muted:#5A5F6B; --surface:#FFFFFF; --rule:#D3D6DC;
  --col-ink:#2B2F36; --col-pink:#D6336C; --col-orange:#E8590C; --col-gold:#C29200;
  --col-green:#2F9E44; --col-blue:#1C7ED6; --col-violet:#7048E8; --col-teal:#0C8599;
  --col-red:#E03131; --col-brown:#8D5A2B;
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#101216; --fg:#ECEEF2; --muted:#9AA0AC; --surface:#181B21; --rule:#2A2E37;
    --col-ink:#D5D9E0; --col-pink:#FF6B9A; --col-orange:#FF922B; --col-gold:#FCC419;
    --col-green:#51CF66; --col-blue:#4DABF7; --col-violet:#A78BFA; --col-teal:#3BC9DB;
    --col-red:#FF8787; --col-brown:#D4A373;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#101216; --fg:#ECEEF2; --muted:#9AA0AC; --surface:#181B21; --rule:#2A2E37;
  --col-ink:#D5D9E0; --col-pink:#FF6B9A; --col-orange:#FF922B; --col-gold:#FCC419;
  --col-green:#51CF66; --col-blue:#4DABF7; --col-violet:#A78BFA; --col-teal:#3BC9DB;
  --col-red:#FF8787; --col-brown:#D4A373;
  color-scheme:dark;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:15px/1.5 var(--f-body);
  padding-inline:clamp(16px,4vw,56px);
  padding-block:40px 64px;
}
.head{max-width:60rem;display:flex;flex-direction:column;gap:14px;margin-bottom:28px}
.meta{margin:0;font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
h1{
  margin:0;font-family:var(--f-display);font-weight:800;font-stretch:112%;
  font-size:clamp(2.2rem,7vw,4.4rem);line-height:.95;letter-spacing:-.02em;text-wrap:balance;
}
.lede{margin:0;max-width:40rem;color:var(--muted);font-size:1.05rem;text-wrap:pretty}


.scroller{
  overflow-x:auto;border-block:1px solid var(--rule);
  background:radial-gradient(var(--rule) 1px,transparent 1.2px) 0 0/22px 22px;
}
.scroller:focus-visible,.node:focus-visible .disc{outline:3px solid var(--fg);outline-offset:3px}
.canvas{position:relative}
.canvas svg{position:absolute;left:0;top:0;overflow:visible}
.rowlab{
  position:absolute;left:0;text-align:right;
  font:500 11px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.rowlab b{display:block;color:var(--fg);font-weight:500}
.node{
  position:absolute;width:130px;display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;text-decoration:none;color:inherit;z-index:1;transition:opacity .2s;
  background:none;border:0;padding:0;font:inherit;
}
button.node{cursor:pointer}
a.node:hover .disc,button.node:hover .disc{transform:translateY(-3px) scale(1.04)}
.disc{
  width:76px;height:76px;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
  background:color-mix(in srgb,var(--c) 14%,var(--surface));
  border:3px solid var(--c);
  box-shadow:0 0 0 5px var(--bg);
  transition:transform .2s;
}
.disc img{width:100%;height:100%;object-fit:cover;display:block}
.initial{font:800 28px/1 var(--f-display);font-stretch:112%;color:var(--fg)}
.cap{display:flex;flex-direction:column;gap:2px;max-width:122px}
.who{font-weight:700;font-size:15px;line-height:1.2}
.what{
  font-size:12.5px;line-height:1.3;color:var(--fg);text-wrap:balance;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
}
.what.todo{color:var(--muted);font-style:italic}
.via{font:400 11px/1.3 var(--f-mono);color:var(--muted)}
.ghost .disc{
  border-style:dashed;background:var(--bg);box-shadow:0 0 0 5px var(--bg);
  border-color:color-mix(in srgb,var(--c) 65%,var(--bg));
}
.ghost .initial{color:var(--muted)}
.ghost .who,.ghost .via{color:var(--muted)}
.sel .disc{box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--fg)}
.dim{opacity:.16}
.foot{margin-top:20px;font:400 12px/1.4 var(--f-mono);color:var(--muted)}
@media (prefers-reduced-motion:reduce){
  .node,.disc{transition:none}
  a.node:hover .disc,button.node:hover .disc{transform:none}
}

.wildrow{margin-top:36px}
.wildrow h3{margin:0 0 4px;font:800 clamp(1.2rem,3vw,1.6rem)/1.1 var(--f-display);font-stretch:108%}
.wildnote{margin:0 0 12px;color:var(--muted);font-size:14px}
.wildrail{position:absolute;right:0;border-top:2px dashed var(--col-red);opacity:.45}