/* Link Widget: a small picture that floats above the page in a bottom corner and links somewhere.
   First use: the Soulful Playground globe on the Featured Contributor page (links to soulfulplayground.com).
   Kim calls these "Link Widgets" (10-17). Meant to be reused in other forms, for example a character wearing Hometeam merchandise pointing to the Shop.
   Markup:  <a class="link-widget" href="..." aria-label="..."><img src="..." alt=""><span class="link-widget-tip" aria-hidden="true">Label</span></a>
   Options (set as CSS variables on the link):  --lw-size  --lw-bottom  --lw-right  --lw-size-sm (phones)\n   For a picture that is not square set --lw-w and --lw-h (and --lw-w-sm / --lw-h-sm for phones) instead of --lw-size.
   Modifier: add class link-widget--left to sit on the left edge instead. Add target="_blank" rel="noopener" for links that leave the site. */
.link-widget{
  --lw-size:72px; --lw-size-sm:56px; --lw-bottom:max(36px,6vh); --lw-right:max(14px,env(safe-area-inset-right));
  position:fixed; z-index:90; right:var(--lw-right); bottom:var(--lw-bottom);
  width:var(--lw-w,var(--lw-size)); height:var(--lw-h,var(--lw-size)); display:block;
  filter:drop-shadow(0 6px 10px rgba(3,3,3,.35));
  transition:transform .25s ease, filter .25s ease;
}
.link-widget--left{right:auto; left:max(14px,env(safe-area-inset-left));}
.link-widget img{display:block;width:100%;height:100%;object-fit:contain;}
.link-widget:hover,.link-widget:focus-visible{transform:scale(1.12) rotate(-6deg);filter:drop-shadow(0 8px 14px rgba(3,3,3,.45));}
.link-widget:focus-visible{outline:3px solid var(--ink,#030303);outline-offset:4px;border-radius:50%;}
.link-widget-tip{
  position:absolute; right:calc(100% + 10px); top:50%; transform:translateY(-50%);
  white-space:nowrap; background:var(--ink,#030303); color:var(--cream,#FDF9EE);
  font-family:var(--mono,'Space Mono'),monospace; font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 11px; border-radius:4px; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.link-widget--left .link-widget-tip{right:auto; left:calc(100% + 10px);}
.link-widget:hover .link-widget-tip,.link-widget:focus-visible .link-widget-tip{opacity:1;}
@media (max-width:640px){ .link-widget{--lw-bottom:28px; --lw-right:10px; width:var(--lw-w-sm,var(--lw-size-sm)); height:var(--lw-h-sm,var(--lw-size-sm));} }
@media (prefers-reduced-motion:reduce){ .link-widget,.link-widget-tip{transition:none;} .link-widget:hover,.link-widget:focus-visible{transform:none;} }