/* The balloon: a page's own abstract, shown wherever it is pointed at; pinned on click. Shared by maps and reading pages. */
.balloon{position:fixed;z-index:20;width:300px;max-width:calc(100vw - 16px);box-sizing:border-box;background:var(--paper,#fbfaf6);border:1px solid var(--scarlet,#a8211b);border-radius:2px;box-shadow:0 8px 28px rgba(43,43,43,.12);padding:12px 14px 10px;font-family:var(--display,Georgia,serif);color:var(--ink,#2b2b2b);opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s;pointer-events:auto;--ax:50%}
.balloon.on{opacity:1;transform:none}
.balloon::before{content:"";position:absolute;left:var(--ax);top:-6px;width:10px;height:10px;background:var(--paper,#fbfaf6);border-left:1px solid var(--scarlet,#a8211b);border-top:1px solid var(--scarlet,#a8211b);transform:translateX(-50%) rotate(45deg)}
.balloon.above::before{top:auto;bottom:-6px;transform:translateX(-50%) rotate(225deg)}
.balloon p{margin:0}
.balloon .be{font-family:var(--body,sans-serif);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--scarlet,#a8211b);margin-bottom:5px}
.balloon .bt{font-family:var(--body,sans-serif);font-weight:500;font-size:15px;line-height:1.3;margin-bottom:4px}
.balloon .ba{font-size:13.5px;line-height:1.5;color:var(--ink,#2b2b2b)}
.balloon .bf{font-family:var(--body,sans-serif);font-size:11px;letter-spacing:.06em;color:var(--ink-soft,#6e6e6a);margin-top:8px;padding-top:6px;border-top:1px solid var(--rule,#e2dfd6)}
.balloon .bf a{display:inline-block;background:var(--leaf,#9bc939);color:var(--ink,#2b2b2b);text-decoration:none;border:0;border-radius:999px;padding:5px 12px;font-weight:500;letter-spacing:.04em;margin:2px 6px 0 0;transition:filter .15s}
.balloon .bf a:hover{filter:brightness(.93)}
.balloon .bf a:focus-visible{outline:2px solid var(--ink,#2b2b2b);outline-offset:2px}
.balloon .bi{display:block;width:100%;height:auto;max-height:150px;object-fit:cover;border-radius:2px;margin:2px 0 8px}
.balloon .bv{position:relative;width:100%;aspect-ratio:16/9;margin:2px 0 8px;background:#000;border-radius:2px;overflow:hidden}
.balloon .bv iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.balloon.pinned{box-shadow:0 10px 36px rgba(43,43,43,.18);padding-right:30px}
.balloon.pinned:has(.bv){width:360px}
.balloon .bx{position:absolute;right:6px;top:6px;width:20px;height:20px;border:1px solid var(--rule,#e2dfd6);border-radius:50%;background:var(--paper,#fbfaf6);color:var(--ink-soft,#6e6e6a);font:14px/1 var(--body,sans-serif);cursor:pointer;padding:0}
.balloon .bx:hover{border-color:var(--scarlet,#a8211b);color:var(--scarlet,#a8211b)}
.balloon .bl{display:flex;justify-content:center;padding:10px 0 4px}
.balloon .bl img{width:48px;height:48px;border-radius:50%;animation:grain-turn 1.6s linear infinite}
.balloon .bl .spin{width:22px;height:22px;border:2px solid var(--rule,#e2dfd6);border-top-color:var(--scarlet,#a8211b);border-radius:50%;animation:grain-turn .9s linear infinite}
@keyframes grain-turn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.balloon{transition:none}.balloon .bl img,.balloon .bl .spin{animation:none}}
.band .mark svg .face{fill:none}

/* the dock: trees as a vertical strip beside the band, 50% grey, red icons, the current one pressed white */
.dock{position:absolute;left:10px;top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:14px;background:rgba(128,128,128,.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.dock .h{display:block;width:34px;height:34px;border-radius:9px;background:var(--scarlet,#a8211b);position:relative;transition:transform .15s,background .15s}
.dock .h svg,.dock .h img{display:block;width:34px;height:34px;border-radius:9px}
.dock .h svg text{fill:#fff} .dock .h svg use{fill:#fff}
.dock .h.tool{background:#6e6e6a;margin-bottom:4px}
.dock .h.tool svg{padding:7px;box-sizing:border-box}
.dock .h.tool:hover{background:var(--ink,#2b2b2b)}
.dock .h:hover{background:#fff}
.dock .h:hover svg text,.dock .h:hover svg use{fill:var(--scarlet,#a8211b)} .dock .h.tool:hover svg path{fill:#fff}
/* the tree we are on: an ear of the page — paper white, square on the right and reaching past the dock into the page, rounded on the left */
.dock .h.current{background:var(--paper,#fbfaf6);border-radius:9px 0 0 9px;width:48px;margin-right:-14px;box-shadow:-1px 1px 3px rgba(0,0,0,.08)}
.dock .h.current svg,.dock .h.current img{border-radius:9px 0 0 9px}
.dock .h.current svg text{fill:var(--scarlet,#a8211b)} .dock .h.current svg use{fill:var(--scarlet,#a8211b)}
.dock .h.current span{left:58px}
.dock .h span{position:absolute;left:44px;top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--body,sans-serif);font-size:12px;color:var(--ink,#2b2b2b);background:rgba(251,250,246,.97);border:1px solid var(--rule,#e2dfd6);padding:3px 8px;border-radius:3px;opacity:0;pointer-events:none;transition:opacity .15s}
.dock .h:hover span,.dock .h:focus-visible span{opacity:1}
.dock .h:focus{outline:none} .dock .h:focus-visible{outline:2px solid #fff;outline-offset:1px}
body.grain-page .dock{position:fixed;left:calc(var(--band,76px) + 10px);top:50%}
.map:has(.dock) .crumb{left:70px}
@media (max-width:900px){
  .dock,body.grain-page .dock{position:static;transform:none;flex-direction:row;flex-wrap:wrap;margin:12px 0 0;width:max-content}
  .dock .h.current{width:34px;margin-right:0;border-radius:9px 9px 0 0;margin-bottom:-6px;height:40px}
  .dock .h span{display:none}
  .map:has(.dock) .crumb{left:auto}
}