/* Social dock: square icon buttons that grow as the pointer comes near, like the macOS dock (js/components/dock.js). Lives in the footer, under the logo.
   Sized by --dock-a (button), --dock-ic (icon), --dock-gap and --dock-pad; the footer sets them so the dock is as wide as the logo. */
.dock{--dock-a:54px;--dock-ic:26px;--dock-gap:12px;--dock-pad:11px;list-style:none;margin:36px 0 0;padding:calc(var(--dock-pad) - 1px) var(--dock-pad);display:flex;align-items:flex-end;gap:var(--dock-gap);height:calc(var(--dock-a) + var(--dock-pad) * 2);background:var(--mist);border:1px solid var(--line);border-radius:var(--r-22);box-shadow:var(--shadow-dock)}
.dock li{position:relative;display:flex;align-items:flex-end}
.dock a{--s:1;width:calc(var(--dock-a) * var(--s));height:calc(var(--dock-a) * var(--s));border-radius:calc(var(--dock-a) * .28 * var(--s));display:grid;place-items:center;background:var(--paper);color:var(--char);border:1px solid var(--line);
  transition:width 180ms var(--ease-out),height 180ms var(--ease-out),transform 160ms var(--ease-out),background-color 200ms ease,color 200ms ease}
.dock a svg{width:calc(var(--dock-ic) * var(--s));height:calc(var(--dock-ic) * var(--s))}
.dock a:active{transform:scale(.94)}
.dock .tip{position:absolute;bottom:calc(100% + 10px);inset-inline-start:50%;translate:50% 0;background:var(--head);color:var(--paper);font-size:var(--fs-13);padding:5px 10px;border-radius:var(--r-8);white-space:nowrap;opacity:0;transform:translateY(4px);
  transition:opacity 160ms ease,transform 160ms var(--ease-out);pointer-events:none}
@media (hover:hover) and (pointer:fine){.dock a:hover{background:var(--red);color:var(--white);border-color:var(--red)}.dock li:hover .tip{opacity:1;transform:none}}
.dock a:focus-visible+.tip{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.dock a{transition:background-color 200ms ease,color 200ms ease}}